@sveltia/ui 0.28.4 → 0.30.0

package/dist/components/alert/infobar.svelte

@@ -92,7 +92,7 @@
   flex: auto;
   display: flex;
   align-items: center;
-  justify-content: var(--sui-infobar-message-justify-content, left);
+  justify-content: var(--sui-infobar-message-justify-content, start);
   gap: var(--sui-infobar-message-gap, 6px);
   padding: var(--sui-infobar-message-padding, 0 8px);
 }

package/dist/components/button/floating-action-button-wrapper.svelte

@@ -27,7 +27,8 @@
   .floating-action-button-wrapper {
     display: block;
     position: fixed;
-    inset: auto 16px 72px auto;
+    inset-inline-end: 16px;
+    inset-block-end: 72px;
     z-index: 100;
   }
   .floating-action-button-wrapper :global(button) {

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

@@ -77,15 +77,15 @@
   color: var(--sui-primary-foreground-color);
 }
 .select-button-group :global(button:first-child) {
-  border-top-left-radius: 4px !important;
-  border-bottom-left-radius: 4px !important;
+  border-start-start-radius: 4px !important;
+  border-end-start-radius: 4px !important;
 }
 .select-button-group :global(button:not(:first-child)) {
-  border-left-width: 0;
+  border-inline-start-width: 0;
 }
 .select-button-group :global(button:last-child) {
-  border-top-right-radius: 4px !important;
-  border-bottom-right-radius: 4px !important;
+  border-start-end-radius: 4px !important;
+  border-end-end-radius: 4px !important;
 }
 .select-button-group :global(button[aria-checked=true]) {
   color: var(--sui-highlight-foreground-color);

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

@@ -91,12 +91,12 @@
   margin: 0;
 }
 .split-button :global(button.menu-button) {
-  border-left-width: 0;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-inline-start-width: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   aspect-ratio: 3/4;
 }
 .split-button :global(button:not(.menu-button)) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }</style>

package/dist/components/calendar/calendar.svelte

@@ -4,6 +4,7 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
+  import { isRTL } from '../../services/i18n';
   import Button from '../button/button.svelte';
   import Divider from '../divider/divider.svelte';
   import Spacer from '../divider/spacer.svelte';
@@ -98,7 +99,7 @@
                   //
                 }}
               >
-                <Icon name="chevron_right" />
+                <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
               </Button>
             </div>
             <div role="none" class="grid">
@@ -142,7 +143,7 @@
         firstDay = firstDay;
       }}
     >
-      <Icon name="chevron_right" />
+      <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
     </Button>
   </div>
   <div role="listbox" class="grid">

package/dist/components/checkbox/checkbox.svelte

@@ -26,6 +26,9 @@
    * @property {string} [label] Text label displayed next to the checkbox.
    * @property {string} [aria-label] `aria-label` attribute.
    * @property {Snippet} [checkIcon] Check icon slot content.
+   * @property {string[]} [group] The two-way bound variable to manage the state of a group of
+   * checkboxes. It works in the same way as the [`<input
+   * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
    */
 
   /**
@@ -44,6 +47,7 @@
     invalid = false,
     label = undefined,
     'aria-label': ariaLabel,
+    group = $bindable([]),
     onChange,
     children,
     checkIcon,
@@ -60,6 +64,17 @@
   let buttonElement = $state();
 
   const indeterminate = $derived(checked === 'mixed');
+
+  // Sync `checked` with `group` and `value`
+  $effect(() => {
+    if (group.includes(value)) {
+      if (checked !== true) {
+        checked = true;
+      }
+    } else if (checked !== false) {
+      checked = false;
+    }
+  });
 </script>
 
 <div
@@ -99,9 +114,19 @@
         event.preventDefault();
         event.stopPropagation();
 
-        if (!disabled && !readonly) {
-          checked = indeterminate ? true : !checked;
-          onChange?.(new CustomEvent('Change', { detail: { checked } }));
+        if (disabled || readonly) {
+          return;
+        }
+
+        checked = indeterminate ? true : !checked;
+        onChange?.(new CustomEvent('Change', { detail: { checked } }));
+
+        if (checked) {
+          if (!group.includes(value)) {
+            group = [...group, value];
+          }
+        } else if (group.includes(value)) {
+          group = group.filter((v) => v !== value);
         }
       }}
     >

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

@@ -41,7 +41,13 @@ declare const Checkbox: import("svelte").Component<ButtonProps & import("../../t
      * Check icon slot content.
      */
     checkIcon?: Snippet<[]> | undefined;
-} & Record<string, any>, {}, "checked">;
+    /**
+     * The two-way bound variable to manage the state of a group of
+     * checkboxes. It works in the same way as the [`<input
+     * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
+     */
+    group?: string[] | undefined;
+} & Record<string, any>, {}, "group" | "checked">;
 type Props = {
     /**
      * The `class` attribute on the wrapper element.
@@ -74,6 +80,12 @@ type Props = {
      * Check icon slot content.
      */
     checkIcon?: Snippet<[]> | undefined;
+    /**
+     * The two-way bound variable to manage the state of a group of
+     * checkboxes. It works in the same way as the [`<input
+     * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
+     */
+    group?: string[] | undefined;
 };
 import type { ButtonProps } from '../../typedefs';
 import type { Snippet } from 'svelte';

package/dist/components/disclosure/disclosure.svelte

@@ -92,9 +92,12 @@
 .disclosure :global(button) :global(.icon) {
   transition: all 200ms;
 }
-.disclosure :global(button[aria-expanded=false]) :global(.icon) {
+.disclosure :global(button[aria-expanded=false]) :global(.icon:dir(ltr)) {
   transform: rotate(-90deg);
 }
+.disclosure :global(button[aria-expanded=false]) :global(.icon:dir(rtl)) {
+  transform: rotate(90deg);
+}
 
 .inner {
   display: contents;

package/dist/components/drawer/drawer.svelte

@@ -164,31 +164,47 @@
   transition-duration: 300ms;
 }
 .content.right {
-  inset: var(--sui-drawer-right-content-inset, 0 0 0 auto);
-  border-radius: var(--sui-drawer-right-content-border-radius, var(--sui-drawer-content-border-radius, 4px 0 0 4px));
+  inset-block: var(--sui-drawer-right-content-inset-block, 0);
+  inset-inline: var(--sui-drawer-right-content-inset-inline, auto 0);
+  border-start-start-radius: var(--sui-drawer-right-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 4px));
+  border-start-end-radius: var(--sui-drawer-right-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 0));
+  border-end-end-radius: var(--sui-drawer-right-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 0));
+  border-end-start-radius: var(--sui-drawer-right-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 4px));
 }
 .content.right.full {
   border-radius: var(--sui-drawer-right-full-content-border-radius, var(--sui-drawer-right-content-border-radius, 0));
 }
 .content.right .extra-control {
-  inset: 0 100% auto auto;
+  inset-block-start: 0;
+  inset-inline-end: 100%;
 }
-:global(dialog:not(.open)) .content.right {
+:global(dialog:not(.open)) .content.right:dir(ltr) {
   transform: translateX(105%);
 }
+:global(dialog:not(.open)) .content.right:dir(rtl) {
+  transform: translateX(-105%);
+}
 .content.left {
-  inset: var(--sui-drawer-left-content-inset, 0 auto 0 0);
-  border-radius: var(--sui-drawer-left-content-border-radius, var(--sui-drawer-content-border-radius, 0 4px 4px 0));
+  inset-block: var(--sui-drawer-left-content-inset-block, 0);
+  inset-inline: var(--sui-drawer-left-content-inset-inline, 0 auto);
+  border-start-start-radius: var(--sui-drawer-left-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 0));
+  border-start-end-radius: var(--sui-drawer-left-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 4px));
+  border-end-end-radius: var(--sui-drawer-left-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 4px));
+  border-end-start-radius: var(--sui-drawer-left-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 0));
 }
 .content.left.full {
   border-radius: var(--sui-drawer-left-full-content-border-radius, var(--sui-drawer-left-content-border-radius, 0));
 }
 .content.left .extra-control {
-  inset: 0 auto auto 100%;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
 }
-:global(dialog:not(.open)) .content.left {
+:global(dialog:not(.open)) .content.left:dir(ltr) {
   transform: translateX(-105%);
 }
+:global(dialog:not(.open)) .content.left:dir(rtl) {
+  transform: translateX(105%);
+}
 :global(dialog.open) .content.vertical {
   transform: translateX(0%);
 }
@@ -218,27 +234,37 @@
   height: 100dvh;
 }
 .content.top {
-  inset: var(--sui-drawer-top-content-inset, 0 0 auto 0);
-  border-radius: var(--sui-drawer-top-content-border-radius, var(--sui-drawer-content-border-radius, 0 0 4px 4px));
+  inset-block-start: var(--sui-drawer-top-content-inset-block, 0);
+  inset-inline: var(--sui-drawer-top-content-inset-inline, 0 0);
+  border-start-start-radius: var(--sui-drawer-top-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 0));
+  border-start-end-radius: var(--sui-drawer-top-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 0));
+  border-end-end-radius: var(--sui-drawer-top-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 4px));
+  border-end-start-radius: var(--sui-drawer-top-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 4px));
 }
 .content.top.full {
   border-radius: var(--sui-drawer-top-full-content-border-radius, var(--sui-drawer-top-content-border-radius, 0));
 }
 .content.top .extra-control {
-  inset: 100% 0 auto auto;
+  inset-block-start: 100%;
+  inset-inline-end: 0;
 }
 :global(dialog:not(.open)) .content.top {
   transform: translateY(-105%);
 }
 .content.bottom {
-  inset: var(--sui-drawer-bottom-content-inset, auto 0 0 0);
-  border-radius: var(--sui-drawer-bottom-content-border-radius, var(--sui-drawer-content-border-radius, 4px 4px 0 0));
+  inset-block: var(--sui-drawer-bottom-content-inset-block, auto 0);
+  inset-inline: var(--sui-drawer-bottom-content-inset-inline, 0);
+  border-start-start-radius: var(--sui-drawer-bottom-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 4px));
+  border-start-end-radius: var(--sui-drawer-bottom-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 4px));
+  border-end-end-radius: var(--sui-drawer-bottom-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 0));
+  border-end-start-radius: var(--sui-drawer-bottom-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 0));
 }
 .content.bottom.full {
   border-radius: var(--sui-drawer-bottom-full-content-border-radius, var(--sui-drawer-bottom-content-border-radius, 0));
 }
 .content.bottom .extra-control {
-  inset: auto 0 100% auto;
+  inset-block-end: 100%;
+  inset-inline-end: 0;
 }
 :global(dialog:not(.open)) .content.bottom {
   transform: translateY(105%);

package/dist/components/listbox/listbox.svelte

@@ -117,16 +117,20 @@
 }
 [role=listbox].tabs {
   padding: 0;
-  border-width: 0 1px 0 0;
+  border-block-start-width: 0;
+  border-block-end-width: 0;
+  border-inline-end-width: 1px;
+  border-inline-start-width: 0;
   border-color: var(--sui-control-border-color);
 }
 [role=listbox].tabs :global(.option) :global(button) {
   justify-content: flex-start;
-  border-width: 0 2px 0 0;
+  border-width: 0;
+  border-inline-end-width: 2px;
   border-color: transparent;
   padding: 0 12px;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
   height: var(--sui-tab-medium-height);
 }
 [role=listbox].tabs :global(.option) :global(button[aria-selected=true]) {

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

@@ -5,6 +5,7 @@
 -->
 <script>
   import { onMount } from 'svelte';
+  import { isRTL } from '../../services/i18n';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Popup from '../util/popup.svelte';
@@ -128,7 +129,7 @@
           {#if chevronIcon}
             {@render chevronIcon()}
           {:else}
-            <Icon name="chevron_right" />
+            <Icon name={$isRTL ? 'chevron_left' : 'chevron_right'} />
           {/if}
         </span>
       {/if}
@@ -185,7 +186,10 @@
 }
 .menuitem > :global([role=menu]) {
   position: absolute;
-  inset: 2px auto auto calc(100% + 4px);
+  inset-block-start: 2px;
+  inset-block-end: auto;
+  inset-inline-start: calc(100% + 4px);
+  inset-inline-end: auto;
 }
 .menuitem > :global([role=menu]:hover) {
   opacity: 1;

package/dist/components/radio/radio.svelte

@@ -25,6 +25,9 @@
    * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
    * `boolean`. Default: auto detect.
    * @property {string} [label] Text label displayed next to the checkbox.
+   * @property {string} [group] The two-way bound variable to manage the state of a group of radio
+   * buttons. It works in the same way as the [`<input
+   * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [default] Default slot content.
    * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
@@ -44,6 +47,7 @@
     value = undefined,
     valueType = undefined,
     label = undefined,
+    group = $bindable(''),
     children,
     onChange,
     onSelect,
@@ -58,6 +62,17 @@
    * @type {HTMLButtonElement | undefined}
    */
   let buttonElement = $state();
+
+  // Sync `checked` with `group` and `value`
+  $effect(() => {
+    if (group === value) {
+      if (!checked) {
+        checked = true;
+      }
+    } else if (checked) {
+      checked = false;
+    }
+  });
 </script>
 
 <span
@@ -85,7 +100,13 @@
     aria-labelledby="{id}-label"
     onclick={(event) => {
       event.preventDefault();
+
+      if (disabled || checked) {
+        return;
+      }
+
       checked = true;
+      group = value;
     }}
     {onChange}
     {onSelect}

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

@@ -45,6 +45,12 @@ declare const Radio: import("svelte").Component<{
      * Text label displayed next to the checkbox.
      */
     label?: string | undefined;
+    /**
+     * The two-way bound variable to manage the state of a group of radio
+     * buttons. It works in the same way as the [`<input
+     * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
+     */
+    group?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -61,7 +67,7 @@ declare const Radio: import("svelte").Component<{
      * Custom `Select` event handler.
      */
     onSelect?: ((event: CustomEvent) => void) | undefined;
-} & Record<string, any>, {}, "">;
+} & Record<string, any>, {}, "group">;
 type Props = {
     /**
      * The `class` attribute on the wrapper element.
@@ -98,6 +104,12 @@ type Props = {
      * Text label displayed next to the checkbox.
      */
     label?: string | undefined;
+    /**
+     * The two-way bound variable to manage the state of a group of radio
+     * buttons. It works in the same way as the [`<input
+     * bind:group>`](https://svelte.dev/docs/svelte/bind#input-bind:group) of Svelte.
+     */
+    group?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/select/combobox.svelte

@@ -251,7 +251,9 @@
   border-width: 1px;
   border-color: var(--sui-control-border-color);
   border-radius: var(--sui-textbox-border-radius);
-  padding: 0 var(--sui-textbox-height) 0 calc(var(--sui-textbox-height) / 4);
+  padding-block: 0;
+  padding-inline-start: calc(var(--sui-textbox-height) / 4);
+  padding-inline-end: var(--sui-textbox-height);
   width: 100%;
   height: var(--sui-textbox-height);
   color: var(--sui-control-foreground-color);
@@ -282,16 +284,18 @@
 }
 .combobox > :global(.icon) {
   position: absolute;
-  inset: 8px auto auto 8px;
+  inset-block-start: 8px;
+  inset-inline-start: 8px;
   z-index: 1;
 }
 .combobox > :global(button) {
   position: absolute;
-  inset: 0 0 auto auto;
+  inset-block-start: 0;
+  inset-inline-end: 0;
   z-index: 1;
   margin: 0 !important;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   background-color: transparent !important;
 }
 .combobox > :global(button[tabindex="-1"]) {
@@ -305,7 +309,8 @@
   width: 100% !important;
 }
 .combobox :global(input) {
-  padding: 0 32px 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 32px;
   width: 0;
 }
 .combobox + :global([role=listbox]) {

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

@@ -120,7 +120,8 @@
   display: inline-flex;
   align-items: center;
   margin: var(--sui-focus-ring-width);
-  padding: 0 0 0 8px;
+  padding: 0;
+  padding-inline-start: 8px;
   border-radius: var(--sui-control-medium-border-radius);
   background-color: var(--sui-secondary-background-color);
 }

package/dist/components/slider/slider.svelte

@@ -313,7 +313,7 @@
     <div role="none" class="base-bar"></div>
     <div
       class="slider-bar"
-      style:left="{multiThumb ? sliderPositions[0] : 0}px"
+      style:inset-inline-start="{multiThumb ? sliderPositions[0] : 0}px"
       style:width="{multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px"
     ></div>
     <div
@@ -327,7 +327,7 @@
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={multiThumb ? values?.[0] : value}
-      style:left="{sliderPositions[0]}px"
+      style:inset-inline-start="{sliderPositions[0]}px"
       onpointerdown={(event) => onPointerDown(event, 0)}
       onkeydown={(event) => onKeyDown(event, 0)}
     ></div>
@@ -343,7 +343,7 @@
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={values?.[1]}
-        style:left="{sliderPositions[1]}px"
+        style:inset-inline-start="{sliderPositions[1]}px"
         onpointerdown={(event) => onPointerDown(event, 1)}
         onkeydown={(event) => onKeyDown(event, 1)}
       ></div>
@@ -353,7 +353,7 @@
         <span
           role="none"
           class="label"
-          style:left="{(barWidth / (optionLabels.length - 1)) * index}px"
+          style:inset-inline-start="{(barWidth / (optionLabels.length - 1)) * index}px"
         >
           {label}
         </span>
@@ -414,8 +414,13 @@
   height: calc(var(--sui-checkbox-height) - 2px);
   background-color: var(--sui-primary-accent-color-inverted);
   cursor: pointer;
+}
+[role=slider]:dir(ltr) {
   transform: translate(calc((var(--sui-checkbox-height) / 2 - 1px) * -1), calc((var(--sui-checkbox-height) / 4 - 1px) * -1));
 }
+[role=slider]:dir(rtl) {
+  transform: translate(calc(var(--sui-checkbox-height) / 2 - 1px), calc((var(--sui-checkbox-height) / 4 - 1px) * -1));
+}
 .invalid [role=slider] {
   border-color: var(--sui-error-border-color);
 }
@@ -423,6 +428,11 @@
 .label {
   position: absolute;
   top: calc(var(--sui-checkbox-height) / 2 + 8px);
-  transform: translateX(-50%);
   font-size: var(--sui-font-size-x-small);
+}
+.label:dir(ltr) {
+  transform: translateX(-50%);
+}
+.label:dir(rtl) {
+  transform: translateX(50%);
 }</style>

package/dist/components/switch/switch.svelte

@@ -121,10 +121,16 @@ button[aria-checked=true] span {
   border-color: transparent;
 }
 button[aria-checked=true] span::before {
-  transform: translateX(calc(var(--sui-checkbox-height) * 2 - var(--sui-checkbox-height)));
+  --translateX: var(--sui-checkbox-height) * 2 - var(--sui-checkbox-height);
   border-color: var(--sui-primary-accent-color);
   background-color: var(--sui-primary-accent-color-inverted);
 }
+button[aria-checked=true] span:dir(ltr)::before {
+  transform: translateX(calc(var(--translateX)));
+}
+button[aria-checked=true] span:dir(rtl)::before {
+  transform: translateX(calc((var(--translateX)) * -1));
+}
 
 span {
   position: relative;

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

@@ -128,8 +128,10 @@
 }
 .tab-list[aria-orientation=horizontal] {
   gap: var(--sui-horizontal-tab-list-gap, var(--sui-tab-list-gap, 8px));
-  margin: var(--sui-horizontal-tab-list-margin, var(--sui-tab-list-margin, 0 0 32px));
-  border-width: var(--sui-horizontal-tab-list-border-width, var(--sui-tab-list-border-width, 0 0 1px));
+  margin-block: var(--sui-horizontal-tab-list-margin-block, 0 32px);
+  margin-inline: var(--sui-horizontal-tab-list-margin-inline, 0);
+  border-block-width: var(--sui-horizontal-tab-list-border-block-width, 0 1px);
+  border-inline-width: var(--sui-horizontal-tab-list-border-inline-width, 0 0);
   padding: var(--sui-horizontal-tab-list-padding, var(--sui-tab-list-padding, 0 16px));
 }
 .tab-list[aria-orientation=horizontal] :global(button) {
@@ -138,24 +140,28 @@
   justify-content: var(--sui-horizontal-tab-justify-content, center);
 }
 .tab-list[aria-orientation=horizontal] .indicator {
-  border-width: var(--sui-horizontal-tab-list-indicator-border-width, var(--sui-tab-list-indicator-border-width, 0 0 2px 0));
+  border-block-width: var(--sui-horizontal-tab-list-indicator-border-block-width, 0 2px);
+  border-inline-width: var(--sui-horizontal-tab-list-indicator-border-inline-width, 0 0);
 }
 .tab-list[aria-orientation=vertical] {
   gap: var(--sui-vertical-tab-list-gap, var(--sui-tab-list-gap, 8px));
   flex-direction: column;
-  margin: var(--sui-vertical-tab-list-margin, var(--sui-tab-list-margin, 0 32px 0 0));
-  border-width: var(--sui-vertical-tab-list-border-width, var(--sui-tab-list-border-width, 0 1px 0 0));
+  margin-block: var(--sui-vertical-tab-list-margin-block, 0);
+  margin-inline: var(--sui-vertical-tab-list-margin-inline, 0 32px);
+  border-block-width: var(--sui-vertical-tab-list-border-block-width, 0 0);
+  border-inline-width: var(--sui-vertical-tab-list-border-inline-width, 0 1px);
   padding: var(--sui-vertical-tab-list-padding, var(--sui-tab-list-padding, 8px 0));
   width: var(--sui-vertical-tab-list-width, auto);
 }
 .tab-list[aria-orientation=vertical] :global(button) {
   justify-content: var(--sui-vertical-tab-justify-content, flex-start);
-  padding-right: 32px;
+  padding-inline-end: 32px;
   width: var(--sui-vertical-tab-width, var(--sui-tab-width, 100%));
   height: var(--sui-vertical-tab-height, var(--sui-tab-height, auto));
 }
 .tab-list[aria-orientation=vertical] .indicator {
-  border-width: var(--sui-horizontal-tab-list-vertical-border-width, var(--sui-tab-list-indicator-border-width, 0 2px 0 0));
+  border-block-width: var(--sui-vertical-tab-list-indicator-border-block-width, 0 0);
+  border-inline-width: var(--sui-vertical-tab-list-indicator-border-inline-width, 0 2px);
 }
 .tab-list :global(button) {
   position: relative;

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

@@ -137,8 +137,8 @@
   line-height: var(--sui-textbox-multiline-line-height);
 }
 .lexical-root:not(:first-child) {
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
 }
 .lexical-root.code {
   padding: 0;
@@ -168,7 +168,9 @@
 .lexical-root :global(.code-block) {
   position: relative;
   display: block;
-  padding: 8px 8px 8px 56px;
+  padding-block: 8px;
+  padding-inline-start: 56px;
+  padding-inline-end: 8px;
   background-color: var(--sui-code-background-color);
   overflow-x: auto;
   white-space: pre;
@@ -181,13 +183,15 @@
 }
 .lexical-root :global(.code-block::before) {
   position: absolute;
-  inset: 0 auto 0 0;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
   content: attr(data-gutter);
   padding: 8px;
   min-width: 40px;
   color: var(--sui-tertiary-foreground-color);
   background-color: var(--sui-tertiary-background-color);
-  text-align: right;
+  text-align: end;
 }
 .lexical-root :global([data-lexical-text=true]) {
   cursor: text;

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

@@ -133,5 +133,8 @@
   min-width: auto;
 }
 .text-editor :global(.sui.text-area) :global(textarea) {
-  border-radius: 0 0 var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: var(--sui-textbox-border-radius) !important;
+  border-end-end-radius: var(--sui-textbox-border-radius) !important;
 }</style>

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

@@ -46,7 +46,10 @@
   border-width: 1px 1px 0;
   border-style: solid;
   border-color: var(--sui-textbox-border-color);
-  border-radius: var(--sui-textbox-border-radius) var(--sui-textbox-border-radius) 0 0;
+  border-start-start-radius: var(--sui-textbox-border-radius);
+  border-start-end-radius: var(--sui-textbox-border-radius);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   padding: 8px;
   background-color: var(--sui-tertiary-background-color);
 }

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

@@ -211,12 +211,12 @@
   min-width: 0;
 }
 .number-input :global(:not(:first-child)) :global(input) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 .number-input :global(:not(:last-child)) :global(input) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 .number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) {
   filter: grayscale(0) opacity(1);
@@ -246,16 +246,22 @@
   height: 50%;
 }
 .buttons :global(button:first-of-type) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  border-width: 1px 0 0 1px;
+  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-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-width: 0 0 1px 1px;
+  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;
 }
 .buttons :global(button) :global(.icon) {
   font-size: 20px;

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

@@ -120,19 +120,24 @@
   min-width: 0 !important;
 }
 .password-input :global(input) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 .password-input :global(button) {
   flex: none;
-  margin: 0 0 0 -1px;
+  margin-block: 0;
+  margin-inline-start: -1px;
+  margin-inline-end: 0;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
   width: var(--sui-textbox-height);
   aspect-ratio: 1/1;
 }
 .password-input :global(button:last-child) {
-  border-radius: 0 4px 4px 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
 }
 .password-input :global(button) :global(.icon) {
   font-size: var(--sui-font-size-xx-large);

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

@@ -131,7 +131,9 @@
 }
 .search-bar > span {
   position: absolute;
-  inset: 0 auto 0 0;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
   z-index: 2;
   display: flex;
   align-items: center;
@@ -145,7 +147,9 @@
 }
 .search-bar > :global(button) {
   position: absolute;
-  inset: 0 0 auto auto;
+  inset-block: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
   z-index: 2;
   margin: 0 !important;
   height: var(--sui-button-medium-height);

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

@@ -144,14 +144,17 @@ input[aria-invalid=true] {
 }
 input ~ :global(button) {
   flex: none;
-  margin-left: -1px;
+  margin-inline-start: -1px;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
   height: var(--sui-textbox-height);
   aspect-ratio: 1/1;
 }
 input ~ :global(button:last-child) {
-  border-radius: 0 4px 4px 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
 }
 input ~ :global(button) :global(.icon) {
   font-size: var(--sui-font-size-xx-large);

package/dist/components/toast/toast.svelte

@@ -167,22 +167,50 @@
   opacity: 0;
 }
 .toast.top-left {
-  inset: 0 auto auto 0;
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
 }
 .toast.top-center {
-  inset: 0 auto auto 50%;
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+}
+.toast.top-center:dir(ltr) {
   transform: translateX(-50%);
 }
+.toast.top-center:dir(rtl) {
+  transform: translateX(50%);
+}
 .toast.top-right {
-  inset: 0 0 auto auto;
+  inset-block-start: 0;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
 }
 .toast.bottom-left {
-  inset: auto auto 0 0;
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
 }
 .toast.bottom-center {
-  inset: auto auto 0 50%;
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+}
+.toast.bottom-center:dir(ltr) {
   transform: translateX(-50%);
 }
+.toast.bottom-center:dir(rtl) {
+  transform: translateX(50%);
+}
 .toast.bottom-right {
-  inset: auto 0 0 auto;
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
 }</style>

package/dist/components/util/app-shell.svelte

@@ -559,7 +559,7 @@
 
 .font-loader {
   position: absolute;
-  left: -99999px;
+  inset-inline-start: -99999px;
   font-family: var(--sui-font-family-default);
 }
 

package/dist/index.d.ts

@@ -73,6 +73,7 @@ export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as EmptyState } from "./components/util/empty-state.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
-export { initLocales };
 export * from "./typedefs";
 import { initLocales } from './services/i18n';
+import { isRTL } from './services/i18n';
+export { initLocales, isRTL };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { initLocales } from './services/i18n';
+import { initLocales, isRTL } from './services/i18n';
 
 initLocales();
 
@@ -77,7 +77,7 @@ export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as EmptyState } from './components/util/empty-state.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
-export { initLocales };
+export { initLocales, isRTL };
 
 // eslint-disable-next-line import/export
 export * from './typedefs';

package/dist/services/group.svelte.js

@@ -294,6 +294,7 @@ class Group {
         );
 
         if (isTarget) {
+          element.click();
           element.dispatchEvent(new CustomEvent('Select'));
         }
       }

package/dist/services/i18n.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Whether the current document is in RTL mode.
+ * @type {import('svelte/store').Writable<boolean>}
+ */
+export const isRTL: import("svelte/store").Writable<boolean>;
 export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string | undefined;
     initialLocale?: string | undefined;

package/dist/services/i18n.js

@@ -1,4 +1,11 @@
 import { addMessages, locale as appLocale, init } from 'svelte-i18n';
+import { writable } from 'svelte/store';
+
+/**
+ * Whether the current document is in RTL mode.
+ * @type {import('svelte/store').Writable<boolean>}
+ */
+export const isRTL = writable(false);
 
 /**
  * Load strings and initialize the locales.
@@ -44,4 +51,12 @@ if (!import.meta.env.SSR) {
   appLocale.subscribe((value) => {
     document.documentElement.dir = getDirection(value);
   });
+
+  // Update `isRTL` store based on the current document direction.
+  new MutationObserver(() => {
+    isRTL.set(document.dir === 'rtl');
+  }).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['dir'],
+  });
 }

package/dist/services/popup.svelte.js

@@ -46,6 +46,22 @@ class Popup {
       let { position } = this;
       let height;
 
+      // Normalize RTL-friendly positions to LTR for LTR documents
+      // @todo Rename `PopupPosition` enums to be direction-agnostic
+      if (document.dir === 'rtl') {
+        if (position.endsWith('-left')) {
+          position = /** @type {PopupPosition} */ (position.replace('-left', '-right'));
+        } else if (position.endsWith('-right')) {
+          position = /** @type {PopupPosition} */ (position.replace('-right', '-left'));
+        }
+
+        if (position.startsWith('left-')) {
+          position = /** @type {PopupPosition} */ (position.replace('left-', 'right-'));
+        } else if (position.startsWith('right-')) {
+          position = /** @type {PopupPosition} */ (position.replace('right-', 'left-'));
+        }
+      }
+
       // Alter the position if the space is limited
       // @todo Handle more overflow cases
       if (position.startsWith('bottom-')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.28.4",
+  "version": "0.30.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -8,18 +8,18 @@
     "url": "github:sveltia/sveltia-ui"
   },
   "dependencies": {
-    "@lexical/code": "^0.36.1",
-    "@lexical/dragon": "^0.36.1",
-    "@lexical/history": "^0.36.1",
-    "@lexical/link": "^0.36.1",
-    "@lexical/list": "^0.36.1",
-    "@lexical/markdown": "^0.36.1",
-    "@lexical/rich-text": "^0.36.1",
-    "@lexical/selection": "^0.36.1",
-    "@lexical/table": "^0.36.1",
-    "@lexical/utils": "^0.36.1",
+    "@lexical/code": "^0.36.2",
+    "@lexical/dragon": "^0.36.2",
+    "@lexical/history": "^0.36.2",
+    "@lexical/link": "^0.36.2",
+    "@lexical/list": "^0.36.2",
+    "@lexical/markdown": "^0.36.2",
+    "@lexical/rich-text": "^0.36.2",
+    "@lexical/selection": "^0.36.2",
+    "@lexical/table": "^0.36.2",
+    "@lexical/utils": "^0.36.2",
     "@sveltia/utils": "^0.8.5",
-    "lexical": "^0.36.1",
+    "lexical": "^0.36.2",
     "prismjs": "^1.30.0",
     "svelte-i18n": "^4.0.1"
   },
@@ -27,8 +27,8 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/kit": "^2.43.5",
+    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/kit": "^2.43.8",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "cspell": "^9.2.1",
@@ -43,14 +43,14 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "sass": "^1.93.2",
-    "stylelint": "^16.24.0",
-    "stylelint-config-recommended-scss": "^16.0.1",
+    "stylelint": "^16.25.0",
+    "stylelint-config-recommended-scss": "^16.0.2",
     "stylelint-scss": "^6.12.1",
-    "svelte": "^5.39.6",
+    "svelte": "^5.39.8",
     "svelte-check": "^4.3.2",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^7.1.7",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4"
   },
   "exports": {