@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/Autocomplete.vue

@@ -1,41 +1,80 @@
 <script setup>
-import { useForwardPropsEmits } from "reka-ui";
+import { useForwardProps } from "reka-ui";
+import { getCurrentInstance } from "vue";
 import ComboboxSelectBase from "../internal/ComboboxSelectBase.vue";
 const props = defineProps({
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  dropdown: { type: Boolean, required: false },
+  forceSelection: { type: null, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
+  form: { type: String, required: false },
   items: { type: Array, required: true },
   valueKey: { type: String, required: false },
   labelKey: { type: String, required: false },
-  modelValue: { type: [String, Array], required: false },
-  multiple: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  multiple: { type: null, required: false },
   virtualize: { type: [Boolean, Object], required: false },
   displayMode: { type: String, required: false },
   maxChips: { type: Number, required: false },
   loading: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
   disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
   size: { type: null, required: false },
   invalid: { type: Boolean, required: false },
   color: { type: null, required: false },
   clearable: { type: Boolean, required: false },
-  dropdown: { type: Boolean, required: false },
-  forceSelection: { type: Boolean, required: false },
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false },
   resetSearchTermOnSelect: { type: Boolean, required: false },
   arrow: { type: Boolean, required: false },
-  mobileModal: { type: Boolean, required: false },
+  adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
-const forwarded = useForwardPropsEmits(props, emit);
+const emit = defineEmits(["update:open", "update:modelValue", "update:searchTerm"]);
+const slots = defineSlots();
+const forwarded = useForwardProps(props);
+const instance = getCurrentInstance();
+function baseProps() {
+  const controlled = Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
+  return {
+    ...forwarded.value,
+    items: props.items,
+    ...controlled ? { modelValue: props.modelValue } : {}
+  };
+}
+function updateValue(value) {
+  emit("update:modelValue", value);
+}
+function itemData(item) {
+  return item;
+}
+function groupData(group) {
+  return group;
+}
+const unscopedSlots = ["header", "footer", "empty", "empty-filter", "clear-icon", "loading-icon", "dropdown-icon"];
 </script>
 
 <template>
-  <ComboboxSelectBase v-bind="forwarded" :creatable="true" :searchable="true">
-    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
-      <slot :name="slotName" v-bind="slotProps ?? {}" />
+  <ComboboxSelectBase
+    v-bind="baseProps()"
+    :creatable="true"
+    :searchable="true"
+    @update:open="emit('update:open', $event)"
+    @update:model-value="updateValue"
+    @update:search-term="emit('update:searchTerm', $event)"
+  >
+    <template v-if="slots.item" #item="{ item }">
+      <slot name="item" :item="itemData(item)" />
+    </template>
+    <template v-if="slots.group" #group="{ group }">
+      <slot name="group" :group="groupData(group)" />
+    </template>
+    <template v-for="slotName in unscopedSlots.filter((name) => slots[name])" :key="slotName" #[slotName]>
+      <slot :name="slotName" />
     </template>
   </ComboboxSelectBase>
 </template>

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

@@ -1,61 +1,25 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { SelectItems } from '../composables/use-combobox-select.js';
-import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
-import type { UiProp } from '../utils/ui.js';
-type SelectVariants = VariantProps<typeof selectTheme>;
-export interface AutocompleteProps {
-    id?: string;
-    name?: string;
-    items: SelectItems;
-    valueKey?: string;
-    labelKey?: string;
-    modelValue?: string | string[];
-    multiple?: boolean;
-    virtualize?: boolean | {
-        estimateSize?: number;
-        overscan?: number;
-    };
-    displayMode?: 'comma' | 'chip';
-    maxChips?: number;
-    loading?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-    size?: SelectVariants['size'];
-    invalid?: boolean;
-    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: SelectVariants['color'];
-    clearable?: boolean;
-    dropdown?: boolean;
-    forceSelection?: boolean;
-    searchTerm?: string;
-    resetSearchTermOnBlur?: boolean;
-    resetSearchTermOnSelect?: boolean;
-    /** Shows a small pointer triangle connecting the panel to its trigger. */
-    arrow?: boolean;
-    /** Below 768px viewport width, presents the dropdown as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
-    mobileModal?: boolean;
-    ui?: UiProp<SelectThemeSlots>;
-}
-export interface AutocompleteEmits {
-    'update:modelValue': [value: string | string[] | undefined];
-    'update:searchTerm': [value: string];
-}
-declare var __VLS_10: string, __VLS_11: any;
-type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+import type { AutocompleteProps, AutocompleteSlots, AutocompleteValue } from '../utils/autocomplete-contracts.js';
+import type { SelectModel } from '../utils/select-contracts.js';
+export type { AutocompleteEmits, AutocompleteProps, AutocompleteSlots } from '../utils/autocomplete-contracts.js';
+declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false, Forced extends boolean = false>(__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<AutocompleteProps<Entry, Key, Multiple, Forced> & {
+        "onUpdate:modelValue"?: ((value: SelectModel<AutocompleteValue<Entry, Key, Forced>, Multiple>) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: AutocompleteSlots<Entry>;
+    emit: ((evt: "update:modelValue", value: SelectModel<AutocompleteValue<Entry, Key, Forced>, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<AutocompleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | undefined) => any;
-    "update:searchTerm": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<AutocompleteProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
-    "onUpdate:searchTerm"?: ((value: string) => 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/Avatar.d.vue.ts

@@ -2,6 +2,7 @@ import type { AvatarImageProps } from 'reka-ui';
 import type { VariantProps } from 'tailwind-variants';
 import type { Component } from 'vue';
 import type { AvatarThemeSlots } from '../theme/avatar.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { avatarTheme } from '../theme/avatar.js';
 type AvatarVariants = VariantProps<typeof avatarTheme>;
@@ -16,7 +17,7 @@ export interface AvatarProps {
     text?: string;
     /** An icon shown in the fallback, in place of `text`. If neither is given, the default semantic `user` icon shows. */
     icon?: string;
-    color?: AvatarVariants['color'];
+    color?: ColorRole;
     /** The presence/status dot's own color - independent of `color`, since presence semantics rarely match the avatar's identity color. */
     statusColor?: AvatarVariants['statusColor'];
     size?: AvatarVariants['size'];

package/dist/runtime/components/Avatar.vue

@@ -4,6 +4,7 @@ import { computed, inject } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { avatarTheme } from "../theme/avatar";
 import { AVATAR_SIZE_INJECTION_KEY } from "../utils/injection-keys";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -26,8 +27,9 @@ const icons = useIcons();
 const theme = useComponentTheme("avatar", avatarTheme);
 const themeProps = useThemeProps("avatar");
 const groupSize = inject(AVATAR_SIZE_INJECTION_KEY, void 0);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "neutral", "neutral"));
 const ui = computed(() => theme.value({
-  color: props.color ?? themeProps.value.color,
+  color: effectiveColor.value,
   statusColor: props.statusColor,
   // AvatarGroup's own size (the more locally-specific ancestor) wins over
   // an STheme prop default before falling all the way back to tv()'s own
@@ -40,7 +42,7 @@ const rootAriaLabel = computed(() => props.src ? void 0 : (props.alt ?? props.te
 </script>
 
 <template>
-  <AvatarRoot :as="as" :aria-label="rootAriaLabel" v-bind="rootProps">
+  <AvatarRoot :as="as" :aria-label="rootAriaLabel" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <span v-bind="resolveSlot(ui.content, props.ui?.content)">
       <AvatarImage
         v-if="src"

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

@@ -2,6 +2,7 @@ import type { AvatarImageProps } from 'reka-ui';
 import type { VariantProps } from 'tailwind-variants';
 import type { Component } from 'vue';
 import type { AvatarThemeSlots } from '../theme/avatar.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { avatarTheme } from '../theme/avatar.js';
 type AvatarVariants = VariantProps<typeof avatarTheme>;
@@ -16,7 +17,7 @@ export interface AvatarProps {
     text?: string;
     /** An icon shown in the fallback, in place of `text`. If neither is given, the default semantic `user` icon shows. */
     icon?: string;
-    color?: AvatarVariants['color'];
+    color?: ColorRole;
     /** The presence/status dot's own color - independent of `color`, since presence semantics rarely match the avatar's identity color. */
     statusColor?: AvatarVariants['statusColor'];
     size?: AvatarVariants['size'];

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { BadgeThemeSlots } from '../theme/badge.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { badgeTheme } from '../theme/badge.js';
 type BadgeVariants = VariantProps<typeof badgeTheme>;
@@ -7,9 +8,9 @@ export interface BadgeProps {
     label?: string;
     icon?: string;
     trailingIcon?: string;
-    /** A small solid-colored circle - a status indicator (online/offline, etc), shown alongside the label or alone without one. Always uses the color's solid shade, regardless of `variant`. */
+    /** A status circle. Inline dots use the badge foreground; standalone dots use the role text color. Supply an accessible name when no label is visible. */
     dot?: boolean;
-    color?: BadgeVariants['color'];
+    color?: ColorRole;
     variant?: BadgeVariants['variant'];
     size?: BadgeVariants['size'];
     ui?: UiProp<BadgeThemeSlots>;

package/dist/runtime/components/Badge.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useSlots } from "vue";
 import { badgeTheme } from "../theme/badge";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -20,20 +21,22 @@ const dotOnly = computed(() => !!props.dot && !hasLabel.value);
 const iconOnly = computed(() => !hasLabel.value && !!props.icon && !props.dot);
 const theme = useComponentTheme("badge", badgeTheme);
 const themeProps = useThemeProps("badge");
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "neutral", "neutral"));
 const ui = computed(() => theme.value({
-  color: props.color ?? themeProps.value.color,
+  color: effectiveColor.value,
   variant: props.variant,
   size: props.size ?? themeProps.value.size,
-  iconOnly: iconOnly.value
+  iconOnly: iconOnly.value,
+  dotOnly: dotOnly.value
 }));
 const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
 const dotOnlyProps = useRootProps(() => ui.value.dot, () => props.ui?.dot);
 </script>
 
 <template>
-  <span v-if="dotOnly" v-bind="dotOnlyProps" />
-  <span v-else v-bind="rootProps">
-    <span v-if="dot" v-bind="resolveSlot(ui.dot, props.ui?.dot)" />
+  <span v-if="dotOnly" role="img" :data-selaras-color="effectiveColor" v-bind="dotOnlyProps" />
+  <span v-else :data-selaras-color="effectiveColor" v-bind="rootProps">
+    <span v-if="dot" aria-hidden="true" v-bind="resolveSlot(ui.dot, props.ui?.dot)" />
     <slot name="icon" :class="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon).class">
       <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     </slot>

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { BadgeThemeSlots } from '../theme/badge.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { badgeTheme } from '../theme/badge.js';
 type BadgeVariants = VariantProps<typeof badgeTheme>;
@@ -7,9 +8,9 @@ export interface BadgeProps {
     label?: string;
     icon?: string;
     trailingIcon?: string;
-    /** A small solid-colored circle - a status indicator (online/offline, etc), shown alongside the label or alone without one. Always uses the color's solid shade, regardless of `variant`. */
+    /** A status circle. Inline dots use the badge foreground; standalone dots use the role text color. Supply an accessible name when no label is visible. */
     dot?: boolean;
-    color?: BadgeVariants['color'];
+    color?: ColorRole;
     variant?: BadgeVariants['variant'];
     size?: BadgeVariants['size'];
     ui?: UiProp<BadgeThemeSlots>;

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

@@ -1,4 +1,5 @@
 import type { BreadcrumbThemeSlots } from '../theme/breadcrumb.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 type __VLS_Slots = BreadcrumbSlots;
 export interface BreadcrumbItem {
@@ -9,6 +10,8 @@ export interface BreadcrumbItem {
 }
 export interface BreadcrumbProps {
     items: BreadcrumbItem[];
+    /** The keyboard-focus accent for breadcrumb links. @default 'primary' */
+    color?: ColorRole;
     /** Collapses the middle items behind an overflow menu once items.length exceeds this - the first item plus the last (maxItems - 1) stay visible. */
     maxItems?: number;
     /** Truncates each item's label with an ellipsis. `true` caps at 12rem; a string sets a custom CSS max-width (e.g. '20rem', '300px'). @default false */

package/dist/runtime/components/Breadcrumb.vue

@@ -4,12 +4,14 @@ import { navigateTo } from "#imports";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { breadcrumbTheme } from "../theme/breadcrumb";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Dropdown from "./Dropdown.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   items: { type: Array, required: true },
+  color: { type: null, required: false },
   maxItems: { type: Number, required: false },
   truncate: { type: [Boolean, String], required: false },
   separatorIcon: { type: String, required: false },
@@ -19,7 +21,8 @@ defineSlots();
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("breadcrumb", breadcrumbTheme);
-const ui = computed(() => theme.value());
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const listProps = computed(() => resolveSlot(ui.value.list, props.ui?.list));
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
@@ -65,7 +68,7 @@ function realIndex(item) {
 </script>
 
 <template>
-  <nav :aria-label="messages.breadcrumb" v-bind="rootProps">
+  <nav :aria-label="messages.breadcrumb" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <ol v-bind="listProps">
       <template v-for="(item, index) in visibleItems" :key="realIndex(item)">
         <li v-bind="itemProps">

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

@@ -1,4 +1,5 @@
 import type { BreadcrumbThemeSlots } from '../theme/breadcrumb.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 type __VLS_Slots = BreadcrumbSlots;
 export interface BreadcrumbItem {
@@ -9,6 +10,8 @@ export interface BreadcrumbItem {
 }
 export interface BreadcrumbProps {
     items: BreadcrumbItem[];
+    /** The keyboard-focus accent for breadcrumb links. @default 'primary' */
+    color?: ColorRole;
     /** Collapses the middle items behind an overflow menu once items.length exceeds this - the first item plus the last (maxItems - 1) stay visible. */
     maxItems?: number;
     /** Truncates each item's label with an ellipsis. `true` caps at 12rem; a string sets a custom CSS max-width (e.g. '20rem', '300px'). @default false */

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

@@ -1,20 +1,23 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { Component } from 'vue';
 import type { ButtonThemeSlots } from '../theme/button.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { buttonTheme } from '../theme/button.js';
 type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface ButtonProps {
     /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
     as?: string | Component;
-    color?: ButtonVariants['color'];
+    /** Native button type when `as="button"`. Defaults to `button` so actions inside forms do not submit accidentally. */
+    type?: 'button' | 'submit' | 'reset';
+    color?: ColorRole;
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     block?: boolean;
     disabled?: boolean;
     /** Shows a spinner in the leading icon's place. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy button shouldn't be clickable. */
     loading?: boolean;
-    /** Adds `--ui-shadow-md` - independent of `variant`, so it composes with any of them. */
+    /** Adds `--selaras-resolved-shadow-md` - independent of `variant`, so it composes with any of them. */
     raised?: boolean;
     icon?: string;
     trailingIcon?: string;

package/dist/runtime/components/Button.vue

@@ -6,11 +6,13 @@ import { useMessages } from "../composables/use-messages";
 import { useRippleEnabled } from "../composables/use-ripple";
 import { vRipple } from "../directives/ripple";
 import { buttonTheme } from "../theme/button";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
+  type: { type: String, required: false, default: "button" },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
@@ -31,8 +33,9 @@ const rippleEnabledSetting = useRippleEnabled();
 const rippleEnabled = computed(() => rippleEnabledSetting.value && props.variant !== "text");
 const theme = useComponentTheme("button", buttonTheme);
 const themeProps = useThemeProps("button");
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
-  color: props.color ?? themeProps.value.color,
+  color: effectiveColor.value,
   variant: props.variant,
   size: props.size ?? themeProps.value.size,
   block: props.block,
@@ -43,7 +46,7 @@ const rootProps = useRootProps(() => ui.value.base, () => props.ui?.base);
 </script>
 
 <template>
-  <Primitive v-ripple="rippleEnabled" :as="as" :disabled="disabled" :aria-busy="loading || void 0" v-bind="rootProps">
+  <Primitive v-ripple="rippleEnabled" :as="as" :type="as === 'button' ? type : void 0" :disabled="disabled" :aria-busy="loading || void 0" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <Icon v-if="loading" :name="icons.loading" :class="applyClassPrefix('animate-spin')" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     <!--
       A named slot (not just the `icon` prop) so a consumer building a

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

@@ -1,20 +1,23 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { Component } from 'vue';
 import type { ButtonThemeSlots } from '../theme/button.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { buttonTheme } from '../theme/button.js';
 type ButtonVariants = VariantProps<typeof buttonTheme>;
 export interface ButtonProps {
     /** A tag name ('a', 'span', ...) or a component reference (e.g. NuxtLink, via resolveComponent) - Primitive renders whichever is given. */
     as?: string | Component;
-    color?: ButtonVariants['color'];
+    /** Native button type when `as="button"`. Defaults to `button` so actions inside forms do not submit accidentally. */
+    type?: 'button' | 'submit' | 'reset';
+    color?: ColorRole;
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     block?: boolean;
     disabled?: boolean;
     /** Shows a spinner in the leading icon's place. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy button shouldn't be clickable. */
     loading?: boolean;
-    /** Adds `--ui-shadow-md` - independent of `variant`, so it composes with any of them. */
+    /** Adds `--selaras-resolved-shadow-md` - independent of `variant`, so it composes with any of them. */
     raised?: boolean;
     icon?: string;
     trailingIcon?: string;

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { CheckboxThemeSlots } from '../theme/checkbox.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { checkboxTheme } from '../theme/checkbox.js';
 type CheckboxVariants = VariantProps<typeof checkboxTheme>;
@@ -14,7 +15,7 @@ export interface CheckboxProps {
     invalid?: boolean;
     required?: boolean;
     size?: CheckboxVariants['size'];
-    color?: CheckboxVariants['color'];
+    color?: ColorRole;
     /** `card` wraps the checkbox and label in a bordered box, highlighted when checked - the same treatment RadioGroup's own `card` variant already applies per item. */
     variant?: CheckboxVariants['variant'];
     ui?: UiProp<CheckboxThemeSlots>;

package/dist/runtime/components/Checkbox.vue

@@ -3,6 +3,7 @@ import { CheckboxIndicator, CheckboxRoot } from "reka-ui";
 import { computed } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { checkboxTheme } from "../theme/checkbox";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -26,10 +27,11 @@ const checkboxInvalid = computed(() => props.invalid || (field?.invalid.value ??
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
 const describedBy = computed(() => field?.describedBy.value);
 const theme = useComponentTheme("checkbox", checkboxTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   invalid: checkboxInvalid.value,
   size: effectiveSize.value,
-  color: props.color,
+  color: effectiveColor.value,
   variant: props.variant
 }));
 const rootProps = useRootProps(() => ui.value.root, () => withFallthroughClass(props.description ? "items-start" : void 0, props.ui?.root));
@@ -44,7 +46,7 @@ const glyphState = computed(() => props.modelValue === "indeterminate" ? "indete
 </script>
 
 <template>
-  <label v-bind="rootProps">
+  <label :data-selaras-color="checkboxInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <CheckboxRoot
       :id="checkboxId"
       :model-value="modelValue"

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { CheckboxThemeSlots } from '../theme/checkbox.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { checkboxTheme } from '../theme/checkbox.js';
 type CheckboxVariants = VariantProps<typeof checkboxTheme>;
@@ -14,7 +15,7 @@ export interface CheckboxProps {
     invalid?: boolean;
     required?: boolean;
     size?: CheckboxVariants['size'];
-    color?: CheckboxVariants['color'];
+    color?: ColorRole;
     /** `card` wraps the checkbox and label in a bordered box, highlighted when checked - the same treatment RadioGroup's own `card` variant already applies per item. */
     variant?: CheckboxVariants['variant'];
     ui?: UiProp<CheckboxThemeSlots>;

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ChipThemeSlots } from '../theme/chip.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { chipTheme } from '../theme/chip.js';
 type ChipVariants = VariantProps<typeof chipTheme>;
@@ -12,7 +13,7 @@ export interface ChipProps {
     disabled?: boolean;
     /** Fully-rounded pill shape instead of the default (Badge's own) small radius. */
     rounded?: boolean;
-    color?: ChipVariants['color'];
+    color?: ColorRole;
     variant?: ChipVariants['variant'];
     size?: ChipVariants['size'];
     ui?: UiProp<ChipThemeSlots>;

package/dist/runtime/components/Chip.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { chipTheme } from "../theme/chip";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps, useThemeProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -23,8 +24,9 @@ const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("chip", chipTheme);
 const themeProps = useThemeProps("chip");
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? themeProps.value.color ?? "neutral", "neutral"));
 const ui = computed(() => theme.value({
-  color: props.color ?? themeProps.value.color,
+  color: effectiveColor.value,
   variant: props.variant,
   size: props.size ?? themeProps.value.size,
   disabled: props.disabled,
@@ -36,7 +38,7 @@ const effectiveRemoveLabel = computed(() => props.removeLabel ?? messages.value.
 </script>
 
 <template>
-  <span v-bind="rootProps">
+  <span :data-selaras-color="effectiveColor" v-bind="rootProps">
     <slot name="icon" :class="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon).class">
       <Icon v-if="icon" :name="icon" v-bind="resolveSlot(ui.leadingIcon, props.ui?.leadingIcon)" />
     </slot>

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { ChipThemeSlots } from '../theme/chip.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { chipTheme } from '../theme/chip.js';
 type ChipVariants = VariantProps<typeof chipTheme>;
@@ -12,7 +13,7 @@ export interface ChipProps {
     disabled?: boolean;
     /** Fully-rounded pill shape instead of the default (Badge's own) small radius. */
     rounded?: boolean;
-    color?: ChipVariants['color'];
+    color?: ColorRole;
     variant?: ChipVariants['variant'];
     size?: ChipVariants['size'];
     ui?: UiProp<ChipThemeSlots>;

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { CollapsibleThemeSlots } from '../theme/collapsible.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { collapsibleTheme } from '../theme/collapsible.js';
 type CollapsibleVariants = VariantProps<typeof collapsibleTheme>;
@@ -11,6 +12,8 @@ export interface CollapsibleProps {
     size?: CollapsibleVariants['size'];
     /** Which way the content reveals - `down` expands below the trigger, `up` above it. Flips the chevron's rest/open rotation to match. @default 'down' */
     direction?: CollapsibleVariants['direction'];
+    /** The trigger hover accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<CollapsibleThemeSlots>;
 }
 export interface CollapsibleEmits {