@spaethtech/svelte-ui 0.20.1-dev.105.894ecae → 0.20.1-dev.99.8654270

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

@@ -1,11 +1,10 @@
 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,18 +9,12 @@
   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",
-    ...rest
-  }: { size?: Responsive<Size>; variant?: Variant } & Omit<HTMLButtonAttributes, "class"> =
-    $props();
+  let { size = "md", variant = "ghost" }: { size?: Responsive<Size>; variant?: Variant } = $props();
 
   // The stored value ("auto" until the user picks) and the tracked system preference.
   let theme = $state<ThemeValue>("auto");
@@ -50,10 +44,7 @@
   }
 </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,11 +1,10 @@
 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,8 +11,6 @@
 <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";
@@ -23,9 +21,7 @@
   import IconClock from "~icons/mdi/clock-outline";
 
   type RangeValue = { start: string | null; end: string | null };
-  interface Props
-    extends Omit<HTMLInputAttributes, "type" | "value" | "size" | "step" | "class">,
-      FieldChromeProps {
+  interface Props {
     /** `{ 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,5 +1,3 @@
-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";
@@ -8,7 +6,7 @@ type RangeValue = {
     start: string | null;
     end: string | null;
 };
-interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size" | "step" | "class">, FieldChromeProps {
+interface Props {
     /** `{ 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,7 +19,6 @@
 </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";
@@ -29,13 +28,12 @@
     variant = "primary",
     size = "md",
     class: cls = "",
-    ...rest
   }: {
     items: TimelineItem[];
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-  } & Omit<HTMLAttributes<HTMLOListElement>, "class"> = $props();
+  } = $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> = {
@@ -47,7 +45,7 @@
   const tokenFor = (item: TimelineItem) => variantToken[item.variant ?? variant];
 </script>
 
-<ol class="flex flex-col {cls}" {...rest}>
+<ol class="flex flex-col {cls}">
   {#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,7 +8,6 @@ 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 = {
@@ -16,7 +15,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,7 +8,6 @@
 -->
 <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";
@@ -31,7 +30,6 @@
     id,
     required = false,
     class: cls = "",
-    ...rest
   }: {
     values?: string[];
     allowDuplicates?: boolean;
@@ -47,9 +45,7 @@
     id?: string;
     required?: boolean;
     class?: string;
-    // 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();
+  } = $props();
 
   const controlId = id ?? nextFieldId();
   const token = $derived(variantToken[variant]);
@@ -112,7 +108,6 @@
   {#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,5 +1,4 @@
 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";
@@ -18,7 +17,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,7 +19,6 @@
 
 <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";
@@ -33,7 +32,6 @@
     variant = "primary",
     size = "md",
     class: cls = "",
-    ...rest
   }: {
     items: TreeNode[];
     /** Keys of expanded nodes (bindable). */
@@ -44,9 +42,7 @@
     variant?: Variant;
     size?: Responsive<Size>;
     class?: string;
-    // `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();
+  } = $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" };
@@ -141,12 +137,7 @@
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<ul
-  {...rest}
-  role="tree"
-  class="flex flex-col {responsiveClasses(size, iconCls)} {cls}"
-  onkeydown={onKeydown}
->
+<ul 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,7 +7,6 @@ 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";
@@ -21,7 +20,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/docs/components.md

@@ -17,18 +17,6 @@ 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
@@ -602,11 +590,7 @@ 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`, `href`, `children`; dispatches `dismiss`
-- **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 style overrides.
+- **Props**: `text`, `variant`, `size`, `dismissible`, `rounded`, `children`; dispatches `dismiss`
 
 ### NotesEditor
 

package/package.json

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

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

@@ -1,22 +0,0 @@
-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

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