v2: select rewrite

docs/src/docs-widgets/header/header.tsx

@@ -159,7 +159,7 @@ const DesktopNav = component$(() => {
                   class="absolute top-15 h-10 w-full z-99999 cursor-pointer"
                 />
                 <Navbar.ItemTrigger
-                  class="w-fit flex items-center gap-2 group [&[ui-open]]:text-blue-600 transition-colors duration-200 px-5 h-[76px]"
+                  class="w-fit flex items-center gap-2 group ui-open:text-blue-600 transition-colors duration-200 px-5 h-[76px]"
                   ui-mega-collapsible
                 >
                   <span>{item.label}</span>

docs/src/routes/components/select/examples/basic.tsx

@@ -0,0 +1,22 @@
+import { Select } from "@qds.dev/ui";
+import { component$ } from "@qwik.dev/core";
+
+export default component$(() => {
+  return (
+    <Select.Root>
+      <Select.Trigger>Trigger</Select.Trigger>
+      <Select.Content>
+        <Select.Item value="1">Item 1</Select.Item>
+        <Select.Item value="2">Item 2</Select.Item>
+        <Select.Item value="3">Item 3</Select.Item>
+        <Select.Item value="4">Item 4</Select.Item>
+        <Select.Item value="5">Item 5</Select.Item>
+        <Select.Item value="6">Item 6</Select.Item>
+        <Select.Item value="7">Item 7</Select.Item>
+        <Select.Item value="8">Item 8</Select.Item>
+        <Select.Item value="9">Item 9</Select.Item>
+        <Select.Item value="10">Item 10</Select.Item>
+      </Select.Content>
+    </Select.Root>
+  );
+});

docs/src/routes/components/select/index.mdx

@@ -0,0 +1,5 @@
+import Basic from "./examples/basic";
+
+# Select
+
+<Basic />

docs/src/routes/contributing/research/index.mdx

@@ -28,10 +28,18 @@ Take a look at the following projects and see if you can find any inspiration. T
 - [Material Angular CDK](https://material.angular.io/cdk/categories)
 - [Fritz2](https://www.fritz2.dev/headless/)
 - [Bits UI](https://bits-ui.com/)
+- [Qwik UI](https://qwikui.com/)
+
+Specific component libraries:
+- [Formisch](https://formisch.dev/qwik/guides/introduction/)
+- [Downshift](https://www.downshift-js.com/)
+- [React Resizable Panels](https://react-resizable-panels.vercel.app/)
+- [React Select](https://react-select.com/)
 
 #### Not headless but interesting
 
 - [Shadcn UI](https://ui.shadcn.com/)
+- [Shoelace](https://shoelace.style/)
 - [Flux UI](https://fluxui.dev/)
 - [Angular Material](https://material.angular.io/components/categories)
 

libs/components/src/carousel/carousel-item.tsx

@@ -1,3 +1,4 @@
+import { registerItem } from "@qds.dev/utils";
 import {
   $,
   component$,
@@ -50,20 +51,13 @@ export const CarouselItem = component$((props: CarouselItemProps) => {
   });
 
   useTask$(function getIndexOrder() {
-    if (index === undefined) {
-      throw new Error("QDS: Carousel Item cannot find its proper index.");
-    }
-
-    context.itemRefsArray.value[index] = itemRef;
-
-    const newValuesArray = [...context.itemValuesArray.value];
-    if (newValuesArray.length <= index) {
-      while (newValuesArray.length <= index) {
-        newValuesArray.push(String(newValuesArray.length));
-      }
-    }
-    newValuesArray[index] = itemValue;
-    context.itemValuesArray.value = newValuesArray;
+    registerItem({
+      index,
+      itemRef,
+      itemValue,
+      itemRefsArray: context.itemRefsArray,
+      itemValuesArray: context.itemValuesArray
+    });
   });
 
   const handleFocusIn$ = $(() => {

libs/components/src/carousel/carousel-nav-trigger.tsx

@@ -10,9 +10,9 @@ import {
   useSignal,
   useTask$
 } from "@qwik.dev/core";
+import { getValueFromIndex } from "@qds.dev/utils";
 import { Render } from "../render/render";
 import { carouselContextId } from "./carousel-root";
-import { getValueFromIndex } from "./carousel-utils";
 
 type NavTriggerProps = PropsOf<"button">;
 

libs/components/src/carousel/carousel-root.tsx

@@ -1,4 +1,9 @@
-import { BindableProps, useBindings } from "@qds.dev/utils";
+import {
+  BindableProps,
+  getIndexFromValue,
+  getValueFromIndex,
+  useBindings
+} from "@qds.dev/utils";
 import {
   component$,
   createContextId,
@@ -13,7 +18,6 @@ import {
   useTask$
 } from "@qwik.dev/core";
 import { Render } from "../render/render";
-import { getIndexFromValue, getValueFromIndex } from "./carousel-utils";
 import { useAutoplay } from "./hooks/use-autoplay";
 
 export const carouselContextId = createContextId<CarouselContext>("qui-carousel-context");

libs/components/src/carousel/carousel-scroll-area.tsx

@@ -1,4 +1,4 @@
-import { useResumed$ } from "@qds.dev/utils";
+import { getValueFromIndex, useResumed$ } from "@qds.dev/utils";
 import {
   $,
   component$,
@@ -17,7 +17,6 @@ import styles from "./carousel.css?inline";
 import { carouselContextId } from "./carousel-root";
 import {
   getItemPosition,
-  getValueFromIndex,
   getVelocityBasedTargetIndex,
   isSwipeInCorrectDirection,
   type OrientationProps,

libs/components/src/carousel/carousel-utils.ts

@@ -1,24 +1,3 @@
-export function getIndexFromValue(value: string, itemValuesArray: string[]): number {
-  const index = itemValuesArray.indexOf(value);
-  if (index !== -1) return index;
-
-  if (itemValuesArray.length === 0) {
-    const numIndex = parseInt(value, 10);
-    if (!isNaN(numIndex) && numIndex >= 0) {
-      return numIndex;
-    }
-  }
-
-  return 0;
-}
-
-export function getValueFromIndex(index: number, itemValuesArray: string[]): string {
-  if (index < 0 || index >= itemValuesArray.length) {
-    return String(index);
-  }
-  return itemValuesArray[index] ?? String(index);
-}
-
 export type OrientationProps = {
   size: "width" | "height";
   scroll: "scrollWidth" | "scrollHeight";

libs/components/src/index.ts

@@ -20,6 +20,7 @@ export * as RadioGroup from "./radio-group";
 export { Render } from "./render/render";
 export * as Resizable from "./resizable";
 export * as ScrollArea from "./scroll-area";
+export * as Select from "./select";
 export * as Slider from "./slider";
 export * as Switch from "./switch";
 export * as Tabs from "./tabs";

libs/components/src/popover/anchor-logic.css

@@ -6,13 +6,11 @@
 
   [ui-qds-popover-trigger] {
     anchor-name: --qds-popover;
-    width: 10em;
   }
 
   [ui-qds-popover-content] {
     /* biome-ignore lint/correctness/noUnknownProperty: <explanation> */
     position-anchor: --qds-popover;
-    width: anchor-size(width);
     margin: unset;
     top: anchor(bottom);
     left: anchor(inside);

libs/components/src/popover/popover-content.tsx

@@ -1,13 +1,12 @@
-import { $, type PropsOf, Slot, component$, useContext } from "@qwik.dev/core";
-import type { CorrectedToggleEvent } from "@qwik.dev/core/internal";
+import { $, component$, type PropsOf, Slot, useContext } from "@qwik.dev/core";
 import { Render } from "../render/render";
 import { popoverContextId } from "./popover-root";
 
 export const PopoverContent = component$((props: PropsOf<"div">) => {
   const context = useContext(popoverContextId);
-  const panelId = `${context.localId}-panel`;
+  const contentId = `${context.localId}-content`;
 
-  const handleToggle$ = $((e: CorrectedToggleEvent) => {
+  const handleToggle$ = $((e: ToggleEvent) => {
     // prevent InvalidStateError: browser already toggled, skip useTask$ re-execution
     context.canExternallyChange.value = false;
     context.isOpen.value = e.newState === "open";
@@ -20,14 +19,14 @@ export const PopoverContent = component$((props: PropsOf<"div">) => {
 
   return (
     <Render
+      {...props}
       hidden={context.isHidden.value}
       onToggle$={[handleToggle$, props.onToggle$]}
       popover="auto"
-      id={panelId}
+      id={contentId}
       internalRef={context.contentRef}
       fallback="div"
       ui-qds-popover-content
-      {...props}
     >
       <Slot />
     </Render>

libs/components/src/popover/popover-root.tsx

@@ -239,6 +239,7 @@ export const PopoverRoot = component$((props: PopoverRootProps) => {
       onPointerOut$={handlePointerOut$}
       onPointerOver$={handlePointerOver$}
       ui-open={isOpen.value}
+      ui-hover={hover}
       ui-closed={!isOpen.value}
       ui-qds-popover-root
       ui-qds-scope

libs/components/src/popover/popover-trigger.tsx

@@ -4,7 +4,7 @@ import { popoverContextId } from "./popover-root";
 
 export const PopoverTrigger = component$((props: PropsOf<"button">) => {
   const context = useContext(popoverContextId);
-  const panelId = `${context.localId}-panel`;
+  const contentId = `${context.localId}-content`;
 
   const handleClick = sync$((e: PointerEvent, el: HTMLElement) => {
     const isHover = el.getAttribute("ui-hover") === "true";
@@ -17,15 +17,14 @@ export const PopoverTrigger = component$((props: PropsOf<"button">) => {
 
   return (
     <Render
-      ui-hover={context.hover}
-      ui-open={context.isOpen.value}
-      ui-closed={!context.isOpen.value}
+      {...props}
+      aria-expanded={context.isOpen.value}
       internalRef={context.triggerRef}
-      popovertarget={panelId}
+      aria-controls={contentId}
+      popovertarget={contentId}
       onClick$={[handleClick, props.onClick$]}
       ui-qds-popover-trigger
       fallback="button"
-      {...props}
     >
       <Slot />
     </Render>

libs/components/src/popover/popover.browser.tsx

@@ -224,3 +224,43 @@ test("trigger and content are connected via id", async () => {
 
   expect(triggerTarget).toBe(contentId);
 });
+
+test("trigger aria-controls matches content id", async () => {
+  render(<Basic />);
+
+  await expect.element(Trigger).toBeVisible();
+  await userEvent.click(Trigger);
+  await expect.element(Content).toBeVisible();
+
+  const triggerElement = Trigger.element();
+  const contentElement = Content.element();
+  const contentId = contentElement?.getAttribute("id");
+  const ariaControls = triggerElement?.getAttribute("aria-controls");
+
+  expect(contentId).toBeTruthy();
+  expect(ariaControls).toBe(contentId);
+});
+
+test("trigger aria-expanded is false when closed", async () => {
+  render(<Basic />);
+
+  await expect.element(Trigger).toHaveAttribute("aria-expanded", "false");
+});
+
+test("trigger aria-expanded is true when open", async () => {
+  render(<Basic open />);
+
+  await expect.element(Trigger).toHaveAttribute("aria-expanded", "true");
+});
+
+test("trigger aria-expanded toggles with popover state", async () => {
+  render(<Basic />);
+
+  await expect.element(Trigger).toHaveAttribute("aria-expanded", "false");
+
+  await userEvent.click(Trigger);
+  await expect.element(Trigger).toHaveAttribute("aria-expanded", "true");
+
+  await userEvent.click(Trigger);
+  await expect.element(Trigger).toHaveAttribute("aria-expanded", "false");
+});

libs/components/src/select/index.ts

@@ -0,0 +1,4 @@
+export { SelectContent as Content } from "./select-content";
+export { SelectRoot as Root } from "./select-root";
+export { SelectTrigger as Trigger } from "./select-trigger";
+export { SelectItem as Item } from "./select-item";