@sveltia/ui 0.72.1 → 0.73.0

package/dist/components/table/table-foot.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -31,7 +33,7 @@
   {...restProps}
   role="rowgroup"
   class="sui table-foot {className}"
-  aria-roledescription="table foot"
+  aria-roledescription={_('_sui.role_descriptions.table_foot')}
 >
   {@render children?.()}
 </div>

package/dist/components/table/table-head.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -31,7 +33,7 @@
   {...restProps}
   role="rowgroup"
   class="sui table-head {className}"
-  aria-roledescription="table head"
+  aria-roledescription={_('_sui.role_descriptions.table_head')}
 >
   {@render children?.()}
 </div>

package/dist/components/text-editor/code-editor.svelte

@@ -32,6 +32,11 @@
    * `aria-required` attribute.
    * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` attribute.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the editable text box. Either
+   * this or `ariaLabelledby` is required for the editor to have an accessible name.
+   * @property {string} [ariaLabelledby] The `aria-labelledby` attribute on the editable text box.
+   * @property {string} [ariaDescribedby] The `aria-describedby` attribute on the editable text
+   * box.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -49,11 +54,27 @@
     readonly = false,
     required = false,
     invalid = false,
+    ariaLabel = undefined,
+    ariaLabelledby = undefined,
+    ariaDescribedby = undefined,
+    'aria-label': ariaLabelAttr = undefined,
+    'aria-labelledby': ariaLabelledbyAttr = undefined,
+    'aria-describedby': ariaDescribedbyAttr = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 
+  /**
+   * Labelling attributes for the editable text box. They’re pulled out of `restProps` because the
+   * rest goes on the presentational wrapper, where ARIA would ignore them.
+   */
+  const labelAttrs = $derived({
+    'aria-label': ariaLabel ?? ariaLabelAttr,
+    'aria-labelledby': ariaLabelledby ?? ariaLabelledbyAttr,
+    'aria-describedby': ariaDescribedby ?? ariaDescribedbyAttr,
+  });
+
   const editorStore = createEditorStore();
 
   editorStore.config = {
@@ -107,7 +128,7 @@
   {#if showLanguageSwitcher}
     <CodeEditorToolbar {disabled} {readonly} />
   {/if}
-  <LexicalRoot {hidden} {disabled} {readonly} {required} {invalid} />
+  <LexicalRoot {...labelAttrs} {hidden} {disabled} {readonly} {required} {invalid} />
 </div>
 
 {#if editorStore.showConverterError}

package/dist/components/text-editor/code-editor.svelte.d.ts

@@ -49,6 +49,20 @@ declare const CodeEditor: import("svelte").Component<{
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the editable text box. Either
+     * this or `ariaLabelledby` is required for the editor to have an accessible name.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * The `aria-labelledby` attribute on the editable text box.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * The `aria-describedby` attribute on the editable text
+     * box.
+     */
+    ariaDescribedby?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -99,6 +113,20 @@ type Props = {
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the editable text box. Either
+     * this or `ariaLabelledby` is required for the editor to have an accessible name.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * The `aria-labelledby` attribute on the editable text box.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * The `aria-describedby` attribute on the editable text
+     * box.
+     */
+    ariaDescribedby?: string | undefined;
     /**
      * Primary slot content.
      */

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.72.1";
+export const UI_VERSION: "0.73.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.72.1';
+export const UI_VERSION = '0.73.0';

package/dist/components/text-editor/text-editor.svelte

@@ -41,6 +41,11 @@
    * `aria-required` attribute.
    * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` attribute.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the editable text box. Either
+   * this or `ariaLabelledby` is required for the editor to have an accessible name.
+   * @property {string} [ariaLabelledby] The `aria-labelledby` attribute on the editable text box.
+   * @property {string} [ariaDescribedby] The `aria-describedby` attribute on the editable text
+   * box.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -62,11 +67,27 @@
     readonly = false,
     required = false,
     invalid = false,
+    ariaLabel = undefined,
+    ariaLabelledby = undefined,
+    ariaDescribedby = undefined,
+    'aria-label': ariaLabelAttr = undefined,
+    'aria-labelledby': ariaLabelledbyAttr = undefined,
+    'aria-describedby': ariaDescribedbyAttr = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 
+  /**
+   * Labelling attributes for the editable text box. They’re pulled out of `restProps` because the
+   * rest goes on the presentational wrapper, where ARIA would ignore them.
+   */
+  const labelAttrs = $derived({
+    'aria-label': ariaLabel ?? ariaLabelAttr,
+    'aria-labelledby': ariaLabelledby ?? ariaLabelledbyAttr,
+    'aria-describedby': ariaDescribedby ?? ariaDescribedbyAttr,
+  });
+
   const editorStore = createEditorStore();
 
   // svelte-ignore state_referenced_locally
@@ -115,6 +136,7 @@
 <div {...restProps} role="none" class="sui text-editor" class:flex {hidden}>
   <TextEditorToolbar {disabled} {readonly} />
   <LexicalRoot
+    {...labelAttrs}
     hidden={!editorStore.useRichText || hidden}
     {disabled}
     {readonly}
@@ -122,6 +144,7 @@
     {invalid}
   />
   <TextArea
+    {...labelAttrs}
     autoResize={true}
     bind:value={editorStore.inputValue}
     {useEmojiAutocomplete}

package/dist/components/text-editor/text-editor.svelte.d.ts

@@ -67,6 +67,20 @@ declare const TextEditor: import("svelte").Component<{
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the editable text box. Either
+     * this or `ariaLabelledby` is required for the editor to have an accessible name.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * The `aria-labelledby` attribute on the editable text box.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * The `aria-describedby` attribute on the editable text
+     * box.
+     */
+    ariaDescribedby?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -135,6 +149,20 @@ type Props = {
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the editable text box. Either
+     * this or `ariaLabelledby` is required for the editor to have an accessible name.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * The `aria-labelledby` attribute on the editable text box.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * The `aria-describedby` attribute on the editable text
+     * box.
+     */
+    ariaDescribedby?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/text-field/number-input.svelte

@@ -228,7 +228,7 @@
   filter: grayscale(0) opacity(1);
 }
 .number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) :global(*) {
-  filter: grayscale(1) opacity(0.35);
+  filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
 }
 .number-input :global(.text-input) {
   flex: auto;
@@ -239,8 +239,8 @@
 
 .buttons {
   display: flex;
-  flex-direction: column;
-  width: 24px;
+  flex-direction: row;
+  width: 48px;
   height: var(--sui-textbox-height);
 }
 .buttons :global(button) {
@@ -248,26 +248,16 @@
   margin: 0 !important;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
-  width: 100%;
-  height: 50%;
+  width: 50%;
+  height: 100%;
+  border-inline-end-width: 0;
 }
 .buttons :global(button:first-of-type) {
-  border-block-start-width: 1px;
-  border-block-end-width: 0;
-  border-inline-end-width: 0;
-  border-inline-start-width: 1px;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
-  border-end-start-radius: 0;
 }
 .buttons :global(button:last-of-type) {
-  border-block-start-width: 0;
-  border-block-end-width: 1px;
-  border-inline-end-width: 0;
-  border-inline-start-width: 1px;
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  border-radius: 0;
 }
 .buttons :global(button) :global(.icon) {
   font-size: 20px;

package/dist/components/text-field/search-bar.svelte

@@ -96,6 +96,7 @@
   {#if value}
     <Button
       iconic
+      disabled={disabled || readonly}
       aria-label={_('_sui.clear')}
       aria-controls={id}
       onclick={() => {

package/dist/components/text-field/text-input.svelte

@@ -189,7 +189,7 @@ input:focus {
   background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }
 input:read-only {
-  color: var(--sui-tertiary-foreground-color);
+  color: var(--sui-secondary-foreground-color);
   border-color: var(--sui-textbox-border-color) !important;
 }
 input:is(:disabled, :read-only) {

package/dist/components/toast/toast.svelte

@@ -18,7 +18,8 @@
    * the toast will be reset, meaning the same toast can be displayed for a longer period of time.
    * @property {boolean} [show] Whether to show the toast.
    * @property {number} [duration] Duration to automatically hide the toast. Use `0` to hide it
-   * manually from the consumer.
+   * manually from the consumer. The countdown is held while the pointer is over the toast or the
+   * focus is inside it, and starts over once it leaves.
    * @property {ToastPosition} [position] Position of the toast.
    * @property {Snippet} [children] Primary slot content.
    */
@@ -53,6 +54,20 @@
    * @type {number}
    */
   let timerId = $state(0);
+  /**
+   * Whether the pointer is over the toast or the focus is inside it. The auto-hide countdown is
+   * held while it is, so a toast with a control in it can’t vanish from under the user (WCAG
+   * 2.2.1).
+   * @type {boolean}
+   */
+  let held = $state(false);
+  /**
+   * Whether the content is in the DOM tree. It lags behind {@link show} on the way out, so the
+   * toast can fade before the content goes. On the way in, the content is inserted rather than
+   * unhidden: a live region is only announced when its content arrives.
+   * @type {boolean}
+   */
+  let rendered = $state(false);
 
   onMount(() => {
     popover =
@@ -115,16 +130,34 @@
     }
   });
 
+  $effect(() => {
+    if (show) {
+      rendered = true;
+
+      return undefined;
+    }
+
+    // Matches the opacity transition below
+    const timer = globalThis.setTimeout(() => {
+      rendered = false;
+    }, 250);
+
+    return () => {
+      globalThis.clearTimeout(timer);
+    };
+  });
+
   $effect(() => {
     void id;
     void show;
     void duration;
+    void held;
 
     untrack(() => {
       globalThis.clearTimeout(timerId);
     });
 
-    if (show && duration) {
+    if (show && duration && !held) {
       timerId = /** @type {number} */ (
         /** @type {unknown} */ (
           globalThis.setTimeout(() => {
@@ -138,8 +171,27 @@
 
 <div bind:this={popoverBase} role="none" class="sui toast-base"></div>
 
-<div {...restProps} bind:this={toast} class={['sui', 'toast', position]} aria-hidden={!show}>
-  {@render children?.()}
+<div
+  {...restProps}
+  bind:this={toast}
+  class={['sui', 'toast', position]}
+  aria-hidden={!show}
+  onpointerenter={() => {
+    held = true;
+  }}
+  onpointerleave={() => {
+    held = false;
+  }}
+  onfocusin={() => {
+    held = true;
+  }}
+  onfocusout={(event) => {
+    held = !!event.relatedTarget && !!toast?.contains(/** @type {Node} */ (event.relatedTarget));
+  }}
+>
+  {#if rendered}
+    {@render children?.()}
+  {/if}
 </div>
 
 <style>.toast-base {
@@ -178,10 +230,12 @@
   opacity: 1;
   transition-duration: 250ms;
   will-change: opacity;
+  pointer-events: auto;
 }
 .toast[aria-hidden=true] {
   display: block;
   opacity: 0;
+  pointer-events: none;
 }
 .toast.top-left {
   inset-block-start: 0;

package/dist/components/toast/toast.svelte.d.ts

@@ -20,7 +20,8 @@ declare const Toast: import("svelte").Component<{
     show?: boolean | undefined;
     /**
      * Duration to automatically hide the toast. Use `0` to hide it
-     * manually from the consumer.
+     * manually from the consumer. The countdown is held while the pointer is over the toast or the
+     * focus is inside it, and starts over once it leaves.
      */
     duration?: number | undefined;
     /**
@@ -44,7 +45,8 @@ type Props = {
     show?: boolean | undefined;
     /**
      * Duration to automatically hide the toast. Use `0` to hide it
-     * manually from the consumer.
+     * manually from the consumer. The countdown is held while the pointer is over the toast or the
+     * focus is inside it, and starts over once it leaves.
      */
     duration?: number | undefined;
     /**

package/dist/components/tree/tree-item.svelte

@@ -211,8 +211,7 @@
   align-items: center;
   gap: 4px;
   border-radius: var(--sui-tree-item-border-radius, var(--sui-option-border-radius, 4px));
-  padding: var(--sui-tree-item-padding, 0 8px 0 4px);
-  padding-inline-start: calc((var(--sui-tree-item-level, 1) - 1) * var(--sui-tree-item-indent, 16px) + 4px);
+  padding: var(--sui-tree-item-padding, var(--sui-option-padding, 0 8px));
   min-height: var(--sui-tree-item-height, var(--sui-option-height));
   cursor: pointer;
   transition: background-color 200ms;
@@ -223,6 +222,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-inline-start: calc((var(--sui-tree-item-level, 1) - 1) * var(--sui-tree-item-indent, 16px));
   width: var(--sui-tree-item-chevron-size, 24px);
   height: var(--sui-tree-item-chevron-size, 24px);
   transition: transform 200ms;
@@ -231,6 +231,7 @@
 .label {
   flex: auto;
   overflow: hidden;
+  padding: 0 4px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }