@cl-light-ds/ui 0.5.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "ClickLearn Lightning Design System — Astro UI component library.",
   "license": "MIT",
   "type": "module",

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

@@ -30,6 +30,20 @@
  *   </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
@@ -51,10 +65,13 @@ import type { HTMLAttributes } from "astro/types";
 
 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;
@@ -64,6 +81,7 @@ const {
   class: className = "",
   variant = "default",
   size = "default",
+  appearance = "default",
   icon,
   dismissible = true,
   ...rest
@@ -87,10 +105,24 @@ const alertVariants = cva(
         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",
     },
   },
 );
@@ -130,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 && (
@@ -163,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 group-data-[variant=warning]/alert:bg-transparent [&>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,6 +2,16 @@
 
 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)
 

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

@@ -3,6 +3,19 @@
 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)

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

package/src/components/combobox/ComboboxTrigger.astro

@@ -25,8 +25,8 @@ const {
   */
 }
 <button
-  {...rest}
   type="button"
+  {...rest}
   tabindex={tabindex}
   data-slot="combobox-trigger"
   data-size={size}

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

@@ -3,6 +3,42 @@
 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
+## Idle hint centred
+
+- The hint shown when the palette opens ("Type a search term and press Enter, or click Search.") sat at the left: its show/hide class makes it a flex container while idle, where `text-center` has no effect. It now centres (`justify-center`), like the loading and "Nothing matches" states.
+
+
+## Date 15th Oct 2026
+## Results announcement counts every match
+
+- With a per-group `limit`, the screen-reader announcement ("{count} results") counted only the rows shown. It now announces every match: the sum of the group counts (including a remote search's own counts), or a group's matches where it shows no count.
+
+
+## Date 15th Oct 2026
+## Handover gaps: per-group limit (C30, gap G19)
+
+### Added
+
+- **`limit`: at most N matches per group** (D67 asks for the first five). Each group shows its first `limit` matches. The count beside the heading still counts every match. Set it on `CommandSearch` for every group, or on one `CommandSearchGroup` (its own wins; `0` means no limit). In `remote` mode it applies to the rendered groups too (`limit` on a result group, or `CommandSearch`'s). There the count stays `count ?? items.length`.
+- The rows past the limit are `hidden` (and marked `data-over-limit`), so ↑ ↓, Home/End, hover and Enter skip them like any non-match. The highlight moves to a shown row if its row is capped.
+- **How it holds:** `@data-slot/command` sets `hidden` on every item each time it filters. It filters again whenever the list's content changes (its own MutationObserver), so a cap applied once would be undone. So the cap is reapplied after every filter pass: an observer on the items' `hidden` attribute runs it again, writing only what differs, so it settles at once. It works out matches with the same filter the runtime uses.
+
+### Fixed
+
+- Rows added to the list after a search are now matched by their label when the runtime re-filters. Before, their label hadn't been read yet, so they were matched by `value`.
+
+### Storybook
+
+- "Limit: the first 3 matches per group" preview (`limit={3}`, `limit={5}` on Recordings); the remote demo uses `limit={3}`.
+
+
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **The trigger button has `type="button"`.** It sits in `DialogTrigger asChild`, whose wrapper can't set a type, so inside a `<form>` opening command search submitted the form.
+
+
 ## 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).

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

@@ -103,8 +103,14 @@ interface Props extends HTMLAttributes<"div"> {
   loadingText?: string;
   emptyTitle?: string;
   emptyDescription?: string;
-  /** Announced after a search; `{count}` is replaced. */
+  /** Announced after a search; `{count}` is the number of matches (all of them, not only the rows a `limit` shows). */
   resultsAnnouncement?: string;
+  /**
+   * Show at most this many matches in each group (D67: 5); the count beside
+   * the heading still says how many match. A group's own `limit` wins. No
+   * limit when unset or 0.
+   */
+  limit?: number;
   /** Classes for the trigger button. */
   triggerClass?: string;
   /** Classes for the dialog panel. */
@@ -128,6 +134,7 @@ const {
   emptyTitle = "Nothing matches",
   emptyDescription = "Check the spelling, or try another word.",
   resultsAnnouncement = "{count} results",
+  limit,
   triggerClass = "",
   contentClass = "",
   class: className = "",
@@ -149,6 +156,7 @@ const show = {
   data-delay={delay}
   data-shortcut={shortcut ? "true" : "false"}
   data-results-announcement={resultsAnnouncement}
+  data-limit={limit && limit > 0 ? limit : undefined}
   data-loading-text={loadingText}
   data-empty-title={emptyTitle}
   class={className}
@@ -158,6 +166,7 @@ const show = {
     !hideTrigger && (
       <DialogTrigger asChild>
         <Button
+          type="button"
           variant="outline"
           size="sm"
           class={cn("text-muted-foreground w-56 justify-start", triggerClass)}
@@ -217,7 +226,7 @@ const show = {
 
       <div class="flex max-h-96 flex-col gap-3 overflow-y-auto p-2">
         {/* D116 — before a search: a hint, no lists. */}
-        <p class={cn(show.idle, "text-muted-foreground px-6 py-8 text-center text-sm")}>
+        <p class={cn(show.idle, "text-muted-foreground justify-center px-6 py-8 text-center text-sm")}>
           {hint}
         </p>
 
@@ -302,6 +311,7 @@ const show = {
 
     const remote = root.dataset.mode === "remote";
     const delay = Number(root.dataset.delay) || 0;
+    const defaultLimit = Number(root.dataset.limit) || 0;
 
     for (const key of root.querySelectorAll<HTMLElement>("[data-command-search-shortcut]"))
       key.textContent = isMac ? "⌘K" : "Ctrl K";
@@ -328,6 +338,8 @@ const show = {
     const filter = (value: string, search: string, keywords?: string[]) => {
       const q = search.trim().toLowerCase();
       if (!q) return 1;
+      // Rows added since the search ran (the runtime re-filters them) aren't read yet.
+      if (!labels.has(value)) readLabels();
       const text = (labels.get(value) ?? value).toLowerCase();
       return text.includes(q) || (keywords ?? []).some((k) => k.toLowerCase().includes(q)) ? 1 : 0;
     };
@@ -379,23 +391,89 @@ const show = {
       onSelect: choose,
     });
 
+    // Per-group limit (D67, C30). The runtime decides what matches and sets
+    // `hidden` on every item each time it filters, which happens again
+    // whenever the list's content changes (its own MutationObserver), so a
+    // cap applied once would be undone. Instead the cap is applied after
+    // every filter pass: an observer on `hidden` re-applies it (it only
+    // writes what differs, so it settles at once). Capped items are `hidden`,
+    // so arrow keys, hover and Enter skip them like any non-match.
+    const groups = () => [...list.querySelectorAll<HTMLElement>('[data-slot="command-group"]')];
+    const groupItems = (group: HTMLElement) =>
+      [...group.querySelectorAll<HTMLElement>('[data-slot="command-item"]')];
+    const limitOf = (group: HTMLElement) => {
+      const own = group.dataset.limit;
+      return own !== undefined && own !== "" ? Number(own) || 0 : defaultLimit;
+    };
+    const keywordsOf = (item: HTMLElement) =>
+      (item.dataset.keywords ?? "").split(/[,\n]/).map((k) => k.trim()).filter(Boolean);
+    /** Whether the runtime shows this item for the current search (same rule it uses). */
+    const matches = (item: HTMLElement) => {
+      if (remote || item.dataset.forceMount === "true") return true;
+      const query = controller.search;
+      if (!query.trim()) return true;
+      return filter(item.dataset.value ?? item.dataset.label ?? "", query, keywordsOf(item)) > 0;
+    };
+    const applyLimit = () => {
+      for (const group of groups()) {
+        const limit = limitOf(group);
+        let shownCount = 0;
+        for (const item of groupItems(group)) {
+          const over = item.hasAttribute("data-over-limit");
+          if (!matches(item)) {
+            if (over) item.removeAttribute("data-over-limit"); // the runtime hides it
+            continue;
+          }
+          shownCount += 1;
+          if (limit > 0 && shownCount > limit) {
+            if (!over) item.setAttribute("data-over-limit", "");
+            if (!item.hidden) item.hidden = true;
+          } else if (over) {
+            item.removeAttribute("data-over-limit");
+            item.hidden = false;
+          }
+        }
+      }
+      // Keep the highlight on something you can see.
+      const active = controller.value;
+      const visible = shown();
+      if (active !== null && !visible.some((item) => item.dataset.value === active))
+        controller.select(visible.find((item) => item.getAttribute("aria-disabled") !== "true")?.dataset.value ?? null);
+    };
+
     const updateCounts = () => {
-      for (const group of list.querySelectorAll<HTMLElement>('[data-slot="command-group"]')) {
+      for (const group of groups()) {
         const count = group.querySelector<HTMLElement>('[data-slot="command-search-count"]');
         if (!count || count.dataset.fixed === "true") continue;
-        const n = [...group.querySelectorAll<HTMLElement>('[data-slot="command-item"]')].filter((i) => !i.hidden).length;
+        // Every match, including those past the limit.
+        const n = groupItems(group).filter(matches).length;
         if (count.textContent !== String(n)) count.textContent = String(n);
       }
     };
 
+    new MutationObserver(() => {
+      if (command.dataset.status !== "results") return;
+      applyLimit();
+      updateCounts();
+    }).observe(list, { subtree: true, attributes: true, attributeFilter: ["hidden"] });
+
     const showResults = () => {
+      applyLimit();
       updateCounts();
       const visible = shown();
       if (empty) empty.hidden = visible.length > 0;
       controller.select(visible.find((item) => item.getAttribute("aria-disabled") !== "true")?.dataset.value ?? null);
       setStatus("results");
+      // Announce every match, not just the rows a per-group limit leaves showing:
+      // the sum of the group counts (which include a remote search's own counts).
+      const counted = groups().reduce((sum, group) => {
+        const label = group.querySelector('[data-slot="command-search-count"]')?.textContent;
+        const n = label ? Number(label) : NaN;
+        return sum + (Number.isFinite(n) ? n : groupItems(group).filter(matches).length);
+      }, 0);
+      const total = Math.max(counted, visible.length);
       const template = root.dataset.resultsAnnouncement ?? "{count} results";
-      announce(visible.length ? template.replace("{count}", String(visible.length)) : (root.dataset.emptyTitle ?? ""));
+      announce(visible.length ? template.replace("{count}", String(total)) : (root.dataset.emptyTitle ?? ""));
     };
 
     const clearRendered = () => {
@@ -408,6 +486,7 @@ const show = {
         const wrap = el("div", commandSearchGroupClasses);
         wrap.dataset.slot = "command-group";
         wrap.dataset.commandSearchRendered = "";
+        if (group.limit !== undefined) wrap.dataset.limit = String(group.limit);
         const heading = el("div", commandSearchHeadingClasses, group.heading);
         heading.dataset.slot = "command-group-heading";
         const count = el("span", commandSearchCountClasses, String(group.count ?? group.items.length));

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

@@ -2,7 +2,8 @@
 /**
  * A group of results in a `CommandSearch`: a small caps heading with the
  * number of matches beside it, then its `CommandSearchItem`s. Hidden while
- * none of its items match.
+ * none of its items match. With `limit`, only the first matches show; the
+ * count beside the heading still counts them all.
  */
 import { cn } from "@cl-light-ds/ui/lib/utils";
 import type { HTMLAttributes } from "astro/types";
@@ -17,13 +18,23 @@ interface Props extends HTMLAttributes<"div"> {
   heading: string;
   /** Show how many items match beside the heading (D67). */
   showCount?: boolean;
+  /**
+   * Show at most this many matches (D67: 5); the count still says how many
+   * match. Overrides `CommandSearch`'s `limit`; 0 for no limit.
+   */
+  limit?: number;
   class?: string;
 }
 
-const { heading, showCount = true, class: className = "", ...rest } = Astro.props as Props;
+const { heading, showCount = true, limit, class: className = "", ...rest } = Astro.props as Props;
 ---
 
-<div data-slot="command-group" class={cn(commandSearchGroupClasses, className)} {...rest}>
+<div
+  data-slot="command-group"
+  data-limit={limit !== undefined ? limit : undefined}
+  class={cn(commandSearchGroupClasses, className)}
+  {...rest}
+>
   <div data-slot="command-group-heading" class={commandSearchHeadingClasses}>
     {heading}
     {showCount && <span data-slot="command-search-count" class={commandSearchCountClasses}></span>}

package/src/components/dialog/CHANGELOG.md

@@ -3,6 +3,43 @@
 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`

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

@@ -8,12 +8,13 @@ interface Props extends HTMLAttributes<"button"> {
   /**
    * 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.
+   * 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 = "", asChild = false, ...rest } = Astro.props as Props;
+const { class: className = "", asChild = false, type = "button", ...rest } = Astro.props as Props;
 ---
 
 {
@@ -24,6 +25,7 @@ const { class: className = "", asChild = false, ...rest } = Astro.props as Props
   ) : (
     <Button
       {...rest}
+      type={type}
       data-slot="dialog-close"
       data-dialog-close
       variant="ghost"

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;
 }