@lyeve-labs/ui-kit 0.18.0 → 0.19.0

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

@@ -1,3 +1,11 @@
+/**
+ * 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;
@@ -10,6 +18,35 @@ interface Props {
      * 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

@@ -81,7 +81,7 @@
   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 {klass}"
+  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}"
 >
   <!-- 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

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

@@ -18,7 +18,7 @@
      change. -->
 <div
   data-print="hide"
-  class="pointer-events-none fixed bottom-4 right-4 z-toast flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
+  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"
@@ -26,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_var(--duration-toast-in)_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

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/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

@@ -153,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"

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { default as Table } from './components/Table.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
+export type { CellFit } from './components/Table.svelte';
 export type { PageWidth, SectionVariant } from './internal/layout.js';
 export type { TreeNode, TriState } from './internal/tree.js';
 export { default as Button } from './components/Button.svelte';
@@ -88,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.18.0";
+export declare const VERSION = "0.19.0";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.18.0';
+export const VERSION = '0.19.0';

package/dist/internal/href.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The one rule the kit applies to an href it did not write itself.
+ *
+ * A component takes a URL from its caller, and a caller takes it from data, so
+ * `javascript:` and `data:` arrive as markup and leave as a script the page
+ * never wrote. Button carried this rule inline and Pagination now builds hrefs
+ * from a caller supplied function, and a rule kept in two places is a rule that
+ * gets fixed in one of them.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/** The href as given, or nothing when its scheme is one no component will emit. */
+export declare function safeHref(href: string | undefined | null): string | undefined;

package/dist/internal/href.js

@@ -0,0 +1,27 @@
+/**
+ * The one rule the kit applies to an href it did not write itself.
+ *
+ * A component takes a URL from its caller, and a caller takes it from data, so
+ * `javascript:` and `data:` arrive as markup and leave as a script the page
+ * never wrote. Button carried this rule inline and Pagination now builds hrefs
+ * from a caller supplied function, and a rule kept in two places is a rule that
+ * gets fixed in one of them.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * The characters a browser drops before it reads the scheme.
+ *
+ * The URL parser trims leading and trailing ASCII whitespace and strips tab,
+ * line feed and carriage return from anywhere in the value, so a tab written
+ * inside the word `javascript` still navigates while an anchored scheme test on
+ * the raw string sees an unknown scheme and allows it through.
+ */
+const IGNORED = /[\u0000-\u0020]/g;
+const DENIED = /^(?:javascript|data|vbscript):/i;
+/** The href as given, or nothing when its scheme is one no component will emit. */
+export function safeHref(href) {
+    if (!href)
+        return undefined;
+    return DENIED.test(href.replace(IGNORED, '')) ? undefined : href;
+}

package/dist/internal/panel.js

@@ -55,7 +55,7 @@ export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain py
  * No background and no text colour of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
  */
-export const PANEL_OPTION = 'flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm ' +
+export const PANEL_OPTION = 'flex w-full items-center gap-2.5 px-3 py-2 text-start text-sm ' +
     'transition-colors duration-150 outline-none hover:bg-surface-2 ' +
     'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand';
 /**

package/dist/styles/theme.css

@@ -151,6 +151,8 @@
    *  Body      16px   1.55   0        400     Default body copy  *
    *  Caption   13px   1.50   0        400     Labels, metadata   *
    *  Mono      18px   1.50   0        500     Code, eyebrows     *
+   *  The ramp the guideline states, for marketing surfaces.      *
+   *  The scale the console renders is declared below it.         *
    *                                                          */
   --text-display: 4rem; /* 64px */
   --text-h1: 2.75rem; /* 44px */
@@ -173,6 +175,57 @@
   --tracking-h2: -0.02em;
   --tracking-h3: -0.015em;
 
+  /* -- Typography - console type scale --------------------------- *
+   *  Token       Size   Line   Where it renders                    *
+   *  text-xs     12px   16px   labels, table heads, metadata, hints*
+   *  text-sm     14px   20px   body copy and every control         *
+   *  text-base   16px   24px   a card title, the large button      *
+   *  text-lg     18px   28px   a dialog title, a small stat value  *
+   *  text-xl     20px   28px   the large wordmark                  *
+   *  text-2xl    24px   32px   a stat value, an empty-state glyph  *
+   *
+   *  Two scales, on purpose, and this is the one the components
+   *  are drawn in.
+   *
+   *  The ramp above is the brand guideline's, and it is a marketing
+   *  ramp: it runs 64 / 44 / 32 / 22 / 16 / 13, holds nothing
+   *  between 16px and 22px, and has no step at 14px at all. A
+   *  console's body copy is 14px and its labels are 12px, both
+   *  below the ramp's floor, so adopting the ramp wholesale would
+   *  have meant restyling every screen to fit a scale drawn for a
+   *  landing page. The ramp keeps its steps for the surfaces it was
+   *  drawn for, and the two overlap at exactly the two steps a
+   *  console does reach: PageHeader takes H2 for the page title and
+   *  SectionHeading takes H3 for a section head.
+   *
+   *  These are Tailwind's own steps at Tailwind's own values,
+   *  stated here rather than inherited silently. Nothing renders
+   *  one pixel differently for it. What changes is that the scale
+   *  the components are built from is now declared beside the one
+   *  they are not, so a designer reading this file sees both, and
+   *  moving console body copy to 15px is one line here instead of
+   *  49 class attributes. Restated rather than renamed: an app
+   *  writing `text-sm` in its own markup and a component writing it
+   *  in the kit's must mean the same size, and a private spelling
+   *  of the same 14px would be a second name for one thing.
+   *
+   *  A step is declared with its leading, because a --text-* token
+   *  sets font-size and nothing else. Only the six steps the kit
+   *  actually renders are declared; the larger ones a marketing
+   *  page reaches for stay as Tailwind ships them.               */
+  --text-xs: 0.75rem; /* 12px */
+  --text-xs--line-height: calc(1 / 0.75); /* 16px */
+  --text-sm: 0.875rem; /* 14px */
+  --text-sm--line-height: calc(1.25 / 0.875); /* 20px */
+  --text-base: 1rem; /* 16px */
+  --text-base--line-height: calc(1.5 / 1); /* 24px */
+  --text-lg: 1.125rem; /* 18px */
+  --text-lg--line-height: calc(1.75 / 1.125); /* 28px */
+  --text-xl: 1.25rem; /* 20px */
+  --text-xl--line-height: calc(1.75 / 1.25); /* 28px */
+  --text-2xl: 1.5rem; /* 24px */
+  --text-2xl--line-height: calc(2 / 1.5); /* 32px */
+
   /* ── Spacing grid · 4px base (semantic shortcuts) ────────────── *
    *  Tailwind's default 0.25rem (4px) grid is unchanged.          *
    *  These tokens add named slots for common component spacing.   */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",
@@ -44,16 +44,15 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
+    "@lucide/svelte": ">=0.511.0 <2",
     "svelte": "^5.0.0",
     "tailwindcss": "^4"
   },
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@lucide/svelte": "^0.511.0"
-  },
   "devDependencies": {
+    "@lucide/svelte": "^0.511.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@testing-library/svelte": "^5.3.1",

package/src/lib/styles/theme.css

@@ -151,6 +151,8 @@
    *  Body      16px   1.55   0        400     Default body copy  *
    *  Caption   13px   1.50   0        400     Labels, metadata   *
    *  Mono      18px   1.50   0        500     Code, eyebrows     *
+   *  The ramp the guideline states, for marketing surfaces.      *
+   *  The scale the console renders is declared below it.         *
    *                                                          */
   --text-display: 4rem; /* 64px */
   --text-h1: 2.75rem; /* 44px */
@@ -173,6 +175,57 @@
   --tracking-h2: -0.02em;
   --tracking-h3: -0.015em;
 
+  /* -- Typography - console type scale --------------------------- *
+   *  Token       Size   Line   Where it renders                    *
+   *  text-xs     12px   16px   labels, table heads, metadata, hints*
+   *  text-sm     14px   20px   body copy and every control         *
+   *  text-base   16px   24px   a card title, the large button      *
+   *  text-lg     18px   28px   a dialog title, a small stat value  *
+   *  text-xl     20px   28px   the large wordmark                  *
+   *  text-2xl    24px   32px   a stat value, an empty-state glyph  *
+   *
+   *  Two scales, on purpose, and this is the one the components
+   *  are drawn in.
+   *
+   *  The ramp above is the brand guideline's, and it is a marketing
+   *  ramp: it runs 64 / 44 / 32 / 22 / 16 / 13, holds nothing
+   *  between 16px and 22px, and has no step at 14px at all. A
+   *  console's body copy is 14px and its labels are 12px, both
+   *  below the ramp's floor, so adopting the ramp wholesale would
+   *  have meant restyling every screen to fit a scale drawn for a
+   *  landing page. The ramp keeps its steps for the surfaces it was
+   *  drawn for, and the two overlap at exactly the two steps a
+   *  console does reach: PageHeader takes H2 for the page title and
+   *  SectionHeading takes H3 for a section head.
+   *
+   *  These are Tailwind's own steps at Tailwind's own values,
+   *  stated here rather than inherited silently. Nothing renders
+   *  one pixel differently for it. What changes is that the scale
+   *  the components are built from is now declared beside the one
+   *  they are not, so a designer reading this file sees both, and
+   *  moving console body copy to 15px is one line here instead of
+   *  49 class attributes. Restated rather than renamed: an app
+   *  writing `text-sm` in its own markup and a component writing it
+   *  in the kit's must mean the same size, and a private spelling
+   *  of the same 14px would be a second name for one thing.
+   *
+   *  A step is declared with its leading, because a --text-* token
+   *  sets font-size and nothing else. Only the six steps the kit
+   *  actually renders are declared; the larger ones a marketing
+   *  page reaches for stay as Tailwind ships them.               */
+  --text-xs: 0.75rem; /* 12px */
+  --text-xs--line-height: calc(1 / 0.75); /* 16px */
+  --text-sm: 0.875rem; /* 14px */
+  --text-sm--line-height: calc(1.25 / 0.875); /* 20px */
+  --text-base: 1rem; /* 16px */
+  --text-base--line-height: calc(1.5 / 1); /* 24px */
+  --text-lg: 1.125rem; /* 18px */
+  --text-lg--line-height: calc(1.75 / 1.125); /* 28px */
+  --text-xl: 1.25rem; /* 20px */
+  --text-xl--line-height: calc(1.75 / 1.25); /* 28px */
+  --text-2xl: 1.5rem; /* 24px */
+  --text-2xl--line-height: calc(2 / 1.5); /* 32px */
+
   /* ── Spacing grid · 4px base (semantic shortcuts) ────────────── *
    *  Tailwind's default 0.25rem (4px) grid is unchanged.          *
    *  These tokens add named slots for common component spacing.   */