@sveltia/ui 0.73.1 → 0.74.0

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.1";
+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.1';
+export const UI_VERSION = '0.74.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.73.1",
+  "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": {