@lyeve-labs/ui-kit 0.18.0 → 0.20.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';
 
@@ -12,6 +23,35 @@
      * 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;
   }
@@ -21,6 +61,8 @@
     hoverable = true,
     fixed = false,
     label = undefined,
+    cell = 'wrap',
+    truncateAt = '20rem',
     class: cls = '',
     children,
   }: Props = $props();
@@ -99,6 +141,73 @@
    * 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 data-testid="table-frame" class="relative w-full rounded-xl border border-line {cls}">
@@ -109,6 +218,8 @@
   <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"
@@ -126,8 +237,10 @@
       same place.
     -->
     <table
-      class="w-full border-separate border-spacing-0 text-sm text-left
+      style="--cell-truncate: {truncateAt}"
+      class="w-full border-separate border-spacing-0 text-sm text-start
       {fixed ? 'table-fixed' : ''}
+      {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

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.20.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.20.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/number.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Digit grouping for a figure a reader is meant to take in at a glance.
+ *
+ * The locale is fixed rather than the runtime's. `toLocaleString()` with no
+ * argument formats by whatever locale the environment reports, and the server
+ * that renders a page and the browser that hydrates it do not have to report
+ * the same one: the same figure then arrives as `4,210` in the HTML and as
+ * `4.210` or `4210` after hydration, which is a mismatch the framework warns
+ * about and a number the reader watches change under them. A component library
+ * has no way to know which locale a host has configured either, so the
+ * separator has to be a decision the kit makes once.
+ *
+ * `en-US` because that is the language every string in the kit is written in,
+ * and an English sentence carrying a German separator is the worse of the two
+ * inconsistencies.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * A count, grouped in threes.
+ *
+ * A value that is not a finite number reads as zero rather than reaching the
+ * formatter, which spells infinity as a glyph no summary line should carry and
+ * NaN as a word no reader can act on.
+ */
+export declare function formatCount(n: number): string;

package/dist/internal/number.js

@@ -0,0 +1,35 @@
+/**
+ * Digit grouping for a figure a reader is meant to take in at a glance.
+ *
+ * The locale is fixed rather than the runtime's. `toLocaleString()` with no
+ * argument formats by whatever locale the environment reports, and the server
+ * that renders a page and the browser that hydrates it do not have to report
+ * the same one: the same figure then arrives as `4,210` in the HTML and as
+ * `4.210` or `4210` after hydration, which is a mismatch the framework warns
+ * about and a number the reader watches change under them. A component library
+ * has no way to know which locale a host has configured either, so the
+ * separator has to be a decision the kit makes once.
+ *
+ * `en-US` because that is the language every string in the kit is written in,
+ * and an English sentence carrying a German separator is the worse of the two
+ * inconsistencies.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * Built at module load, not per call.
+ *
+ * Constructing an `Intl` formatter is the expensive half of using one, and a
+ * pager re-renders on every keystroke that filters the list behind it.
+ */
+const GROUPED = new Intl.NumberFormat('en-US');
+/**
+ * A count, grouped in threes.
+ *
+ * A value that is not a finite number reads as zero rather than reaching the
+ * formatter, which spells infinity as a glyph no summary line should carry and
+ * NaN as a word no reader can act on.
+ */
+export function formatCount(n) {
+    return Number.isFinite(n) ? GROUPED.format(n) : '0';
+}

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.20.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.   */