@lyeve-labs/ui-kit 0.17.1 → 0.19.0

package/dist/components/Table.svelte

@@ -1,3 +1,14 @@
+<script lang="ts" module>
+  /**
+   * How a body cell treats content wider than its column.
+   *
+   * `wrap` breaks anywhere it has to. `truncate` keeps the cell to one line and
+   * ends it with an ellipsis. `auto` is the browser's own table algorithm, with
+   * no cap of any kind.
+   */
+  export type CellFit = 'auto' | 'wrap' | 'truncate';
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
@@ -5,6 +16,42 @@
     striped?: boolean;
     hoverable?: boolean;
     fixed?: boolean;
+    /**
+     * Names the scroll box, so a screen reader announces what the region it
+     * just landed in holds. Without it the box is still focusable and simply
+     * carries no role: an unnamed region is announced as "region" and nothing
+     * else, which is a landmark the reader has to enter to identify.
+     */
+    label?: string;
+    /**
+     * What a body cell does with content too wide for its column.
+     *
+     * `wrap` by default, and the default is not `auto`. A table constrained
+     * nothing: one cell holding an unbroken token - an API key, a signed URL,
+     * a base64 payload - has no break opportunity in it, so the auto table
+     * algorithm sizes the column to the whole string and the table grows to
+     * whatever that comes to. One measured page took its container from no
+     * overflow at all to 3,086px of it, and the audit log overran its own
+     * container by 419px at 390px wide.
+     *
+     * `wrap` fixes exactly that and nothing else. It is `overflow-wrap:
+     * anywhere`, which is the one value that shrinks the column's min-content
+     * width, so a paragraph still breaks at its spaces and only a token with
+     * no spaces in it is broken mid-string. Prose in a cell renders as it
+     * always did.
+     *
+     * The default wraps rather than truncates because wrapping is the choice
+     * that cannot lose anything. Truncation hides, and a table that hides is
+     * worse than one that scrolls, so it is opted into.
+     */
+    cell?: CellFit;
+    /**
+     * The width a truncating cell stops at. Any CSS length.
+     *
+     * Read through a custom property, so a single column can disagree with the
+     * table by setting `--cell-truncate` in its own style attribute.
+     */
+    truncateAt?: string;
     class?: string;
     children: Snippet;
   }
@@ -13,26 +60,225 @@
     striped = false,
     hoverable = true,
     fixed = false,
+    label = undefined,
+    cell = 'wrap',
+    truncateAt = '20rem',
     class: cls = '',
     children,
   }: Props = $props();
+
+  /*
+   * The scroll box is a tab stop. A wide table scrolls sideways, and a mouse is
+   * the only thing that could reach the columns past the right edge: nothing
+   * inside a plain table takes focus, so the arrow keys never had an element to
+   * act on (SC 2.1.1).
+   *
+   * Spread rather than written on the element. The compiler reads a literal
+   * tabindex on any element it does not consider interactive as a defect, and
+   * a focusable scroll container is the one case where that is the fix rather
+   * than the fault. The rule cannot express it and the gate stays on for
+   * everything else, so the attributes are assembled here.
+   */
+  const scrollAttrs = $derived(
+    label === undefined ? { tabindex: 0 } : { tabindex: 0, role: 'region', 'aria-label': label },
+  );
+
+  /*
+   * Reachable is not the same as discoverable.
+   *
+   * Making the box a tab stop answered SC 2.1.1 and told nobody the columns
+   * were there. A desktop has a scrollbar to give it away; a phone has an
+   * overlay scrollbar that is painted while a finger is moving and is invisible
+   * the rest of the time. On the admin's plugin list at 390px the column that
+   * falls off the edge is ACTIONS, which is the only thing on the page a reader
+   * came to do, and nothing on screen says so.
+   *
+   * A fade on the edge that has more behind it. Only when the box really
+   * overflows, and only on the side the content continues on, so it reads as a
+   * property of this table rather than as decoration every table wears.
+   */
+  let scroller: HTMLElement | undefined = $state();
+  let moreBefore = $state(false);
+  let moreAfter = $state(false);
+
+  function measure() {
+    const el = scroller;
+    if (!el) return;
+    const slack = el.scrollWidth - el.clientWidth;
+    // A sub-pixel layout leaves scrollLeft a fraction short of its own maximum
+    // at the far end, so an exact comparison never reports the end as reached.
+    if (slack <= 1) {
+      moreBefore = false;
+      moreAfter = false;
+      return;
+    }
+    // A right-to-left box reports the offset as a negative number, and the two
+    // edges are the same two edges either way round.
+    const travelled = Math.abs(el.scrollLeft);
+    moreBefore = travelled > 1;
+    moreAfter = travelled < slack - 1;
+  }
+
+  $effect(() => {
+    const el = scroller;
+    if (!el) return;
+    measure();
+    // The width that matters changes without a scroll and without a resize of
+    // the window: a column added, a filter applied, a sidebar collapsed. Both
+    // boxes are watched because either one moving changes whether the other
+    // overflows.
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    if (el.firstElementChild) observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  });
+
+  /*
+   * A dark fade rather than a palette colour. The box has no background of its
+   * own and sits on the page in one place and inside a card in another, so no
+   * surface token is the colour to fade to. The scrims use black at an alpha
+   * for the same reason and it reads in both themes.
+   */
+  const EDGE = 'pointer-events-none absolute inset-y-px w-6';
+
+  /*
+   * The table-wide treatment, applied only to cells that did not ask for their
+   * own.
+   *
+   * `:not([data-cell])` is what keeps the two apart. Without it a column that
+   * opted out still matched the table's rule for the same property, and which
+   * of the two won came down to the order Tailwind happened to emit them in.
+   */
+  const CELL_FIT: Record<CellFit, string> = {
+    auto: '',
+    wrap: '[&_tbody_td:not([data-cell])]:[overflow-wrap:anywhere]',
+    truncate:
+      '[&_tbody_td:not([data-cell])]:max-w-[var(--cell-truncate)] [&_tbody_td:not([data-cell])]:truncate',
+  };
+
+  /*
+   * The per-cell opt-in, always present so a caller can mix treatments down one
+   * row: `data-cell="nowrap"` on a timestamp, `data-cell="truncate"` on a
+   * description, nothing at all on the rest.
+   */
+  const CELL_NAMED =
+    '[&_tbody_td[data-cell=wrap]]:[overflow-wrap:anywhere] ' +
+    '[&_tbody_td[data-cell=nowrap]]:whitespace-nowrap ' +
+    '[&_tbody_td[data-cell=truncate]]:max-w-[var(--cell-truncate)] ' +
+    '[&_tbody_td[data-cell=truncate]]:truncate';
+
+  /** Marks a title this component put there, so it can take it back again. */
+  const OWNED = 'data-cell-title';
+
+  /**
+   * Gives a clipped cell its full value back.
+   *
+   * The text is never removed from the document, so a screen reader already
+   * reads the whole of it and it is the sighted pointer user who loses the tail
+   * to the ellipsis. The title that returns it is attached when a pointer or
+   * the keyboard actually reaches the cell, from one listener on the scroll
+   * box, rather than measured for every cell as the table renders: a tenant
+   * with 10,000 rows would pay for 10,000 measurements and 10,000 title
+   * attributes to answer a question asked of about three of them.
+   */
+  function reveal(event: Event) {
+    const from = event.target;
+    if (!(from instanceof Element)) return;
+    const td = from.closest('td');
+    if (!(td instanceof HTMLElement)) return;
+
+    const named = td.dataset.cell;
+    const clipping = named === 'truncate' || (named === undefined && cell === 'truncate');
+    if (!clipping) return;
+
+    const ours = td.hasAttribute(OWNED);
+    // A title the caller wrote is theirs. It may well say more than the cell
+    // holds, and replacing it with the visible text would be a downgrade.
+    if (td.hasAttribute('title') && !ours) return;
+
+    const full = (td.textContent ?? '').trim();
+    if (full && td.scrollWidth - td.clientWidth > 1) {
+      td.setAttribute('title', full);
+      td.setAttribute(OWNED, '');
+    } else if (ours) {
+      // The column widened, or the row now holds something shorter. A tooltip
+      // repeating text the reader can already see is noise.
+      td.removeAttribute('title');
+      td.removeAttribute(OWNED);
+    }
+  }
 </script>
 
-<div class="w-full overflow-x-auto rounded-xl border border-line {cls}">
-  <table
-    class="w-full text-sm text-left
+<div data-testid="table-frame" class="relative w-full rounded-xl border border-line {cls}">
+  <!--
+    data-print: the box exists to clip. On paper there is no viewport to clip
+    to, and every column past the edge would simply not be printed.
+  -->
+  <div
+    bind:this={scroller}
+    onscroll={measure}
+    onpointerover={reveal}
+    onfocusin={reveal}
+    data-print="unclip"
+    data-testid="table-scroll"
+    class="w-full overflow-x-auto rounded-xl"
+    {...scrollAttrs}
+  >
+    <!--
+      border-separate with no spacing, and the row separators on the cells.
+
+      The hovered row draws a ring, and a ring is a box-shadow: a browser paints
+      no box-shadow on a table row while the table collapses its borders, so the
+      same row treatment the panels use would have rendered nothing at all here.
+      The separate model paints it. Borders on a row are ignored in that model,
+      which is why the lines moved down to the cells they were already drawn
+      between; with border-spacing at zero the result is the same line in the
+      same place.
+    -->
+    <table
+      style="--cell-truncate: {truncateAt}"
+      class="w-full border-separate border-spacing-0 text-sm text-start
       {fixed ? 'table-fixed' : ''}
-      [&_thead_tr]:border-b [&_thead_tr]:border-line [&_thead]:bg-surface-2/40
+      {CELL_FIT[cell]} {CELL_NAMED}
+      [&_thead_th]:border-b [&_thead_th]:border-line [&_thead]:bg-surface-2/40
       [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-xs
         [&_thead_th]:font-medium [&_thead_th]:text-faint
         [&_thead_th]:uppercase [&_thead_th]:tracking-wider [&_thead_th]:whitespace-nowrap
       [&_tbody_td]:px-4 [&_tbody_td]:py-3 [&_tbody_td]:text-fg [&_tbody_td]:align-middle
-      [&_tbody_tr]:border-b [&_tbody_tr]:border-line [&_tbody_tr:last-child]:border-0
+      [&_tbody_td]:border-b [&_tbody_td]:border-line [&_tbody_tr:last-child_td]:border-0
       {striped ? '[&_tbody_tr:nth-child(even)]:bg-surface-2/40' : ''}
       {hoverable
-      ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150'
-      : ''}"
-  >
-    {@render children()}
-  </table>
+        ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr:hover]:ring-1 [&_tbody_tr:hover]:ring-inset [&_tbody_tr:hover]:ring-brand [&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150'
+        : ''}"
+    >
+      {@render children()}
+    </table>
+  </div>
+
+  <!--
+    aria-hidden and outside the scroll box. It is a picture of the scrollbar
+    the phone will not draw, it says nothing a screen reader has not already
+    been told by the region, and a child of the box would scroll away with the
+    content it is describing.
+
+    The gradient direction is logical: in a right-to-left locale the start edge
+    is the right one and the fade has to run the other way with it.
+  -->
+  {#if moreBefore}
+    <div
+      aria-hidden="true"
+      data-print="hide"
+      data-testid="table-more-before"
+      class="{EDGE} start-0 rounded-s-xl bg-linear-to-r rtl:bg-linear-to-l from-black/25 to-transparent"
+    ></div>
+  {/if}
+  {#if moreAfter}
+    <div
+      aria-hidden="true"
+      data-print="hide"
+      data-testid="table-more-after"
+      class="{EDGE} end-0 rounded-e-xl bg-linear-to-l rtl:bg-linear-to-r from-black/25 to-transparent"
+    ></div>
+  {/if}
 </div>

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

@@ -1,8 +1,52 @@
+/**
+ * How a body cell treats content wider than its column.
+ *
+ * `wrap` breaks anywhere it has to. `truncate` keeps the cell to one line and
+ * ends it with an ellipsis. `auto` is the browser's own table algorithm, with
+ * no cap of any kind.
+ */
+export type CellFit = 'auto' | 'wrap' | 'truncate';
 import type { Snippet } from 'svelte';
 interface Props {
     striped?: boolean;
     hoverable?: boolean;
     fixed?: boolean;
+    /**
+     * Names the scroll box, so a screen reader announces what the region it
+     * just landed in holds. Without it the box is still focusable and simply
+     * carries no role: an unnamed region is announced as "region" and nothing
+     * else, which is a landmark the reader has to enter to identify.
+     */
+    label?: string;
+    /**
+     * What a body cell does with content too wide for its column.
+     *
+     * `wrap` by default, and the default is not `auto`. A table constrained
+     * nothing: one cell holding an unbroken token - an API key, a signed URL,
+     * a base64 payload - has no break opportunity in it, so the auto table
+     * algorithm sizes the column to the whole string and the table grows to
+     * whatever that comes to. One measured page took its container from no
+     * overflow at all to 3,086px of it, and the audit log overran its own
+     * container by 419px at 390px wide.
+     *
+     * `wrap` fixes exactly that and nothing else. It is `overflow-wrap:
+     * anywhere`, which is the one value that shrinks the column's min-content
+     * width, so a paragraph still breaks at its spaces and only a token with
+     * no spaces in it is broken mid-string. Prose in a cell renders as it
+     * always did.
+     *
+     * The default wraps rather than truncates because wrapping is the choice
+     * that cannot lose anything. Truncation hides, and a table that hides is
+     * worse than one that scrolls, so it is opted into.
+     */
+    cell?: CellFit;
+    /**
+     * The width a truncating cell stops at. Any CSS length.
+     *
+     * Read through a custom property, so a single column can disagree with the
+     * table by setting `--cell-truncate` in its own style attribute.
+     */
+    truncateAt?: string;
     class?: string;
     children: Snippet;
 }

package/dist/components/Tabs.svelte

@@ -27,7 +27,7 @@
       {tab.label}
       {#if tab.count !== undefined}
         <span
-          class="ml-1.5 inline-flex items-center justify-center min-w-4.5 h-4.5 px-1
+          class="ms-1.5 inline-flex items-center justify-center min-w-4.5 h-4.5 px-1
             rounded-full text-[10px] font-semibold
             {active === tab.id ? 'bg-brand/40 text-brand' : 'bg-surface-2 text-faint'}"
         >

package/dist/components/Tag.svelte

@@ -37,7 +37,7 @@
       type="button"
       onclick={onremove}
       aria-label="Remove {label}"
-      class="ml-0.5 rounded transition-opacity hover:opacity-60 leading-none"
+      class="ms-0.5 rounded transition-opacity hover:opacity-60 leading-none"
     >
       <svg
         width="10"

package/dist/components/Textarea.svelte

@@ -54,7 +54,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 

package/dist/components/ThemeToggle.svelte

@@ -1,33 +1,96 @@
 <script lang="ts">
-  import { Moon, Sun } from '@lucide/svelte';
-  import { getTheme, toggleTheme, type Theme } from '../utils/theme.js';
+  /**
+   * The control that picks the palette.
+   *
+   * Three states, not two. It offered `dark` and `light` and had no way to say
+   * "whatever the operating system is on", which is the state a reader who
+   * already answered that question at the OS level expects to find, and the
+   * reason one console shipped its own copy of this file rather than adopt it.
+   *
+   * One button rather than three radios: it sits in the header bar of every
+   * authed screen in three applications, next to the account menu, and a
+   * segmented control there costs the width of the section name beside it. The
+   * cost of the cycle is that the button's name has to carry the current state
+   * as well as the action, because with three states the action no longer
+   * implies the state.
+   */
+  import { Monitor, Moon, Sun } from '@lucide/svelte';
+  import {
+    THEME_PREFERENCES,
+    getThemePreference,
+    nextThemePreference,
+    setThemePreference,
+    watchSystemTheme,
+    type ThemePreference,
+  } from '../utils/theme.js';
 
   interface Props {
+    /**
+     * Which preferences to offer, in the order the button cycles through them.
+     *
+     * A surface that must not offer `system` - a screen printed to a fixed
+     * palette, a kiosk - passes `['light', 'dark']` and gets the two-state
+     * control back with no other change.
+     */
+    order?: readonly ThemePreference[];
     class?: string;
   }
 
-  let { class: klass = '' }: Props = $props();
+  let { order = THEME_PREFERENCES, class: klass = '' }: Props = $props();
 
-  let theme = $state<Theme>('dark');
+  /**
+   * `system` until the browser says otherwise, which is what an unanswered
+   * question resolves to. The server cannot read storage or the OS, so a
+   * hardcoded `dark` here would render the wrong icon on every light-OS
+   * reader's first paint.
+   */
+  let preference = $state<ThemePreference>('system');
 
   $effect(() => {
-    theme = getTheme();
+    preference = getThemePreference();
   });
 
-  function flip() {
-    theme = toggleTheme();
+  /**
+   * A reader on `system` whose OS flips at dusk gets the new palette without
+   * touching anything. Without this the preference is honoured once, at load,
+   * and reads as ignored for the rest of the session.
+   */
+  $effect(() =>
+    watchSystemTheme(() => {
+      if (preference === 'system') setThemePreference('system');
+    }),
+  );
+
+  const upcoming = $derived(nextThemePreference(preference, order));
+
+  const LABEL: Record<ThemePreference, string> = {
+    light: 'light',
+    dark: 'dark',
+    system: 'system',
+  };
+
+  function advance() {
+    preference = upcoming;
+    setThemePreference(preference);
   }
 </script>
 
 <button
   type="button"
-  onclick={flip}
-  aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-  class="rounded-lg p-2 text-faint transition-colors duration-150 hover:bg-surface-2 hover:text-fg {klass}"
+  onclick={advance}
+  data-print="hide"
+  data-theme-preference={preference}
+  aria-label="Theme: {LABEL[preference]}. Switch to {LABEL[upcoming]}."
+  class="rounded-lg p-2 text-faint transition-colors duration-150 hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg {klass}"
 >
-  {#if theme === 'dark'}
-    <Sun size={16} aria-hidden="true" />
-  {:else}
+  <!-- The icon shows the state the control is in, not the one it moves to. It
+       showed the destination while the label named the same destination, which
+       said the action twice and the state not at all. -->
+  {#if preference === 'system'}
+    <Monitor size={16} aria-hidden="true" />
+  {:else if preference === 'dark'}
     <Moon size={16} aria-hidden="true" />
+  {:else}
+    <Sun size={16} aria-hidden="true" />
   {/if}
 </button>

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

@@ -1,4 +1,13 @@
+import { type ThemePreference } from '../utils/theme.js';
 interface Props {
+    /**
+     * Which preferences to offer, in the order the button cycles through them.
+     *
+     * A surface that must not offer `system` - a screen printed to a fixed
+     * palette, a kiosk - passes `['light', 'dark']` and gets the two-state
+     * control back with no other change.
+     */
+    order?: readonly ThemePreference[];
     class?: string;
 }
 declare const ThemeToggle: import("svelte").Component<Props, {}, "">;

package/dist/components/TimePicker.svelte

@@ -401,7 +401,7 @@
          takes its name from this same element. The hour keeps its own aria-label,
          which is what a screen reader reads for it. -->
     <label id="{fieldId}-label" for="{fieldId}-hour" class={FIELD_LABEL}>
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -459,7 +459,7 @@
         aria-required={required ? 'true' : undefined}
         onchange={onMeridiemChange}
         onkeydown={onMeridiemKeydown}
-        class="{CONTROL_SEGMENT} ml-1"
+        class="{CONTROL_SEGMENT} ms-1"
       >
         <option value="AM">AM</option>
         <option value="PM">PM</option>

package/dist/components/Toaster.svelte

@@ -17,7 +17,8 @@
      changes, and a region that arrives already holding its text is not a
      change. -->
 <div
-  class="pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
+  data-print="hide"
+  class="pointer-events-none fixed bottom-4 end-4 z-toast flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
   role="status"
   aria-live="polite"
   aria-atomic="false"
@@ -25,7 +26,7 @@
   {#each toast.items as t (t.id)}
     <div
       class="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-lg border border-line
-             bg-surface pl-0 pr-3 py-3 shadow-xl animate-[toast-in_140ms_ease-out]"
+             bg-surface ps-0 pe-3 py-3 shadow-xl animate-[toast-in_var(--duration-toast-in)_ease-out]"
     >
       <span class="w-1 self-stretch shrink-0 {styles[statusTone(t.tone)].bar}"></span>
       <span
@@ -68,16 +69,3 @@
     </div>
   {/each}
 </div>
-
-<style>
-  @keyframes toast-in {
-    from {
-      opacity: 0;
-      transform: translateX(12px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-</style>

package/dist/components/Toggle.svelte

@@ -27,13 +27,19 @@
   };
 
   const thumb: Record<'sm' | 'md', string> = {
-    sm: 'w-3 h-3 top-0.5 left-0.5',
-    md: 'w-4 h-4 top-0.5 left-0.5',
+    sm: 'w-3 h-3 top-0.5 start-0.5',
+    md: 'w-4 h-4 top-0.5 start-0.5',
   };
 
+  /*
+   * The travel is mirrored by hand. `start-0.5` moves the resting knob to the
+   * right-hand end of the track in a right-to-left page, and a positive
+   * translate from there would carry it straight off the track; there is no
+   * logical translate utility, so the sign is flipped instead.
+   */
   const thumbOn: Record<'sm' | 'md', string> = {
-    sm: 'translate-x-4',
-    md: 'translate-x-5',
+    sm: 'translate-x-4 rtl:-translate-x-4',
+    md: 'translate-x-5 rtl:-translate-x-5',
   };
 
   function handleClick() {

package/dist/components/Tooltip.svelte

@@ -72,7 +72,7 @@
     {id}
     role="tooltip"
     hidden={!visible}
-    class="absolute {pos[position]} z-50 max-w-[min(16rem,calc(100vw-2rem))]
+    class="absolute {pos[position]} z-tooltip max-w-[min(16rem,calc(100vw-2rem))]
       rounded-lg border border-line bg-surface-2 px-2.5 py-1.5 text-xs text-fg shadow-xl"
   >
     {text}

package/dist/components/TreeView.svelte

@@ -270,11 +270,11 @@
         scan, so no rule is generated and every row draws flush left.
       -->
       <div
-        class="flex w-full items-center gap-2 rounded-md py-1.5 pr-2 text-sm transition-colors duration-150 {rowPaint(
+        class="flex w-full items-center gap-2 rounded-md py-1.5 pe-2 text-sm transition-colors duration-150 {rowPaint(
           selected === node.id,
           !!node.disabled,
         )}"
-        style="padding-left: calc(var(--spacing-inline) + {depth} * var(--spacing-stack))"
+        style="padding-inline-start: calc(var(--spacing-inline) + {depth} * var(--spacing-stack))"
       >
         {#if isBranch(node)}
           <span
@@ -283,7 +283,7 @@
           >
             <ChevronRight
               size={14}
-              class="transition-transform duration-150 {open ? 'rotate-90' : ''}"
+              class="transition-transform duration-150 {open ? 'rotate-90' : 'rtl:rotate-180'}"
             />
           </span>
         {:else}
@@ -321,7 +321,7 @@
         <span class="truncate">{node.label}</span>
 
         {#if node.badge !== undefined}
-          <span class="ml-auto shrink-0 pl-2 text-xs text-faint">{node.badge}</span>
+          <span class="ms-auto shrink-0 ps-2 text-xs text-faint">{node.badge}</span>
         {/if}
       </div>
 

package/dist/components/dialog/Dialog.svelte

@@ -32,9 +32,8 @@
   let visible = $state(false);
   let exiting = $state(false);
 
-  // Stacked offset: each deeper dialog shrinks and shifts back
+  // Stacked offset: each deeper dialog shrinks, shifts back and rises
   let offset = $derived(entry.depth);
-  let zIndex = $derived(50 + offset);
 
   // ──────────────────────────────────────────────────────
   // DOM refs
@@ -93,10 +92,16 @@
 <!-- z-index is an inline style, not a `z-[...]` class. Tailwind scans source text
      for complete class names, so a class built from a runtime value matches no
      candidate and no rule is ever generated: every stacked dialog rendered at
-     `z-index: auto` and the stacking order came down to DOM order. -->
+     `z-index: auto` and the stacking order came down to DOM order.
+
+     The base is the modal layer rather than the literal 50 it used to be. 50
+     was the number every floating surface in the kit happened to hold, so a
+     dialog neither sat above a drawer nor below a tooltip on purpose; it sat
+     wherever the document put it. The offset climbs from there, and the layer
+     above is 100 clear of this one. -->
 <div
   class="fixed inset-0 flex items-center justify-center"
-  style="z-index: {zIndex}"
+  style="z-index: calc(var(--z-index-modal) + {offset})"
   role="presentation"
 >
   <!-- Backdrop -->
@@ -148,7 +153,7 @@
 
       {#if !entry.options.persistent}
         <button
-          class="inline-flex items-center justify-center w-8 h-8 -mr-2 rounded-lg
+          class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
 						text-muted hover:text-fg hover:bg-surface-2 transition-colors duration-150 shrink-0"
           onclick={() => handleClose()}
           aria-label="Close"