@cl-light-ds/ui 0.4.0 → 0.6.0

package/src/components/command-search/CommandSearchItem.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * One result row in a `CommandSearch`: optional media (an icon or avatar), the
+ * label, and optional muted text on the right (`meta` slot, e.g. "in Acme
+ * Finance"). Highlighted while active (arrow keys or hover); Enter or a click
+ * chooses it.
+ *
+ * Searching matches `label` and `keywords` (case-insensitive, anywhere in the
+ * text), so give every item a `label`. `value` identifies it in
+ * `command-search:select`; it defaults to the label, so pass one when two items
+ * can share a name.
+ */
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import { commandSearchItemClasses, commandSearchLabelClasses, commandSearchMetaClasses } from "./classes";
+
+interface Props extends HTMLAttributes<"div"> {
+  /** The text searched and shown (the default slot can replace what is shown). */
+  label: string;
+  /** Unique value, sent with `command-search:select`. Defaults to `label`. */
+  value?: string;
+  /** More terms that find this item. */
+  keywords?: string[];
+  /** Navigate here when chosen. */
+  href?: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  label,
+  value = label,
+  keywords = [],
+  href,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasMedia = Astro.slots.has("media");
+const hasMeta = Astro.slots.has("meta");
+---
+
+<div
+  data-slot="command-item"
+  data-value={value}
+  data-label={label}
+  data-keywords={keywords.length ? keywords.join(",") : undefined}
+  data-href={href}
+  data-disabled={disabled ? "true" : undefined}
+  class={cn(commandSearchItemClasses, className)}
+  {...rest}
+>
+  {hasMedia && <slot name="media" />}
+  <span class={commandSearchLabelClasses}><slot>{label}</slot></span>
+  {
+    hasMeta && (
+      <span class={commandSearchMetaClasses}>
+        <slot name="meta" />
+      </span>
+    )
+  }
+</div>

package/src/components/command-search/classes.ts

@@ -0,0 +1,18 @@
+/**
+ * Class strings shared by the Astro parts and the results the script renders
+ * from `setCommandSearchResults()`, so both look the same.
+ */
+export const commandSearchGroupClasses = "flex flex-col gap-1";
+
+export const commandSearchHeadingClasses =
+  "text-muted-foreground flex items-baseline gap-2 px-2 pt-1 text-xs font-semibold tracking-wide uppercase";
+
+export const commandSearchCountClasses = "font-normal tabular-nums";
+
+export const commandSearchItemClasses =
+  "hover:bg-background-hover data-[selected=true]:bg-background-hover aria-disabled:pointer-events-none aria-disabled:opacity-50 flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors outline-none";
+
+export const commandSearchLabelClasses = "min-w-0 flex-1 truncate";
+
+export const commandSearchMetaClasses =
+  "text-muted-foreground flex max-w-56 min-w-0 shrink-0 items-center gap-1.5 truncate text-xs";

package/src/components/command-search/index.ts

@@ -0,0 +1,12 @@
+export { default as CommandSearch } from "./CommandSearch.astro";
+export { default as CommandSearchGroup } from "./CommandSearchGroup.astro";
+export { default as CommandSearchItem } from "./CommandSearchItem.astro";
+export {
+  openCommandSearch,
+  closeCommandSearch,
+  setCommandSearchResults,
+} from "../../lib/command-search";
+export type {
+  CommandSearchResultGroup,
+  CommandSearchResultItem,
+} from "../../lib/command-search";

package/src/components/command-search/nothing-matches.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="184" height="124" viewBox="-12 -12 184 124" fill="none" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTplODIyOThlNC1jNGQ2LTQwYTQtOGU3Ny1hYWY2OTcxYjM2OTIAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaKqugmJMsqYC8viyOBbRbhIAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDo0MWIxMTE5NC02ZTQ0LTRlMzUtOTU5MS0xYjY1M2ViNWUyNTJscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNouXZVAYt+XHRTFpV6GfvZOgAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggVgKr/4T9xsUXed1EvB+dGw4hkEVHK5LpA88frFSdO46kZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaNb7nH0x+zMDR8g/a81tYxUAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCB8IybuiUW/D1GR1OoeQ940FnLg0RBFnD1vqhoG+GGrd2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBimZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmU4MjI5OGU0LWM0ZDYtNDBhNC04ZTc3LWFhZjY5NzFiMzY5Mi9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjExNmJiZmVjLWQxNjEtNDM1YS1iNzkxLTM1YjRlNTM4MzljYXJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBWAqv/hP3GxRd53US8H50bDiGQRUcrkukDzx+sVJ07jqJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggWNJwmATXeq3w/IjLwhFkIQQ1fvC8gXIQ/CRzxbJAz4aiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFgg3x7o2h9I/3508c0ufWUiNo2ld5HoEd8e5vBDPLAJa0t0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQBQ6fFVaIySaTkZAvfiIN0Vu6miBN8tscscJnyxn5eEUXN2x49nEHZ+/F/hQydOi3j5/kryWAn8JzV93uuuUbDg=</c2pa:manifest></metadata>
+  <defs>
+    <filter id="sBack" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id="sFront" x="-40%" y="-30%" width="180%" height="170%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id="sLens" x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#3785E0" flood-opacity="0.28"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="80" cy="50" r="44" stroke="#F5F9FE" stroke-width="12"></circle>
+  <circle cx="80" cy="50" r="24" stroke="#EBF3FC" stroke-width="10"></circle>
+  <g transform="rotate(-12 44 52)">
+    <g filter="url(#sBack)"><rect x="22" y="26" width="44" height="52" rx="8" fill="#FFFFFF"></rect></g>
+    <rect x="22.5" y="26.5" width="43" height="51" rx="7.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+    <rect x="28" y="32" width="14" height="14" rx="4" fill="#D7E7F9"></rect>
+    <rect x="28" y="54" width="24" height="4" rx="2" fill="#E4E4E7"></rect>
+    <rect x="28" y="62" width="16" height="4" rx="2" fill="#F4F4F5"></rect>
+  </g>
+  <g transform="rotate(12 116 52)">
+    <g filter="url(#sBack)"><rect x="94" y="26" width="44" height="52" rx="8" fill="#FFFFFF"></rect></g>
+    <rect x="94.5" y="26.5" width="43" height="51" rx="7.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+    <rect x="100" y="34" width="28" height="4" rx="2" fill="#E4E4E7"></rect>
+    <rect x="100" y="42" width="32" height="4" rx="2" fill="#F4F4F5"></rect>
+    <rect x="100" y="50" width="22" height="4" rx="2" fill="#F4F4F5"></rect>
+    <rect x="100" y="58" width="28" height="4" rx="2" fill="#F4F4F5"></rect>
+  </g>
+  <g filter="url(#sFront)"><rect x="56" y="18" width="48" height="58" rx="9" fill="#FFFFFF"></rect></g>
+  <rect x="56.5" y="18.5" width="47" height="57" rx="8.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+  <rect x="62" y="24" width="36" height="22" rx="5" fill="#EBF3FC"></rect>
+  <path d="M77 30.5 L84.5 35 L77 39.5 Z" fill="#87B6EC" stroke="#87B6EC" stroke-width="1.5" stroke-linejoin="round"></path>
+  <rect x="62" y="53" width="28" height="4" rx="2" fill="#E4E4E7"></rect>
+  <rect x="62" y="61" width="18" height="4" rx="2" fill="#F4F4F5"></rect>
+  <g filter="url(#sLens)">
+    <line x1="113.5" y1="79.5" x2="122" y2="88" stroke="#1F5FAA" stroke-width="6" stroke-linecap="round"></line>
+    <circle cx="104" cy="70" r="13" fill="#FFFFFF" stroke="#3785E0" stroke-width="4"></circle>
+  </g>
+  <line x1="100" y1="66" x2="108" y2="74" stroke="#87B6EC" stroke-width="2.2" stroke-linecap="round"></line>
+  <line x1="108" y1="66" x2="100" y2="74" stroke="#87B6EC" stroke-width="2.2" stroke-linecap="round"></line>
+</svg>

package/src/components/dialog/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 All notable changes to the `Dialog` component family (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`) are documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C7, gap G17)
+
+### Popovers inside a dialog
+
+- The popover runtime moves open content to `<body>`, out of the dialog, so the dialog's focus trap pulled focus back and Tab walked out of the popover. Now (`lib/dialog-focus.ts`, installed by `Dialog`) Tab from a popover's trigger goes into it, Tab and Shift+Tab go round its controls, and Escape returns to the trigger. Tied to the dialog through the trigger's `aria-controls`. A workaround for a runtime bug (bejamas/data-slot).
+- Storybook: "Popover and combobox inside a dialog" preview.
+
+
+## Date 15th Oct 2026
+## Workspace selection handover (C8, gap G5)
+
+### Scroll lock
+
+- `lockScroll` no longer uses the `@data-slot/dialog` runtime's lock (`overflow: hidden` + `scrollbar-gutter: stable` on `<html>`), which left an undimmed white band where the scrollbar was. `lib/scroll-lock.ts` locks instead: the scrollbar stays and nothing moves; the wheel, touch and paging keys don't scroll the page; scrollable areas under the pointer (a long list in the dialog) still scroll; a dragged scrollbar is put back. `lockScroll={false}` still turns it off. A workaround for a runtime bug (bejamas/data-slot); remove it if the runtime fixes its lock.
+
+
+## Date 15th Oct 2026
+## Handover gaps: dialog widths (C24)
+
+### `DialogContent`
+
+- **`size` prop** (`"sm" | "md" | "lg" | "xl"`, default `"sm"`): the panel's width from the `sm` breakpoint. `sm` 448px (`sm:max-w-md`, today's default, unchanged), `md` 512px (`sm:max-w-lg`, the delete, duplicate and export confirmations, D111), `lg` 672px (`sm:max-w-2xl`, command search), `xl` 1024px (`sm:max-w-5xl`, New workspace, D89). Below `sm` the panel is still the viewport minus 2rem. Sets `data-size`. A `sm:max-w-*` class you pass still wins.
+
+### Storybook
+
+- "Sizes" preview with all four; the "Cancel with DialogClose asChild" preview uses `size="md"` instead of a class.
+
+
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **`DialogClose` renders `type="button"`** unless you pass a `type` (including the ✕ that `DialogContent` adds). It renders a `Button`, which has no type, so a dialog whose content is a `<form>` was submitted by its own close button.
+- `DialogTrigger` already rendered `type="button"`; no change.
+- **`asChild` (`DialogTrigger`, `DialogClose`):** the wrapper is a `<div>`, not a button, so it can't set a type. Inside a `<form>`, give your child `type="button"` (now in the props' JSDoc).
+
+
+## Workspace selection handover (C9, C16; gap G15)
+
+### `DialogClose`
+
+- **`asChild` (C9):** `<DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>` closes the dialog with your own button. The wrapper is `display: contents`. Without it, wrapping a Button nested a button in a button.
+- **✕ hover (C16):** `hover:bg-background-button-hover` (zinc-200). The ghost hover (zinc-100) didn't show on light grey surfaces.
+
+### Storybook
+
+- "Cancel with DialogClose asChild" preview.
+
+
 ## Earlier (commit `c3cec7d`, undocumented at the time)
 
 - `DialogContent`: `rounded-xl` → `rounded-lg` (Figma binds 8px radius).

package/src/components/dialog/Dialog.astro

@@ -189,8 +189,19 @@ const {
 
 <script>
   import { createDialog } from "@data-slot/dialog";
+  import { lockScrollWhileOpen } from "@cl-light-ds/ui/lib/scroll-lock";
+  import { trapTabInPopoversInDialogs } from "@cl-light-ds/ui/lib/dialog-focus";
 
-  document
-    .querySelectorAll<HTMLElement>('[data-slot="dialog"]')
-    .forEach((el) => createDialog(el));
+  document.querySelectorAll<HTMLElement>('[data-slot="dialog"]').forEach((el) => {
+    // The runtime's own lock reserves a scrollbar gutter the overlay doesn't
+    // cover; lib/scroll-lock keeps the scrollbar and blocks scrolling instead.
+    const dialog = createDialog(el, { lockScroll: false });
+    if (el.dataset.lockScroll !== "false") {
+      lockScrollWhileOpen(el, "dialog:change", () => dialog.isOpen);
+    }
+  });
+
+  // Tab stays inside a popover opened from a dialog (the runtime moves the
+  // popover to <body>, out of the dialog's focus trap).
+  trapTabInPopoversInDialogs();
 </script>

package/src/components/dialog/DialogClose.astro

@@ -5,19 +5,35 @@ import Button from "../button/Button.astro";
 
 interface Props extends HTMLAttributes<"button"> {
   class?: string;
+  /**
+   * Radix-like: render a wrapper so your own element closes the dialog, e.g. a
+   * Cancel `<Button>`. The wrapper is `display: contents`, so the child lays out
+   * as if it were placed directly. The wrapper is not a button: inside a
+   * `<form>`, give the child `type="button"` or it submits the form.
+   */
+  asChild?: boolean;
 }
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const { class: className = "", asChild = false, type = "button", ...rest } = Astro.props as Props;
 ---
 
-<Button
-  {...rest}
-  data-slot="dialog-close"
-  data-dialog-close
-  variant="ghost"
-  size="icon-sm"
-  class={cn("absolute top-2 right-2", className)}
->
-  <slot />
-  {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
-</Button>
+{
+  asChild ? (
+    <div data-slot="dialog-close" data-dialog-close data-as-child class={cn("contents", className)}>
+      <slot />
+    </div>
+  ) : (
+    <Button
+      {...rest}
+      type={type}
+      data-slot="dialog-close"
+      data-dialog-close
+      variant="ghost"
+      size="icon-sm"
+      class={cn("absolute top-2 right-2 hover:bg-background-button-hover", className)}
+    >
+      <slot />
+      {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
+    </Button>
+  )
+}

package/src/components/dialog/DialogContent.astro

@@ -5,12 +5,28 @@ import type { HTMLAttributes } from "astro/types";
 import DialogClose from "./DialogClose.astro";
 import DialogOverlay from "./DialogOverlay.astro";
 
+/**
+ * Widths from the `sm` breakpoint (below it the panel is the viewport minus
+ * 2rem): `sm` 448px (default), `md` 512px (delete, duplicate and export
+ * confirmations, D111), `lg` 672px (command search), `xl` 1024px (New
+ * workspace, D89).
+ */
+const sizes = {
+  sm: "sm:max-w-md",
+  md: "sm:max-w-lg",
+  lg: "sm:max-w-2xl",
+  xl: "sm:max-w-5xl",
+} as const;
+
 interface Props extends HTMLAttributes<"div"> {
   showCloseButton?: boolean;
+  /** Panel width: `sm` 448px (default), `md` 512px, `lg` 672px, `xl` 1024px. */
+  size?: keyof typeof sizes;
 }
 
 const {
   showCloseButton = true,
+  size = "sm",
   class: className = "",
   ...rest
 } = Astro.props as Props;
@@ -21,8 +37,10 @@ const {
   <div
     data-slot="dialog-content"
     hidden
+    data-size={size}
     class={cn(
-      "bg-card border-border data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 max-w-[calc(100%-2rem)] rounded-lg border shadow-lg duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+      "bg-card border-border data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 max-w-[calc(100%-2rem)] rounded-lg border shadow-lg duration-100 fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+      sizes[size] ?? sizes.sm,
       className,
     )}
     {...rest}

package/src/components/dialog/DialogTrigger.astro

@@ -4,7 +4,11 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"button"> {
   class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
+  /**
+   * Radix-like: render wrapper so the child can be the interactive element.
+   * The wrapper is not a button, so the child sets its own type: give a
+   * `<button>`/`<Button>` child `type="button"` inside a `<form>` or it submits it.
+   */
   asChild?: boolean;
 }
 

package/src/components/dropdown-menu/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to the `DropdownMenu` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C10, gap G16)
+
+### Several radio groups in one menu
+
+- `DropdownMenuRadioGroup` takes `name` (and `defaultValue`). A named group has its own value, so one menu can hold "Sort by" and "Order". The `@data-slot/dropdown-menu` runtime holds one radio value per menu, so a named group's items run on its checkbox values (`lib/dropdown-menu-radio-groups.ts`): exactly one stays checked, picking the checked one again doesn't untick it, and they're still announced as `menuitemradio`. The group mirrors its value in `data-value` and the root emits `dropdown-menu:group-value-change` (`{ name, value, previousValue }`). Item values must be unique within the menu. Unnamed groups behave as before. A workaround until the runtime supports radio groups (bejamas/data-slot).
+- Storybook: "Two radio groups in one menu" preview.
+
+
+## Date 15th Oct 2026
+## Workspace selection handover (C8, gap G5)
+
+### Scroll lock
+
+- `lockScroll` uses `lib/scroll-lock.ts` instead of the `@data-slot/dropdown-menu` runtime's lock, which added a scrollbar gutter and made short pages jump sideways when a menu opened. Nothing about the layout changes now. A workaround for a runtime bug (bejamas/data-slot).
+
+
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **`DropdownMenuTrigger` renders `type="button"`** unless you pass a `type`. It renders a `Button`, which has no type, so inside a `<form>` opening the menu submitted the form. Plain `Button` is unchanged; this also covers `TableColumnMenu`'s trigger.
+- **`asChild`:** the wrapper is a `<div>`, not a button, so it can't set a type. Inside a `<form>`, give your child `type="button"` (now in the prop's JSDoc).
+
+
+## Workspace selection handover (C17, gap G7)
+
+### States
+
+- `destructive` item hover is now `bg-callout-error` (`--callout-background-error`, Figma Red/50), was the neutral `background-hover`. The workspace-selection screen overrode it with `destructive/10`, which this replaces. Dark mode keeps `destructive/20`.
+
 ## Date 10th Sep 2026
 ## Figma alignment (node 2329-6521, prop table 7392-10142)
 

package/src/components/dropdown-menu/DropdownMenu.astro

@@ -220,7 +220,17 @@ const defaultValuesJson =
 
 <script>
   import { createDropdownMenu } from "@data-slot/dropdown-menu";
-  document
-    .querySelectorAll('[data-slot="dropdown-menu"]')
-    .forEach((el) => createDropdownMenu(el));
+  import { lockScrollWhileOpen } from "@cl-light-ds/ui/lib/scroll-lock";
+  import { bindRadioGroups, prepareRadioGroups } from "@cl-light-ds/ui/lib/dropdown-menu-radio-groups";
+
+  document.querySelectorAll<HTMLElement>('[data-slot="dropdown-menu"]').forEach((el) => {
+    prepareRadioGroups(el);
+    // The runtime's own lock adds a scrollbar gutter, so short pages jump
+    // sideways when a menu opens; lib/scroll-lock doesn't touch the layout.
+    const menu = createDropdownMenu(el, { lockScroll: false });
+    bindRadioGroups(el, menu);
+    if (el.dataset.lockScroll !== "false") {
+      lockScrollWhileOpen(el, "dropdown-menu:open-change", () => menu.isOpen);
+    }
+  });
 </script>

package/src/components/dropdown-menu/DropdownMenuRadioGroup.astro

@@ -3,11 +3,26 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"div"> {
   class?: string;
+  /**
+   * Gives the group its own value, so one menu can hold several radio groups
+   * (e.g. "Sort by" and "Order"). Without a name, the group's items share the
+   * menu's single radio value, as before. Item values must be unique in the menu.
+   */
+  name?: string;
+  /** The checked item of a named group. */
+  defaultValue?: string;
 }
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const { class: className = "", name, defaultValue, ...rest } = Astro.props as Props;
 ---
 
-<div {...rest} data-slot="dropdown-menu-radio-group" class={className}>
+<div
+  {...rest}
+  role="group"
+  data-slot="dropdown-menu-radio-group"
+  data-name={name}
+  data-default-value={name ? defaultValue : undefined}
+  class={className}
+>
   <slot />
 </div>

package/src/components/dropdown-menu/DropdownMenuTrigger.astro

@@ -6,7 +6,11 @@ import type { Props as ButtonProps } from "../button/Button.astro";
 
 type Props = ButtonProps & {
   class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
+  /**
+   * Radix-like: render wrapper so the child can be the interactive element.
+   * The wrapper is not a button, so the child sets its own type: give a
+   * `<button>`/`<Button>` child `type="button"` inside a `<form>` or it submits it.
+   */
   asChild?: boolean;
 };
 
@@ -16,6 +20,7 @@ const {
   class: className = "",
   asChild = false,
   variant = "outline",
+  type = "button",
   tailIcon = true,
   ...rest
 } = Astro.props as Props;
@@ -33,6 +38,7 @@ const {
       variant={variant}
       tailIcon={tailIcon}
       {...rest as any}
+      type={(rest as any).as === "a" ? undefined : type}
     >
       <slot />
       {tailIcon &&

package/src/components/dropdown-menu/dropdown-menu-item-variants.ts

@@ -11,7 +11,7 @@ export const itemVariants = cva(
       variant: {
         default: "p-2 text-xs font-semibold text-foreground hover:bg-background-hover hover:text-foreground",
         destructive:
-          "p-2 text-xs font-semibold text-destructive hover:bg-background-hover hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
+          "p-2 text-xs font-semibold text-destructive hover:bg-callout-error hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
         category: "pointer-events-none gap-1 pt-1 pr-1 pb-0 pl-1 text-xs font-medium text-muted-foreground",
       },
     },

package/src/components/empty-state/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to the `EmptyState` component will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N15)
+
+### Added
+
+- `EmptyState`: illustration (or icon), title, text and an optional action, centred.
+  - `size="page"`: 280×200 illustrations, 18px semibold title (`h2`), 14px text, 16px gaps, `py-12`.
+  - `size="menu"`: 144×104 / 184×124 illustrations, 14px medium title (`p`), 12px text, 8px gaps, `py-10`.
+  - `variant="panel"`: on a white (`bg-background`) dashed, rounded panel, for card grids (D188, D202). `plain` (default) has no frame, e.g. inside `TableEmpty` or a popover.
+  - `illustration`: built-in name; `icon`: a Lucide component in a 48px muted circle (the reference's "no favourites" state); `illustration` slot for custom artwork.
+  - `title` / `description` props or slots, `titleAs` to change the heading element, `action` slot for buttons. Other attributes pass through (e.g. `role="alert"` for a load error).
+- Illustrations (`illustrations/`), from the designer's handover SVGs: `empty`, `no-results`, `error` (280×200), `all-caught-up` (144×104), `nothing-matches` (184×124). Converted to inline Astro components so their colours are design tokens (`background`, `foreground`, `muted`, `border`, `primary`, `primary-50/100/300/700`, `destructive`) and follow the theme; the C2PA metadata is stripped and filter ids are unique per instance. Exceptions without a token: two neutral greys (`zinc-400`, `zinc-300`, via Tailwind's variables with hex fallbacks), the lightest ring (a mix of `primary-50` and `background`), and the drop shadows' `#051729` (the same colour as `shadow-card-light`).
+- `emptyStateIllustrations`, `EMPTY_STATE_ILLUSTRATIONS`, `EmptyStateIllustrationName` exported.
+- Storybook: "Empty State" under Feedback.

package/src/components/empty-state/EmptyState.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * @component EmptyState
+ * @title Empty State
+ * @description A message for when there is nothing to show, or something failed: an illustration, a title, a line of text and an optional action. Page and menu sizes, optionally on a white dashed panel.
+ *
+ * @preview
+ *
+ * <EmptyState
+ *   illustration="empty"
+ *   title="You're not in any workspaces yet"
+ *   description="Create one to get started, or ask a colleague to invite you to theirs."
+ *   variant="panel"
+ * >
+ *   <Button slot="action">New workspace</Button>
+ * </EmptyState>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { EmptyState } from '@cl-light-ds/ui/components/empty-state';
+ * import { Button } from '@cl-light-ds/ui/components/button';
+ * ---
+ *
+ * <EmptyState illustration="no-results" title="No results for “acme”" description="Check the spelling, or try a shorter name.">
+ *   <Button slot="action" variant="outline">Clear search</Button>
+ * </EmptyState>
+ *
+ * <EmptyState size="menu" illustration="all-caught-up" title="You're all caught up" description="New notifications show up here." />
+ * ```
+ *
+ * - Built-in illustrations (`illustration`): `empty`, `no-results`, `error`
+ *   (280×200, for pages), `all-caught-up` (144×104) and `nothing-matches`
+ *   (184×124, for menus). Drawn with design tokens, so they follow the theme.
+ * - Or an `icon` (a Lucide component) in a 48px muted circle, or your own
+ *   artwork in the `illustration` slot.
+ * - For a failure that appears after an action, add `role="alert"` so it is
+ *   announced; for results that change as you type, `role="status"`.
+ */
+
+import type { HTMLAttributes, HTMLTag } from "astro/types";
+import type { AstroComponent } from "@lucide/astro";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { emptyStateIllustrations, type EmptyStateIllustrationName } from "./illustrations";
+
+export const emptyStateVariants = cva("flex flex-col items-center text-center", {
+  variants: {
+    size: {
+      page: "gap-4 px-6 py-12",
+      menu: "gap-2 px-6 py-10",
+    },
+    variant: {
+      plain: "",
+      panel: "rounded-lg border border-dashed bg-background",
+    },
+  },
+  defaultVariants: {
+    size: "page",
+    variant: "plain",
+  },
+});
+
+interface Props extends VariantProps<typeof emptyStateVariants>, Omit<HTMLAttributes<"div">, "class" | "title"> {
+  /** A built-in illustration. */
+  illustration?: EmptyStateIllustrationName;
+  /** Or a Lucide icon in a 48px muted circle (ignored when there is an illustration). */
+  icon?: AstroComponent;
+  /** The title. Or the `title` slot. */
+  title?: string;
+  /** The text under the title. Or the `description` slot. */
+  description?: string;
+  /** Element for the title: `h2` on pages, `p` in menus by default. */
+  titleAs?: HTMLTag;
+  class?: string;
+}
+
+const {
+  illustration,
+  icon,
+  title,
+  description,
+  size = "page",
+  variant = "plain",
+  titleAs,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasIllustrationSlot = Astro.slots.has("illustration");
+const hasTitleSlot = Astro.slots.has("title");
+const hasDescriptionSlot = Astro.slots.has("description");
+const hasAction = Astro.slots.has("action");
+
+const art = illustration ? emptyStateIllustrations[illustration] : undefined;
+const Illustration = art?.component;
+const Icon = icon;
+const TitleTag = titleAs ?? (size === "menu" ? "p" : "h2");
+const isMenu = size === "menu";
+---
+
+<div
+  {...rest}
+  data-slot="empty-state"
+  data-size={size}
+  data-variant={variant}
+  class={cn(emptyStateVariants({ size, variant }), className)}
+>
+  {
+    hasIllustrationSlot ? (
+      <div data-slot="empty-state-illustration" class="flex justify-center">
+        <slot name="illustration" />
+      </div>
+    ) : Illustration && art ? (
+      <Illustration data-slot="empty-state-illustration" class={cn("max-w-full shrink-0", art.pull)} />
+    ) : (
+      Icon && (
+        <span
+          data-slot="empty-state-icon"
+          class="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground"
+          aria-hidden="true"
+        >
+          <Icon class="size-6" />
+        </span>
+      )
+    )
+  }
+
+  <div class={cn("flex flex-col", isMenu ? "max-w-xs gap-2" : "max-w-md gap-1")}>
+    {
+      (hasTitleSlot || title) && (
+        <TitleTag
+          data-slot="empty-state-title"
+          class={cn("text-foreground", isMenu ? "text-sm font-medium" : "text-lg font-semibold")}
+        >
+          {hasTitleSlot ? <slot name="title" /> : title}
+        </TitleTag>
+      )
+    }
+    {
+      (hasDescriptionSlot || description) && (
+        <p data-slot="empty-state-description" class={cn("text-muted-foreground", isMenu ? "text-xs" : "text-sm")}>
+          {hasDescriptionSlot ? <slot name="description" /> : description}
+        </p>
+      )
+    }
+  </div>
+
+  {
+    hasAction && (
+      <div data-slot="empty-state-action" class="flex flex-wrap items-center justify-center gap-2">
+        <slot name="action" />
+      </div>
+    )
+  }
+</div>