@cl-light-ds/ui 0.4.0 → 0.6.0

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"
+  {...rest}
+  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,57 @@
+# 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
+## 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).
+
+### `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.