@spaethtech/svelte-ui 0.13.0 → 0.14.0

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

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    files?: File[];
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    progress?: Record<string, number>;
+    disabled?: boolean;
+    onfiles?: (files: File[]) => void;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+};
+declare const FileUpload: import("svelte").Component<$$ComponentProps, {}, "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;

package/dist/components/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export { default as FileUpload } from "./FileUpload.svelte";

package/dist/components/FileUpload/index.js

@@ -0,0 +1 @@
+export { default as FileUpload } from "./FileUpload.svelte";

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -312,31 +312,12 @@
     activeMode = currentMode;
   });
 
-  // Suppress the slide/width transition for a frame whenever the MODE changes (from a resize), so the
-  // switch SNAPS instead of animating the wrong intermediate state — e.g. a labeled drawer sliding
-  // offscreen, or an expanded rail collapsing to icon. Same-mode interactions (drawer open/close,
-  // hover-expand) still animate because `currentMode` didn't change.
-  let noTransition = $state(false);
-  $effect(() => {
-    currentMode; // re-run on mode change
-    noTransition = true;
-    let r2: number | undefined;
-    const r1 = requestAnimationFrame(() => {
-      r2 = requestAnimationFrame(() => (noTransition = false));
-    });
-    return () => {
-      cancelAnimationFrame(r1);
-      if (r2 !== undefined) cancelAnimationFrame(r2);
-    };
-  });
-
   const isStepped = $derived(currentMode === "stepped");
   const isDrawer = $derived(currentMode === "drawer" || currentMode === "stepped");
   // Dock side. `right` mirrors the frame, drawer slide, hamburger corner, popout side, and item layout.
   const dockRight = $derived(side === "right");
   const popoutSide = $derived<"left" | "right">(dockRight ? "left" : "right");
   const dockEdge = $derived(dockRight ? "right-0" : "left-0");
-  const dockOff = $derived(dockRight ? "translate-x-full" : "-translate-x-full");
   const dockBorder = $derived(
     dockRight
       ? "[border-left:1px_solid_color-mix(in_srgb,var(--ui-color-text)_15%,transparent)]"
@@ -387,36 +368,49 @@
   // (A per-section stepper-button affordance is the planned replacement — see FUTURE.md.)
   const scrollList = "flex-1 min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
 
-  // Aside width, driven by mode (inline style — robust, no Tailwind arbitrary-var class):
-  //   - stepped: full width (100%)
-  //   - collapsed icon rail: the square icon-box width
-  //   - expanded / drawer / hover-expanded rail: `max-content` so the strip fits the widest row
-  //     (icon + longest label + chevron) exactly, keeping every row's icon/label/chevron aligned.
-  //     `expandedWidth` becomes an optional MAX so a very long label truncates instead of blowing out.
-  const contentFit = $derived(
-    currentMode === "drawer" ||
-      currentMode === "expanded" ||
-      (currentMode === "icon" && effectivelyExpanded),
-  );
-  const asideWidthCss = $derived(
-    currentMode === "stepped"
-      ? "100%"
-      : currentMode === "icon" && !effectivelyExpanded
-        ? `${collapsedW}px`
-        : "max-content",
-  );
-  const maxWidthCss = $derived(contentFit && expandedWidth != null ? `${expandedWidth}px` : "");
-  // Slide (drawer/stepped) or width (icon hover-expand) transition — suppressed on a mode change (see
-  // `noTransition`) so resizing between modes snaps rather than animating a wrong intermediate state.
-  const transitionClass = $derived(
-    noTransition
-      ? "transition-none"
-      : currentMode === "stepped" || currentMode === "drawer"
-        ? "transition-transform duration-200"
-        : currentMode === "icon" && hoverExpandActive
-          ? "transition-[width] duration-200"
-          : "",
-  );
+  // ── Mode presentation → CSS (the permanent fix for the pre-hydration flash) ──────────────────
+  // The mode's VISUAL properties (aside width/position/inset/z/transform, label + hamburger display)
+  // are emitted as a per-instance media-query stylesheet in `<svelte:head>` — so it's in the SSR HTML
+  // and the browser applies the correct mode at FIRST PAINT, before any hydration JS runs. That kills
+  // the `expanded → rail` flash at the source (no JS trick can beat the first paint of server HTML).
+  // `currentMode`/matchMedia (above) stay for BEHAVIOR only — drawer open, `interactMode`,
+  // popout-vs-step, `activeMode`. Drawer-open and hover-expand layer on via the `.sbm-open`/`.sbm-hover`
+  // classes below (JS state, not first-paint presentation).
+  const modeCss = $derived.by(() => {
+    const A = `[data-sbm-aside="${uid}"]`;
+    const B = `[data-sbm-burger="${uid}"]`;
+    const closedX = dockRight ? "100%" : "-100%";
+    const insetI = dockRight ? "inset-inline:auto 0;" : "inset-inline:0 auto;";
+    const maxw = expandedWidth != null ? `max-width:${expandedWidth}px;` : "max-width:none;";
+    const asideDecl = (m: SideBarMenuMode): string =>
+      m === "stepped"
+        ? `position:absolute;inset-block:0;${insetI}width:100%;max-width:none;z-index:75;transform:translateX(${closedX});`
+        : m === "drawer"
+          ? `position:absolute;inset-block:0;${insetI}width:max-content;${maxw}z-index:75;transform:translateX(${closedX});`
+          : m === "icon"
+            ? `position:relative;inset:auto;width:${collapsedW}px;max-width:none;z-index:60;transform:none;`
+            : `position:relative;inset:auto;width:max-content;${maxw}z-index:60;transform:none;`;
+    const lbl = (m: SideBarMenuMode) => (m === "icon" ? "none" : "inline");
+    const affix = (m: SideBarMenuMode) => (m === "icon" ? "none" : "inline-flex");
+    const burger = (m: SideBarMenuMode) => (m === "stepped" || m === "drawer" ? "inline-flex" : "none");
+    const block = (m: SideBarMenuMode): string =>
+      `${A}{${asideDecl(m)}--sbm-lbl:${lbl(m)};--sbm-affix:${affix(m)};}${B}{display:${burger(m)};}`;
+    const map = effectiveModes;
+    const tiers = (Object.keys(map) as Breakpoint[])
+      .filter((t) => t !== "base")
+      .sort((a, b) => BREAKPOINT_PX[a] - BREAKPOINT_PX[b]);
+    let css = block(map.base ?? "expanded");
+    for (const t of tiers) {
+      const m = map[t];
+      if (m) css += `@media (min-width:${BREAKPOINT_PX[t]}px){${block(m)}}`;
+    }
+    // Overlay slide-in (drawer/stepped `open`) and icon hover-expand layer on via JS classes (higher
+    // specificity than the media rules). Label/affix spans read the mode's inherited display var.
+    css += `${A}.sbm-open{transform:translateX(0);}`;
+    css += `${A}.sbm-hover{position:absolute;inset-block:0;${insetI}width:max-content;${maxw}z-index:65;--sbm-lbl:inline;--sbm-affix:inline-flex;}`;
+    css += `${A} .sbm-label{display:var(--sbm-lbl,inline);}${A} .sbm-affix{display:var(--sbm-affix,inline-flex);}`;
+    return css;
+  });
 
   // ── Size axis ───────────────────────────────────────────────────
   // All sub-element sizes derive from the icon size:
@@ -543,13 +537,10 @@
     setStepLevel: (n: number) => (stepLevel = n),
   };
 
-  // Label / chevron visibility are now driven by the active mode
-  // instead of by responsive class strings — the matchMedia effect
-  // above keeps `currentMode` (and therefore `labelsVisible`) in sync
-  // with the viewport. The chevron span needs `inline-flex` (not
-  // `inline`) so its SVG stays centered; otherwise the same logic.
-  const labelClass = $derived(labelsVisible ? "inline" : "hidden");
-  const chevronVisibility = $derived(labelsVisible ? "inline-flex" : "hidden");
+  // Label / chevron visibility is driven by CSS (the `.sbm-label` / `.sbm-affix` display vars set per
+  // mode in `modeCss`), so it's correct at first paint. `labelsVisible` (JS) is kept only for the
+  // tooltip-suppression + row-padding logic below (a post-hydration refinement; the padding is clipped
+  // by the rail's `overflow-hidden` in icon mode anyway, so a first-paint mismatch isn't visible).
   // Row tooltips exist ONLY to surface a label the rail can't show. That's a single case: a collapsed
   // `icon` rail that does NOT hover-expand. When labels are already visible (`expanded`/`drawer`/
   // `stepped`), or the rail hover-expands to reveal them (`iconHoverExpand`), the tooltip is redundant
@@ -809,6 +800,12 @@
   }
 </script>
 
+<!-- Per-instance mode stylesheet — emitted into <head> (SSR-included) so the browser paints the
+     correct mode at first paint, killing the pre-hydration flash. See `modeCss`. -->
+<svelte:head>
+  {@html `<style>${modeCss}</style>`}
+</svelte:head>
+
 <!-- Badge slot — count omitted = solid colored dot covering the icon's
      top-right corner; count present = solid pill with the number. Both
      have an opaque background that occludes the main icon underneath so
@@ -846,8 +843,9 @@
   isOpen: boolean,
   reserveIcon: boolean,
 )}
-  {@const labelClassResolved = forceLabel ? "inline" : labelClass}
-  {@const chevronClass = forceLabel ? "inline-flex" : chevronVisibility}
+  <!-- Label/affix visibility is CSS-driven: `.sbm-label`/`.sbm-affix` read the mode's `--sbm-lbl`/
+       `--sbm-affix` display var (set per mode in `modeCss`, correct at first paint). Popout content
+       resets those vars to "shown" on its own container, so popout rows are always labelled. -->
   <!-- 1rem gap before the trailing/chevron cluster (label ↔ chevron breathing room); mirrors under
        `side="right"`. -->
   {@const endGap = dockRight ? "mr-4" : "ml-4"}
@@ -865,15 +863,15 @@
   <!-- When the group reserves an icon column the box supplies the leading inset; when it doesn't,
        give the label a 1rem leading inset so it isn't flush to the edge. -->
   <span
-    class="flex-1 min-w-0 truncate {reserveIcon ? '' : dockRight ? 'pr-4' : 'pl-4'} {dockRight
+    class="sbm-label flex-1 min-w-0 truncate {reserveIcon ? '' : dockRight ? 'pr-4' : 'pl-4'} {dockRight
       ? 'text-right'
-      : ''} {labelClassResolved} {sz.text}">{item.label}</span
+      : ''} {sz.text}">{item.label}</span
   >
   {#if item.trailing}
     <!-- Trailing slot — a state indicator / glyph on the far end. Visible with the label (like the
          chevron); sits before the chevron on a parent row. `chevronClass` keeps it `inline-flex`. -->
     <span
-      class="shrink-0 items-center justify-center {endGap} {sz.chevronBox} {sz.chevronSvg} {chevronClass}"
+      class="sbm-affix shrink-0 items-center justify-center {endGap} {sz.chevronBox} {sz.chevronSvg}"
       >{@render item.trailing()}</span
     >
   {/if}
@@ -885,9 +883,9 @@
 		     `chevronVisibility` (not `labelClassResolved`) so the span
 		     stays `inline-flex` and the SVG centers vertically. -->
     <span
-      class="shrink-0 items-center justify-center opacity-60 transition-transform duration-150 {endGap} {isOpen
+      class="sbm-affix shrink-0 items-center justify-center opacity-60 transition-transform duration-150 {endGap} {isOpen
         ? 'rotate-180'
-        : ''} {sz.chevronBox} {sz.chevronSvg} {chevronClass}"
+        : ''} {sz.chevronBox} {sz.chevronSvg}"
     >
       <IconChevronRight />
     </span>
@@ -918,7 +916,6 @@
       class={rowClass}
       data-sveltekit-reload={item.reload ? "" : undefined}
       aria-current={ownActive ? "page" : undefined}
-      aria-haspopup={isParent ? "menu" : undefined}
       aria-expanded={isParent && opts.id ? isOpen : undefined}
       aria-controls={isParent && isOpen ? popoutId : undefined}
       use:tooltip={{ text: item.label, side: popoutSide, disabled: tipSuppressed || isOpen }}
@@ -959,7 +956,6 @@
       type="button"
       use:refIntoMap={opts.id}
       class="{rowClass} text-left"
-      aria-haspopup="menu"
       aria-expanded={isOpen}
       aria-controls={isOpen ? popoutId : undefined}
       use:tooltip={{ text: item.label, side: popoutSide, disabled: tipSuppressed || isOpen }}
@@ -1075,14 +1071,14 @@
   {@const childReserve = anyIcon(kids)}
   {@const rowsShown = (win.up ? 1 : 0) + (win.end - win.start) + (win.down ? 1 : 0)}
   {@const bd = popoutBorder(id, group, !id.includes(">"), rowsShown)}
-  <!-- svelte-ignore a11y_interactive_supports_focus a11y_no_noninteractive_element_interactions -->
+  <!-- Nav submenu popout — a list of links (NOT role="menu"); Tab navigates, per the disclosure-nav
+       pattern. The wheel/↑/↓ handlers step an overflowing window (keydown bubbles from a focused row). -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    role="menu"
-    tabindex="-1"
     id={popoutId}
     data-sbm-popout=""
     data-open={isOpen}
-    style="width: max-content;{expandedWidth != null ? ` max-width: ${expandedWidth}px;` : ''} max-height: {maxHeight}; --sbm-accent: {accentVar};{bd.nudge ? ` transform: translateY(${bd.nudge}px);` : ''}"
+    style="width: max-content;{expandedWidth != null ? ` max-width: ${expandedWidth}px;` : ''} max-height: {maxHeight}; --sbm-accent: {accentVar}; --sbm-lbl: inline; --sbm-affix: inline-flex;{bd.nudge ? ` transform: translateY(${bd.nudge}px);` : ''}"
     class="overflow-hidden shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] {bd.cls}"
     onmouseenter={popoutOnHover ? cancelClose : undefined}
     onmouseleave={popoutOnHover ? scheduleClose : undefined}
@@ -1117,7 +1113,7 @@
       {#if win.up}{@render arrowRow(id, kids.length, -1)}{/if}
       <ul class="flex flex-col">
         {#each kids.slice(win.start, win.end) as child, i (child.label)}
-          <li class="list-none" role="none">
+          <li class="list-none">
             {@render menuNode(child, `${id}>${win.start + i}`, group, childReserve, 1)}
           </li>
         {/each}
@@ -1127,15 +1123,16 @@
   </div>
 {/snippet}
 
-{#if hamburger && isDrawer}
-  <!-- Built-in hamburger — fixed top-left. Only rendered when the
-	     active mode is `drawer` or `stepped`. Set `hamburger={false}`
-	     to suppress this when the consumer provides its own trigger. -->
+{#if hamburger}
+  <!-- Built-in hamburger — fixed top corner. Rendered whenever `hamburger` is set; its DISPLAY is
+	     CSS-media-driven (shown only in `drawer`/`stepped` tiers, hidden otherwise) so it's correct at
+	     first paint. Set `hamburger={false}` to suppress it when the consumer provides its own trigger. -->
   <button
     type="button"
+    data-sbm-burger={uid}
     class="fixed top-3 {dockRight
       ? 'right-3'
-      : 'left-3'} z-[80] inline-flex w-10 h-10 items-center justify-center cursor-pointer [background-color:var(--ui-color-background)] border [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] shadow-md [&_svg]:w-5 [&_svg]:h-5"
+      : 'left-3'} z-[80] w-10 h-10 items-center justify-center cursor-pointer [background-color:var(--ui-color-background)] border [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] shadow-md [&_svg]:w-5 [&_svg]:h-5"
     aria-label={open ? "Close menu" : "Open menu"}
     aria-expanded={open}
     onclick={() => (open = !open)}
@@ -1165,23 +1162,17 @@
   <aside
     bind:this={asideRef}
     bind:clientHeight={asideH}
-    style="width: {asideWidthCss};{maxWidthCss ? ` max-width: ${maxWidthCss};` : ''} --sbm-accent: {accentVar};"
+    data-sbm-aside={uid}
+    style="--sbm-accent: {accentVar};"
     onmouseenter={hoverExpandActive ? openHoverExpand : undefined}
     onmouseleave={hoverExpandActive ? scheduleHoverCollapse : undefined}
     class="
-		flex flex-col z-[60] overflow-hidden shrink-0 {transitionClass}
+		flex flex-col overflow-hidden shrink-0 transition-[transform,width] duration-200
 		[background-color:var(--ui-color-background)]
 		[color:var(--ui-color-text)]
 		{dockBorder}
-		{currentMode === 'stepped'
-      ? `absolute inset-y-0 ${dockEdge} z-[75] ${open ? 'translate-x-0' : dockOff}`
-      : currentMode === 'drawer'
-        ? `absolute inset-y-0 ${dockEdge} z-[75] ${open ? 'translate-x-0' : dockOff}`
-        : currentMode === 'icon'
-          ? hoverExpandActive
-            ? `absolute inset-y-0 ${dockEdge} z-[65] ${effectivelyExpanded ? 'shadow-lg' : ''}`
-            : 'relative'
-          : 'relative'}
+		{open ? 'sbm-open' : ''}
+		{effectivelyExpanded ? 'sbm-hover shadow-lg' : ''}
 		{additionalClass}
 	"
   >

package/dist/components/Stepper/Stepper.svelte

@@ -0,0 +1,118 @@
+<!--
+/**
+ * Stepper — a step indicator for a linear multi-step flow (done / current / upcoming markers +
+ * connectors). Display of position only; the step content + Next/Back + validation are the consumer's
+ * (they drive `current`). Horizontal or vertical; shared variant/size axes. See Stepper.spec.md.
+ */
+-->
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  export type StepItem = { label: string; description?: string; icon?: Snippet };
+</script>
+
+<script lang="ts">
+  import IconCheck from "~icons/mdi/check";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    steps,
+    current = $bindable(0),
+    orientation = "horizontal",
+    variant = "primary",
+    size = "md",
+    onstep,
+    class: cls = "",
+  }: {
+    steps: StepItem[];
+    current?: number;
+    orientation?: "horizontal" | "vertical";
+    variant?: Variant;
+    size?: Responsive<Size>;
+    onstep?: (index: number) => void;
+    class?: string;
+  } = $props();
+
+  const token = $derived(variantToken[variant]);
+  const isH = $derived(orientation === "horizontal");
+
+  const markerSize: Record<Size, string> = {
+    sm: "w-6 h-6 text-[0.6875rem] [&_svg]:w-3.5 [&_svg]:h-3.5",
+    md: "w-8 h-8 text-sm [&_svg]:w-4 [&_svg]:h-4",
+    lg: "w-10 h-10 text-base [&_svg]:w-5 [&_svg]:h-5",
+  };
+  const labelSize: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+
+  const state = (i: number): "done" | "current" | "upcoming" =>
+    i < current ? "done" : i === current ? "current" : "upcoming";
+
+  // Marker style: done/current fill with the variant (white glyph); upcoming = ringed + muted.
+  const markerStyle = (i: number): string => {
+    const s = state(i);
+    return s === "upcoming"
+      ? "background-color: transparent; color: color-mix(in srgb, var(--ui-color-text) 55%, transparent); border-color: var(--ui-border-color);"
+      : `background-color: var(${token}); color: white; border-color: var(${token});`;
+  };
+  const connectorStyle = (i: number): string =>
+    `background-color: ${i < current ? `var(${token})` : "var(--ui-border-color)"};`;
+</script>
+
+<ol
+  class="flex {isH ? 'flex-row items-start' : 'flex-col'} {cls}"
+  aria-label="Progress"
+>
+  {#each steps as step, i (i)}
+    {@const s = state(i)}
+    {@const last = i === steps.length - 1}
+
+    <li class="flex {isH ? 'flex-1 flex-col items-center last:flex-none' : 'gap-3'} min-w-0">
+      <!-- Marker row (+ horizontal connector to the right, or vertical connector below in `col`). -->
+      <div class="flex {isH ? 'w-full items-center' : 'flex-col items-center self-stretch'}">
+        <!-- svelte-ignore a11y_no_static_element_interactions (it's a real <button> when clickable) -->
+        <svelte:element
+          this={onstep ? "button" : "div"}
+          type={onstep ? "button" : undefined}
+          onclick={onstep ? () => onstep(i) : undefined}
+          aria-current={s === "current" ? "step" : undefined}
+          aria-label={onstep ? `Step ${i + 1}: ${step.label}` : undefined}
+          class="inline-flex shrink-0 items-center justify-center rounded-full border-2 font-semibold {responsiveClasses(
+            size,
+            markerSize,
+          )} {onstep
+            ? 'cursor-pointer focus-visible:[outline:2px_solid_color-mix(in_srgb,var(--ui-color-text)_70%,transparent)] focus-visible:[outline-offset:2px]'
+            : ''}"
+          style={markerStyle(i)}
+        >
+          {#if step.icon}{@render step.icon()}{:else if s === "done"}<IconCheck
+            />{:else}{i + 1}{/if}
+        </svelte:element>
+
+        {#if !last}
+          <div
+            class="{isH ? 'h-0.5 flex-1 mx-2' : 'w-0.5 flex-1 my-1 min-h-4'} rounded-full"
+            style={connectorStyle(i)}
+            aria-hidden="true"
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Label + description. -->
+      <div class="{isH ? 'mt-2 text-center px-1' : 'pb-4'} min-w-0 {responsiveClasses(size, labelSize)}">
+        <div
+          class="truncate font-medium {s === 'upcoming'
+            ? '[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]'
+            : '[color:var(--ui-color-text)]'}"
+        >
+          {step.label}
+        </div>
+        {#if step.description}
+          <div class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_55%,transparent)]">
+            {step.description}
+          </div>
+        {/if}
+      </div>
+    </li>
+  {/each}
+</ol>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+export type StepItem = {
+    label: string;
+    description?: string;
+    icon?: Snippet;
+};
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    steps: StepItem[];
+    current?: number;
+    orientation?: "horizontal" | "vertical";
+    variant?: Variant;
+    size?: Responsive<Size>;
+    onstep?: (index: number) => void;
+    class?: string;
+};
+declare const Stepper: import("svelte").Component<$$ComponentProps, {}, "current">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from "./Stepper.svelte";
+export type { StepItem } from "./Stepper.svelte";

package/dist/components/Stepper/index.js

@@ -0,0 +1 @@
+export { default as Stepper } from "./Stepper.svelte";

package/dist/components/TokenInput/TokenInput.svelte

@@ -0,0 +1,144 @@
+<!--
+/**
+ * TokenInput — multi-value entry: type + Enter/comma to add a removable `Chip` token; Backspace on an
+ * empty field removes the last. Wears FieldChrome + the shared variant/size axes. Composes `Chip` for
+ * tokens; the text entry is a bare <input> inside the field frame (a leaf field, like Input).
+ * See TokenInput.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import FieldChrome, { nextFieldId } from "../FieldChrome.svelte";
+  import Chip from "../Chip/Chip.svelte";
+  import type { Variant } from "../../types/variants.js";
+  import { variantToken } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+
+  let {
+    values = $bindable([]),
+    allowDuplicates = false,
+    max,
+    variant = "secondary",
+    size = "md",
+    disabled = false,
+    placeholder,
+    label = null,
+    aside,
+    error = null,
+    description = null,
+    id,
+    required = false,
+    class: cls = "",
+  }: {
+    values?: string[];
+    allowDuplicates?: boolean;
+    max?: number;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+  } = $props();
+
+  const controlId = id ?? nextFieldId();
+  const token = $derived(variantToken[variant]);
+  const hasError = $derived(typeof error === "function" ? true : !!(error && String(error).trim()));
+
+  const borderRest = $derived(
+    hasError
+      ? "var(--ui-color-error)"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-border), transparent)`,
+  );
+  const borderFocus = $derived(
+    hasError
+      ? "var(--ui-color-error)"
+      : `color-mix(in srgb, var(${token}) var(--ui-tint-border-hover), transparent)`,
+  );
+
+  const fieldSize: Record<Size, string> = {
+    sm: "min-h-6 px-1.5 py-0.5 gap-1 text-xs",
+    md: "min-h-8 px-2 py-1 gap-1.5 text-sm",
+    lg: "min-h-10 px-2.5 py-1.5 gap-2 text-base",
+  };
+  const chipSize = $derived<Size>(
+    (typeof size === "string" ? size : "md") === "lg" ? "md" : "sm",
+  );
+
+  let draft = $state("");
+
+  function commit() {
+    const t = draft.trim();
+    if (!t) return;
+    if (!allowDuplicates && values.includes(t)) {
+      draft = "";
+      return;
+    }
+    if (max != null && values.length >= max) return;
+    values = [...values, t];
+    draft = "";
+  }
+  function removeAt(i: number) {
+    values = values.filter((_, j) => j !== i);
+  }
+  function onkeydown(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit();
+    } else if (e.key === "Backspace" && draft === "" && values.length) {
+      e.preventDefault();
+      removeAt(values.length - 1);
+    }
+  }
+</script>
+
+<FieldChrome {label} {aside} {error} {description} {required} {controlId} {size} class={cls}>
+  {#snippet control({ describedBy })}
+    <!-- A <label> so clicking anywhere in the field focuses the input natively (no JS handler). -->
+    <label
+      for={controlId}
+      class="tok-field flex flex-wrap items-center rounded-[var(--ui-border-radius)] border transition-colors {responsiveClasses(
+        size,
+        fieldSize,
+      )} {disabled ? 'opacity-50 pointer-events-none' : 'cursor-text'}"
+      style="--tok-border: {borderRest}; --tok-border-focus: {borderFocus};"
+    >
+      {#each values as v, i (v + i)}
+        <Chip
+          text={v}
+          variant={variant === "ghost" ? "secondary" : variant}
+          size={chipSize}
+          removable
+          {disabled}
+          onremove={() => removeAt(i)}
+        />
+      {/each}
+      <input
+        bind:value={draft}
+        id={controlId}
+        {disabled}
+        {onkeydown}
+        placeholder={values.length === 0 ? placeholder : undefined}
+        aria-label={label ?? undefined}
+        aria-describedby={describedBy}
+        class="flex-1 min-w-[4rem] bg-transparent outline-none [color:var(--ui-color-text)] placeholder:[color:color-mix(in_srgb,var(--ui-color-text)_45%,transparent)]"
+      />
+    </label>
+  {/snippet}
+</FieldChrome>
+
+<style>
+  .tok-field {
+    border-color: var(--tok-border);
+  }
+  .tok-field:focus-within {
+    border-color: var(--tok-border-focus);
+  }
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    values?: string[];
+    allowDuplicates?: boolean;
+    max?: number;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string | null;
+    aside?: Snippet;
+    error?: string | Snippet | null;
+    description?: string | Snippet | null;
+    id?: string;
+    required?: boolean;
+    class?: string;
+};
+declare const TokenInput: import("svelte").Component<$$ComponentProps, {}, "values">;
+type TokenInput = ReturnType<typeof TokenInput>;
+export default TokenInput;

package/dist/components/TokenInput/index.d.ts

@@ -0,0 +1 @@
+export { default as TokenInput } from "./TokenInput.svelte";

package/dist/components/TokenInput/index.js

@@ -0,0 +1 @@
+export { default as TokenInput } from "./TokenInput.svelte";