@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/Icon.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { iconTheme } from "../theme/icon";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -9,10 +10,14 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const theme = useComponentTheme("icon", iconTheme);
-const ui = computed(() => theme.value({ color: props.color }));
+const effectiveColor = computed(() => props.color ? resolveRegisteredColorRole(props.color, "primary") : void 0);
+const ui = computed(() => theme.value({
+  color: effectiveColor.value,
+  colored: !!effectiveColor.value
+}));
 const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
 </script>
 
 <template>
-  <Icon :name="name" v-bind="rootProps" />
+  <Icon :name="name" :data-selaras-color="effectiveColor" v-bind="rootProps" />
 </template>

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { IconThemeSlots } from '../theme/icon.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
-import { iconTheme } from '../theme/icon.js';
-type IconVariants = VariantProps<typeof iconTheme>;
 export interface IconProps {
     /** Any name Nuxt Icon resolves, e.g. `hugeicons:star` (or any other registered set, like `lucide:star`). */
     name: string;
-    color?: IconVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<IconThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

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

package/dist/runtime/components/Input.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed, mergeProps } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { inputTheme } from "../theme/input";
-import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
+import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeProps } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -39,19 +41,23 @@ const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSiz
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("input", inputTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   size: effectiveSize.value,
-  color: props.color ?? themeProps.value.color ?? "primary",
+  color: effectiveColor.value,
   invalid: inputInvalid.value,
   hasLeadingIcon: !!props.icon,
   hasTrailingIcon: !!props.trailingIcon || showClear.value
 }));
-const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const isInputAttr = (key) => isNativeInputAttr(key) || isNativeInputA11yAttr(key);
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isInputAttr });
+const nativeInputAttrs = useFallthroughAttrs(isInputAttr);
 const baseProps = computed(() => resolveSlot(ui.value.base, props.ui?.base));
+const inputProps = computed(() => mergeProps(baseProps.value, nativeInputAttrs.value));
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <input
       :id="inputId"
@@ -63,7 +69,7 @@ const baseProps = computed(() => resolveSlot(ui.value.base, props.ui?.base));
       :disabled="disabled"
       :aria-invalid="inputInvalid || void 0"
       :aria-describedby="describedBy"
-      v-bind="baseProps"
+      v-bind="inputProps"
       @input="$emit('update:modelValue', $event.target.value)"
     >
     <Button

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

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

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { InputNumberThemeSlots } from '../theme/input-number.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { inputNumberTheme } from '../theme/input-number.js';
 type InputNumberVariants = VariantProps<typeof inputNumberTheme>;
@@ -17,9 +18,11 @@ export interface InputNumberProps {
     formatOptions?: Intl.NumberFormatOptions;
     locale?: string;
     disabled?: boolean;
+    /** Keeps the field focusable and readable while preventing typing and stepping. */
+    readonly?: boolean;
     invalid?: boolean;
     /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: InputNumberVariants['color'];
+    color?: ColorRole;
     size?: InputNumberVariants['size'];
     /** 'horizontal' (default) flanks the input with two full-height buttons; 'vertical' replaces them with a single compact up/down pair pinned to the end edge. */
     orientation?: InputNumberVariants['orientation'];

package/dist/runtime/components/InputNumber.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, mergeProps, ref } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useLocale } from "../composables/use-locale";
 import { useMessages } from "../composables/use-messages";
 import { inputNumberTheme } from "../theme/input-number";
-import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { isNativeInputA11yAttr, isNativeInputAttr } from "../utils/native-input";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -21,6 +23,7 @@ const props = defineProps({
   formatOptions: { type: null, required: false },
   locale: { type: String, required: false },
   disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   invalid: { type: Boolean, required: false },
   color: { type: null, required: false, default: "primary" },
   size: { type: null, required: false },
@@ -86,26 +89,31 @@ function keydown(event) {
   }
 }
 function stepBy(delta) {
+  if (props.disabled || props.readonly)
+    return;
   const base = props.modelValue ?? props.min ?? 0;
   commit(base + delta);
   if (isFocused.value)
     editingValue.value = String(clamp(base + delta));
 }
-const canDecrement = computed(() => !props.disabled && (props.wrap || props.min === void 0 || props.modelValue === void 0 || props.modelValue > props.min));
-const canIncrement = computed(() => !props.disabled && (props.wrap || props.max === void 0 || props.modelValue === void 0 || props.modelValue < props.max));
+const canDecrement = computed(() => !props.disabled && !props.readonly && (props.wrap || props.min === void 0 || props.modelValue === void 0 || props.modelValue > props.min));
+const canIncrement = computed(() => !props.disabled && !props.readonly && (props.wrap || props.max === void 0 || props.modelValue === void 0 || props.modelValue < props.max));
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("inputNumber", inputNumberTheme);
-const ui = computed(() => theme.value({ size: effectiveSize.value, color: props.color, invalid: inputInvalid.value, orientation: props.orientation }));
-const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
-const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ size: effectiveSize.value, color: effectiveColor.value, invalid: inputInvalid.value, orientation: props.orientation }));
+const isInputAttr = (key) => isNativeInputAttr(key) || isNativeInputA11yAttr(key);
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isInputAttr });
+const nativeInputAttrs = useFallthroughAttrs(isInputAttr);
+const inputProps = computed(() => mergeProps(resolveSlot(ui.value.input, props.ui?.input), nativeInputAttrs.value));
 const stepperProps = computed(() => resolveSlot(ui.value.stepper, props.ui?.stepper));
 const stepperButtonProps = computed(() => resolveSlot(ui.value.stepperButton, props.ui?.stepperButton));
 const stepButtonUi = { base: "shrink-0" };
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-color="inputInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <Button
       v-if="orientation === 'horizontal'"
       variant="text"
@@ -126,6 +134,11 @@ const stepButtonUi = { base: "shrink-0" };
       :name="name ?? field?.name"
       :placeholder="placeholder"
       :disabled="disabled"
+      :readonly="readonly"
+      role="spinbutton"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-valuenow="props.modelValue"
       :aria-invalid="inputInvalid || void 0"
       :aria-describedby="describedBy"
       v-bind="inputProps"

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { InputNumberThemeSlots } from '../theme/input-number.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { inputNumberTheme } from '../theme/input-number.js';
 type InputNumberVariants = VariantProps<typeof inputNumberTheme>;
@@ -17,9 +18,11 @@ export interface InputNumberProps {
     formatOptions?: Intl.NumberFormatOptions;
     locale?: string;
     disabled?: boolean;
+    /** Keeps the field focusable and readable while preventing typing and stepping. */
+    readonly?: boolean;
     invalid?: boolean;
     /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: InputNumberVariants['color'];
+    color?: ColorRole;
     size?: InputNumberVariants['size'];
     /** 'horizontal' (default) flanks the input with two full-height buttons; 'vertical' replaces them with a single compact up/down pair pinned to the end edge. */
     orientation?: InputNumberVariants['orientation'];

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

@@ -2,6 +2,8 @@ import type { ModalThemeSlots } from '../theme/modal.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ModalProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled modal. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Full-viewport layout instead of the default centered card. Still the initial state when `maximizable` is set - the toggle button takes over from there, optionally controllable via `v-model:fullscreen`. */

package/dist/runtime/components/Modal.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, VisuallyHidden } from "reka-ui";
-import { computed, ref, useSlots, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { modalTheme } from "../theme/modal";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.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 },
   fullscreen: { type: Boolean, required: false },
@@ -47,13 +48,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) => {
@@ -79,6 +82,7 @@ if (import.meta.dev) {
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("modal", modalTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ fullscreen: internalFullscreen.value, transition: props.transition }));
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
@@ -98,8 +102,17 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
       <slot />
     </DialogTrigger>
     <DialogPortal>
-      <DialogOverlay v-if="overlay" v-bind="overlayProps" />
+      <DialogOverlay
+        v-if="overlay"
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        v-bind="overlayProps"
+      />
       <DialogContent
+        :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/Modal.vue.d.ts

@@ -2,6 +2,8 @@ import type { ModalThemeSlots } from '../theme/modal.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ModalProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled modal. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Full-viewport layout instead of the default centered card. Still the initial state when `maximizable` is set - the toggle button takes over from there, optionally controllable via `v-model:fullscreen`. */

package/dist/runtime/components/ModalRenderer.vue

@@ -1,25 +1,32 @@
 <script setup>
-import { useModal } from "../composables/use-modal";
+import { onUnmounted } from "vue";
+import { useModalService } from "../internal/programmatic-services";
+import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
 import Modal from "./Modal.vue";
-const { modals, close, remove } = useModal();
+const { instances: modals, close, remove, dispose } = useModalService();
+onUnmounted(dispose);
 </script>
 
 <template>
-  <Modal
+  <ProgrammaticTheme
     v-for="instance in modals"
     :key="instance.id"
-    :open="instance.isOpen"
-    :title="instance.title"
-    :description="instance.description"
-    :dismissible="instance.dismissible"
-    :modal="instance.modal"
-    :overlay="instance.overlay"
-    :transition="instance.transition"
-    @update:open="(open) => !open && close(instance.id)"
-    @after-leave="remove(instance.id)"
+    :snapshot="instance._theme"
   >
-    <template #content>
-      <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
-    </template>
-  </Modal>
+    <Modal
+      :open="instance.isOpen"
+      :title="instance.title"
+      :description="instance.description"
+      :dismissible="instance.dismissible"
+      :modal="instance.modal"
+      :overlay="instance.overlay"
+      :transition="instance.transition"
+      @update:open="(open) => !open && close(instance.id)"
+      @after-leave="remove(instance.id)"
+    >
+      <template #content>
+        <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
+      </template>
+    </Modal>
+  </ProgrammaticTheme>
 </template>

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

@@ -1,14 +1,12 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuProps {
     items: NavigationMenuItem[];
     /** Horizontal uses Reka's real shared-viewport flyout for a single level of dropdown children. Vertical falls back to a recursive accordion (see NavigationMenuAccordionItem.vue) for arbitrary depth - Reka's own NavigationMenuContent isn't built for deep nested trees. */
     orientation?: 'horizontal' | 'vertical';
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     /** Draws a bar/underline next to the active item, in addition to its own color styling. */
     highlight?: boolean;

package/dist/runtime/components/NavigationMenu.vue

@@ -14,6 +14,7 @@ import { useRoute } from "#imports";
 import { useIcons } from "../composables/use-icons";
 import { navigationMenuTheme } from "../theme/navigation-menu";
 import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 import Icon from "./Icon.vue";
 import NavigationMenuAccordionItem from "./NavigationMenuAccordionItem.vue";
@@ -37,17 +38,18 @@ function slotName(item, suffix) {
   return `item${suffix}`;
 }
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
-const ui = computed(() => theme.value({ orientation: props.orientation, color: props.color, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed }));
 const rootProps = computed(() => resolveSlot(ui.value.root, props.ui?.root));
 const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
 function isActive(item) {
   return isNavigationMenuItemActive(item, route.path);
 }
 function linkProps(item) {
-  return resolveSlot(theme.value({ orientation: props.orientation, color: props.color, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
+  return resolveSlot(theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
 }
 function childLinkProps(item) {
-  return resolveSlot(theme.value({ orientation: props.orientation, color: props.color, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).childLink, props.ui?.childLink);
+  return resolveSlot(theme.value({ orientation: props.orientation, color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: props.collapsed, active: isActive(item), disabled: item.disabled }).childLink, props.ui?.childLink);
 }
 const openFlyoutLabel = ref(null);
 function onFlyoutOpenChange(item, value) {
@@ -69,7 +71,7 @@ function onSelect(item, event) {
 </script>
 
 <template>
-  <NavigationMenuRoot :orientation="orientation" v-bind="rootProps">
+  <NavigationMenuRoot :orientation="orientation" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <slot name="list-leading" />
     <NavigationMenuList v-bind="listProps">
       <template v-for="item in items" :key="item.label">

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

@@ -1,14 +1,12 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuProps {
     items: NavigationMenuItem[];
     /** Horizontal uses Reka's real shared-viewport flyout for a single level of dropdown children. Vertical falls back to a recursive accordion (see NavigationMenuAccordionItem.vue) for arbitrary depth - Reka's own NavigationMenuContent isn't built for deep nested trees. */
     orientation?: 'horizontal' | 'vertical';
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     /** Draws a bar/underline next to the active item, in addition to its own color styling. */
     highlight?: boolean;

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuAccordionItemProps {
     item: NavigationMenuItem;
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;
     ui?: UiProp<NavigationMenuThemeSlots>;

package/dist/runtime/components/NavigationMenuAccordionItem.vue

@@ -4,6 +4,7 @@ import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
 import { navigationMenuTheme } from "../theme/navigation-menu";
 import { isNavigationMenuItemActive } from "../utils/navigation-menu";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 import Accordion from "./Accordion.vue";
 import Icon from "./Icon.vue";
@@ -25,7 +26,8 @@ function slotName(item, suffix) {
   return `item${suffix}`;
 }
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
-const ui = computed(() => theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight }));
 const accordionValue = useId();
 const accordionItems = computed(() => [{ value: accordionValue, label: props.item.label, disabled: props.item.disabled }]);
 const groupUi = computed(() => ({
@@ -39,7 +41,7 @@ function isActive(item) {
   return isNavigationMenuItemActive(item, route.path);
 }
 function linkProps(child) {
-  return resolveSlot(theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, active: isActive(child), disabled: child.disabled }).link, props.ui?.link);
+  return resolveSlot(theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, active: isActive(child), disabled: child.disabled }).link, props.ui?.link);
 }
 function onSelect(item, event) {
   if (item.disabled) {
@@ -51,7 +53,7 @@ function onSelect(item, event) {
 </script>
 
 <template>
-  <Accordion :items="accordionItems" :default-value="[]" :ui="groupUi">
+  <Accordion :items="accordionItems" :default-value="[]" :ui="groupUi" :data-selaras-color="effectiveColor">
     <template #label>
       <slot :name="slotName(item, '')" :item="item" :active="false">
         <slot :name="slotName(item, '-leading')" :item="item" :active="false">

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuAccordionItemProps {
     item: NavigationMenuItem;
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;
     ui?: UiProp<NavigationMenuThemeSlots>;

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuFlyoutListProps {
     items: NavigationMenuItem[];
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;
     onSelect: (item: NavigationMenuItem, event: Event) => void;

package/dist/runtime/components/NavigationMenuFlyoutList.vue

@@ -4,7 +4,8 @@ import { NuxtLink } from "#components";
 import { useRoute } from "#imports";
 import { navigationMenuTheme } from "../theme/navigation-menu";
 import { isNavigationMenuItemActive } from "../utils/navigation-menu";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 import NavigationMenuAccordionItem from "./NavigationMenuAccordionItem.vue";
 const props = defineProps({
@@ -21,14 +22,16 @@ function isActive(item) {
   return isNavigationMenuItemActive(item, route.path);
 }
 const theme = useComponentTheme("navigationMenu", navigationMenuTheme);
-const ui = computed(() => theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
+const themeBindings = useThemeBindings();
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, flyoutRoot: props.root }));
 function linkProps(item) {
-  return resolveSlot(theme.value({ orientation: "vertical", color: props.color, variant: props.variant, highlight: props.highlight, collapsed: false, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
+  return resolveSlot(theme.value({ orientation: "vertical", color: effectiveColor.value, variant: props.variant, highlight: props.highlight, collapsed: false, active: isActive(item), disabled: item.disabled }).link, props.ui?.link);
 }
 </script>
 
 <template>
-  <ul v-bind="resolveSlot(ui.childList, props.ui?.childList)">
+  <ul :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" :data-selaras-color="effectiveColor" v-bind="resolveSlot(ui.childList, props.ui?.childList)">
     <li v-for="item in items" :key="item.label" v-bind="resolveSlot(ui.childItem, props.ui?.childItem)">
       <NavigationMenuAccordionItem v-if="item.children?.length" :item="item" :color="color" :variant="variant" :highlight="highlight" :ui="props.ui" />
       <component

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuFlyoutListProps {
     items: NavigationMenuItem[];
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;
     onSelect: (item: NavigationMenuItem, event: Event) => void;

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
 import type { NavigationMenuThemeSlots } from '../theme/navigation-menu.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { NavigationMenuItem } from '../utils/navigation-menu.js';
 import type { UiProp } from '../utils/ui.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface NavigationMenuFlyoutTriggerProps {
     item: NavigationMenuItem;
-    color?: ButtonVariants['color'];
+    color?: ColorRole;
     variant?: 'pill' | 'link';
     highlight?: boolean;
     open: boolean;