@sewadah/selaras 0.1.1 → 0.3.0

package/README.md

@@ -9,23 +9,23 @@ A UI component library for Nuxt, built on Reka UI and Tailwind v4. Every
 component ships a `tailwind-variants` theme and a single `:ui` prop for
 overrides - no separate pass-through prop to juggle, no specificity fights
 between the library's own classes and yours. Design tokens are plain CSS
-variables (`@theme` + a semantic `--ui-*` layer), so re-theming an app is a
+variables (`@theme` foundations plus semantic `--selaras-*` inputs), so re-theming an app is a
 matter of overriding variables, not rebuilding the library.
 
 - [✨  Release Notes](/CHANGELOG.md)
 
 > **Status:** pre-1.0 and still moving - component APIs, the color token
 > system, and internal structure can change between minor versions until
-> things settle. Not yet published to npm.
+> things settle.
 
 ## Features
 
 - **One override prop, not two.** `:ui` accepts a string (tailwind-merge'd
   against the theme) or an object (merged via `mergeProps` for the rare
   non-class case) per slot - the same mental model everywhere in the library.
-- **CSS variable design tokens.** Colors, radii, shadows, and z-index all
-  live in `theme.css` as `--ui-*` variables built on OKLCH primitives, so
-  swapping a brand color is a CSS override, not a rebuild.
+- **CSS variable design tokens.** Colors, radii, shadows, and z-index use
+  semantic `--selaras-*` inputs and `--selaras-resolved-*` reads, so swapping
+  a brand color is a CSS override, not a rebuild.
 - **CSS-only animation.** Open/close and hover/focus transitions run on
   `data-state` attributes and Tailwind variants - no motion library
   dependency.
@@ -42,7 +42,7 @@ matter of overriding variables, not rebuilding the library.
 Install the module to your Nuxt application with one command:
 
 ```bash
-npx nuxt module add selaras
+npx nuxt module add @sewadah/selaras
 ```
 
 Tailwind CSS is a peer dependency - install it alongside Selaras too, so
@@ -56,9 +56,23 @@ Import the CSS in your own stylesheet, after Tailwind itself:
 
 ```css
 @import "tailwindcss";
-@import "selaras";
+@import "@sewadah/selaras";
+@import "#selaras/tailwind.css";
 ```
 
+For a mature design system that supplies complete semantic role recipes and
+`--selaras-*` functional inputs, import `@sewadah/selaras/structural.css`
+instead. It keeps Selaras's source discovery, variants, motion and semantic
+bindings while omitting Selaras-owned foundation colors. The default aggregate
+import remains the recommended path for most applications. Structural CSS is
+not an unthemed fallback: an incomplete theme has no default palette or runtime
+diagnostic, so provide every role and functional value your components use.
+
+The Nuxt-generated import supplies library class candidates and the adaptive
+breakpoint binding to the same Tailwind compilation as your app. Breakpoint
+values come from your CSS (`@theme { --breakpoint-md: 60rem; }`); select another
+name with `selaras.adaptive.breakpoint` in `nuxt.config.ts`.
+
 Wrap your root `app.vue` in `<SApp>`, once - required for Tooltip's shared
 hover-delay behavior and the `useModal`/`useDrawer`/`useSlideover` composables
 to work:
@@ -82,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>
@@ -91,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
@@ -110,22 +144,35 @@ Every component is now auto-imported and ready to use:
   npm run test
   npm run test:watch
 
-  # Release new version
+  # Build and test source consumers plus an isolated installed tarball
+  # Requires Bun for the temporary consumer's dependency installation
+  npm run test:compat
+
+  # 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>
 
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/selaras/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/selaras
+[npm-version-src]: https://img.shields.io/npm/v/@sewadah/selaras/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@sewadah/selaras
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/selaras.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npm.chart.dev/selaras
+[npm-downloads-src]: https://img.shields.io/npm/dm/@sewadah/selaras.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/@sewadah/selaras
 
-[license-src]: https://img.shields.io/npm/l/selaras.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/selaras
+[license-src]: https://img.shields.io/npm/l/@sewadah/selaras.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@sewadah/selaras
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
 [nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { ColorModePair, ColorRecipeInput } from '../dist/runtime/utils/color-registry.js';
 
 interface ModuleOptions {
     /**
@@ -15,6 +16,15 @@ interface ModuleOptions {
      * installation docs before setting this.
      */
     classPrefix?: string;
+    /** Adaptive presentation uses this Tailwind `--breakpoint-*` condition. */
+    adaptive?: {
+        /** Breakpoint name; its value is owned by the consumer's CSS. @default 'md' */
+        breakpoint?: string;
+    };
+    /** Build-time semantic color roles. Both light and dark recipes are required. */
+    theme?: {
+        colors?: Record<string, ColorModePair<ColorRecipeInput>>;
+    };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,63 @@
-import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addImportsDir, addImports, addTemplate } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addImports, addTemplate, addTypeTemplate } from '@nuxt/kit';
 import { Scanner } from '@tailwindcss/oxide';
 import tailwindcss from '@tailwindcss/vite';
+import { builtinColorNames, createColorRegistry, generateColorRoleCss } from '../dist/runtime/utils/color-registry.js';
+
+const foundationPaletteByRole = {
+  primary: "indigo",
+  secondary: "plum",
+  success: "green",
+  info: "blue",
+  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: [500, 600, 700], dark: [500, 400, 300] },
+  info: { 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) {
+  const foundation = (role, shade) => `var(--${classPrefix ? `${classPrefix}-` : ""}color-selaras-${foundationPaletteByRole[role]}-${shade})`;
+  const recipes = Object.fromEntries(builtinColorNames.map((role) => {
+    const mode = (dark) => {
+      const neutral = role === "neutral";
+      const brightIntent = role === "success" || role === "warning" || role === "danger";
+      const modeName = dark ? "dark" : "light";
+      const [fillShade, hoverShade, pressedShade] = fillShadesByRole[role][modeName];
+      const textShade = brightIntent ? 800 : role === "info" ? 700 : fillShade;
+      const fill = foundation(role, fillShade);
+      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} ${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", brightIntent ? 950 : dark ? 950 : 25),
+        indicator,
+        subtle,
+        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: indicator,
+        focus: brightIntent ? indicator : text
+      };
+    };
+    return [role, { light: mode(false), dark: mode(true) }];
+  }));
+  return createColorRegistry(recipes);
+}
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -58,7 +115,18 @@ const module$1 = defineNuxtModule({
         priority: 10
       });
     }
-    addImportsDir(resolver.resolve("./runtime/composables"));
+    addImports([
+      { name: "useCommandPalette", from: resolver.resolve("./runtime/composables/use-command-palette") },
+      { name: "useDrawer", from: resolver.resolve("./runtime/composables/use-drawer") },
+      { name: "useIcons", from: resolver.resolve("./runtime/composables/use-icons") },
+      { name: "useLocale", from: resolver.resolve("./runtime/composables/use-locale") },
+      { name: "useMessages", from: resolver.resolve("./runtime/composables/use-messages") },
+      { name: "useModal", from: resolver.resolve("./runtime/composables/use-modal") },
+      { name: "useRippleEnabled", from: resolver.resolve("./runtime/composables/use-ripple") },
+      { name: "useSlideover", from: resolver.resolve("./runtime/composables/use-slideover") },
+      { name: "createTableColumnHelper", from: resolver.resolve("./runtime/composables/use-table") },
+      { name: "useToast", from: resolver.resolve("./runtime/composables/use-toast") }
+    ]);
     nuxt.hook("prepare:types", ({ references }) => {
       references.push({ path: resolver.resolve("./runtime/types/app-config.d.ts") });
     });
@@ -72,13 +140,53 @@ const module$1 = defineNuxtModule({
       getContents: () => `export const classPrefix = ${JSON.stringify(options.classPrefix ?? null)}
 `
     });
+    const colorRegistry = {
+      ...createBuiltinColorRegistry(options.classPrefix),
+      ...createColorRegistry(options.theme?.colors ?? {})
+    };
+    addTemplate({
+      filename: "selaras-color-roles.mjs",
+      getContents: () => `export const colorRoles = ${JSON.stringify(Object.keys(colorRegistry).sort())}
+`
+    });
+    addTypeTemplate({
+      filename: "selaras-color-roles.d.ts",
+      getContents: () => {
+        const roles = Object.keys(colorRegistry).sort();
+        const declarations = roles.map((role) => `    ${JSON.stringify(role)}: true`).join("\n");
+        return `declare global {
+  interface SelarasColorRegistry {
+${declarations}
+  }
+}
+
+export {}
+`;
+      },
+      write: true
+    });
+    if (Object.keys(colorRegistry).length > 0) {
+      const colorsTemplate = addTemplate({
+        filename: "selaras-color-roles.css",
+        getContents: () => generateColorRoleCss(colorRegistry),
+        write: true
+      });
+      nuxt.options.css.push(colorsTemplate.dst);
+    }
+    const breakpoint = options.adaptive?.breakpoint ?? "md";
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(breakpoint))
+      throw new Error('Selaras adaptive.breakpoint must name a Tailwind breakpoint (for example "md" or "tablet").');
+    let safelist = "";
     if (options.classPrefix) {
       const runtimeBase = resolver.resolve("./runtime");
       const scanner = new Scanner({
         sources: [
           { base: runtimeBase, pattern: "./components/**/*.vue", negated: false },
-          { base: runtimeBase, pattern: "./theme/**/*.ts", negated: false },
-          { base: runtimeBase, pattern: "./utils/**/*.ts", negated: false }
+          { base: runtimeBase, pattern: "./internal/**/*.vue", negated: false },
+          // Published recipes/utilities are JS; directory globs cover both
+          // source TS and built files, matching theme.css's @source entries.
+          { base: runtimeBase, pattern: "./theme/**/*", negated: false },
+          { base: runtimeBase, pattern: "./utils/**/*", negated: false }
         ]
       });
       const candidates = scanner.scan().filter((candidate) => {
@@ -88,39 +196,18 @@ const module$1 = defineNuxtModule({
           return false;
         return true;
       });
-      const safelist = candidates.map((candidate) => `${options.classPrefix}:${candidate}`).join(" ");
-      const safelistTemplate = addTemplate({
-        filename: "selaras-prefix-safelist.css",
-        // Tailwind's split entry points (`tailwindcss/theme.css` +
-        // `tailwindcss/utilities.css`, each with their own `prefix(...)`)
-        // emit only the utilities layer for this file's own safelist
-        // candidates, instead of a second full copy of Preflight/theme
-        // output the plain `@import "tailwindcss" prefix(...)` form would
-        // otherwise duplicate (confirmed: ~3.4KB vs ~190KB for an
-        // equivalent safelist). `theme(reference)` on the theme import:
-        // this file only needs to *resolve* Tailwind's own theme values
-        // for candidate generation, not emit them again.
-        //
-        // `tw-animate-css` and `@custom-variant dark` are also imported/
-        // declared here, matching theme.css's own - both live only in
-        // theme.css's (separate) compilation otherwise, so without them
-        // every `${prefix}:animate-in`/`${prefix}:fade-in-0`/etc class
-        // (every Modal/Dropdown/Select/Toast/Tooltip/Drawer open-close
-        // transition) would silently generate no CSS at all under a
-        // configured prefix - confirmed empirically. `dark:` isn't used
-        // by any real component class yet, but costs nothing to close now.
-        getContents: () => [
-          `@import "tailwindcss/theme.css" theme(reference) prefix(${options.classPrefix});`,
-          `@import "tailwindcss/utilities.css" layer(utilities) prefix(${options.classPrefix});`,
-          `@import "tw-animate-css";`,
-          `@custom-variant dark (&:where(.dark, .dark *));`,
-          `@source inline("${safelist}");`,
-          ""
-        ].join("\n"),
-        write: true
-      });
-      nuxt.options.css.push(safelistTemplate.dst);
+      safelist = candidates.map((candidate) => `${options.classPrefix}:${candidate}`).join(" ");
     }
+    const tailwindTemplate = addTemplate({
+      filename: "selaras-tailwind.css",
+      getContents: () => [
+        safelist ? `@source inline("${safelist}");` : "",
+        `:root { --selaras-adaptive-breakpoint: var(--${options.classPrefix ? `${options.classPrefix}-` : ""}breakpoint-${breakpoint}); }`,
+        ""
+      ].join("\n"),
+      write: true
+    });
+    nuxt.options.alias["#selaras/tailwind.css"] = tailwindTemplate.dst;
   }
 });
 

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { AccordionThemeSlots } from '../theme/accordion.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { accordionTheme } from '../theme/accordion.js';
 type AccordionVariants = VariantProps<typeof accordionTheme>;
@@ -23,6 +24,8 @@ export interface AccordionProps {
     variant?: AccordionVariants['variant'];
     /** @default 'end' */
     chevronPosition?: AccordionVariants['chevronPosition'];
+    /** The trigger hover accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<AccordionThemeSlots>;
 }
 export interface AccordionEmits {

package/dist/runtime/components/Accordion.vue

@@ -3,6 +3,7 @@ import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, Accord
 import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { accordionTheme } from "../theme/accordion";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -16,17 +17,20 @@ const props = defineProps({
   size: { type: null, required: false },
   variant: { type: null, required: false },
   chevronPosition: { type: null, required: false },
+  color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineEmits(["update:modelValue"]);
 const icons = useIcons();
 const theme = useComponentTheme("accordion", accordionTheme);
-const ui = computed(() => theme.value({ size: props.size, variant: props.variant, chevronPosition: props.chevronPosition }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ size: props.size, variant: props.variant, chevronPosition: props.chevronPosition, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 </script>
 
 <template>
   <AccordionRoot
+    :data-selaras-color="effectiveColor"
     :type="type"
     :default-value="defaultValue"
     :model-value="modelValue"

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { AccordionThemeSlots } from '../theme/accordion.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { accordionTheme } from '../theme/accordion.js';
 type AccordionVariants = VariantProps<typeof accordionTheme>;
@@ -23,6 +24,8 @@ export interface AccordionProps {
     variant?: AccordionVariants['variant'];
     /** @default 'end' */
     chevronPosition?: AccordionVariants['chevronPosition'];
+    /** The trigger hover accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<AccordionThemeSlots>;
 }
 export interface AccordionEmits {

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { AlertThemeSlots } from '../theme/alert.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { alertTheme } from '../theme/alert.js';
 type AlertVariants = VariantProps<typeof alertTheme>;
@@ -11,7 +12,7 @@ export interface AlertProps {
     icon?: string;
     /** Shows a dismiss button and emits `close` when clicked. The alert has no open state of its own - closing it is left to the consumer's own v-if/v-for, the same way Chip's own `removable` + `remove` already works. */
     closable?: boolean;
-    color?: AlertVariants['color'];
+    color?: ColorRole;
     variant?: AlertVariants['variant'];
     ui?: UiProp<AlertThemeSlots>;
 }

package/dist/runtime/components/Alert.vue

@@ -3,6 +3,8 @@ import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { alertTheme } from "../theme/alert";
+import { isFeedbackIntent } from "../utils/icons";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
@@ -20,9 +22,10 @@ const emit = defineEmits(["close"]);
 defineSlots();
 const icons = useIcons();
 const messages = useMessages();
-const iconName = computed(() => props.icon ?? (props.color ? icons.value[props.color] : void 0));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "info", "info"));
+const iconName = computed(() => props.icon ?? (props.color && isFeedbackIntent(effectiveColor.value) ? icons.value[effectiveColor.value] : void 0));
 const theme = useComponentTheme("alert", alertTheme);
-const ui = computed(() => theme.value({ color: props.color, variant: props.variant }));
+const ui = computed(() => theme.value({ color: effectiveColor.value, variant: props.variant }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
@@ -33,7 +36,7 @@ const closeProps = computed(() => resolveSlot(ui.value.close, props.ui?.close));
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-color="effectiveColor" v-bind="rootProps">
     <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
     <div v-bind="contentProps">
       <p v-if="title || $slots.title" v-bind="titleProps">

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { AlertThemeSlots } from '../theme/alert.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { alertTheme } from '../theme/alert.js';
 type AlertVariants = VariantProps<typeof alertTheme>;
@@ -11,7 +12,7 @@ export interface AlertProps {
     icon?: string;
     /** Shows a dismiss button and emits `close` when clicked. The alert has no open state of its own - closing it is left to the consumer's own v-if/v-for, the same way Chip's own `removable` + `remove` already works. */
     closable?: boolean;
-    color?: AlertVariants['color'];
+    color?: ColorRole;
     variant?: AlertVariants['variant'];
     ui?: UiProp<AlertThemeSlots>;
 }

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

@@ -3,6 +3,8 @@ import type { UiProp } from '../utils/ui.js';
 import type { ButtonProps } from './Button.vue.js';
 export interface AlertDialogProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled alert dialog. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */

package/dist/runtime/components/AlertDialog.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger } from "reka-ui";
-import { computed, ref, useSlots, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from "vue";
 import { useMessages } from "../composables/use-messages";
 import { alertDialogTheme } from "../theme/alert-dialog";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 const props = defineProps({
-  open: { type: Boolean, required: false },
+  open: { type: Boolean, required: false, default: void 0 },
+  defaultOpen: { type: Boolean, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   cancelLabel: { type: String, required: false },
@@ -32,13 +33,15 @@ function onContentAnimationEnd(event) {
   if (event.target.getAttribute("data-state") === "closed")
     emit("afterLeave");
 }
-const internalOpen = ref(props.open ?? false);
+const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
+const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
 watch(() => props.open, (value) => {
-  if (value !== void 0)
-    internalOpen.value = value;
+  if (isControlled)
+    internalOpen.value = value ?? false;
 });
 function onUpdateOpen(value) {
-  internalOpen.value = value;
+  if (!isControlled)
+    internalOpen.value = value;
   emit("update:open", value);
 }
 watch(internalOpen, (value) => {
@@ -60,6 +63,7 @@ if (import.meta.dev) {
 }
 const messages = useMessages();
 const theme = useComponentTheme("alertDialog", alertDialogTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ transition: props.transition }));
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
@@ -76,8 +80,17 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
       <slot />
     </AlertDialogTrigger>
     <AlertDialogPortal>
-      <AlertDialogOverlay v-if="overlay" v-bind="overlayProps" />
+      <AlertDialogOverlay
+        v-if="overlay"
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        v-bind="overlayProps"
+      />
       <AlertDialogContent
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
         v-bind="contentProps"
         @escape-key-down="onEscapeKeyDown"
         @pointer-down-outside="onPointerDownOutside"

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

@@ -3,6 +3,8 @@ import type { UiProp } from '../utils/ui.js';
 import type { ButtonProps } from './Button.vue.js';
 export interface AlertDialogProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled alert dialog. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Label for the default Cancel button - only rendered when no `footer` slot is given. @default 'Cancel' */

package/dist/runtime/components/App.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ConfigProvider, ToastProvider, TooltipProvider } from "reka-ui";
-import { useHead } from "#imports";
+import { computed } from "vue";
+import { useAppConfig, useHead } from "#imports";
 import { useLocale } from "../composables/use-locale";
+import { generateRuntimeTokenOverrideCss } from "../utils/color-registry";
 import DrawerRenderer from "./DrawerRenderer.vue";
 import ModalRenderer from "./ModalRenderer.vue";
 import SlideoverRenderer from "./SlideoverRenderer.vue";
@@ -9,7 +11,12 @@ const props = defineProps({
   dir: { type: String, required: false, default: "ltr" }
 });
 const locale = useLocale();
-useHead({ htmlAttrs: { dir: () => props.dir, lang: () => locale.value } });
+const appConfig = useAppConfig();
+const runtimeTokenCss = computed(() => generateRuntimeTokenOverrideCss(appConfig.selaras?.tokens ?? {}));
+useHead({
+  htmlAttrs: { dir: () => props.dir, lang: () => locale.value },
+  style: [{ key: "selaras-runtime-tokens", textContent: () => runtimeTokenCss.value || void 0 }]
+});
 </script>
 
 <template>