@sveltia/ui 0.73.1 → 0.75.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/resizable-pane/resizable-handle.svelte

@@ -92,28 +92,14 @@
   let keyResizing = $state(false);
 
   /**
-   * The pane group container's size in pixels, used for px→% conversion. Measured once when a drag
-   * begins rather than on every pointer move: reading `clientWidth` forces the browser to lay the
-   * page out, which is the last thing wanted in the middle of a drag, and the container cannot
-   * change size while the pointer holding it is down.
+   * The space the panes share in pixels, used for px→% conversion. Measured once when a drag
+   * begins rather than on every pointer move: measuring forces the browser to lay the page out,
+   * which is the last thing wanted in the middle of a drag, and the group cannot change size while
+   * the pointer holding it is down.
    * @type {number}
    */
   let containerSize = 0;
 
-  /**
-   * Measure the pane group container element's size in pixels.
-   * @returns {number} Container size in pixels.
-   */
-  const measureContainerSize = () => {
-    const container = element?.closest('.resizable-pane-group');
-
-    // The handle can’t be rendered outside a group; see the context check above
-    /* v8 ignore next */
-    if (!container) return 0;
-
-    return isHorizontal ? container.clientWidth : container.clientHeight;
-  };
-
   /**
    * Handle pointer move events (attached to `document` while dragging).
    * @param {PointerEvent} event `pointermove` event.
@@ -180,7 +166,7 @@
     dragging = true;
     startScreenPos = isHorizontal ? screenX : screenY;
     targetPointerId = pointerId;
-    containerSize = measureContainerSize();
+    containerSize = ctx.measurePaneSpace();
     element?.setPointerCapture(pointerId);
 
     onResizeStart?.();

package/dist/components/resizable-pane/resizable-pane-group.svelte

@@ -73,16 +73,40 @@
 
   let _handleCount = 0;
 
+  /**
+   * Measure the space the panes share: the group’s size along its direction, less the handles
+   * between them. Every pane size is a percentage of this, so the panes and handles together fill
+   * the group exactly. Were the percentages of the whole group, the handles would push the last
+   * pane past the edge; the overflow is hidden, but the group could still be scrolled by that much
+   * whenever something inside is scrolled into view, and everything would shift out of place.
+   * @returns {number} Space in pixels, or `0` if the group isn’t laid out.
+   */
+  const measurePaneSpace = () => {
+    if (!element) {
+      return 0;
+    }
+
+    const isHorizontal = direction === 'horizontal';
+    const groupSize = isHorizontal ? element.clientWidth : element.clientHeight;
+
+    const handleSize = [...element.querySelectorAll(':scope > .resizable-handle')].reduce(
+      (total, handle) =>
+        total +
+        (isHorizontal
+          ? /** @type {HTMLElement} */ (handle).offsetWidth
+          : /** @type {HTMLElement} */ (handle).offsetHeight),
+      0,
+    );
+
+    return Math.max(groupSize - handleSize, 0);
+  };
+
   /**
    * Get the sizes the pane lengths are relative to.
    * @returns {import('./sizing.js').SizeEnvironment} Environment.
    */
   const getSizeEnvironment = () => ({
-    containerSize: element
-      ? direction === 'horizontal'
-        ? element.clientWidth
-        : element.clientHeight
-      : 0,
+    containerSize: measurePaneSpace(),
     viewportWidth: window.innerWidth,
     viewportHeight: window.innerHeight,
   });
@@ -186,6 +210,7 @@
       resize,
       toggleCollapse,
       getPaneConstraints,
+      measurePaneSpace,
       paneDefs: _paneDefs,
     }),
     /* eslint-enable jsdoc/require-jsdoc */

package/dist/components/resizable-pane/resizable-pane.svelte

@@ -13,9 +13,10 @@
 
   /**
    * @typedef {object} Props
-   * @property {number | string} [defaultSize] Default size. Numbers are percentages (0-100);
-   * strings can be any CSS length/percentage such as `240px`, `20%` or `20dvw`. Panes without
-   * `defaultSize` share the remaining space equally.
+   * @property {number | string} [defaultSize] Default size. Numbers are percentages (0-100) of
+   * the space the panes share, which is the group less its handles; strings can be any CSS
+   * length/percentage such as `240px`, `20%` or `20dvw`. Panes without `defaultSize` share the
+   * remaining space equally.
    * @property {number | string} [minSize] Minimum size. Numbers are percentages, strings are CSS
    * lengths. Defaults to `0`.
    * @property {number | string} [maxSize] Maximum size. Numbers are percentages, strings are CSS
@@ -55,6 +56,12 @@
 
   const direction = $derived(ctx.direction);
   const size = $derived(ctx.sizes[paneIndex]);
+  /**
+   * The size as a flex basis. The percentages are of the space the panes share rather than of the
+   * group, while a flex basis is a percentage of the group, so the panes are made shrinkable: the
+   * handles then take their room from the panes in proportion to their sizes, which works out to
+   * exactly the intended percentages, and the group is never overflowed.
+   */
   const sizeStyle = $derived.by(() => {
     if (size !== undefined) {
       return `${size}%`;
@@ -81,7 +88,7 @@
   class="sui resizable-pane {className}"
   style:flex-basis={sizeStyle}
   style:flex-grow="0"
-  style:flex-shrink="0"
+  style:flex-shrink="1"
   style:overflow-x={direction === 'horizontal' ? 'auto' : undefined}
   style:overflow-y={direction === 'vertical' ? 'auto' : undefined}
 >

package/dist/components/resizable-pane/resizable-pane.svelte.d.ts

@@ -9,9 +9,10 @@ type ResizablePane = {
  */
 declare const ResizablePane: import("svelte").Component<{
     /**
-     * Default size. Numbers are percentages (0-100);
-     * strings can be any CSS length/percentage such as `240px`, `20%` or `20dvw`. Panes without
-     * `defaultSize` share the remaining space equally.
+     * Default size. Numbers are percentages (0-100) of
+     * the space the panes share, which is the group less its handles; strings can be any CSS
+     * length/percentage such as `240px`, `20%` or `20dvw`. Panes without `defaultSize` share the
+     * remaining space equally.
      */
     defaultSize?: string | number | undefined;
     /**
@@ -42,9 +43,10 @@ declare const ResizablePane: import("svelte").Component<{
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
-     * Default size. Numbers are percentages (0-100);
-     * strings can be any CSS length/percentage such as `240px`, `20%` or `20dvw`. Panes without
-     * `defaultSize` share the remaining space equally.
+     * Default size. Numbers are percentages (0-100) of
+     * the space the panes share, which is the group less its handles; strings can be any CSS
+     * length/percentage such as `240px`, `20%` or `20dvw`. Panes without `defaultSize` share the
+     * remaining space equally.
      */
     defaultSize?: string | number | undefined;
     /**

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.75.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.75.0';

package/dist/locales/he.yaml

@@ -0,0 +1,141 @@
+# --- NOTES ---
+# 1. Prefer verbal nouns (like סגירה) over imperatives (like סגור)
+# 2. Prefer neologisms (like סמלון) over loanwords (like אימוג'י)
+# 3. Add a hyphen between Hebrew prefixes and English words (like ב-Markdown)
+
+# Dialog action button labels
+ok: אישור
+cancel: ביטול
+close: סגירה
+
+# Button to clear content, e.g. search input or calendar date
+clear: ניקוי
+
+# Text editor dialog buttons for link/image insertion
+insert: הוספה
+update: עדכון
+remove: הסרה
+
+# Combobox dropdown toggle button aria-labels
+collapse: צמצום
+expand: הרחבה
+
+# Infobar/toast dismiss button label
+dismiss: סגירה
+
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: שגיאה
+  warning: אזהרה
+  info: מידע
+  success: הצלחה
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: קבוצת גילוי
+  option_group: קבוצת אפשרויות
+  menu_item_group: קבוצת פריטי תפריט
+  checkbox_group: קבוצת תיבות סימון
+  table_head: כותרת טבלה
+  table_body: גוף טבלה
+  table_foot: תחתית טבלה
+  grid_head: כותרת רשת
+  grid_body: גוף רשת
+  grid_foot: תחתית רשת
+
+# Emoji suggestion listbox aria-label, shared by the text fields and the text editor
+emoji_suggestions: הצעות סמלונים
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: שנה
+  previous_decade: העשור הקודם
+  next_decade: העשור הבא
+  month: חודש
+  previous_month: החודש הקודם
+  next_month: החודש הבא
+  # “Today” button label in footer
+  today: היום
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: אפשרויות {$name}
+  # Dropdown toggle aria-label
+  more_options: אפשרויות נוספות
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: בחירת אפשרות…
+  # Filter input aria-label
+  filter_options: סינון
+  # Empty state message when filter has no matches
+  no_matching_options: לא נמצאו אפשרויות תואמות
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: הגדלה
+  decrease: הקטנה
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: הצגת סיסמה
+  hide_password: הסתרת סיסמה
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: הצגת מפתח סודי
+  hide_secret: הסתרת מפתח סודי
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: אפשרויות שנבחרו
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: הסרת {$name}
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: עורך טקסט
+  code_editor: עורך קוד
+  # Block style menu button and menu aria-labels
+  text_style_options: אפשרויות עיצוב טקסט
+  show_text_style_options: הצגת אפשרויות עיצוב טקסט
+  # Block style menu items
+  paragraph: פסקה
+  heading_1: כותרת 1
+  heading_2: כותרת 2
+  heading_3: כותרת 3
+  heading_4: כותרת 4
+  heading_5: כותרת 5
+  heading_6: כותרת 6
+  bulleted_list: רשימת תבליטים
+  numbered_list: רשימה ממוספרת
+  blockquote: ציטוט
+  code_block: קטע קוד
+  # Inline style button aria-labels
+  bold: הדגשה
+  italic: הטיה
+  strikethrough: קו חוצה
+  code: קוד
+  link: קישור
+  # Link dialog title
+  insert_link: הוספת קישור
+  update_link: עדכון קישור
+  # Link dialog input field labels
+  text: טקסט
+  url: כתובת קישור
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: עריכה ב-Markdown
+  # Error message when rich text conversion fails
+  converter_error: לא ניתן להפעיל מצב טקסט עשיר. יש להשתמש בעורך טקסט פשוט במקום.
+  # Language selector aria-label
+  language: שפה
+  # Plain text mode option in language selector
+  plain_text: טקסט פשוט