@sewadah/selaras 0.1.1 → 0.3.0

package/dist/runtime/components/ProsePre.vue

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

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

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

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { RadioGroupThemeSlots } from '../theme/radio-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { radioGroupTheme } from '../theme/radio-group.js';
 export interface RadioItem {
@@ -19,7 +20,7 @@ export interface RadioGroupProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: RadioGroupVariants['size'];
-    color?: RadioGroupVariants['color'];
+    color?: ColorRole;
     orientation?: RadioGroupVariants['orientation'];
     variant?: RadioGroupVariants['variant'];
     ui?: UiProp<RadioGroupThemeSlots>;

package/dist/runtime/components/RadioGroup.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
-import { computed } from "vue";
+import { computed, mergeProps } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { radioGroupTheme } from "../theme/radio-group";
-import { resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings, withFallthroughClass } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
@@ -28,17 +29,19 @@ const describedBy = computed(() => field?.describedBy.value);
 const normalizedItems = computed(
   () => props.items.map((item) => typeof item === "string" ? { label: item, value: item } : item)
 );
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const theme = useComponentTheme("radioGroup", radioGroupTheme);
 const ui = computed(() => theme.value({
   invalid: radioGroupInvalid.value,
   size: effectiveSize.value,
-  color: props.color,
+  color: effectiveColor.value,
   orientation: props.orientation,
   variant: props.variant
 }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const themeBindings = useThemeBindings();
 function itemWrapperPropsFor(item) {
-  return resolveSlot(ui.value.itemWrapper, withFallthroughClass(item.description ? "items-start" : void 0, props.ui?.itemWrapper));
+  return mergeProps(themeBindings.value, resolveSlot(ui.value.itemWrapper, withFallthroughClass(item.description ? "items-start" : void 0, props.ui?.itemWrapper)));
 }
 function itemPropsFor(item) {
   return resolveSlot(ui.value.item, withFallthroughClass(item.description ? "mt-0.5" : void 0, props.ui?.item));
@@ -58,10 +61,11 @@ const labelGroupProps = computed(() => resolveSlot(ui.value.labelGroup, props.ui
     :orientation="orientation"
     :aria-invalid="radioGroupInvalid || void 0"
     :aria-describedby="describedBy"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
   >
-    <label v-for="item in normalizedItems" :key="item.value" v-bind="itemWrapperPropsFor(item)">
+    <label v-for="item in normalizedItems" :key="item.value" :data-selaras-color="radioGroupInvalid ? 'danger' : void 0" v-bind="itemWrapperPropsFor(item)">
       <RadioGroupItem :value="item.value" :disabled="item.disabled" v-bind="itemPropsFor(item)">
         <RadioGroupIndicator force-mount v-bind="indicatorProps" />
       </RadioGroupItem>

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { RadioGroupThemeSlots } from '../theme/radio-group.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { radioGroupTheme } from '../theme/radio-group.js';
 export interface RadioItem {
@@ -19,7 +20,7 @@ export interface RadioGroupProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: RadioGroupVariants['size'];
-    color?: RadioGroupVariants['color'];
+    color?: ColorRole;
     orientation?: RadioGroupVariants['orientation'];
     variant?: RadioGroupVariants['variant'];
     ui?: UiProp<RadioGroupThemeSlots>;

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { RatingThemeSlots } from '../theme/rating.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { ratingTheme } from '../theme/rating.js';
 type RatingVariants = VariantProps<typeof ratingTheme>;
@@ -19,7 +20,7 @@ export interface RatingProps {
     invalid?: boolean;
     orientation?: RatingVariants['orientation'];
     size?: RatingVariants['size'];
-    color?: RatingVariants['color'];
+    color?: ColorRole;
     name?: string;
     required?: boolean;
     ui?: UiProp<RatingThemeSlots>;

package/dist/runtime/components/Rating.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { ratingTheme } from "../theme/rating";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -32,10 +33,11 @@ const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
 const describedBy = computed(() => field?.describedBy.value);
 const icons = useIcons();
 const theme = useComponentTheme("rating", ratingTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   orientation: props.orientation,
   size: effectiveSize.value,
-  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));
@@ -47,6 +49,7 @@ const fillIconProps = computed(() => resolveSlot(ui.value.fillIcon, props.ui?.fi
 <template>
   <RatingRoot
     :id="ratingId"
+    :data-selaras-color="effectiveColor"
     :model-value="modelValue"
     :default-value="defaultValue"
     :length="length"

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { RatingThemeSlots } from '../theme/rating.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { ratingTheme } from '../theme/rating.js';
 type RatingVariants = VariantProps<typeof ratingTheme>;
@@ -19,7 +20,7 @@ export interface RatingProps {
     invalid?: boolean;
     orientation?: RatingVariants['orientation'];
     size?: RatingVariants['size'];
-    color?: RatingVariants['color'];
+    color?: ColorRole;
     name?: string;
     required?: boolean;
     ui?: UiProp<RatingThemeSlots>;

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

@@ -1,8 +1,11 @@
 import type { ReadMoreThemeSlots } from '../theme/read-more.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ReadMoreProps {
     /** Collapsed height in pixels - content shorter than this renders with no truncation UI at all. @default 200 */
     previewHeight?: number;
+    /** The disclosure trigger accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<ReadMoreThemeSlots>;
 }
 declare var __VLS_1: {};

package/dist/runtime/components/ReadMore.vue

@@ -1,13 +1,15 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, useId } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { readMoreTheme } from "../theme/read-more";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   previewHeight: { type: Number, required: false, default: 200 },
+  color: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 const icons = useIcons();
@@ -15,6 +17,7 @@ const messages = useMessages();
 const contentEl = ref();
 const contentHeight = ref(0);
 const open = ref(false);
+const contentId = `selaras-read-more-content-${useId()}`;
 let resizeObserver;
 onMounted(() => {
   if (!contentEl.value)
@@ -37,7 +40,8 @@ function toggle() {
   open.value = !open.value;
 }
 const theme = useComponentTheme("readMore", readMoreTheme);
-const ui = computed(() => theme.value({ open: open.value }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ open: open.value, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const fadeProps = computed(() => resolveSlot(ui.value.fade, props.ui?.fade));
@@ -46,12 +50,26 @@ const triggerIconProps = computed(() => resolveSlot(ui.value.triggerIcon, props.
 </script>
 
 <template>
-  <div v-bind="rootProps">
-    <div ref="contentEl" :style="{ maxHeight }" v-bind="contentProps">
+  <div :data-selaras-color="effectiveColor" v-bind="rootProps">
+    <div
+      :id="contentId"
+      ref="contentEl"
+      :style="{ maxHeight }"
+      :inert="truncated && !open"
+      :aria-hidden="truncated && !open ? 'true' : void 0"
+      v-bind="contentProps"
+    >
       <slot />
+      <div v-if="truncated && !open" v-bind="fadeProps" />
     </div>
-    <div v-if="truncated && !open" v-bind="fadeProps" />
-    <button v-if="truncated" type="button" v-bind="triggerProps" @click="toggle">
+    <button
+      v-if="truncated"
+      type="button"
+      :aria-controls="contentId"
+      :aria-expanded="open"
+      v-bind="triggerProps"
+      @click="toggle"
+    >
       {{ open ? messages.showLess : messages.showMore }}
       <Icon :name="icons.chevronDown" v-bind="triggerIconProps" />
     </button>

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

@@ -1,8 +1,11 @@
 import type { ReadMoreThemeSlots } from '../theme/read-more.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface ReadMoreProps {
     /** Collapsed height in pixels - content shorter than this renders with no truncation UI at all. @default 200 */
     previewHeight?: number;
+    /** The disclosure trigger accent. @default 'primary' */
+    color?: ColorRole;
     ui?: UiProp<ReadMoreThemeSlots>;
 }
 declare var __VLS_1: {};

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

@@ -1,60 +1,24 @@
-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 SelectProps {
-    id?: string;
-    name?: string;
-    items: SelectItems;
-    valueKey?: string;
-    labelKey?: string;
-    modelValue?: string | string[];
-    multiple?: boolean;
-    searchable?: 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;
-    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 SelectEmits {
-    '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 { SelectIdentity, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+export type { SelectEmits, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple 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<SelectProps<Entry, Key, Multiple> & {
+        "onUpdate:modelValue"?: ((value: SelectModel<SelectIdentity<Entry, Key>, 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: SelectSlots<Entry, Key>;
+    emit: ((evt: "update:modelValue", value: SelectModel<SelectIdentity<Entry, Key>, 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<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | undefined) => any;
-    "update:searchTerm": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<SelectProps> & 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/Select.vue

@@ -1,14 +1,19 @@
 <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({
   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 },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  multiple: { type: null, required: false },
   searchable: { type: Boolean, required: false },
   virtualize: { type: [Boolean, Object], required: false },
   displayMode: { type: String, required: false },
@@ -16,6 +21,7 @@ const props = defineProps({
   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 },
@@ -24,17 +30,60 @@ const props = defineProps({
   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,
+    // useForwardProps omits undefined values; presence still owns selection.
+    ...controlled ? { modelValue: props.modelValue } : {}
+  };
+}
+function updateValue(value) {
+  emit("update:modelValue", value);
+}
+function itemData(item) {
+  return item;
+}
+function groupData(group) {
+  return group;
+}
+function selectedData(selected) {
+  return selected && {
+    ...selected,
+    value: selected.value,
+    raw: selected.raw === void 0 ? void 0 : itemData(selected.raw)
+  };
+}
+const unscopedSlots = ["header", "footer", "empty", "empty-filter", "filter-icon", "clear-icon", "loading-icon", "dropdown-icon"];
 </script>
 
 <template>
-  <ComboboxSelectBase v-bind="forwarded" :creatable="false">
-    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
-      <slot :name="slotName" v-bind="slotProps ?? {}" />
+  <ComboboxSelectBase
+    v-bind="baseProps()"
+    :creatable="false"
+    @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-if="slots.value" #value="{ selected }">
+      <slot name="value" :selected="selectedData(selected)" />
+    </template>
+    <template v-for="slotName in unscopedSlots.filter((name) => slots[name])" :key="slotName" #[slotName]>
+      <slot :name="slotName" />
     </template>
   </ComboboxSelectBase>
 </template>

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

@@ -1,60 +1,24 @@
-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 SelectProps {
-    id?: string;
-    name?: string;
-    items: SelectItems;
-    valueKey?: string;
-    labelKey?: string;
-    modelValue?: string | string[];
-    multiple?: boolean;
-    searchable?: 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;
-    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 SelectEmits {
-    '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 { SelectIdentity, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+export type { SelectEmits, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple 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<SelectProps<Entry, Key, Multiple> & {
+        "onUpdate:modelValue"?: ((value: SelectModel<SelectIdentity<Entry, Key>, 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: SelectSlots<Entry, Key>;
+    emit: ((evt: "update:modelValue", value: SelectModel<SelectIdentity<Entry, Key>, 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<SelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | undefined) => any;
-    "update:searchTerm": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<SelectProps> & 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/Separator.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SeparatorThemeSlots } from '../theme/separator.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { separatorTheme } from '../theme/separator.js';
 type SeparatorVariants = VariantProps<typeof separatorTheme>;
@@ -7,7 +8,7 @@ type __VLS_Slots = SeparatorSlots;
 export interface SeparatorProps {
     orientation?: SeparatorVariants['orientation'];
     variant?: SeparatorVariants['variant'];
-    color?: SeparatorVariants['color'];
+    color?: ColorRole;
     /** Purely visual, not announced to assistive tech (role="none" instead of role="separator"). */
     decorative?: boolean;
     ui?: UiProp<SeparatorThemeSlots>;

package/dist/runtime/components/Separator.vue

@@ -2,6 +2,7 @@
 import { Separator } from "reka-ui";
 import { computed } from "vue";
 import { separatorTheme } from "../theme/separator";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -13,10 +14,11 @@ const props = defineProps({
 });
 defineSlots();
 const theme = useComponentTheme("separator", separatorTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "neutral", "neutral"));
 const ui = computed(() => theme.value({
   orientation: props.orientation,
   variant: props.variant,
-  color: props.color
+  color: effectiveColor.value
 }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const lineProps = computed(() => resolveSlot(ui.value.line, props.ui?.line));
@@ -24,7 +26,7 @@ const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
 </script>
 
 <template>
-  <Separator :orientation="orientation" :decorative="decorative" v-bind="rootProps">
+  <Separator :orientation="orientation" :decorative="decorative" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <span v-bind="lineProps" />
     <template v-if="$slots.default">
       <span v-bind="labelProps">

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SeparatorThemeSlots } from '../theme/separator.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { separatorTheme } from '../theme/separator.js';
 type SeparatorVariants = VariantProps<typeof separatorTheme>;
@@ -7,7 +8,7 @@ type __VLS_Slots = SeparatorSlots;
 export interface SeparatorProps {
     orientation?: SeparatorVariants['orientation'];
     variant?: SeparatorVariants['variant'];
-    color?: SeparatorVariants['color'];
+    color?: ColorRole;
     /** Purely visual, not announced to assistive tech (role="none" instead of role="separator"). */
     decorative?: boolean;
     ui?: UiProp<SeparatorThemeSlots>;

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

@@ -2,6 +2,8 @@ import type { SlideoverThemeSlots } from '../theme/slideover.js';
 import type { UiProp } from '../utils/ui.js';
 export interface SlideoverProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled slideover. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Which edge the panel slides in from. */