@sveltia/ui 0.71.1 → 0.72.1

package/dist/components/alert/infobar.svelte

@@ -33,7 +33,7 @@
 </script>
 
 {#if show}
-  <div role="none" class="infobar {status}">
+  <div role="none" class={['infobar', status]}>
     <div role="alert" class="message" aria-live={ariaLive}>
       {#if icon}
         {@render icon()}

package/dist/components/button/button.svelte

@@ -58,7 +58,7 @@
 <button
   bind:this={element}
   {...restProps}
-  class="sui button {variant} {size} {className}"
+  class={['sui', 'button', variant, size, className]}
   class:iconic
   class:pill
   class:flex

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

@@ -36,7 +36,8 @@
   class="sui select-button {className}"
   aria-checked={selected}
   onChange={(event) => {
-    selected = event.detail.selected;
+    // The radio group reports the state as `checked`, after the `aria-checked` attribute it manages
+    selected = event.detail.checked;
     onChange?.(event);
   }}
 ></Button>

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

@@ -0,0 +1,20 @@
+/**
+ * Date helpers behind `<Calendar>`, kept apart from the component so the grid can be tested without
+ * rendering anything.
+ */
+/**
+ * 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.
+ */
+export const DAY_GRID_SIZE: 42;
+/**
+ * List of month names for the month selector. We use a fixed date to avoid issues with daylight
+ * saving time.
+ * @type {string[]}
+ */
+export const MONTH_NAMES: string[];
+export function getFirstDayOfMonth(date: Date): Date;
+export function addMonths(firstDay: Date, delta: number): Date;
+export function getCalendarDays(firstDay: Date): Date[];
+export function toDateString(date: Date): string;
+export function isSameDay(a: Date, b: Date): boolean;

package/dist/components/calendar/calendar.js

@@ -0,0 +1,81 @@
+/**
+ * Date helpers behind `<Calendar>`, kept apart from the component so the grid can be tested without
+ * rendering anything.
+ */
+
+/**
+ * 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.
+ */
+export const DAY_GRID_SIZE = 42;
+
+/**
+ * List of month names for the month selector. We use a fixed date to avoid issues with daylight
+ * saving time.
+ * @type {string[]}
+ */
+export const MONTH_NAMES = Array.from({ length: 12 }, (__, i) =>
+  new Date(2000, i, 10).toLocaleDateString('en', { month: 'short' }),
+);
+
+/**
+ * Get the first day of the month the given date is in.
+ * @param {Date} date Any date within the month.
+ * @returns {Date} Local midnight on the first day of the month, using the UTC year and month of
+ * the given date, so a date parsed from a `YYYY-MM-DD` string lands in the right month regardless
+ * of the time zone.
+ */
+export const getFirstDayOfMonth = (date) => new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
+
+/**
+ * Get the first day of another month, relative to the given one.
+ * @param {Date} firstDay First day of a month.
+ * @param {number} delta Number of months to move by; negative to go back.
+ * @returns {Date} A new date, `delta` months away.
+ */
+export const addMonths = (firstDay, delta) => {
+  const date = new Date(firstDay);
+
+  date.setUTCMonth(date.getUTCMonth() + delta);
+
+  return date;
+};
+
+/**
+ * Get the days to be laid out in the calendar grid.
+ * @param {Date} firstDay First day of the month being displayed.
+ * @returns {Date[]} {@link DAY_GRID_SIZE} consecutive days, starting from the Sunday on or before
+ * `firstDay`, so the days from the previous and next months fill the grid.
+ */
+export const getCalendarDays = (firstDay) => {
+  const cursor = new Date(firstDay);
+
+  // Start from Sunday
+  cursor.setDate(1 - cursor.getUTCDay());
+
+  return Array.from({ length: DAY_GRID_SIZE }, () => {
+    const day = new Date(cursor);
+
+    cursor.setUTCDate(cursor.getUTCDate() + 1);
+
+    return day;
+  });
+};
+
+/**
+ * Format a date as the `value` of the calendar.
+ * @param {Date} date Date.
+ * @returns {string} Date in the `YYYY-MM-DD` format, based on UTC.
+ */
+export const toDateString = (date) => date.toJSON().split('T')[0];
+
+/**
+ * Whether two dates fall on the same local calendar day.
+ * @param {Date} a A date.
+ * @param {Date} b Another date.
+ * @returns {boolean} Result.
+ */
+export const isSameDay = (a, b) =>
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate();

package/dist/components/calendar/calendar.svelte

@@ -4,25 +4,24 @@
 -->
 <script>
   import { _, isRTL } from '@sveltia/i18n';
-  import { SvelteDate } from 'svelte/reactivity';
   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,
+    getCalendarDays,
+    getFirstDayOfMonth,
+    isSameDay,
+    MONTH_NAMES,
+    toDateString,
+  } from './calendar.js';
 
   /**
    * @typedef {object} Props
    * @property {string} [value] Date.
    */
 
-  /**
-   * List of month names for month selector. We use a fixed date to avoid issues with daylight
-   * saving time.
-   */
-  const MONTH_NAMES = Array.from({ length: 12 }, (__, i) =>
-    new Date(2000, i, 10).toLocaleDateString('en', { month: 'short' }),
-  );
-
   /**
    * @type {Props & Record<string, any>}
    */
@@ -31,30 +30,13 @@
   const now = new Date();
 
   const date = $derived(value ? new Date(value) : now);
-  const firstDayOfMonth = $derived(new Date(date.getUTCFullYear(), date.getUTCMonth(), 1));
-  // eslint-disable-next-line svelte/prefer-writable-derived
-  let firstDay = $state();
-
-  $effect(() => {
-    firstDay = new SvelteDate(firstDayOfMonth);
-  });
-
-  const dayList = $derived.by(() => {
-    if (!firstDay) return [];
-
-    const cursor = new SvelteDate(firstDay);
-
-    // Start from Sunday
-    cursor.setDate(1 - cursor.getUTCDay());
-
-    return Array.from({ length: 42 }, () => {
-      const day = new Date(cursor);
-
-      cursor.setUTCDate(cursor.getUTCDate() + 1);
-
-      return { day };
-    });
-  });
+  /**
+   * First day of the month being displayed. Follows the {@link value}, and is reassigned by the
+   * month navigation below.
+   * @type {Date}
+   */
+  let firstDay = $derived(getFirstDayOfMonth(date));
+  const dayList = $derived(getCalendarDays(firstDay).map((day) => ({ day })));
 </script>
 
 <div role="group">
@@ -62,7 +44,7 @@
   <div role="none" class="header">
     <Button
       variant="ghost"
-      label={firstDay?.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
+      label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
       {#snippet endIcon()}
@@ -98,7 +80,7 @@
             <div role="none" class="grid">
               {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year (year)}
                 <div role="none">
-                  <Button>202{year}</Button>
+                  <Button>{`202${year}`}</Button>
                 </div>
               {/each}
             </div>
@@ -119,8 +101,7 @@
     <Button
       aria-label={_('_sui.calendar.previous_month')}
       onclick={() => {
-        firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);
-        firstDay = firstDay;
+        firstDay = addMonths(firstDay, -1);
       }}
     >
       <Icon name="chevron_left" />
@@ -128,8 +109,7 @@
     <Button
       aria-label={_('_sui.calendar.next_month')}
       onclick={() => {
-        firstDay.setUTCMonth(firstDay.getUTCMonth() + 1);
-        firstDay = firstDay;
+        firstDay = addMonths(firstDay, 1);
       }}
     >
       <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
@@ -144,16 +124,14 @@
     {#each dayList as { day } (day)}
       <div
         role="none"
-        class:other-month={day.getUTCMonth() !== firstDay?.getUTCMonth()}
-        class:today={day.getFullYear() === now.getFullYear() &&
-          day.getMonth() === now.getMonth() &&
-          day.getDate() === now.getDate()}
+        class:other-month={day.getUTCMonth() !== firstDay.getUTCMonth()}
+        class:today={isSameDay(day, now)}
       >
         <Button
           role="option"
           aria-selected={false}
           onclick={() => {
-            [value] = day.toJSON().split('T');
+            value = toDateString(day);
           }}
         >
           {day.getUTCDate()}
@@ -172,7 +150,7 @@
     <Spacer flex={true} />
     <Button
       onclick={() => {
-        [value] = now.toJSON().split('T');
+        value = toDateString(now);
       }}
     >
       {_('_sui.calendar.today')}

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

@@ -38,7 +38,7 @@
 <div
   {...restProps}
   role="group"
-  class="sui checkbox-group {className} {orientation}"
+  class={['sui', 'checkbox-group', className, orientation]}
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}

package/dist/components/checkbox/checkbox.svelte

@@ -91,6 +91,8 @@
     event.preventDefault();
     event.stopPropagation();
 
+    // The button handles its own clicks, and doesn’t let them reach here
+    /* v8 ignore else */
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonElement?.click();
     }
@@ -122,12 +124,15 @@
 
         checked = indeterminate ? true : !checked;
 
+        // The effect above keeps `checked` in step with the group, so a newly checked box is never
+        // in the group already, and a newly unchecked one is never missing from it
         if (Array.isArray(group)) {
           if (checked) {
+            /* v8 ignore else */
             if (!group.includes(value)) {
               group = [...group, value];
             }
-          } else if (group.includes(value)) {
+          } else /* v8 ignore else */ if (group.includes(value)) {
             group = group.filter((v) => v !== value);
           }
         }

package/dist/components/dialog/dialog.svelte

@@ -115,7 +115,7 @@
   bind:open
   showBackdrop
 >
-  <div bind:this={content} role="none" class="content {className} {size}">
+  <div bind:this={content} role="none" class={['content', className, size]}>
     {#if title || showClose || header || headerExtra}
       <div role="none" class="header">
         {#if header}

package/dist/components/drawer/drawer.svelte

@@ -71,7 +71,7 @@
 </script>
 
 <Modal bind:this={modal} {...restProps} bind:open {id} class="drawer" showBackdrop>
-  <div role="none" class="content {className} {size} {position} {orientation}">
+  <div role="none" class={['content', className, size, position, orientation]}>
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
         <Button

package/dist/components/emoji/emoji-suggestions.svelte

@@ -13,6 +13,7 @@
   import { _, isRTL } from '@sveltia/i18n';
   import { onMount, untrack } from 'svelte';
   import { searchEmojis } from './emoji.js';
+  import { getSuggestionListPosition } from './position.js';
 
   /**
    * @import { EmojiAnchorRect, EmojiEntry, EmojiTrigger } from '../../typedefs';
@@ -39,10 +40,6 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * Width of the dropdown, also enforced in the stylesheet below.
-   */
-  const LIST_WIDTH = 280;
   /**
    * How many suggestions are visible at once. The rest are reached by scrolling.
    */
@@ -51,11 +48,6 @@
    * Height to assume until a row has been measured, so the first open is positioned sensibly.
    */
   const FALLBACK_MAX_HEIGHT = 180;
-  /**
-   * Gap between the dropdown and the caret, and the minimum margin to the viewport edges.
-   */
-  const LIST_OFFSET = 4;
-  const VIEWPORT_MARGIN = 8;
 
   const listId = $props.id();
 
@@ -112,37 +104,17 @@
 
   /**
    * Position of the dropdown, flipped above the caret and clamped to the viewport as needed.
-   *
-   * The dropdown grows away from the start of the line, so it follows the reading direction rather
-   * than reaching back across the text: in a right-to-left layout it hangs from the shortcode’s
-   * right edge and extends leftwards, mirroring what `activatePopup()` does for anchored popups.
    */
-  const position = $derived.by(() => {
-    if (!anchorRect) {
-      return undefined;
-    }
-
-    const { innerWidth, innerHeight } = window;
-    const spaceBelow = innerHeight - anchorRect.bottom;
-    const spaceAbove = anchorRect.top;
-    const flipped = spaceBelow < listMaxHeight + VIEWPORT_MARGIN && spaceAbove > spaceBelow;
-    const rtl = isRTL();
-    const anchorLeft = rtl ? anchorRect.right - LIST_WIDTH : anchorRect.left;
-
-    return {
-      top: flipped ? undefined : `${Math.round(anchorRect.bottom + LIST_OFFSET)}px`,
-      bottom: flipped ? `${Math.round(innerHeight - anchorRect.top + LIST_OFFSET)}px` : undefined,
-      left: `${Math.round(
-        Math.max(VIEWPORT_MARGIN, Math.min(anchorLeft, innerWidth - LIST_WIDTH - VIEWPORT_MARGIN)),
-      )}px`,
-      maxHeight: `${Math.round(
-        Math.min(
+  const position = $derived(
+    anchorRect
+      ? getSuggestionListPosition({
+          anchorRect,
           listMaxHeight,
-          (flipped ? spaceAbove : spaceBelow) - LIST_OFFSET - VIEWPORT_MARGIN,
-        ),
-      )}px`,
-    };
-  });
+          viewport: { width: window.innerWidth, height: window.innerHeight },
+          rtl: isRTL(),
+        })
+      : undefined,
+  );
 
   /**
    * Whether any suggestions are currently shown.
@@ -277,6 +249,8 @@
 
     const row = listElement.querySelector('.option');
 
+    // The list is only mounted while there are candidates, so there is always a row
+    /* v8 ignore else */
     if (row) {
       const { paddingTop, paddingBottom, borderTopWidth, borderBottomWidth } =
         getComputedStyle(listElement);
@@ -406,7 +380,7 @@
   >
     {#each candidates as entry, index (entry.emoji)}
       <div
-        id="{listId}-option-{index}"
+        id={`${listId}-option-${index}`}
         role="option"
         class="option"
         tabindex="-1"
@@ -422,7 +396,7 @@
         }}
       >
         <span role="none" class="emoji">{entry.emoji}</span>
-        <span role="none" class="name">:{entry.name}:</span>
+        <span role="none" class="name">{`:${entry.name}:`}</span>
       </div>
     {/each}
   </div>

package/dist/components/emoji/position.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Placement of the `<EmojiSuggestions>` dropdown, kept apart from the component so it can be
+ * tested against arbitrary viewports.
+ */
+/**
+ * @import { EmojiAnchorRect } from '../../typedefs';
+ */
+/**
+ * Width of the dropdown, also enforced in the component’s stylesheet.
+ */
+export const LIST_WIDTH: 280;
+/**
+ * Gap between the dropdown and the caret, and the minimum margin to the viewport edges.
+ */
+export const LIST_OFFSET: 4;
+export const VIEWPORT_MARGIN: 8;
+export function getSuggestionListPosition({ anchorRect, listMaxHeight, viewport, rtl }: {
+    anchorRect: EmojiAnchorRect;
+    listMaxHeight: number;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    rtl: boolean;
+}): SuggestionListPosition;
+export type SuggestionListPosition = {
+    /**
+     * CSS `top`, when the list hangs below the caret.
+     */
+    top: string | undefined;
+    /**
+     * CSS `bottom`, when the list is flipped above the caret.
+     */
+    bottom: string | undefined;
+    /**
+     * CSS `left`.
+     */
+    left: string;
+    /**
+     * CSS `max-height`.
+     */
+    maxHeight: string;
+};
+import type { EmojiAnchorRect } from '../../typedefs';

package/dist/components/emoji/position.js

@@ -0,0 +1,60 @@
+/**
+ * Placement of the `<EmojiSuggestions>` dropdown, kept apart from the component so it can be
+ * tested against arbitrary viewports.
+ */
+
+/**
+ * @import { EmojiAnchorRect } from '../../typedefs';
+ */
+
+/**
+ * Width of the dropdown, also enforced in the component’s stylesheet.
+ */
+export const LIST_WIDTH = 280;
+/**
+ * Gap between the dropdown and the caret, and the minimum margin to the viewport edges.
+ */
+export const LIST_OFFSET = 4;
+export const VIEWPORT_MARGIN = 8;
+
+/**
+ * @typedef {object} SuggestionListPosition
+ * @property {string | undefined} top CSS `top`, when the list hangs below the caret.
+ * @property {string | undefined} bottom CSS `bottom`, when the list is flipped above the caret.
+ * @property {string} left CSS `left`.
+ * @property {string} maxHeight CSS `max-height`.
+ */
+
+/**
+ * Work out where to place the dropdown: below the caret by default, flipped above it when there
+ * is more room there and not enough below, and clamped to the viewport horizontally.
+ *
+ * The dropdown grows away from the start of the line, so it follows the reading direction rather
+ * than reaching back across the text: in a right-to-left layout it hangs from the shortcode’s
+ * right edge and extends leftwards, mirroring what `activatePopup()` does for anchored popups.
+ * @param {object} options Options.
+ * @param {EmojiAnchorRect} options.anchorRect Viewport-relative bounds of the shortcode being
+ * typed.
+ * @param {number} options.listMaxHeight The height the list would like to have, in pixels.
+ * @param {{ width: number, height: number }} options.viewport Size of the viewport in pixels.
+ * @param {boolean} options.rtl Whether the layout is right-to-left.
+ * @returns {SuggestionListPosition} Position.
+ */
+export const getSuggestionListPosition = ({ anchorRect, listMaxHeight, viewport, rtl }) => {
+  const { width: innerWidth, height: innerHeight } = viewport;
+  const spaceBelow = innerHeight - anchorRect.bottom;
+  const spaceAbove = anchorRect.top;
+  const flipped = spaceBelow < listMaxHeight + VIEWPORT_MARGIN && spaceAbove > spaceBelow;
+  const anchorLeft = rtl ? anchorRect.right - LIST_WIDTH : anchorRect.left;
+
+  return {
+    top: flipped ? undefined : `${Math.round(anchorRect.bottom + LIST_OFFSET)}px`,
+    bottom: flipped ? `${Math.round(innerHeight - anchorRect.top + LIST_OFFSET)}px` : undefined,
+    left: `${Math.round(
+      Math.max(VIEWPORT_MARGIN, Math.min(anchorLeft, innerWidth - LIST_WIDTH - VIEWPORT_MARGIN)),
+    )}px`,
+    maxHeight: `${Math.round(
+      Math.min(listMaxHeight, (flipped ? spaceAbove : spaceBelow) - LIST_OFFSET - VIEWPORT_MARGIN),
+    )}px`,
+  };
+};

package/dist/components/progressbar/progressbar.svelte

@@ -40,7 +40,7 @@
   aria-valuetext={text}
   aria-label={ariaLabel}
 >
-  <div role="none" style:width="{now}%"></div>
+  <div role="none" style:width={`${now}%`}></div>
 </div>
 
 <style>.progressbar {

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

@@ -53,7 +53,7 @@
 <div
   {...restProps}
   role="radiogroup"
-  class="sui radio-group {className} {orientation}"
+  class={['sui', 'radio-group', className, orientation]}
   tabindex="-1"
   {hidden}
   aria-hidden={hidden}

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

@@ -7,6 +7,7 @@
 <script>
   import { isRTL } from '@sveltia/i18n';
   import { getContext } from 'svelte';
+  import { getHandleKeyAction } from './sizing.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -106,6 +107,8 @@
   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;
@@ -126,6 +129,8 @@
     const screenPos = isHorizontal ? screenX : screenY;
     const pixelDelta = screenPos - startScreenPos;
 
+    // A group that has no size, because it isn’t laid out, can’t be resized
+    /* v8 ignore next */
     if (!containerSize) return;
 
     let percentDelta = (pixelDelta / containerSize) * 100;
@@ -194,63 +199,26 @@
     if (disabled) return;
 
     const { key, shiftKey } = event;
-    const step = shiftKey ? 10 : 1;
-    let delta = 0;
+    const action = getHandleKeyAction({ key, shiftKey, isHorizontal, rtl: isRTL() });
 
-    if (key === 'Enter') {
-      event.preventDefault();
-      event.stopPropagation();
-      ctx.toggleCollapse(handleIndex);
-
-      return;
-    }
-
-    if (key === 'Home') {
-      event.preventDefault();
-      event.stopPropagation();
-      // Collapse to minimum — clamped internally
-      ctx.resize(handleIndex, -100);
-
-      return;
-    }
+    if (!action) return;
 
-    if (key === 'End') {
-      event.preventDefault();
-      event.stopPropagation();
-      // Expand to maximum — clamped internally
-      ctx.resize(handleIndex, 100);
+    event.preventDefault();
+    event.stopPropagation();
 
-      return;
-    }
+    if (action.type === 'toggle') {
+      ctx.toggleCollapse(handleIndex);
 
-    if (isHorizontal) {
-      const _isRTL = isRTL();
-
-      // In RTL, Left/Right directions are visually swapped
-      if (key === 'ArrowLeft') {
-        delta = _isRTL ? step : -step;
-      } else if (key === 'ArrowRight') {
-        delta = _isRTL ? -step : step;
-      } else {
-        return;
-      }
-    } else if (key === 'ArrowUp') {
-      delta = -step;
-    } else if (key === 'ArrowDown') {
-      delta = step;
-    } else {
       return;
     }
 
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!keyResizing) {
+    // Home and End send an oversized delta, which gets clamped to the min/max internally
+    if (key !== 'Home' && key !== 'End' && !keyResizing) {
       keyResizing = true;
       onResizeStart?.();
     }
 
-    ctx.resize(handleIndex, delta);
+    ctx.resize(handleIndex, action.delta);
   };
 
   /**
@@ -277,7 +245,7 @@
   aria-controls={ctx.paneDefs[handleIndex]?.id}
   aria-disabled={disabled || undefined}
   aria-label={ariaLabel}
-  class="sui resizable-handle {className ?? ''}"
+  class="sui resizable-handle {className}"
   class:horizontal={isHorizontal}
   class:vertical={!isHorizontal}
   class:disabled