@sewadah/selaras 0.2.0 → 0.3.1

package/dist/runtime/theme/badge.js

@@ -9,8 +9,8 @@ export const badgeTheme = tv({
     leadingIcon: "shrink-0",
     label: "truncate",
     trailingIcon: "shrink-0",
-    // Standalone dots use role text for surface contrast; inline dots use the pill foreground.
-    dot: "shrink-0 rounded-full bg-[var(--_selaras-color-text)]"
+    // Standalone dots are unpaired graphics; inline dots use the pill foreground.
+    dot: "shrink-0 rounded-full bg-[var(--_selaras-color-indicator)]"
   },
   variants: {
     color: {

package/dist/runtime/theme/calendar.d.ts

@@ -0,0 +1,86 @@
+export declare const calendarTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            grids?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            headCell?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            dayButton?: import("tailwind-variants").ClassValue;
+            dayDetails?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            grids?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            headCell?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            dayButton?: import("tailwind-variants").ClassValue;
+            dayDetails?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    heading: string;
+    grids: string;
+    grid: string;
+    gridHead: string;
+    headCell: string;
+    cell: string;
+    dayButton: string;
+    dayDetails: string;
+    footer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            grids?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            headCell?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            dayButton?: import("tailwind-variants").ClassValue;
+            dayDetails?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    heading: string;
+    grids: string;
+    grid: string;
+    gridHead: string;
+    headCell: string;
+    cell: string;
+    dayButton: string;
+    dayDetails: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    header: string;
+    heading: string;
+    grids: string;
+    grid: string;
+    gridHead: string;
+    headCell: string;
+    cell: string;
+    dayButton: string;
+    dayDetails: string;
+    footer: string;
+}>>;
+export type CalendarThemeSlots = keyof (typeof calendarTheme)['slots'];

package/dist/runtime/theme/calendar.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const calendarTheme = tv({
+  slots: {
+    root: "inline-block",
+    header: "mb-2 flex items-center justify-between gap-2",
+    heading: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    grids: "flex flex-col gap-4 sm:flex-row",
+    // Give each month an intrinsic compact width. A percentage width here
+    // expands the inline-block root to its entire container. The fixed table
+    // layout keeps all seven columns equal even with day-details content.
+    grid: "w-72 table-fixed border-collapse",
+    gridHead: "",
+    headCell: "w-[14.285714%] h-8 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
+    cell: "p-0.5 text-center align-top",
+    dayButton: "relative data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--_selaras-color-fill)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through",
+    dayDetails: "min-w-0",
+    footer: "mt-3"
+  }
+});

package/dist/runtime/theme/callout.d.ts

@@ -1,19 +1,15 @@
 export declare const calloutTheme: import("tailwind-variants").TVReturnType<{
     type: {
         note: {
-            root: string;
             icon: string;
         };
         tip: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -25,19 +21,15 @@ export declare const calloutTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     type: {
         note: {
-            root: string;
             icon: string;
         };
         tip: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -49,19 +41,15 @@ export declare const calloutTheme: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnTypeLike<{
     type: {
         note: {
-            root: string;
             icon: string;
         };
         tip: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };

package/dist/runtime/theme/callout.js

@@ -1,20 +1,20 @@
 import { tv } from "tailwind-variants";
 export const calloutTheme = tv({
   slots: {
-    // Border-only accent (not a filled background like Alert) - a callout
-    // sits inline in a long stretch of prose, so it stays closer to a
-    // styled blockquote than a standalone UI element.
-    root: "flex gap-3 rounded-[var(--selaras-resolved-radius-md)] border-s-4 bg-[var(--selaras-resolved-surface-elevated)] p-4",
+    // Match Alert's soft surface by default. A masked pseudo-element draws
+    // the striped accent over the edge on hover or focus within without
+    // changing the box's size or the content's padding.
+    root: "relative flex items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--_selaras-color-subtle)] p-4 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[repeating-linear-gradient(135deg,var(--_selaras-color-border)_0_2px,transparent_2px_4px)] before:p-0.5 before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-100 focus-within:before:opacity-100",
     icon: "mt-0.5 size-5 shrink-0",
     content: "min-w-0 flex-1 text-sm text-[var(--selaras-resolved-text-muted)] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
     title: "font-medium text-[var(--selaras-resolved-text-default)]"
   },
   variants: {
     type: {
-      note: { root: "border-s-[var(--selaras-resolved-color-info-border)]", icon: "text-[var(--selaras-resolved-color-info-text)]" },
-      tip: { root: "border-s-[var(--selaras-resolved-color-success-border)]", icon: "text-[var(--selaras-resolved-color-success-text)]" },
-      warning: { root: "border-s-[var(--selaras-resolved-color-warning-border)]", icon: "text-[var(--selaras-resolved-color-warning-text)]" },
-      danger: { root: "border-s-[var(--selaras-resolved-color-danger-border)]", icon: "text-[var(--selaras-resolved-color-danger-text)]" }
+      note: { icon: "text-[var(--_selaras-color-text)]" },
+      tip: { icon: "text-[var(--_selaras-color-text)]" },
+      warning: { icon: "text-[var(--_selaras-color-text)]" },
+      danger: { icon: "text-[var(--_selaras-color-text)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/checkbox.js

@@ -82,7 +82,7 @@ export const checkboxTheme = tv({
     // requested, not whichever variant happens to compose later. See
     // RadioGroup's own theme file, which already has this order right.
     invalid: {
-      true: { box: "ring-[var(--_selaras-color-fill)] data-[state=checked]:ring-[var(--_selaras-color-fill)] data-[state=indeterminate]:ring-[var(--_selaras-color-fill)]" }
+      true: { box: "ring-[var(--_selaras-color-border)] data-[state=checked]:ring-[var(--_selaras-color-border)] data-[state=indeterminate]:ring-[var(--_selaras-color-border)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/code-tree.js

@@ -5,7 +5,7 @@ export const codeTreeTheme = tv({
     // FileTree's own root box (border/bg/padding) is stripped via its :ui
     // override below - this wrapper provides that framing instead, so the
     // two panels read as one split view rather than a box inside a box.
-    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--selaras-resolved-border-default)] p-2",
+    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-elevated)] p-2",
     content: "min-w-0 flex-1 overflow-auto p-4",
     pre: "whitespace-pre font-mono text-sm text-[var(--selaras-resolved-text-default)]",
     empty: "flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--selaras-resolved-text-muted)]"

package/dist/runtime/theme/command-palette.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const commandPaletteTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] backdrop-blur-[2px] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
     // Top-anchored (not vertically centered like Modal) - the conventional
     // command-palette position, and it means the dialog doesn't visibly
     // jump up and down as the result list grows/shrinks while typing.

package/dist/runtime/theme/content-navigation.d.ts

@@ -20,6 +20,7 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     linkActive: string;
     trigger: string;
     icon: string;
+    badge: string;
     chevron: string;
     content: string;
 }, undefined, {
@@ -44,6 +45,7 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     linkActive: string;
     trigger: string;
     icon: string;
+    badge: string;
     chevron: string;
     content: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -68,6 +70,7 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     linkActive: string;
     trigger: string;
     icon: string;
+    badge: string;
     chevron: string;
     content: string;
 }>>;

package/dist/runtime/theme/content-navigation.js

@@ -12,6 +12,7 @@ export const contentNavigationTheme = tv({
     // A separate slot from label - this styles the icon a link/group-header
     // shows before its title, not the title text itself.
     icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    badge: "ms-auto inline-flex shrink-0 items-center rounded-full bg-[var(--selaras-resolved-surface-elevated)] px-2 py-0.5 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
     chevron: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)] transition-transform group-data-[state=open]:rotate-180",
     // `ps-4` (16px) reserves the gutter each child's own trunk segment
     // and elbow (on the `item` slot above) reach back into - the trunk

package/dist/runtime/theme/date-picker.js

@@ -59,7 +59,7 @@ export const datePickerTheme = tv({
       lg: { field: "h-11 px-3.5 text-base" }
     },
     invalid: {
-      true: { field: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus-within:ring-[var(--_selaras-color-fill)]" }
+      true: { field: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus-within:ring-[var(--_selaras-color-focus)]" }
     },
     // Range mode's day cells butt up against each other with no horizontal
     // gap, so a highlighted run of days reads as one continuous connected

package/dist/runtime/theme/drawer.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const drawerTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)]",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] backdrop-blur-[2px]",
     content: "fixed z-[var(--selaras-resolved-z-modal)] flex flex-col bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-lg)] focus:outline-none",
     // A small rounded grip bar - purely visual, signals "draggable" the
     // same way a real bottom sheet's handle does. Centered via the

package/dist/runtime/theme/dropdown.d.ts

@@ -5,12 +5,19 @@ export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    mobile: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     content: string;
     item: string;
     icon: string;
     separator: string;
     arrow: string;
+    mobileList: string;
+    mobileGroup: string;
 }, undefined, {
     destructive: {
         true: {
@@ -18,12 +25,19 @@ export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    mobile: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     content: string;
     item: string;
     icon: string;
     separator: string;
     arrow: string;
+    mobileList: string;
+    mobileGroup: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     destructive: {
         true: {
@@ -31,11 +45,18 @@ export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    mobile: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     content: string;
     item: string;
     icon: string;
     separator: string;
     arrow: string;
+    mobileList: string;
+    mobileGroup: string;
 }>>;
 export type DropdownThemeSlots = keyof (typeof dropdownTheme)['slots'];

package/dist/runtime/theme/dropdown.js

@@ -5,7 +5,10 @@ export const dropdownTheme = tv({
     item: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-1.5 text-sm text-[var(--selaras-resolved-text-default)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
     icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     separator: "-mx-1 my-1 h-px bg-[var(--selaras-resolved-border-default)]",
-    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
+    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1",
+    // The adaptive small-screen dialog's scrolling list and each item group in it.
+    mobileList: "max-h-[calc(100dvh-8rem)] overflow-y-auto p-2",
+    mobileGroup: "flex flex-col gap-1"
   },
   variants: {
     // For a delete/remove-style action - deliberately just this one flag
@@ -16,6 +19,16 @@ export const dropdownTheme = tv({
         item: "text-[var(--selaras-resolved-color-danger-text)] data-[highlighted]:bg-[var(--selaras-resolved-color-danger-subtle-hover)] data-[highlighted]:text-[var(--selaras-resolved-color-danger-on-subtle)]",
         icon: "text-current"
       }
+    },
+    // Items in the adaptive dialog: larger touch targets, and real hover/focus
+    // states, since they aren't menu items with a highlighted state.
+    mobile: {
+      true: {
+        item: "min-h-11 w-full gap-3 px-3 py-2 text-start text-base transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--selaras-resolved-color-primary-fill)] disabled:pointer-events-none disabled:opacity-50"
+      }
     }
-  }
+  },
+  compoundVariants: [
+    { mobile: true, destructive: true, class: { item: "hover:bg-[var(--selaras-resolved-color-danger-subtle-hover)] hover:text-[var(--selaras-resolved-color-danger-on-subtle)]" } }
+  ]
 });

package/dist/runtime/theme/file-tree.js

@@ -18,7 +18,7 @@ export const fileTreeTheme = tv({
   },
   variants: {
     selected: {
-      true: { row: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle)] hover:text-[var(--_selaras-color-text)]" }
+      true: { row: "bg-[var(--_selaras-color-subtle)] font-medium text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle)] hover:text-[var(--_selaras-color-text)]" }
     },
     color: {
       primary: "",

package/dist/runtime/theme/file-upload.js

@@ -7,7 +7,7 @@ export const fileUploadTheme = tv({
     // instead of needing hand-rolled keydown handling. dragging (a
     // component-set data attribute, not a native one) recolors it
     // toward `color` - see the color variant below.
-    dropzone: "flex w-full flex-col items-center justify-center gap-2 rounded-[var(--selaras-resolved-radius-md)] border-2 border-dashed border-[var(--selaras-resolved-border-default)] p-6 text-center transition-colors hover:border-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--_selaras-color-focus)] data-[dragging]:border-[var(--_selaras-color-fill)] data-[dragging]:bg-[var(--_selaras-color-subtle)] disabled:opacity-50 disabled:pointer-events-none",
+    dropzone: "flex w-full flex-col items-center justify-center gap-2 rounded-[var(--selaras-resolved-radius-md)] border-2 border-dashed border-[var(--selaras-resolved-border-default)] p-6 text-center transition-colors hover:border-[var(--selaras-resolved-border-hover)] hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--_selaras-color-focus)] data-[dragging]:border-[var(--_selaras-color-border)] data-[dragging]:bg-[var(--_selaras-color-subtle)] disabled:opacity-50 disabled:pointer-events-none",
     icon: "text-[var(--_selaras-color-fill)]",
     label: "font-medium text-[var(--selaras-resolved-text-default)]",
     description: "text-[var(--selaras-resolved-text-muted)]",
@@ -54,7 +54,7 @@ export const fileUploadTheme = tv({
     // override win over color's - matches Input's own documented
     // reasoning for this order.
     invalid: {
-      true: { dropzone: "border-[var(--_selaras-color-fill)] focus-visible:ring-[var(--_selaras-color-fill)]" }
+      true: { dropzone: "border-[var(--_selaras-color-border)] focus-visible:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/form-field.d.ts

@@ -19,6 +19,12 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             container: string;
         };
     };
+    labelMode: {
+        static: {};
+        floating: {
+            container: string;
+        };
+    };
 }, {
     root: string;
     body: string;
@@ -50,6 +56,12 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             container: string;
         };
     };
+    labelMode: {
+        static: {};
+        floating: {
+            container: string;
+        };
+    };
 }, {
     root: string;
     body: string;
@@ -81,6 +93,12 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             container: string;
         };
     };
+    labelMode: {
+        static: {};
+        floating: {
+            container: string;
+        };
+    };
 }, {
     root: string;
     body: string;

package/dist/runtime/theme/form-field.js

@@ -28,10 +28,15 @@ export const formFieldTheme = tv({
     orientation: {
       vertical: {},
       horizontal: { body: "flex-row items-start gap-3", header: "shrink-0", container: "flex-1 min-w-0" }
+    },
+    labelMode: {
+      static: {},
+      floating: { container: "relative" }
     }
   },
   defaultVariants: {
     size: "md",
-    orientation: "vertical"
+    orientation: "vertical",
+    labelMode: "static"
   }
 });

package/dist/runtime/theme/icon.js

@@ -27,7 +27,7 @@ export const iconTheme = tv({
     // role with no finite built-in branch, while leaving uncolored icons free
     // to inherit currentColor.
     colored: {
-      true: { base: "text-[var(--_selaras-color-fill)]" }
+      true: { base: "text-[var(--_selaras-color-indicator)]" }
     }
   },
   compoundVariants: [

package/dist/runtime/theme/input-number.js

@@ -66,7 +66,7 @@ export const inputNumberTheme = tv({
     // focus-within:ring override win over color's - see input.ts for why
     // declaration order (not runtime call order) is what decides this.
     invalid: {
-      true: { root: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus-within:ring-[var(--_selaras-color-fill)]" }
+      true: { root: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus-within:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/input.js

@@ -54,7 +54,7 @@ export const inputTheme = tv({
     // Checkbox/Switch fix for why declaration order (not runtime call
     // order) is what decides this.
     invalid: {
-      true: { base: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus:ring-[var(--_selaras-color-fill)]" }
+      true: { base: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   compoundVariants: [

package/dist/runtime/theme/modal.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const modalTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)]",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] backdrop-blur-[2px]",
     // flex flex-col + the header/footer's own shrink-0 (native to a flex
     // child, no extra class needed) let a tall body scroll internally via
     // its own overflow-y-auto below, capped to the viewport height so a

package/dist/runtime/theme/pin-input.js

@@ -32,7 +32,7 @@ export const pinInputTheme = tv({
     // focus:ring override win over color's - matches Input's own
     // documented reasoning for this order.
     invalid: {
-      true: { input: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus:ring-[var(--_selaras-color-fill)]" }
+      true: { input: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/progress.js

@@ -3,7 +3,7 @@ export const progressTheme = tv({
   slots: {
     // Linear
     root: "relative w-full overflow-hidden rounded-full bg-[var(--selaras-resolved-surface-elevated)]",
-    indicator: "h-full rounded-full bg-[var(--_selaras-color-fill)]",
+    indicator: "h-full rounded-full bg-[var(--_selaras-color-indicator)]",
     // Circular - a relative wrapper (for the centered label overlay) around
     // an SVG pair: a static background track circle plus an animated
     // foreground arc whose stroke-dasharray/dashoffset (computed in the
@@ -11,7 +11,7 @@ export const progressTheme = tv({
     circleRoot: "relative inline-flex items-center justify-center",
     circleWrapper: "",
     circleTrack: "stroke-[var(--selaras-resolved-surface-elevated)]",
-    circleIndicator: "stroke-[var(--_selaras-color-fill)]",
+    circleIndicator: "stroke-[var(--_selaras-color-indicator)]",
     label: "absolute inset-0 flex items-center justify-center text-xs font-medium text-[var(--selaras-resolved-text-default)]"
   },
   variants: {

package/dist/runtime/theme/prose.d.ts

@@ -18,6 +18,8 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     headingAnchor: string;
     preWrapper: string;
     preHeader: string;
+    preLabel: string;
+    preIcon: string;
     preFilename: string;
     preCopyButton: string;
     pre: string;
@@ -41,6 +43,8 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     headingAnchor: string;
     preWrapper: string;
     preHeader: string;
+    preLabel: string;
+    preIcon: string;
     preFilename: string;
     preCopyButton: string;
     pre: string;
@@ -64,6 +68,8 @@ export declare const proseTheme: import("tailwind-variants").TVReturnType<{
     headingAnchor: string;
     preWrapper: string;
     preHeader: string;
+    preLabel: string;
+    preIcon: string;
     preFilename: string;
     preCopyButton: string;
     pre: string;

package/dist/runtime/theme/prose.js

@@ -10,6 +10,8 @@ export const proseTheme = tv({
     headingAnchor: "no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_selaras-color-focus)]",
     preWrapper: "overflow-hidden rounded-[var(--selaras-resolved-radius-md)] ring-1 ring-[var(--selaras-resolved-border-default)]",
     preHeader: "flex items-center justify-between gap-2 border-b border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-elevated)] px-3 py-1.5",
+    preLabel: "flex min-w-0 items-center gap-2",
+    preIcon: "size-4",
     preFilename: "font-mono text-xs text-[var(--selaras-resolved-text-muted)]",
     preCopyButton: "shrink-0",
     pre: "overflow-x-auto bg-[var(--selaras-resolved-surface-elevated)] p-4 font-mono text-sm leading-relaxed"

package/dist/runtime/theme/radio-group.js

@@ -47,7 +47,7 @@ export const radioGroupTheme = tv({
     // rendered visibly jagged at normal (non-zoomed) browser scale; the
     // fractional width needs the arbitrary-value form since Tailwind's
     // named ring scale only has integer steps.
-    item: "relative isolate flex shrink-0 items-center justify-center rounded-full ring-[1.5px] ring-inset ring-[var(--selaras-resolved-border-default)] transition-colors before:absolute before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--selaras-resolved-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)] data-[state=checked]:ring-[var(--_selaras-color-fill)] data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]",
+    item: "relative isolate flex shrink-0 items-center justify-center rounded-full ring-[1.5px] ring-inset ring-[var(--selaras-resolved-border-default)] transition-colors before:absolute before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--selaras-resolved-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)] data-[state=checked]:ring-[var(--_selaras-color-indicator)] data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]",
     // force-mount (see RadioGroup.vue) keeps this in the DOM for every
     // item regardless of checked state, so switching the selection scales
     // the old dot out and the new one in instead of an abrupt pop -
@@ -56,7 +56,7 @@ export const radioGroupTheme = tv({
     // detects them via computed animation-name), not plain CSS
     // transitions, so a transition-only version without force-mount would
     // just vanish instantly.
-    indicator: "rounded-full bg-[var(--_selaras-color-fill)] [transform:scale(0)] transition-transform duration-200 data-[state=checked]:[transform:scale(1)]",
+    indicator: "rounded-full bg-[var(--_selaras-color-indicator)] [transform:scale(0)] transition-transform duration-200 data-[state=checked]:[transform:scale(1)]",
     label: "select-none text-[var(--selaras-resolved-text-default)]",
     description: "block select-none text-[var(--selaras-resolved-text-muted)]",
     // Only rendered when an item has a description (wrapping the label and
@@ -112,12 +112,12 @@ export const radioGroupTheme = tv({
     // otherwise win the ring color back whenever an already-invalid group
     // has something selected.
     invalid: {
-      true: { item: "ring-[var(--_selaras-color-fill)] data-[state=checked]:ring-[var(--_selaras-color-fill)]" }
+      true: { item: "ring-[var(--_selaras-color-border)] data-[state=checked]:ring-[var(--_selaras-color-indicator)]" }
     }
   },
   compoundVariants: [
     // The card variant's own checked-state highlight, following `color`.
-    { variant: "card", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--_selaras-color-fill)] has-[[data-state=checked]]:bg-[var(--_selaras-color-subtle)]" } }
+    { variant: "card", class: { itemWrapper: "has-[[data-state=checked]]:border-[var(--_selaras-color-border)] has-[[data-state=checked]]:bg-[var(--_selaras-color-subtle)]" } }
   ],
   defaultVariants: {
     size: "md",

package/dist/runtime/theme/rating.js

@@ -47,7 +47,7 @@ export const ratingTheme = tv({
     // backdrop through it, reading as "not filled" with no shape swap
     // needed - recolored once its own indicator's data-state flips to
     // active.
-    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--_selaras-color-fill)]"
+    fillIcon: "text-transparent transition-colors group-data-[state=active]/step:text-[var(--_selaras-color-indicator)]"
   },
   variants: {
     orientation: {

package/dist/runtime/theme/select.js

@@ -44,7 +44,7 @@ export const selectTheme = tv({
     viewport: "max-h-72 overflow-y-auto p-1",
     group: "px-2 pt-2 pb-1 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
     item: "relative flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] py-1.5 ps-2 pe-8 text-sm text-[var(--selaras-resolved-text-default)] outline-none cursor-pointer select-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
-    itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-fill)]",
+    itemIndicator: "absolute end-2 flex items-center text-[var(--_selaras-color-indicator)]",
     empty: "px-2 py-6 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
     arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
   },
@@ -72,7 +72,7 @@ export const selectTheme = tv({
     // overrides win over color's - see input.ts for why declaration order
     // (not runtime call order) is what decides this.
     invalid: {
-      true: { trigger: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus:ring-[var(--_selaras-color-fill)] focus-within:ring-[var(--_selaras-color-fill)] data-[state=open]:ring-[var(--_selaras-color-fill)]" }
+      true: { trigger: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)] focus-within:ring-[var(--_selaras-color-focus)] data-[state=open]:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {