@spaethtech/svelte-ui 0.20.1-dev.101.530be6a → 0.20.1-dev.103.a762c22

package/dist/components/Select.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { FieldChromeProps } from "./field-chrome.js";
   import ChevronDown from "~icons/mdi/chevron-down";
   import Input from "./Input.svelte";
   import List from "./List.svelte";
@@ -77,7 +79,7 @@
     borderless?: boolean;
     /** When set, render a hidden <input name> carrying the value so the Select submits in a form. */
     name?: string;
-  } & Record<string, any> = $props();
+  } & Omit<HTMLInputAttributes, "type" | "value" | "size" | "class"> & FieldChromeProps = $props();
 
   let isOpen = $state(false);
   let containerElement = $state<HTMLElement>();

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

@@ -1,4 +1,6 @@
 import type { Snippet } from "svelte";
+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 { Variant } from "../types/variants.js";
@@ -39,7 +41,7 @@ type $$ComponentProps = {
     borderless?: boolean;
     /** When set, render a hidden <input name> carrying the value so the Select submits in a form. */
     name?: string;
-} & Record<string, any>;
+} & Omit<HTMLInputAttributes, "type" | "value" | "size" | "class"> & FieldChromeProps;
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "searchTerm" | "methods">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -128,6 +128,7 @@
   import IconChevronRight from "~icons/mdi/chevron-right";
   import IconChevronUp from "~icons/mdi/chevron-up";
   import IconChevronDown from "~icons/mdi/chevron-down";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Placement } from "../../positioning/anchored.js";
   import type { Size } from "../../types/sizes.js";
   import { variantToken, type Variant } from "../../types/variants.js";
@@ -156,6 +157,7 @@
     activeMode = $bindable(),
     publishWidthVar,
     class: additionalClass = "",
+    ...rest
   }: {
     items?: SideBarMenuItem[];
     bottomItems?: SideBarMenuItem[];
@@ -244,7 +246,10 @@
      *  when you run more than one). Unset → nothing published. */
     publishWidthVar?: boolean | string;
     class?: string;
-  } = $props();
+    // Leftover HTML attributes are forwarded onto the strip's root `<aside>` (the primary content
+    // container; the outer wrapper is `display:contents` in every non-hover-expand mode). `style` is
+    // omitted — the aside computes its own (`--sbm-accent`), as does the wrapper (spacer width).
+  } & Omit<HTMLAttributes<HTMLElement>, "class" | "style"> = $props();
 
   // Per-instance, hydration-stable id prefix so popout DOM ids are unique when more than one
   // SideBarMenu renders on a page (otherwise `sbm-popout-top-1` collides, breaking `aria-controls`
@@ -1174,6 +1179,7 @@
   style="{hoverExpandActive ? `width: ${collapsedW}px;` : ''}"
 >
   <aside
+    {...rest}
     bind:this={asideRef}
     bind:clientHeight={asideH}
     data-sbm-aside={uid}

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

@@ -94,6 +94,7 @@ export type SideBarMenuItem = {
      *  the default `currentPath` segment-boundary match against `link`. */
     activeMatch?: SideBarMenuActiveRule;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Variant } from "../../types/variants.js";
 import { type Breakpoint } from "../../types/breakpoints.js";
@@ -186,7 +187,7 @@ type $$ComponentProps = {
      *  when you run more than one). Unset → nothing published. */
     publishWidthVar?: boolean | string;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class" | "style">;
 declare const SideBarMenu: import("svelte").Component<$$ComponentProps, {}, "open" | "stepLevel" | "api" | "activeMode">;
 type SideBarMenu = ReturnType<typeof SideBarMenu>;
 export default SideBarMenu;

package/dist/components/Skeleton/Skeleton.svelte

@@ -6,6 +6,8 @@
  */
 -->
 <script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
   let {
     shape = "text",
     width,
@@ -14,6 +16,7 @@
     radius,
     animate = true,
     class: cls = "",
+    ...rest
   }: {
     shape?: "text" | "rect" | "circle";
     width?: string | number;
@@ -22,7 +25,8 @@
     radius?: string;
     animate?: boolean;
     class?: string;
-  } = $props();
+    // `style` omitted — dimensions come from `width`/`height`/`radius`, applied as the element's style.
+  } & Omit<HTMLAttributes<HTMLElement>, "class" | "style"> = $props();
 
   const css = (v: string | number | undefined): string | undefined =>
     typeof v === "number" ? `${v}px` : v;
@@ -39,7 +43,7 @@
 </script>
 
 {#if shape === "text" && lines > 1}
-  <div class="flex flex-col gap-2 {cls}" aria-hidden="true">
+  <div class="flex flex-col gap-2 {cls}" aria-hidden="true" {...rest}>
     {#each Array(lines) as _, i (i)}
       <span
         class={blockClass}
@@ -52,6 +56,7 @@
     class="{blockClass} {cls}"
     style="width: {w}; height: {h}; border-radius: {rad};"
     aria-hidden="true"
+    {...rest}
   ></span>
 {/if}
 

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     shape?: "text" | "rect" | "circle";
     width?: string | number;
@@ -6,7 +7,7 @@ type $$ComponentProps = {
     radius?: string;
     animate?: boolean;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class" | "style">;
 declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/components/Slider/Slider.svelte

@@ -12,6 +12,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 {
     value = $bindable(0),
@@ -31,6 +32,7 @@
     required = false,
     id,
     class: cls = "",
+    ...rest
   }: {
     value?: number | [number, number];
     min?: number;
@@ -49,7 +51,7 @@
     required?: boolean;
     id?: string;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class" | "id"> = $props();
 
   const controlId = id ?? nextFieldId();
   const isRange = $derived(range || Array.isArray(value));
@@ -166,7 +168,7 @@
 
 <FieldChrome {label} {aside} {error} {description} {required} {controlId} {size} class={cls}>
   {#snippet control({ describedBy })}
-    <div class="flex items-center gap-3 select-none">
+    <div {...rest} class="flex items-center gap-3 select-none">
       <!-- The track is the click-to-position surface; the thumbs below carry role="slider". -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <!-- Disabled keeps pointer events (so the not-allowed cursor shows) but every handler no-ops on

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

@@ -2,6 +2,7 @@ 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";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     value?: number | [number, number];
     min?: number;
@@ -20,7 +21,7 @@ type $$ComponentProps = {
     required?: boolean;
     id?: string;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class" | "id">;
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/components/Spinner/Spinner.svelte

@@ -8,6 +8,7 @@
  */
 -->
 <script lang="ts">
+  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";
@@ -18,6 +19,7 @@
     size = "md",
     label = "Loading",
     class: cls = "",
+    ...rest
   }: {
     /** Colour accent. Omit to inherit `currentColor` (e.g. inside a filled Button). */
     variant?: Variant;
@@ -25,7 +27,7 @@
     /** Accessible label (visually hidden). */
     label?: string;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLSpanElement>, "class" | "style"> = $props();
 
   // 16 / 20 / 24px rings on the shared size axis.
   const sizeClass: Record<Size, string> = {
@@ -46,6 +48,7 @@
 <span
   role="status"
   aria-live="polite"
+  {...rest}
   class="inline-block shrink-0 animate-spin rounded-full border-solid align-[-0.125em] {responsiveClasses(
     size,
     sizeClass,

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

@@ -1,3 +1,4 @@
+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";
@@ -8,7 +9,7 @@ type $$ComponentProps = {
     /** Accessible label (visually hidden). */
     label?: string;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLSpanElement>, "class" | "style">;
 declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/components/Splitter/Splitter.svelte

@@ -9,6 +9,7 @@
   import type { Snippet } from "svelte";
   import type { Variant } from "../../types/variants.js";
   import { variantToken } from "../../types/variants.js";
+  import type { HTMLAttributes } from "svelte/elements";
 
   let {
     start,
@@ -21,6 +22,7 @@
     variant = "primary",
     disabled = false,
     class: cls = "",
+    ...rest
   }: {
     start: Snippet;
     end: Snippet;
@@ -33,7 +35,7 @@
     variant?: Variant;
     disabled?: boolean;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> = $props();
 
   const isH = $derived(orientation === "horizontal");
   const token = $derived(variantToken[variant]);
@@ -82,6 +84,7 @@
 </script>
 
 <div
+  {...rest}
   bind:this={containerEl}
   class="flex {isH ? 'flex-row' : 'flex-col'} {cls}"
   style={dragging ? "user-select: none;" : ""}

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

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { Variant } from "../../types/variants.js";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     start: Snippet;
     end: Snippet;
@@ -12,7 +13,7 @@ type $$ComponentProps = {
     variant?: Variant;
     disabled?: boolean;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class" | "style">;
 declare const Splitter: import("svelte").Component<$$ComponentProps, {}, "size">;
 type Splitter = ReturnType<typeof Splitter>;
 export default Splitter;

package/dist/components/Stat/Stat.svelte

@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import Card from "../Card.svelte";
   import IconUp from "~icons/mdi/trending-up";
   import IconDown from "~icons/mdi/trending-down";
@@ -24,6 +25,7 @@
     variant = "neutral",
     size = "md",
     class: cls = "",
+    ...rest
   }: {
     label: string;
     value: string | number;
@@ -37,7 +39,7 @@
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const token = $derived(variantToken[variant]);
   const deltaNum = $derived(typeof delta === "number" ? delta : null);
@@ -60,7 +62,7 @@
   };
 </script>
 
-<Card class="p-4 {cls}">
+<Card class="p-4 {cls}" {...rest}>
   <div class="flex items-start justify-between gap-3">
     <div class="min-w-0">
       <div class="truncate text-sm [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">

package/dist/components/Stat/Stat.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";
@@ -15,7 +16,7 @@ type $$ComponentProps = {
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const Stat: import("svelte").Component<$$ComponentProps, {}, "">;
 type Stat = ReturnType<typeof Stat>;
 export default Stat;

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