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,11 @@
+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>Content</Select.Content>
+    </Select.Root>
+  );
+});

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

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

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,3 @@
+export { SelectContent as Content } from "./select-content";
+export { SelectRoot as Root } from "./select-root";
+export { SelectTrigger as Trigger } from "./select-trigger";

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

@@ -0,0 +1,12 @@
+import { component$, PropsOf, Slot } from "@qwik.dev/core";
+import { PopoverContent } from "../popover/popover-content";
+
+type SelectContentProps = PropsOf<typeof PopoverContent>;
+
+export const SelectContent = component$((props: SelectContentProps) => {
+  return (
+    <PopoverContent {...props} role="listbox">
+      <Slot />
+    </PopoverContent>
+  );
+});

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

@@ -0,0 +1,36 @@
+import { useBindings } from "@qds.dev/utils";
+import {
+  component$,
+  createContextId,
+  PropsOf,
+  Signal,
+  Slot,
+  useContextProvider
+} from "@qwik.dev/core";
+import { PopoverRoot } from "../popover/popover-root";
+
+type SelectRootProps = PropsOf<typeof PopoverRoot>;
+
+type SelectContext = {
+  isOpen: Signal<boolean>;
+};
+
+export const selectContextId = createContextId<SelectContext>("qds-select");
+
+export const SelectRoot = component$((props: SelectRootProps) => {
+  const { openSig: isOpen } = useBindings(props, {
+    open: false
+  });
+
+  const context: SelectContext = {
+    isOpen
+  };
+
+  useContextProvider(selectContextId, context);
+
+  return (
+    <PopoverRoot {...props} bind:open={isOpen}>
+      <Slot />
+    </PopoverRoot>
+  );
+});

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

@@ -0,0 +1,12 @@
+import { component$, PropsOf, Slot } from "@qwik.dev/core";
+import { PopoverTrigger } from "../popover/popover-trigger";
+
+type SelectTriggerProps = PropsOf<typeof PopoverTrigger>;
+
+export const SelectTrigger = component$((props: SelectTriggerProps) => {
+  return (
+    <PopoverTrigger {...props} aria-haspopup="listbox">
+      <Slot />
+    </PopoverTrigger>
+  );
+});