@cl-light-ds/ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "ClickLearn Lightning Design System — Astro UI component library.",
   "license": "MIT",
   "type": "module",
@@ -34,22 +34,24 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@data-slot/accordion": "^0.2.166",
-    "@data-slot/collapsible": "^0.2.166",
-    "@data-slot/combobox": "^0.2.166",
-    "@data-slot/dialog": "^0.2.166",
-    "@data-slot/dropdown-menu": "^0.2.166",
-    "@data-slot/hover-card": "^0.2.166",
-    "@data-slot/navigation-menu": "^0.2.166",
-    "@data-slot/popover": "^0.2.166",
-    "@data-slot/radio-group": "^0.2.166",
-    "@data-slot/select": "^0.2.166",
-    "@data-slot/slider": "^0.2.166",
-    "@data-slot/switch": "^0.2.166",
-    "@data-slot/tabs": "^0.2.166",
-    "@data-slot/toggle": "^0.2.166",
-    "@data-slot/toggle-group": "^0.2.166",
-    "@data-slot/tooltip": "^0.2.166",
+    "@data-slot/accordion": "^1.1.2",
+    "@data-slot/collapsible": "^1.1.2",
+    "@data-slot/combobox": "^1.1.2",
+    "@data-slot/command": "^1.1.2",
+    "@data-slot/dialog": "^1.1.2",
+    "@data-slot/dropdown-menu": "^1.1.2",
+    "@data-slot/hover-card": "^1.1.2",
+    "@data-slot/navigation-menu": "^1.1.2",
+    "@data-slot/popover": "^1.1.2",
+    "@data-slot/radio-group": "^1.1.2",
+    "@data-slot/select": "^1.1.2",
+    "@data-slot/slider": "^1.1.2",
+    "@data-slot/switch": "^1.1.2",
+    "@data-slot/tabs": "^1.1.2",
+    "@data-slot/toast": "^1.1.2",
+    "@data-slot/toggle": "^1.1.2",
+    "@data-slot/toggle-group": "^1.1.2",
+    "@data-slot/tooltip": "^1.1.2",
     "@lucide/astro": "^1.14.0",
     "bejamas": "^0.4.1",
     "class-variance-authority": "^0.7.1",

package/src/components/alert/Alert.astro

@@ -24,6 +24,10 @@
  *   <Alert variant="success" icon={CircleCheckIcon}>
  *     <AlertTitle>Payment successful.</AlertTitle>
  *   </Alert>
+ *
+ *   <Alert variant="warning" icon={TriangleAlertIcon}>
+ *     <AlertTitle>Linked recordings won't be included.</AlertTitle>
+ *   </Alert>
  * </div>
  *
  * @usage
@@ -45,7 +49,7 @@ import type { AstroComponent } from "@lucide/astro";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 import type { HTMLAttributes } from "astro/types";
 
-type AlertVariant = "default" | "destructive" | "success";
+type AlertVariant = "default" | "destructive" | "success" | "warning";
 type AlertSize = "default" | "large";
 
 interface Props extends HTMLAttributes<"div"> {
@@ -77,6 +81,7 @@ const alertVariants = cva(
         default: "bg-popover",
         destructive: "bg-card",
         success: "bg-card",
+        warning: "bg-callout-warning border-warning/40",
       },
       size: {
         default: "items-center gap-2 p-2",
@@ -98,6 +103,7 @@ const iconVariants = cva(
         default: "bg-muted text-foreground",
         destructive: "bg-destructive text-destructive-foreground",
         success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
       },
     },
     defaultVariants: {
@@ -157,7 +163,7 @@ const contentVariants = cva("flex flex-1 text-sm", {
       <button
         type="button"
         data-slot="alert-dismiss"
-        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 [&>svg]:size-4"
+        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 group-data-[variant=warning]/alert:bg-transparent [&>svg]:size-4"
       >
         <XIcon />
         <span class="sr-only">Dismiss</span>

package/src/components/alert/CHANGELOG.md

@@ -2,4 +2,13 @@
 
 All notable changes to the `Alert` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (N19, gap G13)
+
+### Variants
+
+- Added a `warning` variant (`variant: "default" | "destructive" | "success" | "warning"`). Background `bg-callout-warning` (`--callout-background-warning`, Figma Yellow/50), border `warning` at 40%, icon in a solid `warning` circle with `warning-foreground`. Replaces the workspace-selection screen's hand-styled `Alert` (`bg-badge-warning/10 border-badge-warning/40`).
+- The dismiss button is transparent on `warning`, so no white square shows on the yellow background.
+
+
 ## Unreleased

package/src/components/button/Button.astro

@@ -95,6 +95,10 @@
  *   <Badge slot="badge" variant="secondary" shape="sharp" size="sm">Value</Badge>
  * </Button>
  *
+ * ### Loading
+ *
+ * <Button variant="destructive" loading loadingText="Deleting…">Delete workspace</Button>
+ *
  * ### Destructive
  *
  * <Button variant="destructive">Click me</Button>
@@ -125,6 +129,7 @@ import type { HTMLAttributes } from "astro/types";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Spinner } from "../spinner";
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -143,6 +148,7 @@ const buttonVariants = cva(
         sm: "h-8 gap-1 px-2 text-xs [&_svg]:size-3.5",
         lg: "h-10 gap-1 px-2.5 text-sm [&_svg]:size-5",
         icon: "size-9 [&_svg]:size-4",
+        "icon-xs": "size-6 [&_svg]:size-3.5",
         "icon-sm": "size-8 [&_svg]:size-3.5",
         "icon-lg": "size-10 [&_svg]:size-5",
       },
@@ -168,6 +174,15 @@ type ButtonOwnProps = ButtonVariantProps & {
   leadIcon?: boolean;
   tailIcon?: boolean;
   badge?: boolean;
+  /**
+   * Busy: disabled, with a spinner and `loadingText` in the label's place. The
+   * label and the loading content share one grid cell, so the width holds.
+   * Passing `loading` (true or false) renders that structure; a script can then
+   * switch it with `data-loading="true"` plus `disabled`.
+   */
+  loading?: boolean;
+  /** Text beside the spinner while loading, e.g. "Deleting…". Spinner only when omitted. */
+  loadingText?: string;
 };
 
 export type Props = (ButtonAsButton | ButtonAsAnchor) & ButtonOwnProps;
@@ -183,9 +198,21 @@ const {
   leadIcon = hasLeadIconSlot,
   tailIcon = hasTailIconSlot,
   badge = hasBadgeSlot,
+  loading,
+  loadingText,
   class: className = "",
   ...rest
 } = Astro.props as Props;
+
+// Loading (N21): only buttons given `loading` or `loadingText` get the stacked label.
+const hasLoading = loading !== undefined || loadingText !== undefined;
+const loadingAttrs = hasLoading
+  ? {
+      "data-loading": loading ? "true" : "false",
+      "aria-busy": loading ? "true" : undefined,
+      ...(loading ? (Tag === "a" ? { "aria-disabled": "true" } : { disabled: true }) : {}),
+    }
+  : {};
 ---
 
 {
@@ -202,32 +229,64 @@ const {
   data-variant={variant}
   data-size={size}
   class={cn(
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 in-data-[slot=button-group]:hover:bg-background-hover in-data-[slot=button-group]:hover:border-badge-accent aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
     buttonVariants({ variant, size }),
     className,
   )}
   {...rest}
+  {...loadingAttrs}
 >
   {
-    leadIcon && (
-      <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
-        <slot name="lead-icon" />
-      </span>
-    )
-  }
-  <slot />
-  {
-    badge && (
-      <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
-        <slot name="badge" />
-      </span>
-    )
-  }
-  {
-    tailIcon && (
-      <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
-        <slot name="tail-icon" />
+    hasLoading ? (
+      <span data-slot="button-loading-stack" class="grid">
+        <span
+          data-slot="button-content"
+          class="col-start-1 row-start-1 inline-flex items-center justify-center gap-1 group-data-[loading=true]/button:invisible"
+        >
+          {leadIcon && (
+            <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
+              <slot name="lead-icon" />
+            </span>
+          )}
+          <slot />
+          {badge && (
+            <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
+              <slot name="badge" />
+            </span>
+          )}
+          {tailIcon && (
+            <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
+              <slot name="tail-icon" />
+            </span>
+          )}
+        </span>
+        <span
+          data-slot="button-loading"
+          class="invisible col-start-1 row-start-1 inline-flex items-center justify-center gap-2 group-data-[loading=true]/button:visible"
+        >
+          <Spinner aria-hidden="true" role="presentation" />
+          {loadingText}
+        </span>
       </span>
+    ) : (
+      <>
+        {leadIcon && (
+          <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
+            <slot name="lead-icon" />
+          </span>
+        )}
+        <slot />
+        {badge && (
+          <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
+            <slot name="badge" />
+          </span>
+        )}
+        {tailIcon && (
+          <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
+            <slot name="tail-icon" />
+          </span>
+        )}
+      </>
     )
   }
 </Tag>

package/src/components/button/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to the `Button` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (N21)
+
+### Props
+
+- Added `loading` and `loadingText`. While loading the button is disabled (`aria-disabled` on `as="a"`), `aria-busy="true"` and `data-loading="true"`, and shows a `Spinner` with `loadingText` in place of the label. The label and the loading content are stacked in one grid cell (the label goes `invisible`), so the button keeps its width (D178). Without `loadingText` only the spinner shows.
+- Only buttons given `loading` (true or false) or `loadingText` get the extra markup (`button-loading-stack` > `button-content` + `button-loading`); every other button renders exactly as before. A script can switch a `loading={false}` button with `data-loading="true"` plus `disabled`.
+- Storybook: "Loading" preview, with a scripted example.
+
+## Date 15th Oct 2026
+## Workspace selection handover (C2, C3, C25)
+
+### Sizes
+
+- Added `icon-xs` (24px, 14px icon) for small icon buttons such as a notification's dismiss ✕. Was `icon-sm` resized with `size-6`.
+
+### States: inside a `ButtonGroup` (gap G9)
+
+- **Removed** the group-wide hover override (`in-data-[slot=button-group]:hover:bg-background-hover hover:border-badge-accent`). Every variant now keeps its own hover inside a group: a primary button hovers `primary/80` (it turned grey), an outline button keeps its `border` (it turned light blue, unlike the same button outside a group).
+- **Figma:** this reverses the grouped Hover state from the 8th Sep alignment (`bg-background-hover` + `accent` border, master symbols node `114:11217`). Agreed with the designer (D71, D152); Figma's Button Group states will be updated to match.
+
+
 ## Date 8th Sep 2026
 ## Figma alignment (node 114-6897, prop table 7185-13418) 
 

package/src/components/button-group/ButtonGroup.astro

@@ -102,14 +102,25 @@ const {
 } = Astro.props as Props;
 
 export const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  [
+    "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10",
+    // A primary button beside a separator: a light blue separator, and no transparent end border
+    // (it isn't painted, so the page showed through as a white strip).
+    "[&>[data-slot=button][data-variant=default]+[data-slot=button-group-separator]]:bg-chart-2",
+    // A field joined to a button (search + Search): while the field has focus, one ring goes round
+    // both. The field's own ring is off and the button's border takes the ring colour.
+    "has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:rounded-lg has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:ring-3 has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:ring-ring/50 transition-shadow",
+    "[&>[data-slot=input-group]]:has-[[data-slot=input-group-control]:focus-visible]:ring-0",
+    "has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:[&>[data-slot=button]]:border-ring",
+    "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  ],
   {
     variants: {
       orientation: {
         horizontal:
-          "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]_[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-s-none",
+          "[&>[data-slot]:has(+[data-slot=button-group-separator])]:border-e-0 *:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]_[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-s-none",
         vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]_[data-slot]]:border-t-0",
+          "flex-col [&>[data-slot]:has(+[data-slot=button-group-separator])]:border-b-0 *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]_[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {

package/src/components/button-group/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to the `ButtonGroup` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C2, C4)
+
+### Split button (C2)
+
+- A button followed by a `ButtonGroupSeparator` has no end border (no bottom border when vertical). Its transparent border isn't painted (`bg-clip-padding`), so the page showed through as a white strip beside the separator.
+- A separator right after a primary (`variant="default"`) button is `chart-2` (light blue) instead of `input` grey.
+
+### Field joined to a button (C4)
+
+- When a `ButtonGroup` holds an `InputGroup` and its field has keyboard focus, one ring (`ring-3 ring-ring/50`) goes round the whole group: the field's own ring is off and the buttons' border turns `ring`. Tab on to the button and it shows its own ring alone.
+
+### Storybook
+
+- Added "Split button" and "Field joined to a button" previews.
+
+
 ## Date 8th Sep 2026
 ## Figma alignment (node 114-9882)
 

package/src/components/card/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to the `Card` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C14)
+
+### Added
+
+- `interactive` prop (default `false`): for cards that open something, the card lifts 4px (`-translate-y-1`) with `shadow-lg` on hover and on keyboard focus, on the card itself (`as="a"`) or inside it (`has-focus-visible`, for a stretched link with other controls beside it). Only keyboard focus lifts it, so a mouse click on a control in the card doesn't leave it raised. No lift with `prefers-reduced-motion` (the shadow still changes). Sets `data-interactive`.
+- Opt-in rather than always on: most cards are static, and lifting them would suggest they can be clicked.
+- Storybook: an "Interactive" preview.
+
 ## Date 9th Sep 2026
 ## Figma alignment (node 54-1310, prop table 7350-1279)
 

package/src/components/card/Card.astro

@@ -102,6 +102,16 @@
  * Pass `as="a"` (with `href`) to render the whole card as a real, natively focusable anchor — this is how to make Figma's Focus state reachable via keyboard, since a plain `<div>` can't receive `:focus-visible`.
  *
  * <Card as="a" href="#">...</Card>
+ *
+ * ### Interactive (hover lift)
+ *
+ * `interactive` is for cards that open something (the whole card is a link,
+ * either `as="a"` or a stretched link inside it): the card lifts 4px with a
+ * larger shadow on hover and while it, or anything in it, has keyboard focus.
+ * No lift with reduced motion (the shadow still changes). Off by default, so
+ * static cards don't suggest they can be clicked.
+ *
+ * <Card as="a" href="/workspace" interactive>...</Card>
  */
 
 import { cva } from "class-variance-authority";
@@ -124,6 +134,8 @@ type CardOwnProps = {
   variant?: CardVariant;
   size?: CardSize;
   orientation?: CardOrientation;
+  /** Lift 4px with a larger shadow on hover and keyboard focus, for cards that open something. */
+  interactive?: boolean;
 };
 
 export type Props = (CardAsDiv | CardAsAnchor) & CardOwnProps;
@@ -134,9 +146,17 @@ const {
   variant = "default",
   size = "default",
   orientation = "vertical",
+  interactive = false,
   ...rest
 } = Astro.props as Props;
 
+/**
+ * C14 — the hover lift. Keyboard focus only (`focus-visible`, on the card or
+ * inside it): a mouse click on a control in the card doesn't keep it lifted.
+ */
+const interactiveClasses =
+  "transition-[translate,box-shadow] duration-200 hover:shadow-lg focus-visible:shadow-lg has-focus-visible:shadow-lg motion-safe:hover:-translate-y-1 motion-safe:focus-visible:-translate-y-1 motion-safe:has-focus-visible:-translate-y-1";
+
 const cardVariants = cva(
   "group/card relative flex overflow-clip rounded-lg text-sm text-card-foreground outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1",
   {
@@ -185,11 +205,13 @@ const cardVariants = cva(
   data-variant={variant}
   data-size={size}
   data-orientation={orientation}
+  data-interactive={interactive ? "" : undefined}
   class={cn(
     cardVariants({ variant, size, orientation }),
     "*:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
     variant === "overlay" &&
       "[&_[data-slot=card-media]]:absolute [&_[data-slot=card-media]]:inset-0 [&_[data-slot=card-media]]:z-0 [&_[data-slot=card-media]]:rounded-lg [&_[data-slot=card-media]]:p-0 [&_[data-slot=card-media]_img]:rounded-lg",
+    interactive && interactiveClasses,
     className,
   )}
 >

package/src/components/combobox/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to the `Combobox` component family (`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`, `ComboboxEmpty`, `ComboboxTrigger`, `ComboboxValue`) are documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C6; gaps G12, G17)
+
+### `ComboboxTrigger` (C6)
+
+- **Styled as a field:** the Input's border, `bg-card`, shadow and focus ring, sized by its `size` prop (`sm` 32px, `default` 36px, `lg` 40px; padding and text as `Input`). It was unstyled and `size` did nothing.
+- **In the Tab order:** `tabindex` defaults to `0`. The runtime takes a trigger without one out of the Tab order, so the "search in popup" field couldn't be reached by keyboard. Pass `tabindex={-1}` to opt out.
+- **Named by its label:** the runtime names every trigger "Toggle". When the trigger has an `id` and a `<label for>` points at it, it gets `aria-labelledby` the label and its value ("Language English"). An author's own `aria-labelledby` is left alone.
+
+### Storybook
+
+- "Search in popup, labelled, in sizes" preview.
+
+
 ## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `5455-12863`)
 
 Styling-only pass — no props, components, or behavior were added or removed. The implementation (including the shared `InputGroup`/`InputGroupInput` it delegates trigger styling to) was already close to Figma; this fixed the remaining concrete mismatches found by comparing computed styles against the Figma spec.

package/src/components/combobox/ComboboxTrigger.astro

@@ -10,17 +10,30 @@ interface Props extends HTMLAttributes<"button"> {
 const {
   class: className = "",
   size = "default",
+  tabindex = 0,
   ...rest
 } = Astro.props as Props;
 ---
 
+{
+  /*
+    The "search in popup" field: it shows the committed value and is the control
+    people Tab to, so it has the Input's field styling and stays in the Tab order
+    (the runtime takes a trigger without a tabindex out of it). The runtime also
+    names every trigger "Toggle"; the script below names it by its <label for>
+    and its value instead.
+  */
+}
 <button
   {...rest}
   type="button"
+  tabindex={tabindex}
   data-slot="combobox-trigger"
   data-size={size}
   class={cn(
-    "[&_svg:not([class*='size-'])]:size-4 rounded-lg flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "[&_svg:not([class*='size-'])]:size-4 rounded-lg flex w-full items-center justify-between gap-2 whitespace-nowrap text-left outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "border-input bg-card focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive border shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3",
+    "data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:text-base",
     className,
   )}
 >
@@ -28,3 +41,20 @@ const {
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground size-4 pointer-events-none"
     data-slot="combobox-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
 </button>
+
+<script>
+  // Name each trigger by its label and current value ("Language English"),
+  // unless the author already named it with aria-labelledby.
+  let uid = 0;
+  const ensureId = (el: Element, prefix: string) => (el.id ||= `${prefix}-${++uid}`);
+
+  for (const trigger of document.querySelectorAll<HTMLButtonElement>("[data-slot='combobox-trigger']")) {
+    if (!trigger.id || trigger.hasAttribute("aria-labelledby")) continue;
+    const label = document.querySelector(`label[for="${CSS.escape(trigger.id)}"]`);
+    if (!label) continue;
+    const value = trigger.querySelector("[data-slot='combobox-value']");
+    const ids = [ensureId(label, "combobox-label")];
+    if (value) ids.push(ensureId(value, "combobox-value"));
+    trigger.setAttribute("aria-labelledby", ids.join(" "));
+  }
+</script>

package/src/components/command-search/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to the `CommandSearch` component family (`CommandSearch`, `CommandSearchGroup`, `CommandSearchItem`, and the helpers in `@cl-light-ds/ui/lib/command-search`) are documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N11)
+
+New component, replacing the workspace-selection screen's hand-composed `CommandPalette.astro` and its palette code in `interactions.ts` (gap G8).
+
+### `CommandSearch`
+
+- Trigger (D63): a 32px outline `Button` "Search everything…" with a search icon and a `Kbd` showing ⌘K on a Mac, Ctrl K elsewhere. ⌘K / Ctrl K opens the first palette on the page (`shortcut`, default on). `hideTrigger` to open it from your own control (`openCommandSearch()` or `dialog:set`).
+- Palette: the DS `Dialog` (672px, `sm:max-w-2xl`), a large search field (`InputGroup` size lg) with a secondary Search button, results, and a footer with ↑ ↓ / ↵ / esc hints (replaceable via the `footer` slot).
+- Searching (D116, D122, D142): nothing is listed until a search runs; a hint says how. Enter or Search runs it; typing alone changes nothing, and emptying the field goes back to the hint. While it runs: a spinner and "Searching everything…". Enter again chooses the highlighted item.
+- Results grouped (`CommandSearchGroup`, heading in small caps with the number of matches beside it, D67); rows (`CommandSearchItem`) with optional `media` and `meta` slots, highlighted while active. Choosing fires `command-search:select` (cancelable), closes the palette, and follows `href` if given.
+- "Nothing matches" (D187): the 184×124 illustration (`nothing-matches.svg`), a title and a line of text.
+- Two modes: `filter` (default) filters the items you put in, by label and keywords, case-insensitive substring, keeping your order; `delay` shows the loading state first. `remote` fires `command-search:search` with the query and waits for `setCommandSearchResults(root, groups, { query })` (stale answers are ignored), rendering the groups itself, or keeping rows you added.
+- A11y: the runtime makes the field a combobox over a listbox (`aria-activedescendant`, options, groups labelled by their heading); a polite live region announces "Searching everything…", the number of results or "Nothing matches".
+
+### Built on `@data-slot/command`
+
+- Used: item and group registration, `role`s, active item, arrow / Home / End / Alt+arrow navigation, Enter and click selection, hover highlight, hiding groups with no matches, the empty element, `setSearch` / `select`.
+- Added on top: search on Enter or the button instead of as you type (the field's `input` event is stopped before the runtime sees it), the idle hint and loading states, a substring filter that keeps the given order, match counts, the remote mode and its result rendering, `href` navigation and closing on select, the platform shortcut label and the global shortcut. The runtime's Ctrl+J/K/N/P bindings are off (Ctrl K opens the palette).
+
+### Storybook
+
+- "Command Search" section: filter mode with workspaces, recordings and assets; remote mode with a simulated server.