@spaethtech/svelte-ui 0.20.1-dev.103.a762c22 → 0.20.1-dev.107.910f0d7

package/dist/components/Badge/Badge.svelte

@@ -35,6 +35,14 @@
     text?: string;
     variant?: BadgeVariant;
     size?: Responsive<Size>;
+    /** Arbitrary fill colour — any CSS colour (e.g. a DB-stored `#rrggbb` for data-driven statuses).
+     *  Overrides `variant` for colour: when set, `variant` is ignored for the fill/border/text
+     *  (size/radius/`borderless` still apply). Pair with `textColor` for contrast. This is the
+     *  supported alternative to a `style` override (which the chip owns). */
+    color?: string;
+    /** Text (and icon) colour paired with `color`. Only used when `color` is set; default
+     *  `var(--ui-color-text)`. */
+    textColor?: string;
     dismissible?: boolean;
     rounded?: boolean;
     /** Hide the border WITHOUT changing the box: the border stays 1px (so height/width are
@@ -53,6 +61,8 @@
     text = "",
     variant = "default",
     size = "md",
+    color,
+    textColor,
     dismissible = false,
     rounded = true,
     borderless = true,
@@ -107,16 +117,26 @@
       ? "color-mix(in srgb, var(--ui-color-text) 20%, transparent)"
       : `color-mix(in srgb, var(${token}) var(--ui-tint-border), transparent)`,
   );
-  const textColor = $derived(
+  const variantText = $derived(
     variant === "ghost"
       ? "color-mix(in srgb, var(--ui-color-text) 65%, transparent)"
       : `color-mix(in srgb, var(${token}) var(--ui-tint-strong), var(--ui-color-text))`,
   );
-  const style = $derived(
-    `background-color: ${bgColor};` +
-      ` border-color: ${borderless ? bgColor : standardBorder};` +
-      ` color: ${textColor};`,
+  // An explicit `color` overrides the variant entirely: fill = color; ring = color (borderless) or
+  // color mixed toward the text at the shared hover-border strength (keeps the ring on the tint
+  // scale); text = `textColor` or the theme text colour. Otherwise the variant tokens drive it.
+  const fill = $derived(color ?? bgColor);
+  const ring = $derived(
+    color
+      ? borderless
+        ? color
+        : `color-mix(in srgb, ${color} var(--ui-tint-border-hover), var(--ui-color-text))`
+      : borderless
+        ? bgColor
+        : standardBorder,
   );
+  const fg = $derived(color ? (textColor ?? "var(--ui-color-text)") : variantText);
+  const style = $derived(`background-color: ${fill}; border-color: ${ring}; color: ${fg};`);
 
   function handleDismiss() {
     ondismiss?.();

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

@@ -17,6 +17,14 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, "style"> {
     text?: string;
     variant?: BadgeVariant;
     size?: Responsive<Size>;
+    /** Arbitrary fill colour — any CSS colour (e.g. a DB-stored `#rrggbb` for data-driven statuses).
+     *  Overrides `variant` for colour: when set, `variant` is ignored for the fill/border/text
+     *  (size/radius/`borderless` still apply). Pair with `textColor` for contrast. This is the
+     *  supported alternative to a `style` override (which the chip owns). */
+    color?: string;
+    /** Text (and icon) colour paired with `color`. Only used when `color` is set; default
+     *  `var(--ui-color-text)`. */
+    textColor?: string;
     dismissible?: boolean;
     rounded?: boolean;
     /** Hide the border WITHOUT changing the box: the border stays 1px (so height/width are

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,11 +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`, `href`, `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 style overrides.
+  `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.103.a762c22",
+  "version": "0.20.1-dev.107.910f0d7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"