@sveltia/ui 0.72.2 → 0.73.0

package/dist/components/alert/alert.svelte

@@ -5,6 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import Icon from '../icon/icon.svelte';
 
   /**
@@ -13,8 +14,10 @@
 
   /**
    * @typedef {object} Props
-   * @property {'error' | 'warning' | 'info' | 'success'} status Alert status.
-   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness.
+   * @property {'error' | 'warning' | 'info' | 'success'} status Alert status. Errors and warnings
+   * are `role="alert"` and interrupt; information and success are `role="status"` and wait.
+   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness. Defaults to
+   * `assertive` for an alert and `polite` for a status.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [icon] Icon slot content.
    */
@@ -25,24 +28,45 @@
   let {
     /* eslint-disable prefer-const */
     status,
-    ariaLive = 'assertive',
+    ariaLive = undefined,
     children,
     icon,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
+
+  const role = $derived(status === 'error' || status === 'warning' ? 'alert' : 'status');
 </script>
 
-<div {...restProps} role="alert" class="sui alert {status}" aria-live={ariaLive}>
+<!--
+  The colour and icon tell sighted users how serious the message is; the icon is hidden from
+  assistive technology, so the status is also spelled out for screen readers, off screen.
+-->
+<div
+  {...restProps}
+  {role}
+  class="sui alert {status}"
+  aria-live={ariaLive ?? (role === 'alert' ? 'assertive' : 'polite')}
+>
   {#if icon}
     {@render icon()}
   {:else}
     <Icon name={status === 'success' ? 'check_circle' : status} />
   {/if}
+  <span class="status-label">{_(`_sui.alert.${status}`)}</span>
   {@render children?.()}
 </div>
 
-<style>.alert {
+<style>.status-label {
+  position: absolute;
+  overflow: hidden;
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+}
+
+.alert {
   display: flex;
   align-items: center;
   gap: var(--gap, 8px);

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

@@ -10,11 +10,13 @@ type Alert = {
  */
 declare const Alert: import("svelte").Component<{
     /**
-     * Alert status.
+     * Alert status. Errors and warnings
+     * are `role="alert"` and interrupt; information and success are `role="status"` and wait.
      */
     status: "error" | "warning" | "info" | "success";
     /**
-     * ARIA live region politeness.
+     * ARIA live region politeness. Defaults to
+     * `assertive` for an alert and `polite` for a status.
      */
     ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
@@ -28,11 +30,13 @@ declare const Alert: import("svelte").Component<{
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
-     * Alert status.
+     * Alert status. Errors and warnings
+     * are `role="alert"` and interrupt; information and success are `role="status"` and wait.
      */
     status: "error" | "warning" | "info" | "success";
     /**
-     * ARIA live region politeness.
+     * ARIA live region politeness. Defaults to
+     * `assertive` for an alert and `polite` for a status.
      */
     ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**

package/dist/components/alert/infobar.svelte

@@ -11,8 +11,11 @@
    * @typedef {object} Props
    * @property {boolean} [show] Whether to show the toast.
    * @property {boolean} [dismissible] Whether to show the close button.
-   * @property {'error' | 'warning' | 'info' | 'success'} [status] Information status.
-   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness.
+   * @property {'error' | 'warning' | 'info' | 'success'} [status] Information status. Errors and
+   * warnings are `role="alert"` and interrupt; information and success are `role="status"` and
+   * wait.
+   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness. Defaults to
+   * `assertive` for an alert and `polite` for a status.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [icon] Icon slot content.
    * @property {() => void} [onDismiss] Callback invoked when the close button is clicked.
@@ -24,22 +27,26 @@
     show = $bindable(true),
     dismissible = true,
     status = 'info',
-    ariaLive = 'polite',
+    ariaLive = undefined,
     children = undefined,
     icon = undefined,
     onDismiss,
     /* eslint-enable prefer-const */
   } = $props();
+
+  const role = $derived(status === 'error' || status === 'warning' ? 'alert' : 'status');
 </script>
 
 {#if show}
   <div role="none" class={['infobar', status]}>
-    <div role="alert" class="message" aria-live={ariaLive}>
+    <!-- The status is spelled out off screen for screen readers; see `<Alert>` -->
+    <div {role} class="message" aria-live={ariaLive ?? (role === 'alert' ? 'assertive' : 'polite')}>
       {#if icon}
         {@render icon()}
       {:else}
         <Icon name={status === 'success' ? 'check_circle' : status} />
       {/if}
+      <span class="status-label">{_(`_sui.alert.${status}`)}</span>
       {@render children?.()}
     </div>
     {#if dismissible}
@@ -61,7 +68,16 @@
   </div>
 {/if}
 
-<style>.infobar {
+<style>.status-label {
+  position: absolute;
+  overflow: hidden;
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+}
+
+.infobar {
   flex: none;
   display: flex;
   align-items: center;

package/dist/components/alert/infobar.svelte.d.ts

@@ -13,11 +13,14 @@ declare const Infobar: import("svelte").Component<{
      */
     dismissible?: boolean | undefined;
     /**
-     * Information status.
+     * Information status. Errors and
+     * warnings are `role="alert"` and interrupt; information and success are `role="status"` and
+     * wait.
      */
     status?: "error" | "warning" | "info" | "success" | undefined;
     /**
-     * ARIA live region politeness.
+     * ARIA live region politeness. Defaults to
+     * `assertive` for an alert and `polite` for a status.
      */
     ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
@@ -43,11 +46,14 @@ type Props = {
      */
     dismissible?: boolean | undefined;
     /**
-     * Information status.
+     * Information status. Errors and
+     * warnings are `role="alert"` and interrupt; information and success are `role="status"` and
+     * wait.
      */
     status?: "error" | "warning" | "info" | "success" | undefined;
     /**
-     * ARIA live region politeness.
+     * ARIA live region politeness. Defaults to
+     * `assertive` for an alert and `polite` for a status.
      */
     ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**

package/dist/components/button/button.svelte

@@ -51,6 +51,10 @@
 </script>
 
 <!--
+  `aria-readonly` is only rendered when it applies: the attribute isn’t supported on the `button`
+  role (or `option`, `tab` and `menuitem`, which also wrap this component), and Svelte would
+  otherwise serialize `false` as the literal string "false".
+
   The key shortcut handler is attached only when there are shortcuts to bind. A falsy value counts
   as no attachment at all, which saves an effect per button — and both `<Option>` and `<MenuItem>`
   wrap one, so a long list would otherwise pay for an effect per item that has nothing to do.
@@ -70,7 +74,7 @@
   {role}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  aria-readonly={readonly}
+  aria-readonly={readonly || undefined}
   aria-pressed={pressed}
   data-type={valueType}
   data-name={name}

package/dist/components/button/select-button-group.svelte

@@ -101,7 +101,7 @@
   filter: grayscale(0) opacity(1);
 }
 .select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) :global(*) {
-  filter: grayscale(1) opacity(0.35);
+  filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
 }
 
 .inner {

package/dist/components/calendar/calendar.d.ts

@@ -1,7 +1,4 @@
-/**
- * Date helpers behind `<Calendar>`, kept apart from the component so the grid can be tested without
- * rendering anything.
- */
+export function formatDate(value: Date, options: Intl.DateTimeFormatOptions): string;
 /**
  * Number of cells in the day grid: six weeks, enough to show any month in full from the Sunday on
  * or before its first day.

package/dist/components/calendar/calendar.js

@@ -1,8 +1,25 @@
+import { date as formatLocaleDate } from '@sveltia/i18n';
+
 /**
  * Date helpers behind `<Calendar>`, kept apart from the component so the grid can be tested without
  * rendering anything.
  */
 
+/**
+ * Format a date in the current locale. Falls back to the browser’s locale if `@sveltia/i18n` has
+ * not been initialized yet, in which case its formatter has no locale to work with and throws.
+ * @param {Date} value Date to format.
+ * @param {Intl.DateTimeFormatOptions} options Formatting options.
+ * @returns {string} Formatted date.
+ */
+export const formatDate = (value, options) => {
+  try {
+    return formatLocaleDate(value, options);
+  } catch {
+    return value.toLocaleDateString(undefined, options);
+  }
+};
+
 /**
  * Number of cells in the day grid: six weeks, enough to show any month in full from the Sunday on
  * or before its first day.

package/dist/components/calendar/calendar.svelte

@@ -4,12 +4,15 @@
 -->
 <script>
   import { _, isRTL } from '@sveltia/i18n';
+  import { tick } from 'svelte';
+  import { activateGroup } from '../../services/group.svelte.js';
   import Button from '../button/button.svelte';
   import Divider from '../divider/divider.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
   import {
     addMonths,
+    formatDate,
     getCalendarDays,
     getFirstDayOfMonth,
     isSameDay,
@@ -37,16 +40,48 @@
    */
   let firstDay = $derived(getFirstDayOfMonth(date));
   const dayList = $derived(getCalendarDays(firstDay).map((day) => ({ day })));
+  /**
+   * Month and year being displayed, in the current locale. It’s the caption of the day grid as
+   * well as the label of the month switcher.
+   */
+  const monthLabel = $derived(formatDate(firstDay, { year: 'numeric', month: 'short' }));
+  const id = $props.id();
+  /** @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.
+  $effect(() => {
+    void value;
+
+    // The grid is bound before any effect runs
+    /* v8 ignore next */
+    if (!grid) {
+      return;
+    }
+
+    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);
+      }
+    });
+  });
 </script>
 
 <div role="group">
   <input type="hidden" bind:value />
   <div role="none" class="header">
-    <Button
-      variant="ghost"
-      label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
-      aria-haspopup="dialog"
-    >
+    <Button variant="ghost" label={monthLabel} aria-haspopup="dialog">
       {#snippet endIcon()}
         <Icon name="arrow_drop_down" class="small-arrow" />
       {/snippet}
@@ -115,13 +150,31 @@
       <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
     </Button>
   </div>
-  <div role="listbox" class="grid">
-    {#each dayList.slice(0, 7) as { day } (day)}
+  <!--
+    The day grid is a listbox laid out as a grid, so the group service moves through it with all
+    four arrow keys. Each day is named by its full date: the digit alone means nothing out of
+    context. The days are UTC-based, like the `value`, so the names are formatted the same way.
+    The cells are keyed by date string rather than by `Date` object, which is recreated on every
+    update: a day that stays on the grid when the month changes — the last days of the previous
+    month, say — keeps its element, and with it the keyboard cursor.
+  -->
+  <div
+    bind:this={grid}
+    role="listbox"
+    class="grid"
+    aria-label={monthLabel}
+    onChange={(/** @type {CustomEvent} */ event) => {
+      value = event.detail.value;
+    }}
+    {@attach activateGroup()}
+  >
+    {#each dayList.slice(0, 7) as { day } (day.getUTCDay())}
       <div role="none" class="weekday">
-        {day.toLocaleDateString('en', { weekday: 'narrow' })}
+        {formatDate(day, { weekday: 'narrow' })}
       </div>
     {/each}
-    {#each dayList as { day } (day)}
+    {#each dayList as { day } (toDateString(day))}
+      {@const dateString = toDateString(day)}
       <div
         role="none"
         class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
@@ -129,9 +182,12 @@
       >
         <Button
           role="option"
-          aria-selected={false}
+          id="{id}-{dateString}"
+          value={dateString}
+          aria-label={formatDate(day, { dateStyle: 'full', timeZone: 'UTC' })}
+          aria-selected={dateString === value}
           onclick={() => {
-            value = toDateString(day);
+            value = dateString;
           }}
         >
           {day.getUTCDate()}

package/dist/components/checkbox/checkbox-group.svelte

@@ -3,6 +3,8 @@
   The layout container of `<Checkbox>`es.
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -42,7 +44,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  aria-roledescription="checkbox group"
+  aria-roledescription={_('_sui.role_descriptions.checkbox_group')}
   aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>

package/dist/components/checkbox/checkbox.svelte

@@ -36,7 +36,7 @@
    */
   let {
     /* eslint-disable prefer-const */
-    checked = $bindable(),
+    checked = $bindable(false),
     class: className,
     name = undefined,
     value = undefined,
@@ -167,6 +167,8 @@
   align-items: center;
   gap: 8px;
   margin: var(--sui-focus-ring-width);
+  min-width: 24px;
+  min-height: 24px;
   color: var(--sui-control-foreground-color);
   font-family: var(--sui-control-font-family);
   font-size: var(--sui-control-font-size);

package/dist/components/dialog/dialog.svelte

@@ -24,6 +24,7 @@
     open = $bindable(false),
     value = $bindable(''),
     title,
+    ariaLabelledby = undefined,
     role = 'dialog',
     size = 'medium',
     class: className,
@@ -53,6 +54,14 @@
    * @type {string}
    */
   const id = $props.id();
+
+  /**
+   * Accessible name for the `<dialog>`. The built-in header renders the title in an element the
+   * dialog can point at; with a custom header the title is only text, so it becomes `aria-label`
+   * unless the consumer names the labelling element.
+   */
+  const labelledby = $derived(ariaLabelledby ?? (!header && title ? `${id}-title` : undefined));
+  const label = $derived(labelledby ? undefined : title || undefined);
   /**
    * A reference to the modal component.
    * @type {Modal | undefined}
@@ -109,8 +118,8 @@
   {role}
   {id}
   class="dialog"
-  aria-label={header ? undefined : title}
-  aria-labelledby={header ? title : `${id}-title`}
+  aria-label={label}
+  aria-labelledby={labelledby}
   aria-describedby="{id}-body"
   bind:open
   showBackdrop
@@ -191,6 +200,9 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  border-width: var(--sui-dialog-content-border-width, var(--sui-modal-border-width, 0));
+  border-style: solid;
+  border-color: var(--sui-dialog-content-border-color, var(--sui-primary-border-color));
   border-radius: var(--sui-dialog-content-border-radius, 4px);
   max-width: calc(100dvw - var(--sui-dialog-content-margin, 16px) * 2);
   background-color: var(--sui-dialog-content-background-color, var(--sui-secondary-background-color-translucent));

package/dist/components/dialog/prompt-dialog.svelte

@@ -23,7 +23,8 @@
   /**
    * @typedef {object} Props
    * @property {string} [value] Value entered on the textbox.
-   * @property {object} [textboxAttrs] Extra attributes for the `<TextInput>`.
+   * @property {object} [textboxAttrs] Extra attributes for the `<TextInput>`. The text box is
+   * labelled by the dialog `title` unless an `aria-label` or `aria-labelledby` is given here.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [input] Input slot content.
    */
@@ -36,6 +37,7 @@
     /* eslint-disable prefer-const */
     open = $bindable(false),
     value = $bindable(''),
+    title,
     textboxAttrs = {},
     children,
     input,
@@ -48,7 +50,11 @@
   } = $props();
 </script>
 
-<Dialog {...restProps} bind:open role="alertdialog">
+<!--
+  The built-in text box is the point of the dialog, so it takes the dialog title as its name unless
+  the consumer labels it; the dialog itself is still named by the title as usual.
+-->
+<Dialog {...restProps} {title} bind:open role="alertdialog">
   {@render children?.()}
   <div class="input-outer">
     {#if input}
@@ -59,6 +65,7 @@
         bind:value
         flex
         autofocus
+        aria-label={'aria-labelledby' in textboxAttrs ? undefined : title}
         {...textboxAttrs}
         {onkeydown}
         {onkeyup}

package/dist/components/dialog/prompt-dialog.svelte.d.ts

@@ -16,7 +16,8 @@ declare const PromptDialog: import("svelte").Component<ModalProps & DialogProps
      */
     value?: string | undefined;
     /**
-     * Extra attributes for the `<TextInput>`.
+     * Extra attributes for the `<TextInput>`. The text box is
+     * labelled by the dialog `title` unless an `aria-label` or `aria-labelledby` is given here.
      */
     textboxAttrs?: object | undefined;
     /**
@@ -34,7 +35,8 @@ type Props = {
      */
     value?: string | undefined;
     /**
-     * Extra attributes for the `<TextInput>`.
+     * Extra attributes for the `<TextInput>`. The text box is
+     * labelled by the dialog `title` unless an `aria-label` or `aria-labelledby` is given here.
      */
     textboxAttrs?: object | undefined;
     /**

package/dist/components/disclosure/disclosure.svelte

@@ -5,6 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -56,7 +57,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-header"
-  aria-roledescription="disclosure"
+  aria-roledescription={_('_sui.role_descriptions.disclosure')}
 >
   <div role="none" class="inner" inert={disabled}>
     <Button

package/dist/components/drawer/drawer.svelte

@@ -20,7 +20,11 @@
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the content element.
    * @property {boolean} [open] Whether to open the drawer.
-   * @property {string} [title] Title text displayed on the header.
+   * @property {string} [title] Title text displayed on the header. With a custom `header` snippet,
+   * it’s used as the drawer’s `aria-label` instead.
+   * @property {string} [ariaLabelledby] ID of the element that labels the drawer, typically a
+   * heading inside a custom `header` snippet. Takes precedence over `title` for the accessible
+   * name.
    * @property {'top' | 'right' | 'bottom' | 'left'} [position] Position of the drawer.
    * @property {'small' | 'medium' | 'large' | 'x-large' | 'full'} [size] Width or height of the
    * drawer.
@@ -41,6 +45,7 @@
     open = $bindable(false),
     class: className,
     title = '',
+    ariaLabelledby = undefined,
     position = 'right',
     size = 'small',
     showClose = 'outside',
@@ -68,9 +73,26 @@
   const orientation = $derived(
     position === 'right' || position === 'left' ? 'vertical' : 'horizontal',
   );
+
+  /**
+   * Accessible name for the `<dialog>`, resolved the same way as `<Dialog>`: the built-in header
+   * renders the title in an element the dialog can point at; with a custom header the title is
+   * only text, so it becomes `aria-label` unless the consumer names the labelling element.
+   */
+  const labelledby = $derived(ariaLabelledby ?? (!header && title ? `${id}-title` : undefined));
+  const label = $derived(labelledby ? undefined : title || undefined);
 </script>
 
-<Modal bind:this={modal} {...restProps} bind:open {id} class="drawer" showBackdrop>
+<Modal
+  bind:this={modal}
+  {...restProps}
+  bind:open
+  {id}
+  class="drawer"
+  aria-label={label}
+  aria-labelledby={labelledby}
+  showBackdrop
+>
   <div role="none" class={['content', className, size, position, orientation]}>
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
@@ -99,7 +121,7 @@
         {@render header()}
       {:else}
         <div role="none" class="header">
-          <div role="none" class="title">
+          <div role="none" id="{id}-title" class="title">
             {title}
           </div>
           <Spacer flex={true} />
@@ -144,6 +166,9 @@
   flex-direction: column;
   max-width: 100dvw;
   max-height: 100dvh;
+  border-width: var(--sui-drawer-content-border-width, var(--sui-modal-border-width, 0));
+  border-style: solid;
+  border-color: var(--sui-drawer-content-border-color, var(--sui-primary-border-color));
   background-color: var(--sui-secondary-background-color-translucent);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   -webkit-backdrop-filter: blur(16px);

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

@@ -18,9 +18,16 @@ declare const Drawer: import("svelte").Component<ModalProps & {
      */
     open?: boolean | undefined;
     /**
-     * Title text displayed on the header.
+     * Title text displayed on the header. With a custom `header` snippet,
+     * it’s used as the drawer’s `aria-label` instead.
      */
     title?: string | undefined;
+    /**
+     * ID of the element that labels the drawer, typically a
+     * heading inside a custom `header` snippet. Takes precedence over `title` for the accessible
+     * name.
+     */
+    ariaLabelledby?: string | undefined;
     /**
      * Position of the drawer.
      */
@@ -69,9 +76,16 @@ type Props = {
      */
     open?: boolean | undefined;
     /**
-     * Title text displayed on the header.
+     * Title text displayed on the header. With a custom `header` snippet,
+     * it’s used as the drawer’s `aria-label` instead.
      */
     title?: string | undefined;
+    /**
+     * ID of the element that labels the drawer, typically a
+     * heading inside a custom `header` snippet. Takes precedence over `title` for the accessible
+     * name.
+     */
+    ariaLabelledby?: string | undefined;
     /**
      * Position of the drawer.
      */

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

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
+
   /**
    * @import { Snippet } from 'svelte';
    */
@@ -36,7 +38,7 @@
   role="rowgroup"
   class="sui grid-body row-group {className}"
   aria-labelledby={label ? `${id}-label` : undefined}
-  aria-roledescription="grid body"
+  aria-roledescription={_('_sui.role_descriptions.grid_body')}
 >
   {#if label}
     <div role="row" class="row-group-caption">