@sveltia/ui 0.78.4 → 0.79.0

package/dist/components/alert/alert-content.svelte

@@ -0,0 +1,51 @@
+<!--
+  @component
+  The content shared by `<Alert>` and `<Infobar>`: the status icon, the status spelled out off
+  screen, and the message. Internal; not exported.
+-->
+<script>
+  import { _ } from '@sveltia/i18n';
+  import Icon from '../icon/icon.svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { AlertStatus } from './alert.js';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {AlertStatus} status Alert status.
+   * @property {Snippet} [children] Primary slot content.
+   * @property {Snippet} [icon] Icon slot content.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    status,
+    children = undefined,
+    icon = undefined,
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<!--
+  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.
+-->
+{#if icon}
+  {@render icon()}
+{:else}
+  <Icon name={status === 'success' ? 'check_circle' : status} />
+{/if}
+<span class="status-label">{_(`_sui.alert.${status}`)}</span>
+{@render children?.()}
+
+<style>.status-label {
+  position: absolute;
+  overflow: hidden;
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+}</style>

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

@@ -0,0 +1,39 @@
+export default AlertContent;
+type AlertContent = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/**
+ * The content shared by `<Alert>` and `<Infobar>`: the status icon, the status spelled out off
+ * screen, and the message. Internal; not exported.
+ */
+declare const AlertContent: import("svelte").Component<{
+    /**
+     * Alert status.
+     */
+    status: AlertStatus;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Icon slot content.
+     */
+    icon?: Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * Alert status.
+     */
+    status: AlertStatus;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Icon slot content.
+     */
+    icon?: Snippet<[]> | undefined;
+};
+import type { AlertStatus } from './alert.js';
+import type { Snippet } from 'svelte';

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

@@ -0,0 +1,3 @@
+export function getAlertRole(status: AlertStatus): "alert" | "status";
+export function getAlertAriaLive(role: "alert" | "status", ariaLive?: "off" | "polite" | "assertive"): "off" | "polite" | "assertive";
+export type AlertStatus = "error" | "warning" | "info" | "success";

package/dist/components/alert/alert.js

@@ -0,0 +1,21 @@
+/**
+ * @typedef {'error' | 'warning' | 'info' | 'success'} AlertStatus
+ */
+
+/**
+ * Get the ARIA role for an alert status. Errors and warnings are `alert` and interrupt; information
+ * and success are `status` and wait.
+ * @param {AlertStatus} status Alert status.
+ * @returns {'alert' | 'status'} Role.
+ */
+export const getAlertRole = (status) =>
+  status === 'error' || status === 'warning' ? 'alert' : 'status';
+
+/**
+ * Get the ARIA live region politeness for an alert role, unless one is given explicitly.
+ * @param {'alert' | 'status'} role Role from {@link getAlertRole}.
+ * @param {'off' | 'polite' | 'assertive'} [ariaLive] Explicit politeness, if any.
+ * @returns {'off' | 'polite' | 'assertive'} Politeness.
+ */
+export const getAlertAriaLive = (role, ariaLive) =>
+  ariaLive ?? (role === 'alert' ? 'assertive' : 'polite');

package/dist/components/alert/alert.svelte

@@ -5,8 +5,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
 -->
 <script>
-  import { _ } from '@sveltia/i18n';
-  import Icon from '../icon/icon.svelte';
+  import AlertContent from './alert-content.svelte';
+  import { getAlertAriaLive, getAlertRole } from './alert.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -35,38 +35,14 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  const role = $derived(status === 'error' || status === 'warning' ? 'alert' : 'status');
+  const role = $derived(getAlertRole(status));
 </script>
 
-<!--
-  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 {...restProps} {role} class="sui alert {status}" aria-live={getAlertAriaLive(role, ariaLive)}>
+  <AlertContent {status} {children} {icon} />
 </div>
 
-<style>.status-label {
-  position: absolute;
-  overflow: hidden;
-  clip-path: inset(50%);
-  width: 1px;
-  height: 1px;
-  white-space: nowrap;
-}
-
-.alert {
+<style>.alert {
   display: flex;
   align-items: center;
   gap: var(--gap, 8px);

package/dist/components/alert/infobar.svelte

@@ -2,6 +2,8 @@
   import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
+  import AlertContent from './alert-content.svelte';
+  import { getAlertAriaLive, getAlertRole } from './alert.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -9,7 +11,7 @@
 
   /**
    * @typedef {object} Props
-   * @property {boolean} [show] Whether to show the toast.
+   * @property {boolean} [show] Whether to show the infobar.
    * @property {boolean} [dismissible] Whether to show the close button.
    * @property {'error' | 'warning' | 'info' | 'success'} [status] Information status. Errors and
    * warnings are `role="alert"` and interrupt; information and success are `role="status"` and
@@ -34,20 +36,13 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  const role = $derived(status === 'error' || status === 'warning' ? 'alert' : 'status');
+  const role = $derived(getAlertRole(status));
 </script>
 
 {#if show}
   <div role="none" class={['infobar', status]}>
-    <!-- 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 {role} class="message" aria-live={getAlertAriaLive(role, ariaLive)}>
+      <AlertContent {status} {children} {icon} />
     </div>
     {#if dismissible}
       <div role="none">
@@ -68,16 +63,7 @@
   </div>
 {/if}
 
-<style>.status-label {
-  position: absolute;
-  overflow: hidden;
-  clip-path: inset(50%);
-  width: 1px;
-  height: 1px;
-  white-space: nowrap;
-}
-
-.infobar {
+<style>.infobar {
   flex: none;
   display: flex;
   align-items: center;

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

@@ -5,7 +5,7 @@ type Infobar = {
 };
 declare const Infobar: import("svelte").Component<{
     /**
-     * Whether to show the toast.
+     * Whether to show the infobar.
      */
     show?: boolean | undefined;
     /**
@@ -38,7 +38,7 @@ declare const Infobar: import("svelte").Component<{
 }, {}, "show">;
 type Props = {
     /**
-     * Whether to show the toast.
+     * Whether to show the infobar.
      */
     show?: boolean | undefined;
     /**

package/dist/components/button/button.svelte

@@ -11,7 +11,7 @@
   import Popup from '../util/popup.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**
@@ -51,6 +51,14 @@
   } = $props();
 </script>
 
+{#snippet labelText()}
+  <span role="none" class="label" dir={labelDir}>
+    <TruncatedText {lines}>
+      {label}
+    </TruncatedText>
+  </span>
+{/snippet}
+
 <!--
   `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
@@ -86,11 +94,7 @@
   {@render startIcon?.()}
   {#if variant === 'link'}
     {#if label}
-      <span role="none" class="label" dir={labelDir}>
-        <TruncatedText {lines}>
-          {label}
-        </TruncatedText>
-      </span>
+      {@render labelText()}
     {:else}
       <span role="none" class="label">
         {@render children?.()}
@@ -98,11 +102,7 @@
     {/if}
   {:else}
     {#if label}
-      <span role="none" class="label" dir={labelDir}>
-        <TruncatedText {lines}>
-          {label}
-        </TruncatedText>
-      </span>
+      {@render labelText()}
     {/if}
     {@render children?.()}
   {/if}

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

@@ -8,5 +8,5 @@ type Button = {
  * @see https://w3c.github.io/aria/#button
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
-declare const Button: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & Record<string, any>, {}, "element">;
-import type { ButtonProps } from '../../typedefs';
+declare const Button: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & Record<string, any>, {}, "element">;
+import type { ButtonProps } from '../../typedefs.js';

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

@@ -8,7 +8,7 @@
   import Button from './button.svelte';
 
   /**
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**

package/dist/components/button/select-button.svelte.d.ts

@@ -8,7 +8,7 @@ type SelectButton = {
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-declare const SelectButton: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const SelectButton: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * Whether to select the widget. An alias of the `aria-checked`
      * attribute. Because the UI is a button, we expose `selected` instead of `checked`.
@@ -22,4 +22,4 @@ type Props = {
      */
     selected?: boolean | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';

package/dist/components/button/split-button.svelte

@@ -13,7 +13,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ButtonProps, CommonEventHandlers, PopupPosition } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers, PopupPosition } from '../../typedefs.js';
    */
 
   /**

package/dist/components/button/split-button.svelte.d.ts

@@ -9,7 +9,7 @@ type SplitButton = {
  * Match Formatting and Keep Text Only options.
  * @see https://www.google.com/search?q=split+button&tbm=isch
  */
-declare const SplitButton: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const SplitButton: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * Where to show the dropdown menu.
      */
@@ -45,6 +45,6 @@ type Props = {
      */
     popup?: Snippet<[]> | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
-import type { PopupPosition } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';
+import type { PopupPosition } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -12,6 +12,8 @@ export const DAY_GRID_SIZE: 42;
 export const MONTH_NAMES: string[];
 export function getFirstDayOfMonth(date: Date): Date;
 export function addMonths(firstDay: Date, delta: number): Date;
+export function addDays(date: Date, delta: number): Date;
+export function getArrowKeyDayOffset(key: string, rtl?: boolean): number | undefined;
 export function getCalendarDays(firstDay: Date): Date[];
 export function toDateString(date: Date): string;
 export function getToday(now?: Date): Date;

package/dist/components/calendar/calendar.js

@@ -1,5 +1,7 @@
 import { date as formatLocaleDate } from '@sveltia/i18n';
 
+import { getArrowKeys } from '../../services/navigation.js';
+
 /**
  * Date helpers behind `<Calendar>`, kept apart from the component so the grid can be tested without
  * rendering anything.
@@ -59,6 +61,38 @@ export const addMonths = (firstDay, delta) => {
   return date;
 };
 
+/**
+ * Get another day, relative to the given one.
+ * @param {Date} date Any date.
+ * @param {number} delta Number of days to move by; negative to go back.
+ * @returns {Date} A new date, `delta` days away.
+ */
+export const addDays = (date, delta) => {
+  const day = new Date(date);
+
+  day.setUTCDate(day.getUTCDate() + delta);
+
+  return day;
+};
+
+/**
+ * Get how many days an arrow key moves the cursor on the day grid: a day sideways, a week up or
+ * down. The inline arrows are mirrored for RTL.
+ * @param {string} key `KeyboardEvent.key` value.
+ * @param {boolean} [rtl] Whether the layout is right-to-left.
+ * @returns {number | undefined} Number of days, or `undefined` if the key is not an arrow key.
+ */
+export const getArrowKeyDayOffset = (key, rtl = false) => {
+  const { prevKey, nextKey } = getArrowKeys('horizontal', rtl);
+
+  return /** @type {Record<string, number>} */ ({
+    ArrowUp: -7,
+    ArrowDown: 7,
+    [prevKey]: -1,
+    [nextKey]: 1,
+  })[key];
+};
+
 /**
  * Get the days to be laid out in the calendar grid.
  * @param {Date} firstDay First day of the month being displayed.

package/dist/components/calendar/calendar.svelte

@@ -11,8 +11,10 @@
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
   import {
+    addDays,
     addMonths,
     formatDate,
+    getArrowKeyDayOffset,
     getCalendarDays,
     getFirstDayOfMonth,
     getToday,
@@ -53,6 +55,46 @@
   /** @type {HTMLElement | undefined} */
   let grid = $state();
 
+  /**
+   * Move the keyboard cursor, and with it the selection, by date rather than by cell: the group
+   * service would step through the 42 cells on the grid and stop at its edges, whereas a week up
+   * from the first of the month is a day in the previous month, which may not be on the grid at
+   * all. The month displayed follows the new {@link value}.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  const onGridKeyDown = (event) => {
+    const { key, shiftKey, altKey, ctrlKey, metaKey } = event;
+    const offset = getArrowKeyDayOffset(key, isRTL());
+
+    if (offset === undefined || shiftKey || altKey || ctrlKey || metaKey) {
+      return;
+    }
+
+    // Keep the group service, which listens on the same element, from moving the cursor as well
+    event.preventDefault();
+    event.stopImmediatePropagation();
+
+    const focused = /** @type {HTMLButtonElement | null | undefined} */ (
+      grid?.querySelector('[role="option"].focused')
+    );
+
+    // Without a cursor, start from the selected day only if it’s on the grid. After browsing to
+    // another month, it isn’t, and moving from it would bring that month back. Land on today if
+    // it’s in the month displayed, or on the first of the month otherwise.
+    const cursor =
+      focused?.value ||
+      (value && dayList.some(({ day }) => toDateString(day) === value) ? value : undefined);
+
+    if (cursor) {
+      value = toDateString(addDays(new Date(cursor), offset));
+    } else {
+      value =
+        getFirstDayOfMonth(today).getTime() === firstDay.getTime()
+          ? todayString
+          : toDateString(firstDay);
+    }
+  };
+
   // 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
@@ -107,7 +149,7 @@
                   //
                 }}
               >
-                <Icon name="chevron_left" />
+                <Icon name={isRTL() ? 'chevron_right' : 'chevron_left'} />
               </Button>
               <Button
                 aria-label={_('_sui.calendar.next_decade')}
@@ -145,7 +187,7 @@
         firstDay = addMonths(firstDay, -1);
       }}
     >
-      <Icon name="chevron_left" />
+      <Icon name={isRTL() ? 'chevron_right' : 'chevron_left'} />
     </Button>
     <Button
       aria-label={_('_sui.calendar.next_month')}
@@ -157,9 +199,10 @@
     </Button>
   </div>
   <!--
-    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 day grid is a listbox laid out as a grid. The arrow keys move through it by date, handled
+    above; the group service still takes care of the rest, such as Home and End. 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.
@@ -169,6 +212,7 @@
     role="listbox"
     class="grid"
     aria-label={monthLabel}
+    onkeydowncapture={onGridKeyDown}
     onChange={(/** @type {CustomEvent} */ event) => {
       value = event.detail.value;
     }}

package/dist/components/checkbox/checkbox.svelte

@@ -11,7 +11,7 @@
 
   /**
    * @import { Snippet } from 'svelte';
-   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs';
+   * @import { ButtonProps, CommonEventHandlers } from '../../typedefs.js';
    */
 
   /**
@@ -63,6 +63,13 @@
    */
   let buttonElement = $state();
 
+  /**
+   * Accessible name given as a prop or as a plain `aria-label` attribute. It takes the place of the
+   * visible label, which the button otherwise points at — but only when there is one to point at.
+   * @type {string | undefined}
+   */
+  const accessibleLabel = $derived(ariaLabel ?? restProps['aria-label']);
+  const hasVisibleLabel = $derived(!!(children || label));
   const indeterminate = $derived(checked === 'mixed');
 
   // Sync `checked` with `group` and `value`
@@ -112,8 +119,8 @@
       aria-required={required}
       aria-invalid={invalid}
       aria-checked={checked}
-      aria-label={ariaLabel || undefined}
-      aria-labelledby={ariaLabel ? undefined : `${id}-label`}
+      aria-label={accessibleLabel || undefined}
+      aria-labelledby={!accessibleLabel && hasVisibleLabel ? `${id}-label` : undefined}
       onclick={(event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -150,7 +157,7 @@
         {/if}
       {/snippet}
     </Button>
-    {#if children || label}
+    {#if hasVisibleLabel}
       <label id="{id}-label">
         {#if children}
           {@render children()}

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

@@ -9,7 +9,7 @@ type Checkbox = {
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
-declare const Checkbox: import("svelte").Component<ButtonProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").PointerEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
+declare const Checkbox: import("svelte").Component<ButtonProps & import("../../typedefs.js").KeyboardEventHandlers & import("../../typedefs.js").MouseEventHandlers & import("../../typedefs.js").PointerEventHandlers & import("../../typedefs.js").FocusEventHandlers & import("../../typedefs.js").DragEventHandlers & {
     /**
      * The `class` attribute on the wrapper element.
      */
@@ -87,5 +87,5 @@ type Props = {
      */
     group?: string[] | undefined;
 };
-import type { ButtonProps } from '../../typedefs';
+import type { ButtonProps } from '../../typedefs.js';
 import type { Snippet } from 'svelte';

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

@@ -9,7 +9,7 @@
   import Dialog from './dialog.svelte';
 
   /**
-   * @import { DialogProps, ModalProps } from '../../typedefs';
+   * @import { DialogProps, ModalProps } from '../../typedefs.js';
    */
 
   /**

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

@@ -10,5 +10,5 @@ type AlertDialog = {
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
  */
 declare const AlertDialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "open">;
-import type { ModalProps } from '../../typedefs';
-import type { DialogProps } from '../../typedefs';
+import type { ModalProps } from '../../typedefs.js';
+import type { DialogProps } from '../../typedefs.js';

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

@@ -9,7 +9,7 @@
   import Dialog from './dialog.svelte';
 
   /**
-   * @import { DialogProps, ModalProps } from '../../typedefs';
+   * @import { DialogProps, ModalProps } from '../../typedefs.js';
    */
 
   /**

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

@@ -10,5 +10,5 @@ type ConfirmationDialog = {
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
  */
 declare const ConfirmationDialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "open">;
-import type { ModalProps } from '../../typedefs';
-import type { DialogProps } from '../../typedefs';
+import type { ModalProps } from '../../typedefs.js';
+import type { DialogProps } from '../../typedefs.js';