@sveltia/ui 0.35.5 → 0.36.0

package/dist/components/alert/infobar.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -44,7 +44,7 @@
           iconic
           size="small"
           variant="ghost"
-          aria-label={$_('_sui.dismiss')}
+          aria-label={_('_sui.dismiss')}
           onclick={() => {
             show = false;
           }}

package/dist/components/button/button.svelte

@@ -70,7 +70,7 @@
   data-name={name}
   data-label={label}
   data-value={value}
-  use:activateKeyShortcuts={keyShortcuts}
+  {@attach activateKeyShortcuts(keyShortcuts)}
 >
   {@render startIcon?.()}
   {#if variant === 'link'}

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

@@ -55,7 +55,7 @@
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
-  use:activateGroup
+  {@attach activateGroup()}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

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

@@ -6,7 +6,7 @@
   @see https://www.google.com/search?q=split+button&tbm=isch
 -->
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import Icon from '../icon/icon.svelte';
   import MenuButton from '../menu/menu-button.svelte';
   import Button from './button.svelte';
@@ -55,7 +55,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
-  aria-label={$_('_sui.split_button.x_options', { values: { name: label } })}
+  aria-label={_('_sui.split_button.x_options', { values: { name: label } })}
 >
   <Button {...restProps} {hidden} {disabled} {label} {variant} {size}></Button>
   <MenuButton
@@ -64,7 +64,7 @@
     {disabled}
     {variant}
     {size}
-    aria-label={$_('_sui.split_button.more_options')}
+    aria-label={_('_sui.split_button.more_options')}
     {popupPosition}
     popupPositionBaseElement={wrapper}
     {showPopupBackdrop}

package/dist/components/calendar/calendar.svelte

@@ -3,8 +3,8 @@
   A calendar (date picker) widget.
 -->
 <script>
-  import { _ } from 'svelte-i18n';
-  import { isRTL } from '../../services/i18n.js';
+  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';
@@ -26,26 +26,23 @@
   /**
    * @type {Props & Record<string, any>}
    */
-  let {
-    /* eslint-disable prefer-const */
-    value = $bindable(undefined),
-    /* eslint-enable prefer-const */
-  } = $props();
+  let { value = $bindable(undefined) } = $props();
 
   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 Date(firstDayOfMonth);
+    firstDay = new SvelteDate(firstDayOfMonth);
   });
 
   const dayList = $derived.by(() => {
     if (!firstDay) return [];
 
-    const cursor = new Date(firstDay);
+    const cursor = new SvelteDate(firstDay);
 
     // Start from Sunday
     cursor.setDate(1 - cursor.getUTCDay());
@@ -79,10 +76,10 @@
             event.stopPropagation();
           }}
         >
-          <div role="group" aria-label={$_('_sui.calendar.year')}>
+          <div role="group" aria-label={_('_sui.calendar.year')}>
             <div role="none" class="header">
               <Button
-                aria-label={$_('_sui.calendar.previous_decade')}
+                aria-label={_('_sui.calendar.previous_decade')}
                 onclick={() => {
                   //
                 }}
@@ -90,16 +87,16 @@
                 <Icon name="chevron_left" />
               </Button>
               <Button
-                aria-label={$_('_sui.calendar.next_decade')}
+                aria-label={_('_sui.calendar.next_decade')}
                 onclick={() => {
                   //
                 }}
               >
-                <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
+                <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
               </Button>
             </div>
             <div role="none" class="grid">
-              {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year}
+              {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as year (year)}
                 <div role="none">
                   <Button>202{year}</Button>
                 </div>
@@ -107,9 +104,9 @@
             </div>
           </div>
           <Divider orientation="vertical" />
-          <div role="group" aria-label={$_('_sui.calendar.month')}>
+          <div role="group" aria-label={_('_sui.calendar.month')}>
             <div role="none" class="grid">
-              {#each MONTH_NAMES as monthName}
+              {#each MONTH_NAMES as monthName (monthName)}
                 <div role="none">
                   <Button>{monthName}</Button>
                 </div>
@@ -120,7 +117,7 @@
       {/snippet}
     </Button>
     <Button
-      aria-label={$_('_sui.calendar.previous_month')}
+      aria-label={_('_sui.calendar.previous_month')}
       onclick={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);
         firstDay = firstDay;
@@ -129,22 +126,22 @@
       <Icon name="chevron_left" />
     </Button>
     <Button
-      aria-label={$_('_sui.calendar.next_month')}
+      aria-label={_('_sui.calendar.next_month')}
       onclick={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() + 1);
         firstDay = firstDay;
       }}
     >
-      <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
+      <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
     </Button>
   </div>
   <div role="listbox" class="grid">
-    {#each dayList.slice(0, 7) as { day }}
+    {#each dayList.slice(0, 7) as { day } (day)}
       <div role="none" class="weekday">
         {day.toLocaleDateString('en', { weekday: 'narrow' })}
       </div>
     {/each}
-    {#each dayList as { day }}
+    {#each dayList as { day } (day)}
       <div
         role="none"
         class:other-month={day.getUTCMonth() !== firstDay?.getUTCMonth()}
@@ -170,7 +167,7 @@
         value = '';
       }}
     >
-      {$_('_sui.clear')}
+      {_('_sui.clear')}
     </Button>
     <Spacer flex={true} />
     <Button
@@ -178,7 +175,7 @@
         [value] = now.toJSON().split('T');
       }}
     >
-      {$_('_sui.calendar.today')}
+      {_('_sui.calendar.today')}
     </Button>
   </div>
 </div>

package/dist/components/dialog/dialog.svelte

@@ -5,8 +5,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import { sleep } from '@sveltia/utils/misc';
-  import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
@@ -108,7 +108,7 @@
             <Button
               variant="ghost"
               iconic
-              aria-label={$_('_sui.close')}
+              aria-label={_('_sui.close')}
               aria-controls={id}
               onclick={() => {
                 modal?.close('close');
@@ -139,7 +139,7 @@
           {#if showOk}
             <Button
               variant="primary"
-              label={okLabel || $_('_sui.ok')}
+              label={okLabel || _('_sui.ok')}
               keyShortcuts={okShortcuts}
               disabled={okDisabled}
               onclick={() => {
@@ -150,7 +150,7 @@
           {#if showCancel}
             <Button
               variant="secondary"
-              label={cancelLabel || $_('_sui.cancel')}
+              label={cancelLabel || _('_sui.cancel')}
               keyShortcuts={cancelShortcuts}
               disabled={cancelDisabled}
               onclick={() => {

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

@@ -8,6 +8,6 @@ type Dialog = {
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-declare const Dialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "open" | "value">;
+declare const Dialog: import("svelte").Component<ModalProps & DialogProps & Record<string, any>, {}, "value" | "open">;
 import type { ModalProps } from '../../typedefs';
 import type { DialogProps } from '../../typedefs';

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

@@ -27,7 +27,7 @@ declare const PromptDialog: import("svelte").Component<ModalProps & DialogProps
      * Input slot content.
      */
     input?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "open" | "value">;
+} & Record<string, any>, {}, "value" | "open">;
 type Props = {
     /**
      * Value entered on the textbox.

package/dist/components/drawer/drawer.svelte

@@ -5,7 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
@@ -78,7 +78,7 @@
           variant="ghost"
           iconic
           class="close"
-          aria-label={$_('_sui.close')}
+          aria-label={_('_sui.close')}
           aria-controls={id}
           onclick={() => {
             modal?.close('close');
@@ -109,7 +109,7 @@
               variant="ghost"
               iconic
               class="close"
-              aria-label={$_('_sui.close')}
+              aria-label={_('_sui.close')}
               aria-controls={id}
               onclick={() => {
                 modal?.close('close');

package/dist/components/grid/grid.svelte

@@ -47,7 +47,7 @@
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}
-  use:activateGroup={{ clickToSelect }}
+  {@attach activateGroup({ clickToSelect })}
 >
   {@render children?.()}
 </div>

package/dist/components/listbox/listbox.svelte

@@ -80,7 +80,7 @@
     filtered = matched !== total;
     onFilter?.(event);
   }}
-  use:activateGroup={{ searchTerms }}
+  {@attach activateGroup(() => ({ searchTerms }))}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

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

@@ -70,6 +70,7 @@
   {#snippet startIcon()}
     {@render _startIcon?.()}
   {/snippet}
+  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
   {#snippet children()}
     {@render _children?.()}
   {/snippet}

package/dist/components/menu/menu-item-checkbox.svelte

@@ -45,6 +45,7 @@
   {#snippet startIcon()}
     {@render _startIcon?.()}
   {/snippet}
+  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
   {#snippet children()}
     {@render _children?.()}
   {/snippet}

package/dist/components/menu/menu-item-radio.svelte

@@ -46,6 +46,7 @@
   {#snippet startIcon()}
     {@render _startIcon?.()}
   {/snippet}
+  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
   {#snippet children()}
     {@render _children?.()}
   {/snippet}

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

@@ -4,8 +4,8 @@
   @see https://w3c.github.io/aria/#menuitem
 -->
 <script>
+  import { isRTL } from '@sveltia/i18n';
   import { onMount } from 'svelte';
-  import { isRTL } from '../../services/i18n.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Popup from '../util/popup.svelte';
@@ -116,6 +116,7 @@
     {#snippet startIcon()}
       {@render _startIcon?.()}
     {/snippet}
+    <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
     {#snippet children()}
       <div role="none" class="content" class:label={!!label}>
         {#if label}
@@ -129,7 +130,7 @@
           {#if chevronIcon}
             {@render chevronIcon()}
           {:else}
-            <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
+            <Icon name={isRTL() ? 'chevron_left' : 'chevron_right'} />
           {/if}
         </span>
       {/if}

package/dist/components/menu/menu.svelte

@@ -47,7 +47,7 @@
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}
-  use:activateGroup
+  {@attach activateGroup()}
 >
   {@render children?.()}
 </div>

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

@@ -63,7 +63,7 @@
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}
-  use:activateGroup
+  {@attach activateGroup()}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

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

@@ -5,8 +5,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 -->
 <script>
+  import { isRTL } from '@sveltia/i18n';
   import { getContext } from 'svelte';
-  import { isRTL } from '../../services/i18n.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -112,7 +112,7 @@
     let percentDelta = (pixelDelta / containerSize) * 100;
 
     // In RTL with a horizontal layout, the visual direction is reversed
-    if (isHorizontal && $isRTL) {
+    if (isHorizontal && isRTL()) {
       percentDelta = -percentDelta;
     }
 
@@ -196,11 +196,13 @@
     }
 
     if (isHorizontal) {
+      const _isRTL = isRTL();
+
       // In RTL, Left/Right directions are visually swapped
       if (key === 'ArrowLeft') {
-        delta = $isRTL ? step : -step;
+        delta = _isRTL ? step : -step;
       } else if (key === 'ArrowRight') {
-        delta = $isRTL ? -step : step;
+        delta = _isRTL ? -step : step;
       } else {
         return;
       }

package/dist/components/select/combobox.svelte

@@ -6,7 +6,7 @@
   @todo Add DOM API compatibility.
 -->
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import { getSelectedItemDetail } from '../../services/select.svelte.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
@@ -137,7 +137,7 @@
     >
       <div role="none" class="label">
         <TruncatedText>
-          {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
+          {value !== undefined ? label : _('_sui.combobox.select_an_option')}
         </TruncatedText>
       </div>
     </div>
@@ -164,7 +164,7 @@
     {hidden}
     {disabled}
     tabindex={!editable || readonly || disabled ? -1 : 0}
-    aria-label={isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
+    aria-label={isPopupOpen ? _('_sui.collapse') : _('_sui.expand')}
     aria-controls="{id}-popup"
     aria-expanded={isPopupOpen}
     onclick={(event) => {
@@ -205,7 +205,7 @@
     {#if showFilter}
       <SearchBar
         flex
-        aria-label={$_('_sui.combobox.filter_options')}
+        aria-label={_('_sui.combobox.filter_options')}
         aria-controls="{id}-listbox"
         bind:value={searchTerms}
         onkeydown={(event) => {
@@ -235,7 +235,7 @@
     </Listbox>
     {#if !hasMatchingOptions}
       <div role="alert" class="no-options">
-        {$_('_sui.combobox.no_matching_options')}
+        {_('_sui.combobox.no_matching_options')}
       </div>
     {/if}
   </div>

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

@@ -1,8 +1,7 @@
 <script>
+  import { _, isRTL } from '@sveltia/i18n';
   import { tick } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import { flip } from 'svelte/animate';
-  import { isRTL } from '../../services/i18n.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Option from '../listbox/option.svelte';
@@ -60,8 +59,8 @@
 
   /** @type {Map<any, { label: string, value: any, searchValue?: string }>} */
   const optionMap = $derived(new Map(options.map((o) => [o.value, o])));
-  const prevKey = $derived($isRTL ? 'ArrowRight' : 'ArrowLeft');
-  const nextKey = $derived($isRTL ? 'ArrowLeft' : 'ArrowRight');
+  const prevKey = $derived(isRTL() ? 'ArrowRight' : 'ArrowLeft');
+  const nextKey = $derived(isRTL() ? 'ArrowLeft' : 'ArrowRight');
 
   /**
    * Reference to the wrapper element.
@@ -128,7 +127,7 @@
   <span
     role="listbox"
     aria-multiselectable="true"
-    aria-label={$_('_sui.select_tags.selected_options')}
+    aria-label={_('_sui.select_tags.selected_options')}
   >
     {#each values as value, index (value)}
       {@const option = optionMap.get(value)}
@@ -159,7 +158,7 @@
           const rect = event.currentTarget.getBoundingClientRect();
           const inFirstHalf = event.clientX < rect.left + rect.width / 2;
 
-          dropIndex = inFirstHalf !== $isRTL ? index : index + 1;
+          dropIndex = inFirstHalf !== isRTL() ? index : index + 1;
         }}
         ondrop={async (event) => {
           event.preventDefault();
@@ -217,7 +216,7 @@
             iconic
             size="small"
             disabled={disabled || readonly}
-            aria-label={$_('_sui.select_tags.remove_x', { values: { name: label } })}
+            aria-label={_('_sui.select_tags.remove_x', { values: { name: label } })}
             onclick={() => {
               values = values.filter((v) => v !== value);
               onRemoveValue?.(new CustomEvent('RemoveValue', { detail: { value } }));

package/dist/components/slider/slider.svelte

@@ -8,8 +8,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
 -->
 <script>
+  import { isRTL } from '@sveltia/i18n';
   import { onMount } from 'svelte';
-  import { isRTL } from '../../services/i18n.js';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -88,7 +88,7 @@
     // Convert physical position to logical position (always LTR)
     // In RTL, left side (physicalX=0) maps to max value (logicalX=barWidth)
     // In LTR, left side (physicalX=0) maps to min value (logicalX=0)
-    const logicalX = $isRTL ? barWidth - physicalX : physicalX;
+    const logicalX = isRTL() ? barWidth - physicalX : physicalX;
 
     if (logicalX < 0 || logicalX > barWidth) {
       return;
@@ -132,9 +132,10 @@
 
     const _value = multiThumb ? /** @type {[number, number]} */ (values)[valueIndex] : value;
     let index = -1;
+    const _isRTL = isRTL();
     // In RTL, ArrowLeft increases value, ArrowRight decreases value
-    const decreaseKeys = $isRTL ? ['ArrowDown', 'ArrowRight'] : ['ArrowDown', 'ArrowLeft'];
-    const increaseKeys = $isRTL ? ['ArrowUp', 'ArrowLeft'] : ['ArrowUp', 'ArrowRight'];
+    const decreaseKeys = _isRTL ? ['ArrowDown', 'ArrowRight'] : ['ArrowDown', 'ArrowLeft'];
+    const increaseKeys = _isRTL ? ['ArrowUp', 'ArrowLeft'] : ['ArrowUp', 'ArrowRight'];
 
     if (decreaseKeys.includes(key)) {
       if (_value > min) {
@@ -367,7 +368,7 @@
       ></div>
     {/if}
     {#if optionLabels.length}
-      {#each optionLabels as label, index}
+      {#each optionLabels as label, index (`${index}-${label}`)}
         <span
           role="none"
           class="label"

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

@@ -83,7 +83,7 @@ declare const Slider: import("svelte").Component<{
         values?: number[];
         value?: number;
     }) => void) | undefined;
-} & Record<string, any>, {}, "values" | "value">;
+} & Record<string, any>, {}, "value" | "values">;
 type Props = {
     /**
      * Current value.

package/dist/components/tabs/tab-list.svelte

@@ -108,7 +108,7 @@
     updateIndicator();
     onChange?.(event);
   }}
-  use:activateGroup
+  {@attach activateGroup()}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

package/dist/components/tabs/tab.svelte

@@ -45,6 +45,7 @@
   {#snippet startIcon()}
     {@render _startIcon?.()}
   {/snippet}
+  <!-- eslint-disable-next-line svelte/no-useless-children-snippet -->
   {#snippet children()}
     {@render _children?.()}
   {/snippet}

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

@@ -3,8 +3,8 @@
   A code editor based on Lexical.
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import { setContext, untrack } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Alert from '../alert/alert.svelte';
   import Toast from '../toast/toast.svelte';
   import LexicalRoot from './lexical-root.svelte';
@@ -108,7 +108,7 @@
 
 {#if editorStore.showConverterError}
   <Toast bind:show={editorStore.showConverterError}>
-    <Alert status="error">{$_('_sui.text_editor.converter_error')}</Alert>
+    <Alert status="error">{_('_sui.text_editor.converter_error')}</Alert>
   </Toast>
 {/if}
 

package/dist/components/text-editor/core.js

@@ -1,3 +1,7 @@
+// Work around the “Prism is not defined” error in consumers
+// @see https://github.com/remix-run/remix/discussions/8182
+import 'prismjs';
+
 import {
   $createCodeNode,
   $isCodeHighlightNode,

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

@@ -3,8 +3,8 @@
   A rich text editor based on Lexical.
 -->
 <script>
+  import { _ } from '@sveltia/i18n';
   import { setContext, untrack } from 'svelte';
-  import { _ } from 'svelte-i18n';
   import Alert from '../alert/alert.svelte';
   import TextArea from '../text-field/text-area.svelte';
   import Toast from '../toast/toast.svelte';
@@ -120,7 +120,7 @@
 
 {#if editorStore.showConverterError}
   <Toast bind:show={editorStore.showConverterError}>
-    <Alert status="error">{$_('_sui.text_editor.converter_error')}</Alert>
+    <Alert status="error">{_('_sui.text_editor.converter_error')}</Alert>
   </Toast>
 {/if}
 

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

@@ -1,5 +1,5 @@
 <script>
-  import { _ } from 'svelte-i18n';
+  import { _ } from '@sveltia/i18n';
   import CodeLanguageSwitcher from './code-language-switcher.svelte';
   import ToolbarWrapper from './toolbar-wrapper.svelte';
 
@@ -23,6 +23,6 @@
   } = $props();
 </script>
 
-<ToolbarWrapper disabled={disabled || readonly} aria-label={$_('_sui.text_editor.code_editor')}>
+<ToolbarWrapper disabled={disabled || readonly} aria-label={_('_sui.text_editor.code_editor')}>
   <CodeLanguageSwitcher disabled={disabled || readonly} />
 </ToolbarWrapper>