@spaethtech/svelte-ui 0.19.1-dev.98.32fa323 → 0.20.1-dev.101.530be6a

package/dist/components/Alert.svelte

@@ -14,6 +14,8 @@
     variant?: AlertVariant;
     size?: Responsive<Size>;
     text?: string;
+    /** Optional bold heading rendered above the body (`text`/`children`). Icon top-aligns when set. */
+    title?: string;
     /** Faint tinted background in addition to the bordered + coloured text. */
     filled?: boolean;
     /** Drop the visible frame while keeping the 1px box: border colour = the alert's own background
@@ -31,6 +33,7 @@
     variant = "info",
     size = "md",
     text = "",
+    title,
     filled = false,
     borderless = false,
     icon,
@@ -86,13 +89,13 @@
       ` color: ${textColor};` +
       (filled ? ` background-color: ${bgColor};` : ""),
   );
-  const has = $derived(!!children || !!text);
+  const has = $derived(!!children || !!text || !!title);
 </script>
 
 {#if has}
   <div
     role="alert"
-    class="flex items-center [border-radius:var(--ui-border-radius)] border {responsiveClasses(
+    class="flex {title ? 'items-start' : 'items-center'} [border-radius:var(--ui-border-radius)] border {responsiveClasses(
       size,
       sizeClass,
     )} {cls}"
@@ -104,9 +107,12 @@
         >{@render icon()}</span
       >
     {/if}
-    <span class="min-w-0"
-      >{#if children}{@render children()}{:else}{text}{/if}</span
-    >
+    <div class="flex min-w-0 flex-col">
+      {#if title}<span class="font-semibold">{title}</span>{/if}
+      <span class="min-w-0"
+        >{#if children}{@render children()}{:else}{text}{/if}</span
+      >
+    </div>
     {#if icon && iconPosition === "right"}
       <span
         class="ml-auto inline-flex shrink-0 [&_svg]:fill-current {responsiveClasses(

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

@@ -11,6 +11,8 @@ interface Props {
     variant?: AlertVariant;
     size?: Responsive<Size>;
     text?: string;
+    /** Optional bold heading rendered above the body (`text`/`children`). Icon top-aligns when set. */
+    title?: string;
     /** Faint tinted background in addition to the bordered + coloured text. */
     filled?: boolean;
     /** Drop the visible frame while keeping the 1px box: border colour = the alert's own background

package/dist/components/Badge/Badge.svelte

@@ -2,6 +2,7 @@
   import { uiI18n } from "../../i18n.js";
   const i18n = uiI18n();
   import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import Close from "~icons/mdi/close";
   import type { Size } from "../../types/sizes.js";
   import { responsiveClasses, type Responsive } from "../../types/responsive.js";
@@ -27,7 +28,10 @@
     | "danger"
     | "ghost";
 
-  interface Props {
+  // Spreads leftover HTML attributes (`class`, `data-*`, `aria-*`, `title`, `id`, event handlers, …)
+  // onto the chip's root element. `style` is OMITTED — the chip computes its own themed `style`
+  // (fill/border/text `color-mix`); a passthrough would clobber it. Use `class` for overrides.
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "style"> {
     text?: string;
     variant?: BadgeVariant;
     size?: Responsive<Size>;
@@ -55,6 +59,8 @@
     href,
     ondismiss,
     children,
+    class: cls = "",
+    ...rest
   }: Props = $props();
 
   // Every variant maps to a library-wide colour token — no Tailwind
@@ -128,12 +134,13 @@
 {#if hasContent}
   <svelte:element
     this={href ? "a" : "span"}
+    {...rest}
     {href}
     class="inline-flex items-center gap-1 border no-underline select-none {href
       ? 'cursor-pointer hover:brightness-95'
       : 'cursor-default'} {responsiveClasses(size, sizeClass)} {rounded
       ? 'rounded-full'
-      : 'rounded'} transition-[filter,background-color,border-color] duration-150"
+      : 'rounded'} transition-[filter,background-color,border-color] duration-150 {cls}"
     {style}
   >
     <span class="truncate">

package/dist/components/Badge/Badge.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";
 /**
@@ -12,7 +13,7 @@ import { type Responsive } from "../../types/responsive.js";
  * text stays high-contrast against the background.
  */
 type BadgeVariant = "neutral" | "default" | "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "ghost";
-interface Props {
+interface Props extends Omit<HTMLAttributes<HTMLElement>, "style"> {
     text?: string;
     variant?: BadgeVariant;
     size?: Responsive<Size>;

package/dist/components/CardFooter.svelte

@@ -17,6 +17,7 @@
     variant = "neutral",
     size = "md",
     separator = true,
+    align = "right",
     class: cls = "",
     children,
     ...rest
@@ -25,10 +26,20 @@
     size?: Responsive<Size>;
     /** Show the top separator (default true). */
     separator?: boolean;
+    /** Horizontal placement of the footer content (action buttons). Default `"right"` — footers
+     *  right-align actions. Convenience over `class`; a `class` justify-* still overrides (applied last). */
+    align?: "left" | "center" | "right" | "between";
     class?: string;
     children?: Snippet;
   } & Omit<HTMLAttributes<HTMLDivElement>, "class"> = $props();
 
+  const justifyClass: Record<NonNullable<typeof align>, string> = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+    between: "justify-between",
+  };
+
   // The body→footer gap (`pad`) is ALWAYS applied, so `separator={false}` still leaves breathing room
   // above the footer (just no line). `separator={true}` adds the line + a matching margin above it
   // (`sepGap`), giving the margin → line → pad rhythm.
@@ -44,7 +55,7 @@
 </script>
 
 <div
-  class="flex items-center justify-end gap-3 {responsiveClasses(size, pad)} {separator
+  class="flex items-center {justifyClass[align]} gap-3 {responsiveClasses(size, pad)} {separator
     ? 'border-t ' + responsiveClasses(size, sepGap)
     : ''} {cls}"
   style={separator ? `border-color: ${sepColor}` : ""}

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

@@ -8,6 +8,9 @@ type $$ComponentProps = {
     size?: Responsive<Size>;
     /** Show the top separator (default true). */
     separator?: boolean;
+    /** Horizontal placement of the footer content (action buttons). Default `"right"` — footers
+     *  right-align actions. Convenience over `class`; a `class` justify-* still overrides (applied last). */
+    align?: "left" | "center" | "right" | "between";
     class?: string;
     children?: Snippet;
 } & Omit<HTMLAttributes<HTMLDivElement>, "class">;

package/dist/components/EmailInput.svelte

@@ -5,8 +5,9 @@
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
   import type { Variant } from "../types/variants.js";
+  import type { FieldChromeProps } from "./field-chrome.js";
 
-  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeProps {
     value: string;
     class?: string;
     inputClass?: string;

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

@@ -2,7 +2,8 @@ import type { HTMLInputAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import type { Responsive } from "../types/responsive.js";
 import type { Variant } from "../types/variants.js";
-interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+import type { FieldChromeProps } from "./field-chrome.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeProps {
     value: string;
     class?: string;
     inputClass?: string;

package/dist/components/NumberInput.svelte

@@ -11,8 +11,9 @@
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
   import type { Variant } from "../types/variants.js";
+  import type { FieldChromeProps } from "./field-chrome.js";
 
-  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size">, FieldChromeProps {
     value: number | null;
     class?: string;
     inputClass?: string;

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

@@ -2,7 +2,8 @@ import type { HTMLInputAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import type { Responsive } from "../types/responsive.js";
 import type { Variant } from "../types/variants.js";
-interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+import type { FieldChromeProps } from "./field-chrome.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size">, FieldChromeProps {
     value: number | null;
     class?: string;
     inputClass?: string;

package/dist/components/PasswordInput.svelte

@@ -6,8 +6,9 @@
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
   import type { Variant } from "../types/variants.js";
+  import type { FieldChromeProps } from "./field-chrome.js";
 
-  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeProps {
     value: string;
     class?: string;
     inputClass?: string;

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

@@ -2,7 +2,8 @@ import type { HTMLInputAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import type { Responsive } from "../types/responsive.js";
 import type { Variant } from "../types/variants.js";
-interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+import type { FieldChromeProps } from "./field-chrome.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeProps {
     value: string;
     class?: string;
     inputClass?: string;

package/dist/components/SearchInput.svelte

@@ -6,8 +6,9 @@
   import type { Size } from "../types/sizes.js";
   import type { Responsive } from "../types/responsive.js";
   import type { Variant } from "../types/variants.js";
+  import type { FieldChromeProps } from "./field-chrome.js";
 
-  interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+  interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeProps {
     value: string;
     class?: string;
     inputClass?: string;

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

@@ -2,7 +2,8 @@ import type { HTMLInputAttributes } from "svelte/elements";
 import type { Size } from "../types/sizes.js";
 import type { Responsive } from "../types/responsive.js";
 import type { Variant } from "../types/variants.js";
-interface Props extends Omit<HTMLInputAttributes, "type" | "size"> {
+import type { FieldChromeProps } from "./field-chrome.js";
+interface Props extends Omit<HTMLInputAttributes, "type" | "size">, FieldChromeProps {
     value: string;
     class?: string;
     inputClass?: string;

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

@@ -590,7 +590,11 @@ 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`, `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.
 
 ### NotesEditor
 

package/package.json

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