@spaethtech/svelte-ui 0.20.1-dev.99.8654270 → 0.21.0

package/dist/components/Stepper/Stepper.svelte

@@ -18,6 +18,7 @@
   import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
   let {
     steps,
@@ -27,6 +28,7 @@
     size = "md",
     onstep,
     class: cls = "",
+    ...rest
   }: {
     steps: StepItem[];
     current?: number;
@@ -35,7 +37,7 @@
     size?: Responsive<Size>;
     onstep?: (index: number) => void;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class"> = $props();
 
   const token = $derived(variantToken[variant]);
   const isH = $derived(orientation === "horizontal");
@@ -62,6 +64,7 @@
 </script>
 
 <ol
+  {...rest}
   class="flex {isH ? 'flex-row items-start' : 'flex-col'} {cls}"
   aria-label={i18n.messages.progress}
 >

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

@@ -7,6 +7,7 @@ export type StepItem = {
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     steps: StepItem[];
     current?: number;
@@ -15,7 +16,7 @@ type $$ComponentProps = {
     size?: Responsive<Size>;
     onstep?: (index: number) => void;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class">;
 declare const Stepper: import("svelte").Component<$$ComponentProps, {}, "current">;
 type Stepper = ReturnType<typeof Stepper>;
 export default Stepper;

package/dist/components/ThemeSelector.svelte

@@ -5,10 +5,18 @@
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import type { Variant } from "../types/variants.js";
+  import type { HTMLAttributes } from "svelte/elements";
   import { applyTheme, readStoredTheme, type ThemeValue } from "./theme.js";
 
   // Shared axes, forwarded to the underlying Select (and the label text tracks size).
-  let { size = "md", variant }: { size?: Responsive<Size>; variant?: Variant } = $props();
+  let {
+    size = "md",
+    variant,
+    ...rest
+  }: { size?: Responsive<Size>; variant?: Variant } & Omit<
+    HTMLAttributes<HTMLDivElement>,
+    "class"
+  > = $props();
   const labelText: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-base" };
   const labelClass = $derived(responsiveClasses(size, labelText));
 
@@ -33,7 +41,7 @@
   });
 </script>
 
-<div class="flex items-center gap-2">
+<div {...rest} class="flex items-center gap-2">
   <label for="theme-selector" class="{labelClass} font-medium text-[var(--ui-color-text)]"
     >Theme:</label
   >

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

@@ -1,10 +1,11 @@
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 import type { Variant } from "../types/variants.js";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     size?: Responsive<Size>;
     variant?: Variant;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;
 export default ThemeSelector;

package/dist/components/ThemeToggle.svelte

@@ -9,12 +9,18 @@
   import type { Size } from "../types/sizes.js";
   import type { Variant } from "../types/variants.js";
   import type { Responsive } from "../types/responsive.js";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import { applyTheme, readStoredTheme, resolveTheme, type ThemeValue } from "./theme.js";
   import IconSun from "~icons/mdi/weather-sunny";
   import IconMoon from "~icons/mdi/weather-night";
 
   // Shared axes, forwarded to the underlying Button. Icon-only, so it defaults to the chromeless ghost.
-  let { size = "md", variant = "ghost" }: { size?: Responsive<Size>; variant?: Variant } = $props();
+  let {
+    size = "md",
+    variant = "ghost",
+    ...rest
+  }: { size?: Responsive<Size>; variant?: Variant } & Omit<HTMLButtonAttributes, "class"> =
+    $props();
 
   // The stored value ("auto" until the user picks) and the tracked system preference.
   let theme = $state<ThemeValue>("auto");
@@ -44,7 +50,10 @@
   }
 </script>
 
+<!-- rest is fully typed on this component's own Props (below); the cast only sidesteps a TS
+     "union too complex" limit when spreading a wide attrs type into Button's ButtonProps|AnchorProps. -->
 <Button
+  {...rest as Record<string, unknown>}
   {size}
   {variant}
   onclick={toggle}

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

@@ -1,10 +1,11 @@
 import type { Size } from "../types/sizes.js";
 import type { Variant } from "../types/variants.js";
 import type { Responsive } from "../types/responsive.js";
+import type { HTMLButtonAttributes } from "svelte/elements";
 type $$ComponentProps = {
     size?: Responsive<Size>;
     variant?: Variant;
-};
+} & Omit<HTMLButtonAttributes, "class">;
 declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeToggle = ReturnType<typeof ThemeToggle>;
 export default ThemeToggle;

package/dist/components/TimeRangeInput.svelte

@@ -11,6 +11,8 @@
 <script lang="ts">
   import { uiI18n } from "../i18n.js";
   const i18n = uiI18n();
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { FieldChromeProps } from "./field-chrome.js";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import { resolveStep, type StepSpec } from "../types/time.js";
@@ -21,7 +23,9 @@
   import IconClock from "~icons/mdi/clock-outline";
 
   type RangeValue = { start: string | null; end: string | null };
-  interface Props {
+  interface Props
+    extends Omit<HTMLInputAttributes, "type" | "value" | "size" | "step" | "class">,
+      FieldChromeProps {
     /** `{ start, end }` with 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or null. Bindable. */
     value?: RangeValue | null;
     /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */

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

@@ -1,3 +1,5 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { FieldChromeProps } from "./field-chrome.js";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 import { type StepSpec } from "../types/time.js";
@@ -6,7 +8,7 @@ type RangeValue = {
     start: string | null;
     end: string | null;
 };
-interface Props {
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size" | "step" | "class">, FieldChromeProps {
     /** `{ start, end }` with 24h `HH:MM` (or `HH:MM:SS` when `seconds`), or null. Bindable. */
     value?: RangeValue | null;
     /** Column interval: a number = minute step, or `{ hour, minute, second }`. Default 1 (minute). */

package/dist/components/Timeline/Timeline.svelte

@@ -19,6 +19,7 @@
 </script>
 
 <script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
@@ -28,12 +29,13 @@
     variant = "primary",
     size = "md",
     class: cls = "",
+    ...rest
   }: {
     items: TimelineItem[];
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLOListElement>, "class"> = $props();
 
   const dotSize: Record<Size, string> = { sm: "w-2.5 h-2.5", md: "w-3 h-3", lg: "w-3.5 h-3.5" };
   const iconBox: Record<Size, string> = {
@@ -45,7 +47,7 @@
   const tokenFor = (item: TimelineItem) => variantToken[item.variant ?? variant];
 </script>
 
-<ol class="flex flex-col {cls}">
+<ol class="flex flex-col {cls}" {...rest}>
   {#each items as item, i (i)}
     {@const last = i === items.length - 1}
     <li class="flex gap-3">

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

@@ -8,6 +8,7 @@ export type TimelineItem = {
     variant?: Variant;
     content?: Snippet;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
@@ -15,7 +16,7 @@ type $$ComponentProps = {
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLOListElement>, "class">;
 declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
 type Timeline = ReturnType<typeof Timeline>;
 export default Timeline;

package/dist/components/TokenInput/TokenInput.svelte

@@ -8,6 +8,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import FieldChrome, { nextFieldId } from "../FieldChrome.svelte";
   import Chip from "../Chip/Chip.svelte";
   import type { Variant } from "../../types/variants.js";
@@ -30,6 +31,7 @@
     id,
     required = false,
     class: cls = "",
+    ...rest
   }: {
     values?: string[];
     allowDuplicates?: boolean;
@@ -45,7 +47,9 @@
     id?: string;
     required?: boolean;
     class?: string;
-  } = $props();
+    // Forwarded onto the field frame (`<label class="tok-field">`). `style` omitted — that frame
+    // computes its own (`--tok-border` vars). `class` goes to FieldChrome's chrome stack (existing).
+  } & Omit<HTMLAttributes<HTMLLabelElement>, "class" | "style"> = $props();
 
   const controlId = id ?? nextFieldId();
   const token = $derived(variantToken[variant]);
@@ -108,6 +112,7 @@
   {#snippet control({ describedBy })}
     <!-- A <label> so clicking anywhere in the field focuses the input natively (no JS handler). -->
     <label
+      {...rest}
       for={controlId}
       class="tok-field flex flex-wrap items-center rounded-[var(--ui-border-radius)] border transition-colors {responsiveClasses(
         size,

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
@@ -17,7 +18,7 @@ type $$ComponentProps = {
     id?: string;
     required?: boolean;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLLabelElement>, "class" | "style">;
 declare const TokenInput: import("svelte").Component<$$ComponentProps, {}, "values">;
 type TokenInput = ReturnType<typeof TokenInput>;
 export default TokenInput;

package/dist/components/Tree/Tree.svelte

@@ -19,6 +19,7 @@
 
 <script lang="ts">
   import IconChevronRight from "~icons/mdi/chevron-right";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Variant } from "../../types/variants.js";
   import { variantToken } from "../../types/variants.js";
   import type { Size } from "../../types/sizes.js";
@@ -32,6 +33,7 @@
     variant = "primary",
     size = "md",
     class: cls = "",
+    ...rest
   }: {
     items: TreeNode[];
     /** Keys of expanded nodes (bindable). */
@@ -42,7 +44,9 @@
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-  } = $props();
+    // `style` omitted — rows compute their own inline style (indent + active tint). `onselect` omitted
+    // too: it collides with the DOM `onselect` in HTMLAttributes but has this component's own signature.
+  } & Omit<HTMLAttributes<HTMLElement>, "class" | "style" | "onselect"> = $props();
 
   const token = $derived(variantToken[variant]);
   const rowH: Record<Size, string> = { sm: "h-7 text-xs", md: "h-8 text-sm", lg: "h-10 text-base" };
@@ -137,7 +141,12 @@
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<ul role="tree" class="flex flex-col {responsiveClasses(size, iconCls)} {cls}" onkeydown={onKeydown}>
+<ul
+  {...rest}
+  role="tree"
+  class="flex flex-col {responsiveClasses(size, iconCls)} {cls}"
+  onkeydown={onKeydown}
+>
   {#each flat as f (f.key)}
     {@const active = selected === f.key}
     <li role="none" class="list-none">

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

@@ -7,6 +7,7 @@ export type TreeNode = {
     children?: TreeNode[];
     disabled?: boolean;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Variant } from "../../types/variants.js";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
@@ -20,7 +21,7 @@ type $$ComponentProps = {
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class" | "style" | "onselect">;
 declare const Tree: import("svelte").Component<$$ComponentProps, {}, "selected" | "expanded">;
 type Tree = ReturnType<typeof Tree>;
 export default Tree;

package/dist/components/field-chrome.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+/**
+ * The shared **FieldChrome** vocabulary (`label` / `aside` / `error` / `description`) that `Input`,
+ * `TextArea`, and the specialized inputs (`PasswordInput` / `EmailInput` / `NumberInput` /
+ * `SearchInput`) all render through `FieldChrome`. See `FieldChrome.spec.md`.
+ *
+ * The specialized inputs forward `{...restProps}` into `<Input>` at runtime, so these props already
+ * WORK on them — they just weren't TYPED (their `Props` derived from `HTMLInputAttributes` alone,
+ * which has no `label`/`aside`/`error`/`description`). Extending this interface types them without any
+ * runtime change. `required`/`id` are NOT here — they are genuine `HTMLInputAttributes` and come from
+ * the base. Keep in sync with the chrome props declared on `Input`/`TextArea`.
+ */
+export interface FieldChromeProps {
+    /** Renders above the control; `null`/omitted → no label row. */
+    label?: string | null;
+    /** Right-aligned snippet in the label row. */
+    aside?: Snippet;
+    /** Inline error row (string → `{@html}`); also drives the shared error state (border + aria-invalid). */
+    error?: string | Snippet | null;
+    /** Muted help row below the control (string → `{@html}`). */
+    description?: string | Snippet | null;
+}

package/dist/components/field-chrome.js

@@ -0,0 +1 @@
+export {};

package/docs/components.md

@@ -17,6 +17,18 @@ Most sizeable/themeable components share two props (defined in `types/variants.t
 - **`size`** — `sm` (24px), `md` (32px, **default**), `lg` (40px). Tied to the theme's
   `--ui-height-sm` / `--ui-height` / `--ui-height-lg`.
 
+## HTML attribute passthrough
+
+Components forward the standard HTML attributes you pass — **`class`** (merged onto the root, appended
+last so your classes win), **`data-*`** (e.g. a stable `data-testid` for e2e), **`aria-*`**, **`id`**,
+**`title`**, and event handlers — onto their root element, typed against the matching `HTML*Attributes`.
+So `<Badge data-testid="status" class="ml-2">` or `<Card onmouseenter={…}>` just work and type-check.
+
+Exceptions: components that compute their own root **`style`** (themed `color-mix`, dimensions, drag
+transforms — e.g. `Badge`, `Alert`, `Skeleton`, `DataTable`) do **not** accept a `style` override —
+use `class`. Field-shaped components (`Input`, the specialized inputs, `Slider`, `TokenInput`,
+`FileUpload`) route `class` to their outer field wrapper and land other attributes on the control.
+
 ## Field chrome (shared)
 
 Every field-shaped component — `Input`, `Select`, `TextArea`, `Checkbox`, `Toggle` (and the
@@ -590,7 +602,21 @@ Status indicator / label.
 - **Location**: `src/lib/components/Badge/Badge.svelte`
 - **Axes**: `size`
 - **Variants**: `default`, `primary`, `success`, `warning`, `danger`, `info`
-- **Props**: `text`, `variant`, `size`, `dismissible`, `rounded`, `children`; dispatches `dismiss`
+- **Props**: `text`, `variant`, `size`, `color`, `textColor`, `dismissible`, `rounded`, `href`, `children`; dispatches `dismiss`
+- **Arbitrary colour (data-driven)**: `color` takes any CSS colour (e.g. a DB-stored `#rrggbb` for
+  operator-defined statuses) and overrides `variant` for the fill/border/text — `variant` is ignored
+  for colour when `color` is set (size/radius/`borderless` still apply). Pair with `textColor` (the
+  paired text/icon colour; default `var(--ui-color-text)`). The border stays on the shared tint scale
+  (`color` mixed toward the text at `--ui-tint-border-hover`, or just `color` when `borderless`). This
+  is the supported alternative to a `style` override, which the chip owns.
+  ```svelte
+  <!-- operator-defined ticket status: {label, color: "#rrggbb", fg} from the DB -->
+  <Badge {size} borderless text={status.label} color={status.color} textColor={status.fg} />
+  ```
+- **Attribute passthrough**: leftover HTML attributes — `class` (merged, appended last), `data-*`
+  (e.g. a `data-testid` e2e hook), `aria-*`, `id`, `title`, event handlers — spread onto the chip's
+  root element. **`style` is not** passed through (the chip computes its own themed `style`); use
+  `class` for extra styling and **`color`/`textColor`** for an arbitrary chip colour.
 
 ### NotesEditor
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.20.1-dev.99.8654270",
+  "version": "0.21.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"