@cl-light-ds/ui 0.5.0 → 0.6.1

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

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

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/field/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to the `Field` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C21)
+
+### Added
+
+- `leading` prop on `FieldError` (`"default" | "compact"`, default `"default"`), sets `data-leading`. `"compact"` sets a 16px line height (`leading-4`) instead of `text-sm`'s 20px, so a one-line message under a control leaves as much space below it as the gap between fields (D147: 26px against 27px, instead of 28px against 25px). Replaces the workspace-selection screen's `class="leading-4"`.
+- Opt-in, not a default fix: the 20px line is `text-sm`'s own and matches Figma's `text/md` style (14/20) used across the form text, so it isn't a bug; the tighter line is for evening out the space in a compact form.
+- Storybook: a "Compact error line height" preview.
+
+## Date 15th Oct 2026
+## Workspace selection handover (C20)
+
+### Added
+
+- `spacing` prop on `FieldGroup` (`"default" | "compact"`, default `"default"`), sets `data-spacing`. `"compact"` puts 20px between the fields (`gap-5`) instead of 28px (`gap-7`), for a form that sits tighter, e.g. the New workspace dialog (D140). Nested field groups (`gap-4`) and checkbox groups (`gap-3`) keep their own gaps. Replaces the workspace-selection screen's `class="gap-5"`.
+- Opt-in: field groups without `spacing` keep 28px.
+- Storybook: a "Compact field group" preview.
+
 ## 2026-09-09 — Fixed control-to-label vertical alignment for native checkbox/radio
 
 ### Fixed

package/src/components/field/Field.astro

@@ -185,13 +185,22 @@
  *
  * | Prop | Type | Default |
  * |------|------|---------|
+ * | `spacing` | `"default" \| "compact"` | `"default"` |
  * | `class` | `string` | - |
  *
+ * `spacing="compact"` puts 20px between the fields instead of 28px, for a
+ * form that sits tighter (e.g. in a dialog).
+ *
  * ```astro nocollapse
  * <FieldGroup class="@container/field-group flex flex-col gap-6">
  *   <Field>...</Field>
  *   <Field>...</Field>
  * </FieldGroup>
+ *
+ * <FieldGroup spacing="compact">
+ *   <Field>...</Field>
+ *   <Field>...</Field>
+ * </FieldGroup>
  * ```
  *
  * ### Field
@@ -292,12 +301,21 @@
  * |------|------|---------|
  * | `errors` | `Array<{ message?: string } \| undefined>` | `[]` |
  * | `forceMount` | `boolean` | `false` |
+ * | `leading` | `"default" \| "compact"` | `"default"` |
  * | `class` | `string` | - |
  *
  * ```astro nocollapse
  * <FieldError errors={[{ message: "Username is required" }]} />
  * ```
  *
+ * `leading="compact"` sets a 16px line height (20px by default), so a one-line
+ * message under a control leaves as much space below it as the gap between
+ * fields:
+ *
+ * ```astro nocollapse
+ * <FieldError leading="compact">That address is taken.</FieldError>
+ * ```
+ *
  * When `errors` contains multiple unique messages, the component renders a list
  * automatically.
  *

package/src/components/field/FieldError.astro

@@ -7,12 +7,19 @@ type ErrorItem = { message?: string } | undefined;
 interface Props extends HTMLAttributes<"div"> {
   errors?: ErrorItem[];
   forceMount?: boolean;
+  /**
+   * Line height: `"default"` 20px (text-sm's own), `"compact"` 16px
+   * (`leading-4`), so a one-line message under a control leaves as much space
+   * below it as the gap between fields (C21, D147).
+   */
+  leading?: "default" | "compact";
 }
 
 const {
   class: className = "",
   errors = [],
   forceMount = false,
+  leading = "default",
   ...rest
 } = Astro.props as Props;
 
@@ -34,7 +41,12 @@ const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
     <div
       role="alert"
       data-slot="field-error"
-      class={cn("text-destructive text-sm font-normal", className)}
+      data-leading={leading}
+      class={cn(
+        "text-destructive text-sm font-normal",
+        leading === "compact" && "leading-4",
+        className,
+      )}
       {...rest}
     >
       {hasContent && <slot />}

package/src/components/field/FieldGroup.astro

@@ -2,15 +2,24 @@
 import type { HTMLAttributes } from "astro/types";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 
-interface Props extends HTMLAttributes<"div"> {}
+interface Props extends HTMLAttributes<"div"> {
+  /**
+   * Space between the fields: `"default"` 28px (`gap-7`), `"compact"` 20px
+   * (`gap-5`), for a form that sits tighter, e.g. in a dialog (C20, D140).
+   * Nested field groups and checkbox groups keep their own gaps.
+   */
+  spacing?: "default" | "compact";
+}
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const { spacing = "default", class: className = "", ...rest } = Astro.props as Props;
 ---
 
 <div
   data-slot="field-group"
+  data-spacing={spacing}
   class={cn(
-    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    spacing === "compact" ? "gap-5" : "gap-7",
+    "data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
     "group/field-group @container/field-group flex w-full flex-col",
     className,
   )}

package/src/components/hover-card/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Docs
+
+- `HoverCardTrigger` 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-09 — Figma alignment (ClickLearn Lightning Design Library, node `5455-14770`)
 
 Figma shows three content **Variants** (Default, Simple, Avatar) and two **States** (Default, Focus) for the card surface.

package/src/components/hover-card/HoverCardTrigger.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/notifications-menu/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to the `NotificationsMenu` component family (`NotificationsMenu`, `NotificationsMenuItem`) are documented in this file.
 
 ## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **The bell, Clear all and each ✕ have `type="button"`.** The bell is a `PopoverTrigger` (fixed there); Clear all and ✕ are `Button`s, which have no type, so inside a `<form>` they submitted it.
+
+
 ## Workspace selection handover (N10)
 
 ### Added

package/src/components/notifications-menu/NotificationsMenu.astro

@@ -165,6 +165,7 @@ const unseen = notifications.filter((n) => n.new).length;
       <PopoverHeader class="flex-row items-center justify-between gap-2 p-3">
         <PopoverTitle>{title}</PopoverTitle>
         <Button
+          type="button"
           variant="link"
           size="sm"
           class="group-data-[empty=true]/notifications:hidden"

package/src/components/notifications-menu/NotificationsMenuItem.astro

@@ -118,6 +118,7 @@ const iconChipVariants = cva(
   ></span>
   <span class="sr-only group-data-[new=false]/note:hidden">{newLabel}</span>
   <Button
+    type="button"
     variant="ghost"
     size="icon-xs"
     class="absolute top-2 right-2 opacity-0 group-focus-within/note:opacity-100 group-hover/note:opacity-100 pointer-coarse:opacity-100"

package/src/components/option-card/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to the `OptionCard` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C19)
+
+### Fixed
+
+- Accent badges inside an `OptionCard` (the `badge` slot and the nested content) now get a `chart-1` border from the card itself (`[&_[data-slot=badge][data-variant=accent]]:border-chart-1`). The accent badge is bordered in its own fill, the same pale blue as a chosen card's tint, so "Recommended" and "Linked" disappeared on a chosen card (D109). Consumers no longer add `class="border-chart-1"`; it still works if left in.
+- Not opt-in: it only touches accent badges inside an option card, and only their border colour, to keep them visible. Badges elsewhere, and other badge variants, are unchanged.
+- Always on, not only while the card is chosen: the reference gives these badges the darker edge on every card, and the badge doesn't change as the choice moves between cards.
+- Storybook: the badges in the previews no longer carry the class.
+
 ## Date 15th Oct 2026
 ## Workspace selection handover (N18)
 

package/src/components/option-card/OptionCard.astro

@@ -8,7 +8,7 @@
  *
  * <RadioGroup name="mode" defaultValue="copy" aria-label="How content is brought across" class="gap-3">
  *   <OptionCard value="copy" title="Make independent copies" description="The new workspace gets its own copies.">
- *     <Badge slot="badge" variant="accent" size="sm" class="border-chart-1">Recommended</Badge>
+ *     <Badge slot="badge" variant="accent" size="sm">Recommended</Badge>
  *   </OptionCard>
  *   <OptionCard value="link" title="Link to the original" description="Any change made in either workspace appears in both." />
  * </RadioGroup>
@@ -38,6 +38,10 @@
  * - `content="panel"`: a white bordered panel inset in the card (a checklist).
  * - `content="plain"`: no styling, only the show/hide.
  *
+ * Accent badges anywhere in the card (the `badge` slot, nested notes) get a
+ * `chart-1` edge, so they don't disappear on the chosen card's accent tint
+ * (C19, D109). No class needed on the badge.
+ *
  * Listen for `radio-group:change` on the `RadioGroup` for the value.
  */
 
@@ -103,6 +107,10 @@ const optionCardContentVariants = cva(
     "group/option-card flex flex-col rounded-lg border bg-card transition-colors",
     "has-[>[data-slot=option-card-label]>[data-checked]]:border-primary has-[>[data-slot=option-card-label]>[data-checked]]:bg-badge-accent/50",
     "has-[>[data-slot=option-card-label]>[data-disabled]]:opacity-50",
+    // C19, D109 — an accent badge is bordered in its own fill, the same pale
+    // blue as the chosen tint; a chart-1 edge keeps it visible. Always on (not
+    // only while chosen), so the badge doesn't change as the choice moves.
+    "[&_[data-slot=badge][data-variant=accent]]:border-chart-1",
     className,
   )}
 >

package/src/components/organisms/top-bar/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to the top bar organism (`organisms/top-bar`) will be documented in this file.
 
+## Date 15th Oct 2026
+## No scrollbar flash when a toast slides in (C31, gap G20)
+
+- The bar's surface (`will-change: transform`) makes its toast stack part of the page, and a new toast slides in from 2rem while the stack sits 1–1.5rem from the edge, so the page widened for 300ms and a horizontal scrollbar flashed. The surface now clips sideways overflow (`overflow-x: clip`); the slide-in, ripple and shake are unchanged, and toasts and menus still hang below the bar. Screens can drop their own `overflow-x-clip` page wrapper.
+
+
+## Date 15th Oct 2026
+## Normal breadcrumb (C1 reverted)
+
+- The bar uses the generic `Breadcrumb` as it is (36px crumbs, the normal spacing) instead of the compact 32px crumbs. To stay 41px with its border, the bar's vertical padding is 2px (was 4px); the 32px controls stay centred.
+
+
 ## Date 15th Oct 2026
 ## Workspace selection handover (N12, C1)
 

package/src/components/organisms/top-bar/TopBar.astro

@@ -122,27 +122,31 @@ const hasBreadcrumbSlot = Astro.slots.has("breadcrumb");
 const hasActionsSlot = Astro.slots.has("actions");
 
 /*
- * D23 — 41px: 4px above and below the 32px controls, plus the 1px border.
+ * D23 — 41px: the 36px breadcrumb crumbs with 2px above and below, plus the 1px border
+ * (the 32px controls are centred).
  * The side padding matches the Toaster's default right inset (1rem, 1.5rem from md),
  * so the stack lines up with the bar's right end.
  */
 const topBarVariants = cva(
-  "bg-background relative flex items-center gap-4 border-b px-4 py-1 md:px-6",
+  "bg-background relative flex items-center gap-4 border-b px-4 py-0.5 md:px-6",
 );
 
-/*
- * C1 — the generic Breadcrumb pads crumbs as 36px pills (px-3 py-2). Here they are
- * 32px (py-1.5), like the buttons, so the bar stays 41px, with 6px (px-1.5) either side
- * of the chevron (D23, D97). The first crumb is pulled back by its padding so its text
- * lines up with the bar's edge.
- */
-const crumbClass =
-  "min-w-0 gap-0 [&_a]:px-1.5 [&_a]:py-1.5 [&_[aria-current=page]]:px-1.5 [&_[aria-current=page]]:py-1.5 first:-ms-1.5";
 const lastIndex = crumbs.length - 1;
 const Wrapper = sticky ? StickySurface : "div";
 ---
 
-<Wrapper data-slot="top-bar-surface" class={sticky ? undefined : "relative z-50 w-full will-change-transform"}>
+{
+  /*
+    overflow-x-clip: the surface's transform makes the toast stack part of the page, so a
+    toast sliding in from the right (2rem, past the 1–1.5rem inset) widened the page and
+    flashed a horizontal scrollbar (C31). Clipping sideways only keeps toasts and menus
+    free to hang below the bar.
+  */
+}
+<Wrapper
+  data-slot="top-bar-surface"
+  class={sticky ? "overflow-x-clip" : "relative z-50 w-full overflow-x-clip will-change-transform"}
+>
   <header {...rest} data-slot="top-bar" class={cn(topBarVariants(), className)}>
     <div data-slot="top-bar-start" class="flex min-w-0 flex-1 items-center">
       {
@@ -155,7 +159,7 @@ const Wrapper = sticky ? StickySurface : "div";
                 {crumbs.map((crumb, i) => (
                   <>
                     {i > 0 && <BreadcrumbSeparator />}
-                    <BreadcrumbItem class={cn(crumbClass, i === lastIndex && "min-w-0")}>
+                    <BreadcrumbItem class={cn(i === lastIndex && "min-w-0")}>
                       {i === lastIndex ? (
                         <span aria-current="page" class="text-foreground max-w-full min-w-0">
                           <span class="min-w-0 truncate">{crumb.label}</span>
@@ -165,7 +169,7 @@ const Wrapper = sticky ? StickySurface : "div";
                           {crumb.label}
                         </a>
                       ) : (
-                        <span class="text-muted-foreground px-1.5 py-1.5 whitespace-nowrap">{crumb.label}</span>
+                        <span class="text-muted-foreground whitespace-nowrap">{crumb.label}</span>
                       )}
                     </BreadcrumbItem>
                   </>

package/src/components/organisms/workspace/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to the workspace organisms (`organisms/workspace`) will be documented in this file.
 
 ## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **`WorkspaceIconPicker`: opening it no longer submits the form it's in.** Its avatar button is a `PopoverTrigger`, which now renders `type="button"`. In the New workspace form, opening the picker created the workspace, and Enter in a field opened the picker; the screen's `type="button"` workaround in `interactions.ts` can go.
+
+
 ## Workspace selection handover (N16)
 
 ### Added

package/src/components/popover/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to the `Popover` component family (`Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`) are documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **`PopoverTrigger` renders `type="button"`** unless you pass a `type`. It renders a `Button`, which has no type, so inside a `<form>` opening the popover submitted the form (the WorkspaceIconPicker in the New workspace form created the workspace). Plain `Button` is unchanged.
+- **`PopoverClose` renders `type="button"`** unless you pass a `type`.
+- **`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).
+
+### Storybook
+
+- "Inside a form" preview: a Popover trigger next to a submit button; the line under it counts submits.
+
+
 ## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5548-11795`)
 
 Figma documents Popover across two pages: Items (the trigger button's Default/Hover/Pressed/Focus/Disabled states) and the expanded popover (12 Side × Alignment combinations, all sharing the same panel styling).

package/src/components/popover/PopoverClose.astro

@@ -6,11 +6,12 @@ interface Props extends HTMLAttributes<"button"> {
   class?: string;
 }
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const { class: className = "", type = "button", ...rest } = Astro.props as Props;
 ---
 
 <button
   {...rest}
+  type={type}
   data-slot="popover-close"
   class={cn("", className)}
 >

package/src/components/popover/PopoverTrigger.astro

@@ -5,7 +5,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;
 };
 
@@ -13,6 +17,7 @@ const {
   class: className = "",
   asChild = false,
   variant = "outline",
+  type = "button",
   ...rest
 } = Astro.props as Props;
 ---
@@ -28,6 +33,7 @@ const {
       variant={variant}
       class={cn("", "inline-flex items-center", className)}
       {...rest as any}
+      type={(rest as any).as === "a" ? undefined : type}
     >
       <slot />
     </Button>

package/src/components/select/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to the `Select` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Fixed
+
+- **`SelectTrigger`: a `type` you pass now wins.** It always rendered `type="button"`, but after your attributes, so it overrode yours. The default is unchanged.
+
+
 ## Date 14th Sep 2026
 ## Figma alignment (node 2329-7946) + props audit
 

package/src/components/select/SelectTrigger.astro

@@ -15,8 +15,8 @@ const {
 ---
 
 <button
-  {...rest}
   type="button"
+  {...rest}
   data-slot="select-trigger"
   data-size={size}
   class={cn(

package/src/components/table/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the `Table` component family (`Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`) are documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C29 follow-up)
+
+- `TablePagination`'s page buttons and `TableEditableCell`'s Save/Cancel render `type="button"`, so they don't submit a surrounding `<form>` (same bug as C29, in buttons that aren't triggers).
+
+
 ## Date 15th Oct 2026
 ## Workspace selection handover (C13)
 

package/src/components/table/TableEditableCell.astro

@@ -177,11 +177,11 @@ const affordanceIcon =
             maxlength={maxLength}
             class={cn("min-w-24 flex-1", align === "right" && "text-right")}
           />
-          <Button data-table-action="confirm" variant="ghost" size="icon-sm" aria-label="Save" class="text-primary">
+          <Button type="button" data-table-action="confirm" variant="ghost" size="icon-sm" aria-label="Save" class="text-primary">
             <Check class="group-data-[state=saving]/cell:hidden" aria-hidden="true" />
             <Spinner class="hidden group-data-[state=saving]/cell:block" aria-label="Saving" />
           </Button>
-          <Button data-table-action="cancel" variant="ghost" size="icon-sm" aria-label="Cancel">
+          <Button type="button" data-table-action="cancel" variant="ghost" size="icon-sm" aria-label="Cancel">
             <X aria-hidden="true" />
           </Button>
         </div>

package/src/components/table/TablePagination.astro

@@ -48,10 +48,10 @@ const to = Math.min(page * pageSize, totalCount);
     </label>
     <span data-slot="table-pagination-status" class="text-foreground">Page {page} of {pageCount}</span>
     <ButtonGroup>
-      <Button variant="outline" size="icon-sm" data-table-page="first" aria-label="First page" disabled={page <= 1}><ChevronsLeft /></Button>
-      <Button variant="outline" size="icon-sm" data-table-page="prev" aria-label="Previous page" disabled={page <= 1}><ChevronLeft /></Button>
-      <Button variant="outline" size="icon-sm" data-table-page="next" aria-label="Next page" disabled={page >= pageCount}><ChevronRight /></Button>
-      <Button variant="outline" size="icon-sm" data-table-page="last" aria-label="Last page" disabled={page >= pageCount}><ChevronsRight /></Button>
+      <Button type="button" variant="outline" size="icon-sm" data-table-page="first" aria-label="First page" disabled={page <= 1}><ChevronsLeft /></Button>
+      <Button type="button" variant="outline" size="icon-sm" data-table-page="prev" aria-label="Previous page" disabled={page <= 1}><ChevronLeft /></Button>
+      <Button type="button" variant="outline" size="icon-sm" data-table-page="next" aria-label="Next page" disabled={page >= pageCount}><ChevronRight /></Button>
+      <Button type="button" variant="outline" size="icon-sm" data-table-page="last" aria-label="Last page" disabled={page >= pageCount}><ChevronsRight /></Button>
     </ButtonGroup>
   </div>
 </nav>

package/src/components/tabs/CHANGELOG.md

@@ -2,4 +2,20 @@
 
 All notable changes to the `Tabs` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Indicator on a bordered list
+
+- The `@data-slot/tabs` runtime subtracts the list's border width twice, so on a `TabsList` with a real border (e.g. `class="border"`) the indicator sat 1px off. `Tabs` now records each list's border widths (`--tabs-list-border-l`, `--tabs-list-border-t`) and both indicators add them back along the list (left when horizontal, top when vertical; the runtime measures the other axis correctly); with no border they are 0, so nothing else changes. A workaround for a runtime bug (bejamas/data-slot).
+
+
+## Date 15th Oct 2026
+## Workspace selection handover (C11)
+
+### Added
+
+- `bordered` prop on `TabsList` (default `false`): a 1px `border`-token outline round the list, sets `data-bordered`. For a tabs list on a light grey page beside bordered controls (search field, buttons), where the muted fill alone blends in (D104). The list keeps its height.
+- Drawn as an inset ring (`ring-1 ring-inset ring-border`) with 1px more padding, not a CSS `border`: same geometry, but the tabs runtime positions the indicator from `offsetLeft` and then subtracts the list's `clientLeft` (its border width) again, so with a real border (as the screen's `class="border"`) the indicator sat 1px left of its tab. Worth fixing upstream in `@data-slot/tabs`.
+- Opt-in: existing tabs lists look the same. Replaces the workspace-selection screen's `class="border"`.
+- Storybook: a "Bordered" preview.
+
 ## Unreleased