@sewadah/selaras 0.2.0 → 0.3.0

package/README.md

@@ -96,6 +96,26 @@ Every component is now auto-imported and ready to use:
 </SButton>
 ```
 
+## Theming
+
+Selaras is CSS-first for design values.
+
+For normal theme changes, override the public `--selaras-*` CSS variables or
+the Selaras foundation palettes in Tailwind `@theme`. You do not need
+`nuxt.config.ts` to change built-in roles such as `primary`, `warning`,
+`danger`, or `neutral`.
+
+Use `selaras.theme.colors` in `nuxt.config.ts` when you must register a new
+role name, such as `tertiary`, or when you intentionally want to author a
+complete build-time recipe.
+
+`defineColorFromSeed()` is an optional accessibility-oriented generator. The
+supplied color remains the exact resting solid fill; Selaras derives readable
+content, interaction states, text, borders, focus, and essential indicators
+around it. Use `defineColor()` when you need to author every leaf yourself.
+
+See the full [Theming guide](./docs/content/overview/theming.md).
+
 ## Contribution
 
 <details>
@@ -105,14 +125,14 @@ Every component is now auto-imported and ready to use:
   # Install dependencies
   npm install
 
-  # Generate type stubs
-  npm run dev:prepare
+  # Generate type stubs and prepare the docs site
+  npm run docs:prepare
 
-  # Develop with the playground (component docs site)
-  npm run dev
+  # Develop with the docs site (documentation + component showcase)
+  npm run docs:dev
 
-  # Build the playground
-  npm run dev:build
+  # Generate the static docs site
+  npm run docs:generate
 
   # Type-check
   npm run test:types
@@ -128,8 +148,17 @@ Every component is now auto-imported and ready to use:
   # Requires Bun for the temporary consumer's dependency installation
   npm run test:compat
 
-  # Release new version
+  # Release new versions (selaras, docs layer, or both)
   npm run release
+  npm run release:selaras
+  npm run release:docs
+
+  # Each package has its own version stream, so one run can bump them at
+  # different levels - Selaras major alongside a docs patch, for example.
+  # The release workflow exposes per-package bump/version inputs for this.
+  # Locally, drive each half through its own env:
+  RELEASE_BUMP=major npm run release:selaras
+  RELEASE_BUMP=patch npm run release:docs
   ```
 
 </details>

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -6,19 +6,19 @@ import { builtinColorNames, createColorRegistry, generateColorRoleCss } from '..
 const foundationPaletteByRole = {
   primary: "indigo",
   secondary: "plum",
-  success: "emerald",
+  success: "green",
   info: "blue",
-  warning: "amber",
+  warning: "yellow",
   danger: "red",
   neutral: "gray"
 };
 const fillShadesByRole = {
   primary: { light: [500, 600, 700], dark: [400, 300, 200] },
   secondary: { light: [600, 700, 800], dark: [400, 300, 200] },
-  success: { light: [700, 800, 900], dark: [500, 400, 300] },
+  success: { light: [500, 600, 700], dark: [500, 400, 300] },
   info: { light: [600, 700, 800], dark: [500, 400, 300] },
-  warning: { light: [700, 800, 900], dark: [500, 400, 300] },
-  danger: { light: [600, 700, 800], dark: [500, 400, 300] },
+  warning: { light: [500, 600, 700], dark: [500, 400, 300] },
+  danger: { light: [500, 600, 700], dark: [500, 400, 300] },
   neutral: { light: [950, 900, 800], dark: [200, 100, 50] }
 };
 function createBuiltinColorRegistry(classPrefix) {
@@ -26,29 +26,32 @@ function createBuiltinColorRegistry(classPrefix) {
   const recipes = Object.fromEntries(builtinColorNames.map((role) => {
     const mode = (dark) => {
       const neutral = role === "neutral";
-      const warning = role === "warning";
+      const brightIntent = role === "success" || role === "warning" || role === "danger";
       const modeName = dark ? "dark" : "light";
       const [fillShade, hoverShade, pressedShade] = fillShadesByRole[role][modeName];
-      const textShade = warning || role === "success" ? 800 : role === "info" || role === "danger" ? 700 : fillShade;
+      const textShade = brightIntent ? 800 : role === "info" ? 700 : fillShade;
       const fill = foundation(role, fillShade);
-      const hover = foundation(role, hoverShade);
-      const pressed = foundation(role, pressedShade);
+      const hover = brightIntent ? `color-mix(in oklab, ${fill} ${!dark && role === "danger" ? 98 : 94}%, ${dark ? "white" : "black"})` : foundation(role, hoverShade);
+      const pressed = brightIntent ? `color-mix(in oklab, ${fill} ${!dark && role === "danger" ? 96 : 88}%, ${dark ? "white" : "black"})` : foundation(role, pressedShade);
       const text = foundation(role, neutral ? dark ? 50 : 950 : dark ? 300 : textShade);
-      const subtle = neutral ? foundation(role, dark ? 900 : 100) : dark ? `color-mix(in oklab, ${fill} 24%, var(--selaras-resolved-surface-default))` : foundation(role, 100);
+      const subtle = neutral ? foundation(role, dark ? 900 : 100) : dark ? `color-mix(in oklab, ${fill} ${brightIntent ? 16 : 24}%, var(--selaras-resolved-surface-default))` : foundation(role, brightIntent ? 50 : 100);
+      const indicatorShade = dark ? 400 : role === "success" || role === "warning" ? 700 : role === "danger" ? 500 : fillShade;
+      const indicator = neutral ? foundation(role, 500) : foundation(role, indicatorShade);
       return {
         fill,
         fillHover: hover,
         fillPressed: pressed,
-        onFill: foundation("neutral", dark ? 950 : 25),
+        onFill: foundation("neutral", brightIntent ? 950 : dark ? 950 : 25),
+        indicator,
         subtle,
-        subtleHover: dark ? `color-mix(in oklab, ${foundation(role, 500)} 32%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 94%, ${text})`,
-        subtlePressed: dark ? `color-mix(in oklab, ${foundation(role, 500)} 40%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 90%, ${text})`,
+        subtleHover: brightIntent ? `color-mix(in oklab, ${subtle} 96%, ${text})` : dark ? `color-mix(in oklab, ${foundation(role, 500)} 32%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 94%, ${text})`,
+        subtlePressed: brightIntent ? `color-mix(in oklab, ${subtle} 92%, ${text})` : dark ? `color-mix(in oklab, ${foundation(role, 500)} 40%, var(--selaras-resolved-surface-default))` : `color-mix(in oklab, ${subtle} 90%, ${text})`,
         onSubtle: text,
         text,
         textHover: foundation(role, neutral ? dark ? 100 : 900 : dark ? 200 : Math.min(textShade + 100, 950)),
         textPressed: foundation(role, neutral ? dark ? 200 : 800 : dark ? 100 : Math.min(textShade + 200, 950)),
-        border: neutral ? foundation(role, 500) : fill,
-        focus: text
+        border: indicator,
+        focus: brightIntent ? indicator : text
       };
     };
     return [role, { light: mode(false), dark: mode(true) }];

package/dist/runtime/components/Badge.d.vue.ts

@@ -8,7 +8,7 @@ export interface BadgeProps {
     label?: string;
     icon?: string;
     trailingIcon?: string;
-    /** A status circle. Inline dots use the badge foreground; standalone dots use the role text color. Supply an accessible name when no label is visible. */
+    /** A status circle. Inline dots use the badge foreground; standalone dots use the role indicator. Supply an accessible name when no label is visible. */
     dot?: boolean;
     color?: ColorRole;
     variant?: BadgeVariants['variant'];

package/dist/runtime/components/Badge.vue.d.ts

@@ -8,7 +8,7 @@ export interface BadgeProps {
     label?: string;
     icon?: string;
     trailingIcon?: string;
-    /** A status circle. Inline dots use the badge foreground; standalone dots use the role text color. Supply an accessible name when no label is visible. */
+    /** A status circle. Inline dots use the badge foreground; standalone dots use the role indicator. Supply an accessible name when no label is visible. */
     dot?: boolean;
     color?: ColorRole;
     variant?: BadgeVariants['variant'];

package/dist/runtime/components/ContentToc.vue

@@ -119,27 +119,34 @@ function buildRailPath(links, height) {
     const x2 = RAIL_X_OUTER + index * indentStep;
     return Math.round(clamp(x2, RAIL_X_OUTER, RAIL_X_INNER_MAX));
   };
+  const curveHalf = RAIL_CURVE_SPAN / 2;
   let x = xForDepth(items[0]?.depth ?? baseDepth);
+  let yPath = 0;
   let yPrev = 0;
   let d = `M ${x} 0`;
   for (const item of items) {
     const y = clamp(item.y, 0, height);
     const xNext = xForDepth(item.depth);
     if (xNext === x) {
-      if (y > yPrev)
+      if (y > yPath) {
         d += ` L ${x} ${y}`;
-      yPrev = Math.max(yPrev, y);
+        yPath = y;
+      }
+      yPrev = y;
       continue;
     }
-    const y0 = clamp(y - RAIL_CURVE_SPAN, yPrev, height);
-    const midY = (y0 + y) / 2;
-    if (y0 > yPrev)
+    const midY = (yPrev + y) / 2;
+    const y0 = clamp(midY - curveHalf, yPath, y);
+    const y1 = clamp(midY + curveHalf, y0, y);
+    const controlY = (y0 + y1) / 2;
+    if (y0 > yPath)
       d += ` L ${x} ${y0}`;
-    d += ` C ${x} ${midY} ${xNext} ${midY} ${xNext} ${y}`;
+    d += ` C ${x} ${controlY} ${xNext} ${controlY} ${xNext} ${y1}`;
     x = xNext;
+    yPath = y1;
     yPrev = y;
   }
-  if (height > yPrev)
+  if (height > yPath)
     d += ` L ${x} ${height}`;
   return d;
 }

package/dist/runtime/components/FileUpload.vue

@@ -202,7 +202,7 @@ const removeButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effec
 </script>
 
 <template>
-  <div :data-selaras-color="effectiveColor" v-bind="rootProps">
+  <div :data-selaras-color="fileUploadInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <button
       ref="dropzoneEl"
       type="button"

package/dist/runtime/components/NavigationMenu.vue

@@ -122,6 +122,7 @@ function onSelect(item, event) {
                       <component
                         :is="child.to ? NuxtLink : 'button'" :to="child.to" :type="child.to ? void 0 : 'button'"
                         :disabled="child.to ? void 0 : child.disabled" v-bind="childLinkProps(child)"
+                        :target="child.target" :rel="child.rel" :aria-label="child.ariaLabel"
                         :aria-disabled="child.to && child.disabled ? 'true' : void 0" @click="onSelect(child, $event)"
                       >
                         <slot :name="slotName(child, '')" :item="child" :active="isActive(child)">
@@ -144,6 +145,7 @@ function onSelect(item, event) {
             <component
               :is="item.to ? NuxtLink : 'button'" :to="item.to" :type="item.to ? void 0 : 'button'"
               :disabled="item.to ? void 0 : item.disabled" v-bind="linkProps(item)"
+              :target="item.target" :rel="item.rel" :aria-label="item.ariaLabel"
               :aria-disabled="item.to && item.disabled ? 'true' : void 0" @click="onSelect(item, $event)"
             >
               <slot :name="slotName(item, '')" :item="item" :active="isActive(item)">

package/dist/runtime/components/PinInput.vue

@@ -60,7 +60,7 @@ const inputProps = computed(() => mergeProps(resolveSlot(ui.value.input, props.u
     :aria-invalid="pinInputInvalid || void 0"
     :aria-describedby="describedBy"
     :aria-labelledby="labelledBy"
-    :data-selaras-color="effectiveColor"
+    :data-selaras-color="pinInputInvalid ? 'danger' : effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
     @complete="(value) => emit('complete', value)"

package/dist/runtime/components/ProsePre.d.vue.ts

@@ -2,12 +2,14 @@ export interface ProsePreProps {
     code?: string;
     language?: string;
     filename?: string;
+    /** Overrides the file-type icon resolved from `filename`/`language`. */
+    icon?: string;
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_13: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/ProsePre.vue

@@ -2,18 +2,22 @@
 import { computed, ref } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { proseTheme } from "../theme/prose";
+import { resolveFileIcon } from "../utils/file-icons";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Badge from "./Badge.vue";
 import Button from "./Button.vue";
+import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   code: { type: String, required: false },
   language: { type: String, required: false },
   filename: { type: String, required: false },
+  icon: { type: String, required: false },
   highlights: { type: Array, required: false },
   meta: { type: String, required: false }
 });
 const icons = useIcons();
+const fileIcon = computed(() => props.icon ?? resolveFileIcon(props.language, props.filename));
 const theme = useComponentTheme("prose", proseTheme);
 const ui = computed(() => theme.value());
 const preProps = useRootProps(() => ui.value.pre, () => void 0);
@@ -32,9 +36,11 @@ async function copy() {
 <template>
   <div v-bind="resolveSlot(ui.preWrapper, void 0)">
     <div v-if="filename || language || code" v-bind="resolveSlot(ui.preHeader, void 0)">
-      <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
-      <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
-      <span v-else />
+      <span v-bind="resolveSlot(ui.preLabel, void 0)">
+        <Icon v-if="fileIcon" :name="fileIcon" v-bind="resolveSlot(ui.preIcon, void 0)" />
+        <span v-if="filename" v-bind="resolveSlot(ui.preFilename, void 0)">{{ filename }}</span>
+        <Badge v-else-if="language" :label="language" size="sm" variant="outline" />
+      </span>
       <Button
         v-if="code"
         v-bind="resolveSlot(ui.preCopyButton, void 0)"

package/dist/runtime/components/ProsePre.vue.d.ts

@@ -2,12 +2,14 @@ export interface ProsePreProps {
     code?: string;
     language?: string;
     filename?: string;
+    /** Overrides the file-type icon resolved from `filename`/`language`. */
+    icon?: string;
     highlights?: number[];
     meta?: string;
 }
-declare var __VLS_13: {};
+declare var __VLS_18: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProsePreProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePreProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/default-colors.css

@@ -1 +1 @@
-@theme static{--color-selaras-amber-50:oklch(0.985 0.022 88);--color-selaras-amber-100:oklch(0.96 0.055 88);--color-selaras-amber-200:oklch(0.915 0.105 88);--color-selaras-amber-300:oklch(0.86 0.145 88);--color-selaras-amber-400:oklch(0.81 0.165 88);--color-selaras-amber-500:oklch(0.755 0.165 88);--color-selaras-amber-600:oklch(0.665 0.155 88);--color-selaras-amber-700:oklch(0.565 0.135 88);--color-selaras-amber-800:oklch(0.465 0.11 88);--color-selaras-amber-900:oklch(0.375 0.085 88);--color-selaras-amber-950:oklch(0.255 0.055 88);--color-selaras-blue-50:oklch(0.975 0.018 245);--color-selaras-blue-100:oklch(0.945 0.04 245);--color-selaras-blue-200:oklch(0.895 0.075 245);--color-selaras-blue-300:oklch(0.82 0.115 245);--color-selaras-blue-400:oklch(0.715 0.155 245);--color-selaras-blue-500:oklch(0.62 0.175 245);--color-selaras-blue-600:oklch(0.535 0.165 245);--color-selaras-blue-700:oklch(0.455 0.145 245);--color-selaras-blue-800:oklch(0.375 0.115 245);--color-selaras-blue-900:oklch(0.3 0.085 245);--color-selaras-blue-950:oklch(0.215 0.055 245);--color-selaras-emerald-50:oklch(0.98 0.02 148);--color-selaras-emerald-100:oklch(0.95 0.045 148);--color-selaras-emerald-200:oklch(0.895 0.08 148);--color-selaras-emerald-300:oklch(0.82 0.12 148);--color-selaras-emerald-400:oklch(0.735 0.155 148);--color-selaras-emerald-500:oklch(0.64 0.175 148);--color-selaras-emerald-600:oklch(0.555 0.16 148);--color-selaras-emerald-700:oklch(0.47 0.14 148);--color-selaras-emerald-800:oklch(0.39 0.115 148);--color-selaras-emerald-900:oklch(0.315 0.085 148);--color-selaras-emerald-950:oklch(0.225 0.055 148);--color-selaras-gray-25:oklch(0.995 0.0015 280);--color-selaras-gray-50:oklch(0.98 0.003 280);--color-selaras-gray-100:oklch(0.945 0.0065 280);--color-selaras-gray-200:oklch(0.9 0.01 280);--color-selaras-gray-300:oklch(0.84 0.014 280);--color-selaras-gray-400:oklch(0.7 0.018 280);--color-selaras-gray-500:oklch(0.555 0.02 280);--color-selaras-gray-600:oklch(0.445 0.019 280);--color-selaras-gray-700:oklch(0.365 0.017 280);--color-selaras-gray-800:oklch(0.275 0.014 280);--color-selaras-gray-900:oklch(0.205 0.011 280);--color-selaras-gray-950:oklch(0.145 0.008 280);--color-selaras-indigo-50:oklch(0.97 0.012 279.99);--color-selaras-indigo-100:oklch(0.93 0.028 279.99);--color-selaras-indigo-200:oklch(0.86 0.055 279.99);--color-selaras-indigo-300:oklch(0.78 0.1 279.99);--color-selaras-indigo-400:oklch(0.64 0.165 279.99);--color-selaras-indigo-500:oklch(0.4755 0.2026 279.99);--color-selaras-indigo-600:oklch(0.415 0.185 279.99);--color-selaras-indigo-700:oklch(0.355 0.158 279.99);--color-selaras-indigo-800:oklch(0.295 0.128 279.99);--color-selaras-indigo-900:oklch(0.235 0.095 279.99);--color-selaras-indigo-950:oklch(0.17 0.06 279.99);--color-selaras-plum-50:oklch(0.975 0.012 325);--color-selaras-plum-100:oklch(0.945 0.03 325);--color-selaras-plum-200:oklch(0.89 0.06 325);--color-selaras-plum-300:oklch(0.81 0.1 325);--color-selaras-plum-400:oklch(0.69 0.145 325);--color-selaras-plum-500:oklch(0.565 0.175 325);--color-selaras-plum-600:oklch(0.495 0.165 325);--color-selaras-plum-700:oklch(0.42 0.145 325);--color-selaras-plum-800:oklch(0.345 0.115 325);--color-selaras-plum-900:oklch(0.275 0.085 325);--color-selaras-plum-950:oklch(0.19 0.055 325);--color-selaras-red-50:oklch(0.975 0.015 28);--color-selaras-red-100:oklch(0.945 0.035 28);--color-selaras-red-200:oklch(0.89 0.07 28);--color-selaras-red-300:oklch(0.805 0.12 28);--color-selaras-red-400:oklch(0.7 0.175 28);--color-selaras-red-500:oklch(0.6 0.205 28);--color-selaras-red-600:oklch(0.525 0.195 28);--color-selaras-red-700:oklch(0.445 0.17 28);--color-selaras-red-800:oklch(0.365 0.135 28);--color-selaras-red-900:oklch(0.295 0.1 28);--color-selaras-red-950:oklch(0.205 0.065 28)}@layer theme{:root,[data-selaras-theme]{--_selaras-default-surface-default:--theme(--color-selaras-gray-25);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-50);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-950);--_selaras-default-text-default:--theme(--color-selaras-gray-950);--_selaras-default-text-muted:--theme(--color-selaras-gray-600);--_selaras-default-text-inverted:--theme(--color-selaras-gray-50);--_selaras-default-border-default:--theme(--color-selaras-gray-200);--_selaras-default-border-muted:--theme(--color-selaras-gray-100);--_selaras-default-border-hover:--theme(--color-selaras-gray-300)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--_selaras-default-surface-default:--theme(--color-selaras-gray-950);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-900);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-50);--_selaras-default-text-default:--theme(--color-selaras-gray-50);--_selaras-default-text-muted:--theme(--color-selaras-gray-400);--_selaras-default-text-inverted:--theme(--color-selaras-gray-950);--_selaras-default-border-default:--theme(--color-selaras-gray-800);--_selaras-default-border-muted:--theme(--color-selaras-gray-900);--_selaras-default-border-hover:--theme(--color-selaras-gray-700)}}
+@theme static{--color-selaras-blue-50:oklch(0.975 0.018 245);--color-selaras-blue-100:oklch(0.945 0.04 245);--color-selaras-blue-200:oklch(0.895 0.075 245);--color-selaras-blue-300:oklch(0.82 0.115 245);--color-selaras-blue-400:oklch(0.715 0.155 245);--color-selaras-blue-500:oklch(0.62 0.175 245);--color-selaras-blue-600:oklch(0.535 0.165 245);--color-selaras-blue-700:oklch(0.455 0.145 245);--color-selaras-blue-800:oklch(0.375 0.115 245);--color-selaras-blue-900:oklch(0.3 0.085 245);--color-selaras-blue-950:oklch(0.215 0.055 245);--color-selaras-gray-25:oklch(0.995 0.0015 280);--color-selaras-gray-50:oklch(0.98 0.003 280);--color-selaras-gray-100:oklch(0.945 0.0065 280);--color-selaras-gray-200:oklch(0.9 0.01 280);--color-selaras-gray-300:oklch(0.84 0.014 280);--color-selaras-gray-400:oklch(0.7 0.018 280);--color-selaras-gray-500:oklch(0.555 0.02 280);--color-selaras-gray-600:oklch(0.445 0.019 280);--color-selaras-gray-700:oklch(0.365 0.017 280);--color-selaras-gray-800:oklch(0.275 0.014 280);--color-selaras-gray-900:oklch(0.205 0.011 280);--color-selaras-gray-950:oklch(0.145 0.008 280);--color-selaras-green-50:oklch(0.982 0.018 155.826);--color-selaras-green-100:oklch(0.962 0.044 156.743);--color-selaras-green-200:oklch(0.925 0.084 155.995);--color-selaras-green-300:oklch(0.871 0.15 154.449);--color-selaras-green-400:oklch(0.792 0.209 151.711);--color-selaras-green-500:oklch(0.723 0.219 149.579);--color-selaras-green-600:oklch(0.627 0.194 149.214);--color-selaras-green-700:oklch(0.527 0.154 150.069);--color-selaras-green-800:oklch(0.448 0.119 151.328);--color-selaras-green-900:oklch(0.393 0.095 152.535);--color-selaras-green-950:oklch(0.266 0.065 152.934);--color-selaras-indigo-50:oklch(0.97 0.012 279.99);--color-selaras-indigo-100:oklch(0.93 0.028 279.99);--color-selaras-indigo-200:oklch(0.86 0.055 279.99);--color-selaras-indigo-300:oklch(0.78 0.1 279.99);--color-selaras-indigo-400:oklch(0.64 0.165 279.99);--color-selaras-indigo-500:oklch(0.4755 0.2026 279.99);--color-selaras-indigo-600:oklch(0.415 0.185 279.99);--color-selaras-indigo-700:oklch(0.355 0.158 279.99);--color-selaras-indigo-800:oklch(0.295 0.128 279.99);--color-selaras-indigo-900:oklch(0.235 0.095 279.99);--color-selaras-indigo-950:oklch(0.17 0.06 279.99);--color-selaras-plum-50:oklch(0.975 0.012 325);--color-selaras-plum-100:oklch(0.945 0.03 325);--color-selaras-plum-200:oklch(0.89 0.06 325);--color-selaras-plum-300:oklch(0.81 0.1 325);--color-selaras-plum-400:oklch(0.69 0.145 325);--color-selaras-plum-500:oklch(0.565 0.175 325);--color-selaras-plum-600:oklch(0.495 0.165 325);--color-selaras-plum-700:oklch(0.42 0.145 325);--color-selaras-plum-800:oklch(0.345 0.115 325);--color-selaras-plum-900:oklch(0.275 0.085 325);--color-selaras-plum-950:oklch(0.19 0.055 325);--color-selaras-red-50:oklch(0.971 0.013 17.38);--color-selaras-red-100:oklch(0.936 0.032 17.717);--color-selaras-red-200:oklch(0.885 0.062 18.334);--color-selaras-red-300:oklch(0.808 0.114 19.571);--color-selaras-red-400:oklch(0.704 0.191 22.216);--color-selaras-red-500:oklch(0.637 0.237 25.331);--color-selaras-red-600:oklch(0.577 0.245 27.325);--color-selaras-red-700:oklch(0.505 0.213 27.518);--color-selaras-red-800:oklch(0.444 0.177 26.899);--color-selaras-red-900:oklch(0.396 0.141 25.723);--color-selaras-red-950:oklch(0.258 0.092 26.042);--color-selaras-yellow-50:oklch(0.987 0.026 102.212);--color-selaras-yellow-100:oklch(0.973 0.071 103.193);--color-selaras-yellow-200:oklch(0.945 0.129 101.54);--color-selaras-yellow-300:oklch(0.905 0.182 98.111);--color-selaras-yellow-400:oklch(0.852 0.199 91.936);--color-selaras-yellow-500:oklch(0.795 0.184 86.047);--color-selaras-yellow-600:oklch(0.681 0.162 75.834);--color-selaras-yellow-700:oklch(0.554 0.135 66.442);--color-selaras-yellow-800:oklch(0.476 0.114 61.907);--color-selaras-yellow-900:oklch(0.421 0.095 57.708);--color-selaras-yellow-950:oklch(0.286 0.066 53.813)}@layer theme{:root,[data-selaras-theme]{--_selaras-default-surface-canvas:#fff;--_selaras-default-surface-default:--theme(--color-selaras-gray-25);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-50);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-950);--_selaras-default-text-default:--theme(--color-selaras-gray-950);--_selaras-default-text-muted:--theme(--color-selaras-gray-600);--_selaras-default-text-inverted:--theme(--color-selaras-gray-50);--_selaras-default-border-default:--theme(--color-selaras-gray-200);--_selaras-default-border-muted:--theme(--color-selaras-gray-100);--_selaras-default-border-hover:--theme(--color-selaras-gray-300)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--_selaras-default-surface-canvas:#0c0c0d;--_selaras-default-surface-default:--theme(--color-selaras-gray-950);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-900);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-50);--_selaras-default-text-default:--theme(--color-selaras-gray-50);--_selaras-default-text-muted:--theme(--color-selaras-gray-400);--_selaras-default-text-inverted:--theme(--color-selaras-gray-950);--_selaras-default-border-default:--theme(--color-selaras-gray-800);--_selaras-default-border-muted:--theme(--color-selaras-gray-900);--_selaras-default-border-hover:--theme(--color-selaras-gray-700)}}

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -339,7 +339,7 @@ const messages = useMessages();
 const theme = useComponentTheme("select", selectTheme);
 const themeBindings = useThemeBindings();
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const colorRoleMarker = computed(() => effectiveColor.value);
+const colorRoleMarker = computed(() => selectInvalid.value ? "danger" : effectiveColor.value);
 const ui = computed(() => theme.value({ size: effectiveSize.value, color: effectiveColor.value, invalid: selectInvalid.value }));
 const nativeTriggerAttrs = useFallthroughAttrs((key) => !props.creatable && (isNativeInputA11yAttr(key) || !props.searchable && isNativeInputEvent(key)));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: (key) => isNativeInputA11yAttr(key) || isNativeInputEvent(key) || (props.creatable || props.searchable) && isNativeInputAttr(key) });

package/dist/runtime/structural.css

@@ -1 +1 @@
-@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{position:relative}.selaras-nav-elbow:before{inset-inline-start:-16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:var(--selaras-resolved-border-default);content:"";position:absolute;top:0}.selaras-nav-elbow:after{inset-inline-start:-15px;width:1.5px}.selaras-nav-elbow--content-navigation:before{height:40px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--content-navigation:after{bottom:-2px}.selaras-nav-elbow--content-navigation:last-child:after{bottom:auto;height:14px}.selaras-nav-elbow--navigation-menu:before{height:32px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--navigation-menu:after{bottom:-4px}.selaras-nav-elbow--navigation-menu:last-child:after{bottom:auto;height:10px}.selaras-nav-elbow--file-tree:before{height:28px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--file-tree:after{bottom:-2px}.selaras-nav-elbow--file-tree:last-child:after{bottom:auto;height:8px}@layer theme{:root,[data-selaras-theme]{--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover));--selaras-resolved-scrim:var(--selaras-scrim,rgba(0,0,0,.5));--selaras-resolved-radius-base:var(--selaras-radius-base,8px);--selaras-resolved-radius-sm:var(--selaras-radius-sm,calc(var(--selaras-resolved-radius-base)*0.75));--selaras-resolved-radius-md:var(--selaras-radius-md,var(--selaras-resolved-radius-base));--selaras-resolved-radius-lg:var(--selaras-radius-lg,calc(var(--selaras-resolved-radius-base)*2));--selaras-resolved-radius-full:var(--selaras-radius-full,9999px);--selaras-resolved-shadow-sm:var(--selaras-shadow-sm,0 1px 2px 0 rgba(0,0,0,.06));--selaras-resolved-shadow-md:var(--selaras-shadow-md,0 4px 16px -2px rgba(0,0,0,.12));--selaras-resolved-shadow-lg:var(--selaras-shadow-lg,0 12px 32px -4px rgba(0,0,0,.16));--selaras-resolved-z-modal-overlay:var(--selaras-z-modal-overlay,40);--selaras-resolved-z-modal:var(--selaras-z-modal,50);--selaras-resolved-z-dropdown:var(--selaras-z-dropdown,60);--selaras-resolved-z-tooltip:var(--selaras-z-tooltip,70);--selaras-resolved-z-toast:var(--selaras-z-toast,80)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover))}}
+@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{position:relative}.selaras-nav-elbow:before{inset-inline-start:-16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:var(--selaras-resolved-border-default);content:"";position:absolute;top:0}.selaras-nav-elbow:after{inset-inline-start:-15px;width:1.5px}.selaras-nav-elbow--content-navigation:before{height:40px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--content-navigation:after{bottom:-2px}.selaras-nav-elbow--content-navigation:last-child:after{bottom:auto;height:14px}.selaras-nav-elbow--navigation-menu:before{height:32px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--navigation-menu:after{bottom:-4px}.selaras-nav-elbow--navigation-menu:last-child:after{bottom:auto;height:10px}.selaras-nav-elbow--file-tree:before{height:28px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--file-tree:after{bottom:-2px}.selaras-nav-elbow--file-tree:last-child:after{bottom:auto;height:8px}@layer theme{:root,[data-selaras-theme]{--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover));--selaras-resolved-scrim:var(--selaras-scrim,rgba(0,0,0,.5));--selaras-resolved-radius-base:var(--selaras-radius-base,8px);--selaras-resolved-radius-sm:var(--selaras-radius-sm,calc(var(--selaras-resolved-radius-base)*0.75));--selaras-resolved-radius-md:var(--selaras-radius-md,var(--selaras-resolved-radius-base));--selaras-resolved-radius-lg:var(--selaras-radius-lg,calc(var(--selaras-resolved-radius-base)*2));--selaras-resolved-radius-full:var(--selaras-radius-full,9999px);--selaras-resolved-shadow-sm:var(--selaras-shadow-sm,0 1px 2px 0 rgba(0,0,0,.06));--selaras-resolved-shadow-md:var(--selaras-shadow-md,0 4px 16px -2px rgba(0,0,0,.12));--selaras-resolved-shadow-lg:var(--selaras-shadow-lg,0 12px 32px -4px rgba(0,0,0,.16));--selaras-resolved-z-modal-overlay:var(--selaras-z-modal-overlay,40);--selaras-resolved-z-modal:var(--selaras-z-modal,50);--selaras-resolved-z-dropdown:var(--selaras-z-dropdown,60);--selaras-resolved-z-tooltip:var(--selaras-z-tooltip,70);--selaras-resolved-z-toast:var(--selaras-z-toast,80)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover))}}

package/dist/runtime/theme/avatar.js

@@ -31,13 +31,13 @@ export const avatarTheme = tv({
     // (online, offline, ...) rarely match the avatar's own identity color, so
     // it gets its own variant rather than tracking the avatar's.
     statusColor: {
-      primary: { status: "bg-[var(--selaras-resolved-color-primary-fill)]" },
-      neutral: { status: "bg-[var(--selaras-resolved-text-muted)]" },
-      secondary: { status: "bg-[var(--selaras-resolved-color-secondary-fill)]" },
-      success: { status: "bg-[var(--selaras-resolved-color-success-fill)]" },
-      danger: { status: "bg-[var(--selaras-resolved-color-danger-fill)]" },
-      info: { status: "bg-[var(--selaras-resolved-color-info-fill)]" },
-      warning: { status: "bg-[var(--selaras-resolved-color-warning-fill)]" }
+      primary: { status: "bg-[var(--selaras-resolved-color-primary-indicator)]" },
+      neutral: { status: "bg-[var(--selaras-resolved-color-neutral-indicator)]" },
+      secondary: { status: "bg-[var(--selaras-resolved-color-secondary-indicator)]" },
+      success: { status: "bg-[var(--selaras-resolved-color-success-indicator)]" },
+      danger: { status: "bg-[var(--selaras-resolved-color-danger-indicator)]" },
+      info: { status: "bg-[var(--selaras-resolved-color-info-indicator)]" },
+      warning: { status: "bg-[var(--selaras-resolved-color-warning-indicator)]" }
     },
     size: {
       sm: { base: "size-6", fallback: "text-[10px]", icon: "size-3", status: "size-1.5" },

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/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/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/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/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/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",