@sewadah/selaras 0.1.1 → 0.2.0

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

@@ -1,83 +1,31 @@
-import type { TableThemeSlots } from '../theme/table.js';
-import type { UiProp } from '../utils/ui.js';
-export interface TableProps {
-    data: unknown[];
-    columns?: any[];
-    selectable?: boolean;
-    pageSize?: number;
-    loading?: boolean;
-    sorting?: any[];
-    defaultSorting?: any[];
-    rowSelection?: Record<string, boolean>;
-    globalFilter?: string;
-    pageIndex?: number;
-    size?: 'sm' | 'md' | 'lg';
-    gridlines?: boolean;
-    striped?: boolean;
-    expandable?: boolean;
-    expanded?: any;
-    columnVisibility?: Record<string, boolean>;
-    columnToggle?: boolean;
-    /** Enables vertical scroll with a sticky header, capped at this CSS height (e.g. '24rem'). */
-    scrollHeight?: string;
-    virtualize?: boolean | {
-        estimateSize?: number;
-        overscan?: number;
-    };
-    /** Opts out of the local sorted/filtered/paginated row models - set when `data` is already sorted/filtered/paginated server-side, so this table doesn't redundantly (and incorrectly) reprocess an already-server-processed slice. `sorting`/`globalFilter`/`pageIndex` still drive the UI and still emit their `update:*` events the same way - only the *local row model* is skipped, not the state itself. `manualPagination` also suppresses the built-in Pagination UI entirely (there's no way to know the real page count from a server-paginated slice) - bring your own `SPagination`, bound to your own server metadata, the same way this table already expects you to bring your own search input for `globalFilter`. */
-    manualSorting?: boolean;
-    manualFiltering?: boolean;
-    manualPagination?: boolean;
-    /** Adds a class to a body row based on its own data - e.g. highlighting a flagged row. Called per row, not per render, so keep it cheap. */
-    rowClass?: (row: unknown) => string | undefined;
-    /** Same as `rowClass`, for inline styles. */
-    rowStyle?: (row: unknown) => Record<string, string> | undefined;
-    ui?: UiProp<TableThemeSlots>;
-}
-export interface TableEmits {
-    'update:sorting': [value: any[]];
-    'update:rowSelection': [value: Record<string, boolean>];
-    'update:globalFilter': [value: string];
-    'update:pageIndex': [value: number];
-    'update:expanded': [value: any];
-    'update:columnVisibility': [value: Record<string, boolean>];
-    'rowClick': [row: unknown, event: MouseEvent];
-    'rowContextmenu': [row: unknown, event: MouseEvent];
-}
-declare var __VLS_44: {
-    row: import("@tanstack/vue-table").RowData;
-}, __VLS_51: {};
-type __VLS_Slots = {} & {
-    expanded?: (props: typeof __VLS_44) => any;
-} & {
-    empty?: (props: typeof __VLS_51) => any;
+import type { RowData } from '@tanstack/vue-table';
+import type { TableProps, TableSlots } from '../utils/table-contracts.js';
+declare const __VLS_export: <TData extends RowData = RowData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TableProps<TData> & {
+        "onUpdate:sorting"?: ((value: import("@tanstack/vue-table").SortingState) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: import("@tanstack/vue-table").RowSelectionState) => any) | undefined;
+        "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
+        "onUpdate:pageIndex"?: ((value: number) => any) | undefined;
+        "onUpdate:expanded"?: ((value: import("@tanstack/vue-table").ExpandedState) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: import("@tanstack/vue-table").ColumnVisibilityState) => any) | undefined;
+        onRowClick?: ((row: TData, event: MouseEvent) => any) | undefined;
+        onRowContextmenu?: ((row: TData, event: MouseEvent) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        exportCsv: (filename?: string) => void;
+    }>) => void;
+    attrs: any;
+    slots: TableSlots<TData>;
+    emit: ((evt: "update:sorting", value: import("@tanstack/vue-table").SortingState) => void) & ((evt: "update:rowSelection", value: import("@tanstack/vue-table").RowSelectionState) => void) & ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:pageIndex", value: number) => void) & ((evt: "update:expanded", value: import("@tanstack/vue-table").ExpandedState) => void) & ((evt: "update:columnVisibility", value: import("@tanstack/vue-table").ColumnVisibilityState) => void) & ((evt: "rowClick", row: TData, event: MouseEvent) => void) & ((evt: "rowContextmenu", row: TData, event: MouseEvent) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<TableProps, {
-    exportCsv: (filename?: string) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:sorting": (value: any[]) => any;
-    "update:rowSelection": (value: Record<string, boolean>) => any;
-    "update:globalFilter": (value: string) => any;
-    "update:pageIndex": (value: number) => any;
-    "update:expanded": (value: any) => any;
-    "update:columnVisibility": (value: Record<string, boolean>) => any;
-    rowClick: (row: unknown, event: MouseEvent) => any;
-    rowContextmenu: (row: unknown, event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{
-    "onUpdate:sorting"?: ((value: any[]) => any) | undefined;
-    "onUpdate:rowSelection"?: ((value: Record<string, boolean>) => any) | undefined;
-    "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-    "onUpdate:pageIndex"?: ((value: number) => any) | undefined;
-    "onUpdate:expanded"?: ((value: any) => any) | undefined;
-    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
-    onRowClick?: ((row: unknown, event: MouseEvent) => any) | undefined;
-    onRowContextmenu?: ((row: unknown, event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TabsThemeSlots } from '../theme/tabs.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { tabsTheme } from '../theme/tabs.js';
 type TabsVariants = VariantProps<typeof tabsTheme>;
@@ -14,6 +15,8 @@ export interface TabsProps {
     variant?: TabsVariants['variant'];
     defaultValue?: string;
     modelValue?: string;
+    /** The active tab's text and underline accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<TabsThemeSlots>;
 }
 export interface TabsEmits {

package/dist/runtime/components/Tabs.vue

@@ -2,6 +2,7 @@
 import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "reka-ui";
 import { computed } from "vue";
 import { tabsTheme } from "../theme/tabs";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -10,11 +11,13 @@ const props = defineProps({
   variant: { type: null, required: false },
   defaultValue: { type: String, required: false },
   modelValue: { type: String, required: false },
+  color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineEmits(["update:modelValue"]);
 const theme = useComponentTheme("tabs", tabsTheme);
-const ui = computed(() => theme.value({ variant: props.variant }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ variant: props.variant, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
 const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
@@ -30,6 +33,7 @@ function itemValue(item, index) {
   <TabsRoot
     :default-value="defaultValue"
     :model-value="modelValue"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => $emit('update:modelValue', value)"
   >

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TabsThemeSlots } from '../theme/tabs.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { tabsTheme } from '../theme/tabs.js';
 type TabsVariants = VariantProps<typeof tabsTheme>;
@@ -14,6 +15,8 @@ export interface TabsProps {
     variant?: TabsVariants['variant'];
     defaultValue?: string;
     modelValue?: string;
+    /** The active tab's text and underline accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<TabsThemeSlots>;
 }
 export interface TabsEmits {

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TextareaThemeSlots } from '../theme/textarea.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { textareaTheme } from '../theme/textarea.js';
 type TextareaVariants = VariantProps<typeof textareaTheme>;
@@ -13,7 +14,7 @@ export interface TextareaProps {
     disabled?: boolean;
     invalid?: boolean;
     /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: TextareaVariants['color'];
+    color?: ColorRole;
     clearable?: boolean;
     icon?: string;
     trailingIcon?: string;

package/dist/runtime/components/Textarea.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, mergeProps, nextTick, onMounted, ref, watch } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { textareaTheme } from "../theme/textarea";
-import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -40,16 +42,19 @@ const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSiz
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("textarea", textareaTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   size: effectiveSize.value,
-  color: props.color,
+  color: effectiveColor.value,
   invalid: textareaInvalid.value,
   hasLeadingIcon: !!props.icon,
   hasTrailingIcon: !!props.trailingIcon || showClear.value,
   autoresize: props.autoresize
 }));
-const rootProps = computed(() => resolveSlot(ui.value.root, props.ui?.root));
-const baseProps = useRootProps(() => ui.value.base, () => props.ui?.base);
+const isTextareaAttr = (key) => isNativeInputAttr(key) || isNativeInputA11yAttr(key);
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isTextareaAttr });
+const nativeTextareaAttrs = useFallthroughAttrs(isTextareaAttr);
+const baseProps = computed(() => mergeProps(resolveSlot(ui.value.base, props.ui?.base), nativeTextareaAttrs.value));
 const textareaRef = ref();
 async function resize() {
   if (!props.autoresize || !textareaRef.value)
@@ -73,7 +78,7 @@ watch(() => props.modelValue, resize);
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-color="textareaInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <textarea
       :id="textareaId"

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TextareaThemeSlots } from '../theme/textarea.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { textareaTheme } from '../theme/textarea.js';
 type TextareaVariants = VariantProps<typeof textareaTheme>;
@@ -13,7 +14,7 @@ export interface TextareaProps {
     disabled?: boolean;
     invalid?: boolean;
     /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: TextareaVariants['color'];
+    color?: ColorRole;
     clearable?: boolean;
     icon?: string;
     trailingIcon?: string;

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

@@ -1,12 +1,23 @@
+import type { Component } from 'vue';
+import type { ThemeDefaults, ThemeUiOverrides } from '../theme-config.js';
+import type { RuntimeTokenOverrides } from '../utils/color-registry.js';
 export interface ThemeProps {
-    /** Component-name-keyed slot-class overrides, same shape as app.config.ui but scoped to this subtree instead of the whole app - e.g. `{ button: { slots: { base: 'rounded-full' } } }`. */
-    ui?: Partial<Record<string, object>>;
+    /** Component-name-keyed slot-class overrides, same shape as app.config.selaras.ui but scoped to this subtree instead of the whole app - e.g. `{ button: { slots: { base: 'rounded-full' } } }`. */
+    ui?: ThemeUiOverrides;
     /** Component-name-keyed prop-default overrides - e.g. `{ button: { size: 'lg' } }`. Only respected by components that opt into reading useThemeProps for a given prop (see theming.md's "STheme" section for which ones currently do); an explicit prop on the component itself always wins. */
-    props?: Partial<Record<string, Record<string, unknown>>>;
+    defaults?: ThemeDefaults;
+    /** Runtime role and functional token overrides by mode. Requires a DOM boundary through `as`. */
+    tokens?: RuntimeTokenOverrides;
+    /** Explicit DOM element/component that owns this theme scope. */
+    as?: string | Component;
+    /** Managed semantic mode. Explicit light/dark requires a DOM boundary. */
+    mode?: 'inherit' | 'light' | 'dark';
 }
-declare var __VLS_1: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Theme.vue

@@ -1,18 +1,43 @@
 <script setup>
-import { computed, inject, provide } from "vue";
+import { computed, inject, provide, useId, watchEffect } from "vue";
+import { useAppConfig, useHead } from "#imports";
+import { generateRuntimeTokenOverrideCss, mergeRuntimeTokenOverrides } from "../utils/color-registry";
 import { THEME_INJECTION_KEY } from "../utils/injection-keys";
 const props = defineProps({
-  ui: { type: Object, required: false },
-  props: { type: Object, required: false }
+  ui: { type: null, required: false },
+  defaults: { type: null, required: false },
+  tokens: { type: Object, required: false },
+  as: { type: null, required: false },
+  mode: { type: String, required: false }
 });
 const parent = inject(THEME_INJECTION_KEY, void 0);
+const appConfig = useAppConfig();
+const scopeId = `s${useId()}`;
+const mode = computed(() => props.mode && props.mode !== "inherit" ? props.mode : parent?.value.mode ?? "root");
+const inheritedTokens = computed(() => parent?.value.tokens ?? appConfig.selaras?.tokens);
+const effectiveTokens = computed(() => props.as ? mergeRuntimeTokenOverrides(inheritedTokens.value, props.tokens) : inheritedTokens.value);
+watchEffect(() => {
+  if (!props.as && (props.tokens || props.mode && props.mode !== "inherit"))
+    throw new Error("STheme tokens and explicit mode require a DOM boundary through the as prop.");
+});
 provide(THEME_INJECTION_KEY, computed(() => ({
   ui: props.ui,
-  props: props.props,
+  defaults: props.defaults,
+  scopeId: props.as ? scopeId : parent?.value?.scopeId,
+  tokens: effectiveTokens.value,
+  mode: mode.value,
   parent: parent?.value
 })));
+const scopeSelector = `[data-selaras-theme="${scopeId}"]`;
+const scopedTokenCss = computed(() => props.as ? generateRuntimeTokenOverrideCss(effectiveTokens.value ?? {}, scopeSelector) : "");
+useHead({
+  style: [{ key: `selaras-theme-${scopeId}`, textContent: () => scopedTokenCss.value || void 0 }]
+});
 </script>
 
 <template>
-  <slot />
+  <component :is="as" v-if="as" :data-selaras-theme="scopeId" :data-selaras-mode="mode" :style="mode === 'root' ? void 0 : { colorScheme: mode }">
+    <slot />
+  </component>
+  <slot v-else />
 </template>

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

@@ -1,12 +1,23 @@
+import type { Component } from 'vue';
+import type { ThemeDefaults, ThemeUiOverrides } from '../theme-config.js';
+import type { RuntimeTokenOverrides } from '../utils/color-registry.js';
 export interface ThemeProps {
-    /** Component-name-keyed slot-class overrides, same shape as app.config.ui but scoped to this subtree instead of the whole app - e.g. `{ button: { slots: { base: 'rounded-full' } } }`. */
-    ui?: Partial<Record<string, object>>;
+    /** Component-name-keyed slot-class overrides, same shape as app.config.selaras.ui but scoped to this subtree instead of the whole app - e.g. `{ button: { slots: { base: 'rounded-full' } } }`. */
+    ui?: ThemeUiOverrides;
     /** Component-name-keyed prop-default overrides - e.g. `{ button: { size: 'lg' } }`. Only respected by components that opt into reading useThemeProps for a given prop (see theming.md's "STheme" section for which ones currently do); an explicit prop on the component itself always wins. */
-    props?: Partial<Record<string, Record<string, unknown>>>;
+    defaults?: ThemeDefaults;
+    /** Runtime role and functional token overrides by mode. Requires a DOM boundary through `as`. */
+    tokens?: RuntimeTokenOverrides;
+    /** Explicit DOM element/component that owns this theme scope. */
+    as?: string | Component;
+    /** Managed semantic mode. Explicit light/dark requires a DOM boundary. */
+    mode?: 'inherit' | 'light' | 'dark';
 }
-declare var __VLS_1: {};
+declare var __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ThemeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ThemeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/Toast.vue

@@ -1,57 +1,29 @@
 <script setup>
-import { ToastClose, ToastDescription, ToastPortal, ToastRoot, ToastTitle, ToastViewport } from "reka-ui";
-import { computed } from "vue";
-import { useIcons } from "../composables/use-icons";
-import { useMessages } from "../composables/use-messages";
-import { useToast } from "../composables/use-toast";
+import { ToastPortal, ToastViewport } from "reka-ui";
+import { computed, onUnmounted } from "vue";
+import { useToastService } from "../internal/programmatic-services";
+import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
+import ToastItemRenderer from "../internal/ToastItemRenderer.vue";
 import { toastTheme } from "../theme/toast";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
-import Button from "./Button.vue";
-import Icon from "./Icon.vue";
 const props = defineProps({
   ui: { type: Object, required: false }
 });
-const { toasts, remove } = useToast();
-const icons = useIcons();
-const messages = useMessages();
+const { toasts, remove, dispose } = useToastService();
 const theme = useComponentTheme("toast", toastTheme);
 const ui = computed(() => theme.value());
 const viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
-const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
-const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
-const closeProps = computed(() => resolveSlot(ui.value.close, props.ui?.close));
-function rootPropsFor(toast) {
-  return resolveSlot(theme.value({ color: toast.color }).root, props.ui?.root);
-}
-function iconPropsFor(toast) {
-  return resolveSlot(theme.value({ color: toast.color }).icon, props.ui?.icon);
-}
-function iconNameFor(toast) {
-  return toast.icon ?? (toast.color ? icons.value[toast.color] : void 0);
-}
+onUnmounted(dispose);
 </script>
 
 <template>
-  <ToastRoot
+  <ProgrammaticTheme
     v-for="toast in toasts"
     :key="toast.id"
-    :duration="toast.duration ?? 5e3"
-    v-bind="rootPropsFor(toast)"
-    @update:open="(open) => !open && remove(toast.id)"
+    :snapshot="toast._theme"
   >
-    <Icon v-if="iconNameFor(toast)" :name="iconNameFor(toast)" v-bind="iconPropsFor(toast)" />
-    <div>
-      <ToastTitle v-if="toast.title" v-bind="titleProps">
-        {{ toast.title }}
-      </ToastTitle>
-      <ToastDescription v-if="toast.description" v-bind="descriptionProps">
-        {{ toast.description }}
-      </ToastDescription>
-    </div>
-    <ToastClose as-child>
-      <Button size="sm" variant="ghost" color="neutral" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
-    </ToastClose>
-  </ToastRoot>
+    <ToastItemRenderer :toast="toast" :ui="props.ui" @remove="remove" />
+  </ProgrammaticTheme>
   <ToastPortal>
     <ToastViewport v-bind="viewportProps" />
   </ToastPortal>

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ToggleThemeSlots } from '../theme/toggle.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { toggleTheme } from '../theme/toggle.js';
 type ToggleVariants = VariantProps<typeof toggleTheme>;
@@ -9,7 +10,7 @@ export interface ToggleProps {
     defaultValue?: boolean;
     disabled?: boolean;
     icon?: string;
-    color?: ToggleVariants['color'];
+    color?: ColorRole;
     size?: ToggleVariants['size'];
     /** Forces (or blocks) the equal-width/height icon-only shape - same convention as Button's own `square`. */
     square?: boolean;

package/dist/runtime/components/Toggle.vue

@@ -2,6 +2,7 @@
 import { Toggle } from "reka-ui";
 import { computed, useSlots } from "vue";
 import { toggleTheme } from "../theme/toggle";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -20,8 +21,9 @@ defineSlots();
 const slots = useSlots();
 const iconOnly = computed(() => !slots.default);
 const theme = useComponentTheme("toggle", toggleTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
-  color: props.color,
+  color: effectiveColor.value,
   size: props.size,
   square: props.square ?? iconOnly.value
 }));
@@ -33,6 +35,7 @@ const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
     :model-value="modelValue"
     :default-value="defaultValue"
     :disabled="disabled"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
   >

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ToggleThemeSlots } from '../theme/toggle.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { toggleTheme } from '../theme/toggle.js';
 type ToggleVariants = VariantProps<typeof toggleTheme>;
@@ -9,7 +10,7 @@ export interface ToggleProps {
     defaultValue?: boolean;
     disabled?: boolean;
     icon?: string;
-    color?: ToggleVariants['color'];
+    color?: ColorRole;
     size?: ToggleVariants['size'];
     /** Forces (or blocks) the equal-width/height icon-only shape - same convention as Button's own `square`. */
     square?: boolean;

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ToggleGroupThemeSlots } from '../theme/toggle-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { toggleGroupTheme } from '../theme/toggle-group.js';
 export interface ToggleGroupItemDef {
@@ -19,7 +20,7 @@ export interface ToggleGroupProps {
     defaultValue?: string | string[];
     disabled?: boolean;
     orientation?: ToggleGroupVariants['orientation'];
-    color?: ToggleGroupVariants['color'];
+    color?: ColorRole;
     size?: ToggleGroupVariants['size'];
     ui?: UiProp<ToggleGroupThemeSlots>;
 }

package/dist/runtime/components/ToggleGroup.vue

@@ -2,6 +2,7 @@
 import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui";
 import { computed } from "vue";
 import { toggleGroupTheme } from "../theme/toggle-group";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -22,10 +23,11 @@ const normalizedItems = computed(
   () => props.items.map((item) => typeof item === "string" ? { label: item, value: item } : item)
 );
 const theme = useComponentTheme("toggleGroup", toggleGroupTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   orientation: props.orientation,
   size: props.size,
-  color: props.color
+  color: effectiveColor.value
 }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
@@ -42,6 +44,7 @@ function isPressed(item) {
     :default-value="defaultValue"
     :disabled="disabled"
     :orientation="orientation"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
   >

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ToggleGroupThemeSlots } from '../theme/toggle-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { toggleGroupTheme } from '../theme/toggle-group.js';
 export interface ToggleGroupItemDef {
@@ -19,7 +20,7 @@ export interface ToggleGroupProps {
     defaultValue?: string | string[];
     disabled?: boolean;
     orientation?: ToggleGroupVariants['orientation'];
-    color?: ToggleGroupVariants['color'];
+    color?: ColorRole;
     size?: ToggleGroupVariants['size'];
     ui?: UiProp<ToggleGroupThemeSlots>;
 }

package/dist/runtime/components/Tooltip.vue

@@ -2,7 +2,7 @@
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from "reka-ui";
 import { computed } from "vue";
 import { tooltipTheme } from "../theme/tooltip";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 const props = defineProps({
   text: { type: String, required: false },
   side: { type: String, required: false, default: "top" },
@@ -13,6 +13,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const theme = useComponentTheme("tooltip", tooltipTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
@@ -26,7 +27,7 @@ const kbdProps = computed(() => resolveSlot(ui.value.kbd, props.ui?.kbd));
       <slot />
     </TooltipTrigger>
     <TooltipPortal>
-      <TooltipContent :side="side" :side-offset="6" v-bind="contentProps">
+      <TooltipContent :side="side" :side-offset="6" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <slot name="content">
           {{ text }}
         </slot>

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { TreeThemeSlots } from '../theme/tree.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { treeTheme } from '../theme/tree.js';
 type TreeVariants = VariantProps<typeof treeTheme>;
@@ -31,6 +32,8 @@ export interface TreeProps {
     /** @default item => item.children */
     getChildren?: (item: TreeItemType) => TreeItemType[] | undefined;
     size?: TreeVariants['size'];
+    /** The selected-row and keyboard-focus accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<TreeThemeSlots>;
 }
 export interface TreeEmits {
@@ -48,11 +51,11 @@ export interface TreeSlots {
     }) => any;
 }
 declare const __VLS_base: import("vue").DefineComponent<TreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: TreeItemType | TreeItemType[]) => any;
     "update:expanded": (value: string[]) => any;
+    "update:modelValue": (value: TreeItemType | TreeItemType[]) => any;
 }, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: TreeItemType | TreeItemType[]) => any) | undefined;
     "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TreeItemType | TreeItemType[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;