@spaethtech/svelte-ui 0.20.1-dev.101.530be6a → 0.20.1-dev.102.3c5719c

package/dist/components/Avatar/Avatar.svelte

@@ -12,6 +12,7 @@
 
 <script lang="ts">
   import type { Snippet } from "svelte";
+  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";
@@ -28,6 +29,7 @@
     shape = "circle",
     status,
     class: cls = "",
+    ...rest
   }: {
     src?: string;
     name?: string;
@@ -38,7 +40,7 @@
     shape?: AvatarShape;
     status?: AvatarStatus;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLSpanElement>, "class"> = $props();
 
   let imgFailed = $state(false);
   // Reset the failed flag whenever the source changes.
@@ -80,7 +82,7 @@
   const shapeClass = $derived(shape === "circle" ? "rounded-full" : "rounded-[var(--ui-border-radius)]");
 </script>
 
-<span class="relative inline-flex shrink-0 {cls}">
+<span class="relative inline-flex shrink-0 {cls}" {...rest}>
   <span
     class="ui-avatar inline-flex items-center justify-center overflow-hidden font-medium select-none {shapeClass} {responsiveClasses(
       size,

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

@@ -1,6 +1,7 @@
 export type AvatarShape = "circle" | "square";
 export type AvatarStatus = "online" | "offline" | "busy" | "away";
 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";
@@ -14,7 +15,7 @@ type $$ComponentProps = {
     shape?: AvatarShape;
     status?: AvatarStatus;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLSpanElement>, "class">;
 declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/Avatar/AvatarGroup.svelte

@@ -21,6 +21,7 @@
 
 <script lang="ts">
   import Avatar from "./Avatar.svelte";
+  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";
@@ -33,6 +34,7 @@
     variant = "neutral",
     class: cls = "",
     children,
+    ...rest
   }: {
     items?: AvatarItem[];
     max?: number;
@@ -41,7 +43,7 @@
     variant?: Variant;
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const shown = $derived(
     items ? (max != null && items.length > max ? items.slice(0, max) : items) : [],
@@ -61,6 +63,7 @@
      avatars stay visually separated. -->
 <div
   class="flex items-center [&_.ui-avatar]:border-2 [&_.ui-avatar]:[border-color:var(--ui-color-background)] [&>*:not(:first-child)]:-ml-2 {cls}"
+  {...rest}
 >
   {#if items}
     {#each shown as it, i (i)}

package/dist/components/Avatar/AvatarGroup.svelte.d.ts

@@ -8,6 +8,7 @@ export type AvatarItem = {
     variant?: Variant;
     icon?: Snippet;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
@@ -18,7 +19,7 @@ type $$ComponentProps = {
     variant?: Variant;
     class?: string;
     children?: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const AvatarGroup: import("svelte").Component<$$ComponentProps, {}, "">;
 type AvatarGroup = ReturnType<typeof AvatarGroup>;
 export default AvatarGroup;

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -19,6 +19,7 @@
 <script lang="ts">
   import { uiI18n } from "../../i18n.js";
   const i18n = uiI18n();
+  import type { HTMLAttributes } from "svelte/elements";
   import Button from "../Button.svelte";
   import Menu from "../Menu.svelte";
   import type { MenuItem } from "../../data/table/types.js";
@@ -33,13 +34,14 @@
     maxItems,
     size = "md",
     class: cls = "",
+    ...rest
   }: {
     items: BreadcrumbItem[];
     separator?: Snippet | string;
     maxItems?: number;
     size?: Responsive<Size>;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class"> = $props();
 
   type Node =
     | { kind: "crumb"; item: BreadcrumbItem; last: boolean }
@@ -73,7 +75,7 @@
   }
 </script>
 
-<nav aria-label={i18n.messages.breadcrumb} class={cls}>
+<nav aria-label={i18n.messages.breadcrumb} class={cls} {...rest}>
   <ol
     class="flex flex-wrap items-center gap-1 [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]"
   >

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

@@ -5,6 +5,7 @@ export type BreadcrumbItem = {
     onclick?: () => void;
     icon?: Snippet;
 };
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
@@ -13,7 +14,7 @@ type $$ComponentProps = {
     maxItems?: number;
     size?: Responsive<Size>;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class">;
 declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
 type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
 export default Breadcrumbs;

package/dist/components/Divider/Divider.svelte

@@ -7,6 +7,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
 
   let {
     orientation = "horizontal",
@@ -14,13 +15,14 @@
     labelAlign = "center",
     class: cls = "",
     children,
+    ...rest
   }: {
     orientation?: "horizontal" | "vertical";
     label?: string;
     labelAlign?: "start" | "center" | "end";
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class"> = $props();
 
   const hasLabel = $derived(orientation === "horizontal" && (!!label || !!children));
 </script>
@@ -30,9 +32,10 @@
     role="separator"
     aria-orientation="vertical"
     class="inline-block w-px self-stretch [background-color:var(--ui-border-color)] {cls}"
+    {...rest}
   ></div>
 {:else if hasLabel}
-  <div role="separator" aria-orientation="horizontal" class="flex items-center gap-3 {cls}">
+  <div role="separator" aria-orientation="horizontal" class="flex items-center gap-3 {cls}" {...rest}>
     {#if labelAlign !== "start"}
       <div class="h-px flex-1 [background-color:var(--ui-border-color)]"></div>
     {/if}
@@ -44,5 +47,5 @@
     {/if}
   </div>
 {:else}
-  <hr class="w-full border-0 h-px [background-color:var(--ui-border-color)] {cls}" />
+  <hr class="w-full border-0 h-px [background-color:var(--ui-border-color)] {cls}" {...rest} />
 {/if}

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

@@ -1,11 +1,12 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     orientation?: "horizontal" | "vertical";
     label?: string;
     labelAlign?: "start" | "center" | "end";
     class?: string;
     children?: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class">;
 declare const Divider: import("svelte").Component<$$ComponentProps, {}, "">;
 type Divider = ReturnType<typeof Divider>;
 export default Divider;

package/dist/components/EmptyState/EmptyState.svelte

@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import IconInbox from "~icons/mdi/inbox-outline";
   import type { Variant } from "../../types/variants.js";
   import { variantToken } from "../../types/variants.js";
@@ -21,6 +22,7 @@
     size = "md",
     class: cls = "",
     children,
+    ...rest
   }: {
     title?: string;
     description?: string;
@@ -32,7 +34,7 @@
     size?: Responsive<Size>;
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const token = $derived(variantToken[variant]);
   const iconBox: Record<Size, string> = {
@@ -44,7 +46,7 @@
   const padSize: Record<Size, string> = { sm: "py-6 gap-2", md: "py-10 gap-3", lg: "py-16 gap-4" };
 </script>
 
-<div class="flex flex-col items-center text-center {responsiveClasses(size, padSize)} {cls}">
+<div class="flex flex-col items-center text-center {responsiveClasses(size, padSize)} {cls}" {...rest}>
   <div
     class="inline-flex items-center justify-center rounded-full {responsiveClasses(size, iconBox)}"
     style="background-color: color-mix(in srgb, var({token}) 14%, transparent); color: color-mix(in srgb, var({token}) var(--ui-tint-strong), var(--ui-color-text));"

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

package/dist/components/Grid.svelte

@@ -10,6 +10,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import { gridColsClass, gapClass, type Columns, type Gap } from "./field-group.js";
 
   let {
@@ -17,6 +18,7 @@
     gap = 4,
     class: cls = "",
     children,
+    ...rest
   }: {
     /** Track count — a number (1–6) or a responsive map like `{ base: 1, md: 3 }`. Default 1. */
     columns?: Columns;
@@ -24,11 +26,11 @@
     gap?: Gap;
     class?: string;
     children: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const gridClass = $derived(`grid ${gridColsClass(columns)} ${gapClass(gap, 4)}`);
 </script>
 
-<div class="{gridClass} {cls}">
+<div class="{gridClass} {cls}" {...rest}>
   {@render children()}
 </div>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import { type Columns, type Gap } from "./field-group.js";
 type $$ComponentProps = {
     /** Track count — a number (1–6) or a responsive map like `{ base: 1, md: 3 }`. Default 1. */
@@ -7,7 +8,7 @@ type $$ComponentProps = {
     gap?: Gap;
     class?: string;
     children: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const Grid: import("svelte").Component<$$ComponentProps, {}, "">;
 type Grid = ReturnType<typeof Grid>;
 export default Grid;

package/dist/components/Kbd/Kbd.svelte

@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
 
@@ -15,6 +16,7 @@
     size = "md",
     class: cls = "",
     children,
+    ...rest
   }: {
     /** A combo — each string is rendered as its own keycap, joined with "+". */
     keys?: string[];
@@ -23,7 +25,7 @@
     size?: Responsive<Size>;
     class?: string;
     children?: Snippet;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLElement>, "class"> = $props();
 
   const list = $derived(keys ?? null);
 
@@ -38,7 +40,7 @@
 </script>
 
 {#if list}
-  <span class="inline-flex items-center gap-1 {cls}">
+  <span class="inline-flex items-center gap-1 {cls}" {...rest}>
     {#each list as k, i (i)}
       {#if i > 0}<span class="text-xs [color:color-mix(in_srgb,var(--ui-color-text)_50%,transparent)]"
           >+</span
@@ -47,7 +49,7 @@
     {/each}
   </span>
 {:else}
-  <kbd class="{cap} {responsiveClasses(size, capSize)} {cls}"
+  <kbd class="{cap} {responsiveClasses(size, capSize)} {cls}" {...rest}
     >{#if children}{@render children()}{:else}{text}{/if}</kbd
   >
 {/if}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../../types/sizes.js";
 import { type Responsive } from "../../types/responsive.js";
 type $$ComponentProps = {
@@ -9,7 +10,7 @@ type $$ComponentProps = {
     size?: Responsive<Size>;
     class?: string;
     children?: Snippet;
-};
+} & Omit<HTMLAttributes<HTMLElement>, "class">;
 declare const Kbd: import("svelte").Component<$$ComponentProps, {}, "">;
 type Kbd = ReturnType<typeof Kbd>;
 export default Kbd;

package/dist/components/List.svelte

@@ -3,6 +3,7 @@
   const i18n = uiI18n();
   import { untrack } from "svelte";
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import type { Size } from "../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../types/responsive.js";
   import { variantToken, type Variant } from "../types/variants.js";
@@ -12,7 +13,7 @@
     label: string;
   };
 
-  interface Props {
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
     options: Option[];
     value?: string | string[]; // Bindable selected value - string[] when multiSelect is true
     multiSelect?: boolean; // Enable multi-select mode
@@ -81,6 +82,7 @@
     onLoadStart,
     onLoadEnd,
     onSelection,
+    ...rest
   }: Props = $props();
 
   // Size axis (see types/sizes.ts): option text scales with the trigger (forwarded by Select).
@@ -499,7 +501,7 @@
   });
 </script>
 
-<div class="relative {className}">
+<div class="relative {className}" {...rest}>
   <div class="relative">
     <div
       bind:this={listElement}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 import { type Variant } from "../types/variants.js";
@@ -6,7 +7,7 @@ type Option = Record<string, any> & {
     value: string;
     label: string;
 };
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
     options: Option[];
     value?: string | string[];
     multiSelect?: boolean;

package/dist/components/Progress/Progress.svelte

@@ -6,6 +6,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";
@@ -20,6 +21,7 @@
     label,
     showValue = false,
     class: cls = "",
+    ...rest
   }: {
     value?: number;
     max?: number;
@@ -29,7 +31,7 @@
     label?: string;
     showValue?: boolean;
     class?: string;
-  } = $props();
+  } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
   const token = $derived(variantToken[variant]);
   const pct = $derived(
@@ -41,7 +43,7 @@
   const textClass: Record<Size, string> = { sm: "text-xs", md: "text-sm", lg: "text-sm" };
 </script>
 
-<div class="w-full {cls}">
+<div class="w-full {cls}" {...rest}>
   {#if label || (showValue && !indeterminate)}
     <div
       class="mb-1 flex items-center justify-between {responsiveClasses(

package/dist/components/Progress/Progress.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";
@@ -10,7 +11,7 @@ type $$ComponentProps = {
     label?: string;
     showValue?: boolean;
     class?: string;
-};
+} & Omit<HTMLAttributes<HTMLDivElement>, "class">;
 declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
 type Progress = ReturnType<typeof Progress>;
 export default Progress;

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/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/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/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/package.json

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