@sveltia/ui 0.73.0 → 0.74.0

package/dist/components/calendar/calendar.svelte

@@ -49,9 +49,10 @@
   /** @type {HTMLElement | undefined} */
   let grid = $state();
 
-  // Start the keyboard cursor on the selected day. The group service tracks the cursor with the
-  // `focused` class and `aria-activedescendant`, and keeps it as the selection moves; it only
-  // needs a starting point here, where nothing has been focused yet.
+  // Keep the keyboard cursor on the selected day. The group service tracks the cursor with the
+  // `focused` class and `aria-activedescendant`, and moves both along with the selection it makes
+  // itself; this covers the starting point and a `value` set from outside, which may land in
+  // another month while the cell the cursor was on is still on the grid.
   $effect(() => {
     void value;
 
@@ -64,16 +65,17 @@
     const listbox = grid;
 
     tick().then(() => {
-      if (listbox.querySelector('.focused')) {
-        return;
-      }
-
       const option = listbox.querySelector('[role="option"][aria-selected="true"]');
 
-      if (option) {
-        option.classList.add('focused');
-        listbox.setAttribute('aria-activedescendant', option.id);
+      if (!option || option.classList.contains('focused')) {
+        return;
       }
+
+      listbox.querySelectorAll('.focused').forEach((element) => {
+        element.classList.remove('focused');
+      });
+      option.classList.add('focused');
+      listbox.setAttribute('aria-activedescendant', option.id);
     });
   });
 </script>

package/dist/components/grid/grid-body.svelte

@@ -1,21 +1,33 @@
 <!--
   @component
-  The interactive version of `<TableBody>`.
+  The interactive version of `<TableBody>`. A labelled row group can be made collapsible, in which
+  case the caption doubles as an expander button that shows or hides the rows.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
   @see https://w3c.github.io/aria/#rowgroup
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
+  import { _, isRTL } from '@sveltia/i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
 
   /**
    * @import { Snippet } from 'svelte';
+   * @import { Attachment } from 'svelte/attachments';
    */
 
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
    * @property {string} [label] Display label for the row group.
+   * @property {boolean} [collapsible] Whether the rows can be hidden with an expander in the
+   * caption. Requires `label`.
+   * @property {boolean} [expanded] Whether the rows are shown. Only applies when `collapsible`. An
+   * alias of the `aria-expanded` attribute on the expander button.
    * @property {Snippet} [children] Primary slot content.
+   * @property {Snippet} [chevronIcon] Chevron slot content for the expander.
+   * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler, called with
+   * the new `expanded` state in `detail` when the expander is toggled.
    */
 
   /**
@@ -23,14 +35,52 @@
    */
   let {
     /* eslint-disable prefer-const */
+    expanded = $bindable(true),
     class: className,
     label = '',
+    collapsible = false,
     children,
+    chevronIcon,
+    onChange,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 
   const id = $props.id();
+  const hasExpander = $derived(collapsible && !!label);
+
+  /**
+   * Toggle the `expanded` state and notify the consumer.
+   */
+  const toggle = () => {
+    expanded = !expanded;
+    onChange?.(new CustomEvent('change', { detail: { expanded } }));
+  };
+
+  /**
+   * Toggle the expander when the caption row itself is clicked. The `Grid` treats the caption as a
+   * row: the arrow keys land on it, and Enter clicks it, so this is how a keyboard user who has
+   * moved to the caption toggles the group. A click bubbling up from the button is left alone, as
+   * the button has toggled the group already.
+   * @type {Attachment}
+   */
+  const handleCaptionClick = (element) => {
+    /**
+     * Handle the `click` event on the caption row.
+     * @param {Event} event `click` event.
+     */
+    const listener = (event) => {
+      if (hasExpander && event.target === element) {
+        toggle();
+      }
+    };
+
+    element.addEventListener('click', listener);
+
+    return () => {
+      element.removeEventListener('click', listener);
+    };
+  };
 </script>
 
 <div
@@ -41,14 +91,34 @@
   aria-roledescription={_('_sui.role_descriptions.grid_body')}
 >
   {#if label}
-    <div role="row" class="row-group-caption">
+    <div role="row" class="row-group-caption" {@attach handleCaptionClick}>
       <!-- We need `colspan` here but cannot place `<th>` under `<div>`, so use a hack -->
       <svelte:element this={"th"} role="columnheader" id="{id}-label" colspan="9999">
-        {label}
+        {#if hasExpander}
+          <!--
+            The button is not a tab stop: the grid has a single one, and a keyboard user reaches
+            the caption row with the arrow keys and toggles it with Enter
+          -->
+          <Button class="expander" {label} tabindex="-1" aria-expanded={expanded} onclick={toggle}>
+            {#snippet startIcon()}
+              <span role="none" class="chevron">
+                {#if chevronIcon}
+                  {@render chevronIcon()}
+                {:else}
+                  <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
+                {/if}
+              </span>
+            {/snippet}
+          </Button>
+        {:else}
+          {label}
+        {/if}
       </svelte:element>
     </div>
   {/if}
-  {@render children?.()}
+  {#if !hasExpander || expanded}
+    {@render children?.()}
+  {/if}
 </div>
 
 <style>[role=rowgroup] {
@@ -66,4 +136,32 @@
   background-color: var(--sui-secondary-background-color);
   font-size: var(--sui-font-size-default);
   text-align: start;
+}
+[role=columnheader]:has(> :global(.expander)) {
+  padding: 0;
+}
+[role=columnheader] :global(.expander) {
+  justify-content: flex-start;
+  margin: 0;
+  border-radius: 0;
+  padding: 4px 8px 4px 4px;
+  width: 100%;
+  height: auto;
+  color: inherit;
+  font-size: inherit;
+  text-align: start;
+}
+
+.chevron {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 200ms;
+}
+:global(.expander[aria-expanded='true']) > .chevron:dir(ltr) {
+  transform: rotate(90deg);
+}
+:global(.expander[aria-expanded='true']) > .chevron:dir(rtl) {
+  transform: rotate(-90deg);
 }</style>

package/dist/components/grid/grid-body.svelte.d.ts

@@ -4,9 +4,11 @@ type GridBody = {
     $set?(props: Partial<Props & Record<string, any>>): void;
 };
 /**
- * The interactive version of `<TableBody>`.
+ * The interactive version of `<TableBody>`. A labelled row group can be made collapsible, in which
+ * case the caption doubles as an expander button that shows or hides the rows.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
  * @see https://w3c.github.io/aria/#rowgroup
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
 declare const GridBody: import("svelte").Component<{
     /**
@@ -17,11 +19,30 @@ declare const GridBody: import("svelte").Component<{
      * Display label for the row group.
      */
     label?: string | undefined;
+    /**
+     * Whether the rows can be hidden with an expander in the
+     * caption. Requires `label`.
+     */
+    collapsible?: boolean | undefined;
+    /**
+     * Whether the rows are shown. Only applies when `collapsible`. An
+     * alias of the `aria-expanded` attribute on the expander button.
+     */
+    expanded?: boolean | undefined;
     /**
      * Primary slot content.
      */
     children?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "">;
+    /**
+     * Chevron slot content for the expander.
+     */
+    chevronIcon?: Snippet<[]> | undefined;
+    /**
+     * Custom `Change` event handler, called with
+     * the new `expanded` state in `detail` when the expander is toggled.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+} & Record<string, any>, {}, "expanded">;
 type Props = {
     /**
      * The `class` attribute on the wrapper element.
@@ -31,9 +52,28 @@ type Props = {
      * Display label for the row group.
      */
     label?: string | undefined;
+    /**
+     * Whether the rows can be hidden with an expander in the
+     * caption. Requires `label`.
+     */
+    collapsible?: boolean | undefined;
+    /**
+     * Whether the rows are shown. Only applies when `collapsible`. An
+     * alias of the `aria-expanded` attribute on the expander button.
+     */
+    expanded?: boolean | undefined;
     /**
      * Primary slot content.
      */
     children?: Snippet<[]> | undefined;
+    /**
+     * Chevron slot content for the expander.
+     */
+    chevronIcon?: Snippet<[]> | undefined;
+    /**
+     * Custom `Change` event handler, called with
+     * the new `expanded` state in `detail` when the expander is toggled.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
 };
 import type { Snippet } from 'svelte';

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.73.0";
+export const UI_VERSION: "0.74.0";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.73.0';
+export const UI_VERSION = '0.74.0';

package/dist/services/group.svelte.d.ts

@@ -12,6 +12,11 @@ export class Group {
     constructor(parent: HTMLElement, { clickToSelect }?: {
         clickToSelect?: boolean | undefined;
     });
+    /**
+     * Whether {@link activate} has run. Until then, members are left as they are rendered.
+     * @type {boolean}
+     */
+    activated: boolean;
     parent: HTMLElement;
     role: string;
     multi: boolean;
@@ -56,6 +61,13 @@ export class Group {
      * items would take three tab presses to step over.
      */
     updateTabStop(): void;
+    /**
+     * Count the columns of a grid layout from where the members sit, rather than from their widths:
+     * a row of a data grid spans the full width, a tile in a grid listbox doesn’t, and a header row
+     * may have no box at all.
+     * @returns {number} Number of members per visual row, at least 1.
+     */
+    get columnCount(): number;
     /**
      * CSS selector to retrieve the members.
      * @type {string}

package/dist/services/group.svelte.js

@@ -32,6 +32,17 @@ export const normalize = (value) => {
   return value.normalize('NFD').replace(DIACRITIC_RE, '').toLocaleLowerCase();
 };
 
+/**
+ * Set an element’s `tabindex` attribute, leaving the DOM alone if it already holds that value.
+ * @param {HTMLElement} element Element.
+ * @param {number} tabIndex New value.
+ */
+const setTabIndex = (element, tabIndex) => {
+  if (element.getAttribute('tabindex') !== String(tabIndex)) {
+    element.tabIndex = tabIndex;
+  }
+};
+
 /**
  * @type {{ [role: string]: {
  * orientation: 'vertical' | 'horizontal',
@@ -49,7 +60,9 @@ const config = {
     childRoles: ['row'],
     childSelectedAttr: 'aria-selected',
     focusChild: true,
-    selectFirst: true,
+    // Rows are data, not a choice the widget has to make on the user’s behalf: nothing is
+    // selected until the user selects it. The first row is only the tab stop.
+    selectFirst: false,
     controlsPanel: false,
     rovingTabStop: 'selected',
   },
@@ -178,6 +191,12 @@ const getMenuOpener = (element) => {
  * Implement keyboard and mouse interactions for a grouping composite widget.
  */
 export class Group {
+  /**
+   * Whether {@link activate} has run. Until then, members are left as they are rendered.
+   * @type {boolean}
+   */
+  activated = false;
+
   /**
    * Memoized member lists, discarded whenever the widget’s subtree changes. See {@link #members}.
    * @type {{ all: HTMLElement[], active: HTMLElement[] } | undefined}
@@ -302,8 +321,15 @@ export class Group {
     // The members can be added, removed, disabled or hidden at any time, which is what invalidates
     // the cached lists. Only the attributes that decide membership are watched, so the group’s own
     // writes — the selected state and the roving `tabindex` — don’t needlessly discard the cache.
-    this.observer = new globalThis.MutationObserver(() => {
+    this.observer = new globalThis.MutationObserver((records) => {
       this.#memberCache = undefined;
+
+      // Members rendered after activation — rows that arrive with the data, say — start out with
+      // whatever `tabindex` their component gives them, so the roving tab stop has to be redone
+      // for them to become a single stop
+      if (this.activated && records.some(({ type }) => type === 'childList')) {
+        this.updateTabStop();
+      }
     });
 
     this.observer.observe(parent, {
@@ -326,6 +352,8 @@ export class Group {
   activate() {
     const { parent, allMembers, selected: defaultSelected } = this;
 
+    this.activated = true;
+
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
       const isSelected =
@@ -385,18 +413,55 @@ export class Group {
       return;
     }
 
+    // The stop stays where the user is. This runs again whenever the subtree changes, so a member
+    // the user has moved to must not be handed back to the selected or first one just because a
+    // cell re-rendered or a row arrived. Only when there is no single stop — at activation, where
+    // every member may render as one, or after new members have — is one picked.
+    const { activeElement } = document;
+
+    const focused = activeMembers.find(
+      (element) => element === activeElement || element.contains(activeElement),
+    );
+
+    const holders = activeMembers.filter((element) => element.getAttribute('tabindex') === '0');
+
     const tabStop =
-      this.rovingTabStop === 'selected'
-        ? (activeMembers.find(
-            (element) => element.getAttribute(this.childSelectedAttr) === 'true',
-          ) ?? activeMembers[0])
-        : activeMembers[0];
+      focused ??
+      (holders.length === 1
+        ? holders[0]
+        : ((this.rovingTabStop === 'selected'
+            ? activeMembers.find(
+                (element) => element.getAttribute(this.childSelectedAttr) === 'true',
+              )
+            : undefined) ?? activeMembers[0]));
 
     allMembers.forEach((element) => {
-      element.tabIndex = element === tabStop ? 0 : -1;
+      // Only touch the DOM when it changes; this runs on every mutation of a large widget. The
+      // attribute is what’s compared: a `<button>` reports a `tabIndex` of 0 without one, and the
+      // popup looks the tab stop up by attribute.
+      setTabIndex(element, element === tabStop ? 0 : -1);
     });
   }
 
+  /**
+   * Count the columns of a grid layout from where the members sit, rather than from their widths:
+   * a row of a data grid spans the full width, a tile in a grid listbox doesn’t, and a header row
+   * may have no box at all.
+   * @returns {number} Number of members per visual row, at least 1.
+   */
+  get columnCount() {
+    // Members without a layout box don’t occupy a column
+    const laidOut = this.allMembers.filter((member) => member.getClientRects().length);
+    const firstTop = laidOut[0]?.getBoundingClientRect().top;
+
+    const count = laidOut.findIndex(
+      (member) => Math.abs(member.getBoundingClientRect().top - firstTop) > 1,
+    );
+
+    // Everything on one visual row when nothing wraps
+    return Math.max(1, count === -1 ? laidOut.length : count);
+  }
+
   /**
    * CSS selector to retrieve the members.
    * @type {string}
@@ -728,18 +793,17 @@ export class Group {
     });
 
     if (this.focusChild) {
-      // Wait a bit before the elements are rerendered. A single frame serves the whole group;
-      // scheduling a callback per member would queue thousands of them on a large widget.
-      globalThis.requestAnimationFrame(() => {
-        affected.forEach((element) => {
-          element.tabIndex = element === newTarget ? 0 : -1;
-        });
-
-        if (targetAffected) {
-          newTarget.focus();
-          newTarget.dispatchEvent(new CustomEvent('Focus'));
-        }
+      // Done right away rather than on the next frame: a key that repeats, or a second press
+      // before the frame, has to start from the member that was just reached, which it reads
+      // from the focus
+      affected.forEach((element) => {
+        setTabIndex(element, element === newTarget ? 0 : -1);
       });
+
+      if (targetAffected) {
+        newTarget.focus();
+        newTarget.dispatchEvent(new CustomEvent('Focus'));
+      }
     }
 
     this.parent.dispatchEvent(
@@ -793,16 +857,27 @@ export class Group {
     const { allMembers, activeMembers } = this;
 
     /** @type {HTMLElement | undefined} */
+    // A field the user is typing in keeps its keys: the caret moves, the text changes. Escape and
+    // Tab still reach the group, so a menu holding a field can be left the usual ways.
+    if (
+      target !== this.parent &&
+      target.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"])') &&
+      key !== 'Escape' &&
+      key !== 'Tab'
+    ) {
+      return;
+    }
+
     const currentTarget = (() => {
       if (!this.focusChild) {
         return activeMembers.find((member) => member.matches('.focused'));
       }
 
-      if (target.matches(this.selector)) {
-        return target;
-      }
+      // A key pressed on a control inside a member, such as a checkbox in a grid row, moves from
+      // that member
+      const member = /** @type {HTMLElement | null} */ (target.closest(this.selector));
 
-      return undefined;
+      return member && this.parent.contains(member) ? member : undefined;
     })();
 
     if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
@@ -917,17 +992,31 @@ export class Group {
     let newTarget;
 
     if (this.grid) {
-      const colCount = Math.floor(this.parent.clientWidth / activeMembers[0].clientWidth);
+      const colCount = this.columnCount;
+      const lastIndex = allMembers.length - 1;
       const _isRTL = isRTL();
 
       index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
 
+      // With nothing focused yet, the arrows start from either end, as in a list
+      if (index === -1) {
+        const forward = key === 'ArrowDown' || key === (_isRTL ? 'ArrowLeft' : 'ArrowRight');
+        const backward = key === 'ArrowUp' || key === (_isRTL ? 'ArrowRight' : 'ArrowLeft');
+
+        if (forward) {
+          [newTarget] = activeMembers;
+        } else if (backward) {
+          newTarget = activeMembers[activeMembers.length - 1];
+        }
+      }
+
       if (key === 'ArrowUp' && index > 0) {
-        newTarget = allMembers[index - colCount];
+        newTarget = allMembers[Math.max(index - colCount, 0)];
       }
 
-      if (key === 'ArrowDown' && index < allMembers.length - 1) {
-        newTarget = allMembers[index + colCount];
+      if (key === 'ArrowDown' && index !== -1 && index < lastIndex) {
+        // A partial last row still gets reached
+        newTarget = allMembers[Math.min(index + colCount, lastIndex)];
       }
 
       // In RTL, ArrowLeft moves right (next), ArrowRight moves left (previous)
@@ -935,7 +1024,7 @@ export class Group {
         newTarget = allMembers[index + (_isRTL ? 1 : -1)];
       }
 
-      if (key === 'ArrowRight' && index < allMembers.length - 1) {
+      if (key === 'ArrowRight' && index !== -1 && index < lastIndex) {
         newTarget = allMembers[index + (_isRTL ? -1 : 1)];
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -57,9 +57,9 @@
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@vitest/browser-playwright": "^5.0.0",
-    "@vitest/coverage-v8": "^5.0.0",
-    "cspell": "^10.3.1",
+    "@vitest/browser-playwright": "^5.0.1",
+    "@vitest/coverage-v8": "^5.0.1",
+    "cspell": "^10.3.2",
     "eslint": "^9.39.5",
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
@@ -86,7 +86,7 @@
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.3.0",
-    "vitest": "^5.0.0",
+    "vitest": "^5.0.1",
     "vitest-browser-svelte": "^3.1.0"
   },
   "peerDependencies": {