@cl-light-ds/ui 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.4.0",
+  "version": "0.6.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/accordion/AccordionTrigger.astro

@@ -10,7 +10,11 @@ type IndicatorIcon = "plus-minus" | "chevron";
 
 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;
   /** Leading icon rendered before the label (e.g. a lucide-astro icon). */
   icon?: AstroComponent;

package/src/components/accordion/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to the `Accordion` component family (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) are documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Docs
+
+- `AccordionTrigger` already renders `type="button"` unless you pass a `type`; no change.
+- **`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).
+
+
 ## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `133-7547`)
 
 Aligned the component visually and functionally with Figma, while preserving the existing 4-part structure and all pre-existing props.

package/src/components/alert/Alert.astro

@@ -24,8 +24,26 @@
  *   <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>
  *
+ * ### Destructive as a tint
+ *
+ * `appearance="tint"` on the destructive variant draws it as a plain light-red
+ * note: `destructive` at 10% behind it, no border, the title in `destructive`
+ * and the description in `destructive` at 80% (D65). For a warning inside a
+ * dialog (delete), where the white card with a red icon reads too loud. Only
+ * the destructive variant has a tint (`warning` is always one); on the others
+ * `appearance` does nothing.
+ *
+ * <Alert variant="destructive" appearance="tint" size="large" dismissible={false}>
+ *   <AlertTitle>This can't be undone</AlertTitle>
+ *   <AlertDescription>Deleted workspaces and their recordings can't be restored.</AlertDescription>
+ * </Alert>
+ *
  * @usage
  *
  * ```astro nocollapse
@@ -45,12 +63,15 @@ 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";
+type AlertAppearance = "default" | "tint";
 
 interface Props extends HTMLAttributes<"div"> {
   variant?: AlertVariant;
   size?: AlertSize;
+  /** `"tint"`: the destructive variant as a light-red note, no border (C18, D65). */
+  appearance?: AlertAppearance;
   icon?: AstroComponent;
   dismissible?: boolean;
   class?: string;
@@ -60,6 +81,7 @@ const {
   class: className = "",
   variant = "default",
   size = "default",
+  appearance = "default",
   icon,
   dismissible = true,
   ...rest
@@ -77,15 +99,30 @@ 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",
         large: "items-start gap-4 p-4",
       },
+      appearance: {
+        default: "",
+        tint: "",
+      },
     },
+    compoundVariants: [
+      // C18, D65 — a plain light-red note: no border, red title, red text at 80%.
+      {
+        variant: "destructive",
+        appearance: "tint",
+        class:
+          "bg-destructive/10 border-transparent [&_[data-slot=alert-title]]:text-destructive [&_[data-slot=alert-description]]:text-destructive/80",
+      },
+    ],
     defaultVariants: {
       variant: "default",
       size: "default",
+      appearance: "default",
     },
   },
 );
@@ -98,6 +135,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: {
@@ -124,8 +162,9 @@ const contentVariants = cva("flex flex-1 text-sm", {
   data-slot="alert"
   data-variant={variant}
   data-size={size}
+  data-appearance={appearance}
   role="alert"
-  class={cn(alertVariants({ variant, size }), className)}
+  class={cn(alertVariants({ variant, size, appearance }), className)}
 >
   {
     hasIcon && (
@@ -157,7 +196,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 group-data-[variant=destructive]/alert:group-data-[appearance=tint]/alert:bg-transparent [&>svg]:size-4"
       >
         <XIcon />
         <span class="sr-only">Dismiss</span>

package/src/components/alert/CHANGELOG.md

@@ -2,4 +2,23 @@
 
 All notable changes to the `Alert` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C18)
+
+### Added
+
+- `appearance` prop (`"default" | "tint"`, default `"default"`), sets `data-appearance`. `variant="destructive" appearance="tint"` draws the destructive alert as a plain light-red note (D65): background `destructive` at 10%, no border, `AlertTitle` in `destructive` and `AlertDescription` in `destructive` at 80%; the dismiss button is transparent, as on `warning`. Replaces the workspace-selection delete dialog's `class="bg-destructive/10 border-transparent"` and its title/description colour classes.
+- Uses `destructive` at 10% rather than `callout-error` (Red/50): D65 specifies the destructive red at 10%, which is a little stronger than Red/50, and the title and description in the destructive red (not `callout-foreground-error`), so the tint matches the reference exactly.
+- Opt-in: the destructive alert's default look (white card, border, red icon) is unchanged. Only the destructive variant has a tint (`warning` is always tinted); on the other variants `appearance` does nothing.
+- Storybook: a "Destructive as a tint" preview.
+
+## 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/collapsible/CHANGELOG.md

@@ -2,4 +2,13 @@
 
 All notable changes to the `Collapsible` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Docs
+
+- `CollapsibleTrigger` already renders `type="button"` unless you pass a `type`; no change.
+- **`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).
+
+
 ## Unreleased

package/src/components/collapsible/CollapsibleTrigger.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/combobox/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 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 (C7, gap G17)
+
+- In "search in popup" mode, focus goes back to the trigger when the list closes (a pick or Escape), as with a native select. It dropped to the page, and out of a surrounding dialog. A workaround for a runtime bug (bejamas/data-slot).
+
+
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **`ComboboxTrigger`: a `type` you pass now wins.** It always rendered `type="button"`, but after your attributes, so it overrode yours. The default is unchanged.
+
+
+## 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/Combobox.astro

@@ -346,8 +346,25 @@ const {
 <script>
   import { createCombobox } from "@data-slot/combobox";
 
-  document.querySelectorAll('[data-slot="combobox"]').forEach((el) => {
+  document.querySelectorAll<HTMLElement>('[data-slot="combobox"]').forEach((el) => {
+    // Found before the runtime starts: it moves the content to <body> when it opens.
+    const content = el.querySelector('[data-slot="combobox-content"]');
+    const trigger = Array.from(el.querySelectorAll<HTMLElement>('[data-slot="combobox-trigger"]')).find(
+      (t) => !content?.contains(t),
+    );
+
     createCombobox(el);
+
+    // "Search in popup": the search input lives in the list, which hides on a
+    // pick or Escape, so focus would drop to the page (and out of a dialog).
+    // Put it back on the trigger, as a native select does.
+    el.addEventListener("combobox:open-change", (event) => {
+      if ((event as CustomEvent<{ open: boolean }>).detail.open || !trigger) return;
+      requestAnimationFrame(() => {
+        const at = document.activeElement;
+        if (!at || at === document.body || content?.contains(at)) trigger.focus();
+      });
+    });
   });
 
   // Clear button delegation