@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/internal/ComboboxSelectBase.vue.d.ts

@@ -1,16 +1,24 @@
 import type { VariantProps } from 'tailwind-variants';
-import type { SelectItems, SelectOption } from '../composables/use-combobox-select.js';
 import type { SelectThemeSlots } from '../theme/select.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
+import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
 type SelectVariants = VariantProps<typeof selectTheme>;
 export interface ComboboxSelectBaseProps {
     id?: string;
     name?: string;
+    /** ID of an associated form outside the component's ancestors. */
+    form?: string;
     items: SelectItems;
     valueKey?: string;
     labelKey?: string;
-    modelValue?: string | string[];
+    open?: boolean;
+    /** Initial uncontrolled open state. */
+    defaultOpen?: boolean;
+    modelValue?: string | number | (string | number)[];
+    /** Initial uncontrolled selection and native form reset target. */
+    defaultValue?: string | number | (string | number)[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -22,10 +30,11 @@ export interface ComboboxSelectBaseProps {
     loading?: boolean;
     placeholder?: string;
     disabled?: boolean;
+    required?: boolean;
     size?: SelectVariants['size'];
     invalid?: boolean;
     /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
-    color?: SelectVariants['color'];
+    color?: ColorRole;
     clearable?: boolean;
     dropdown?: boolean;
     creatable?: boolean;
@@ -35,30 +44,33 @@ export interface ComboboxSelectBaseProps {
     resetSearchTermOnSelect?: boolean;
     /** Shows a small pointer triangle connecting the panel to its trigger. */
     arrow?: boolean;
-    /** Below 768px viewport width, presents the popover 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;
+    /** Opts into the component's accessible small-screen presentation. */
+    adaptive?: boolean;
     ui?: UiProp<SelectThemeSlots>;
 }
 export interface ComboboxSelectBaseEmits {
-    'update:modelValue': [value: string | string[] | undefined];
+    'update:open': [value: boolean];
+    'update:modelValue': [value: string | number | (string | number)[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption;
-}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_138: {
-    item: SelectOption;
-}, __VLS_158: {
-    selected: import("../composables/use-combobox-select.js").ResolvedOption | undefined;
-}, __VLS_169: {}, __VLS_176: {}, __VLS_183: {}, __VLS_211: {}, __VLS_214: {}, __VLS_217: {}, __VLS_220: {}, __VLS_223: {
-    item: SelectOption;
-}, __VLS_226: {
-    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
-}, __VLS_229: {}, __VLS_260: {}, __VLS_263: {}, __VLS_266: {}, __VLS_269: {}, __VLS_272: {
-    item: SelectOption;
-}, __VLS_275: {
-    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
-}, __VLS_278: {};
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_140: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_160: {
+    selected: import("./combobox-select.js").ResolvedOption | undefined;
+}, __VLS_171: {}, __VLS_178: {}, __VLS_185: {}, __VLS_213: {}, __VLS_216: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_228: {
+    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_231: {}, __VLS_267: string, __VLS_268: {}, __VLS_271: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_274: {
+    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_267>]?: (props: typeof __VLS_268) => any;
+} & {
     item?: (props: typeof __VLS_43) => any;
 } & {
     'clear-icon'?: (props: typeof __VLS_94) => any;
@@ -67,49 +79,41 @@ type __VLS_Slots = {} & {
 } & {
     'dropdown-icon'?: (props: typeof __VLS_116) => any;
 } & {
-    item?: (props: typeof __VLS_138) => any;
-} & {
-    value?: (props: typeof __VLS_158) => any;
-} & {
-    'clear-icon'?: (props: typeof __VLS_169) => any;
-} & {
-    'loading-icon'?: (props: typeof __VLS_176) => any;
-} & {
-    'dropdown-icon'?: (props: typeof __VLS_183) => any;
-} & {
-    header?: (props: typeof __VLS_211) => any;
+    item?: (props: typeof __VLS_140) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_214) => any;
+    value?: (props: typeof __VLS_160) => any;
 } & {
-    empty?: (props: typeof __VLS_217) => any;
+    'clear-icon'?: (props: typeof __VLS_171) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_220) => any;
+    'loading-icon'?: (props: typeof __VLS_178) => any;
 } & {
-    item?: (props: typeof __VLS_223) => any;
+    'dropdown-icon'?: (props: typeof __VLS_185) => any;
 } & {
-    group?: (props: typeof __VLS_226) => any;
+    header?: (props: typeof __VLS_213) => any;
 } & {
-    footer?: (props: typeof __VLS_229) => any;
+    'filter-icon'?: (props: typeof __VLS_216) => any;
 } & {
-    header?: (props: typeof __VLS_260) => any;
+    empty?: (props: typeof __VLS_219) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_263) => any;
+    'empty-filter'?: (props: typeof __VLS_222) => any;
 } & {
-    empty?: (props: typeof __VLS_266) => any;
+    item?: (props: typeof __VLS_225) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_269) => any;
+    group?: (props: typeof __VLS_228) => any;
 } & {
-    item?: (props: typeof __VLS_272) => any;
+    footer?: (props: typeof __VLS_231) => any;
 } & {
-    group?: (props: typeof __VLS_275) => any;
+    item?: (props: typeof __VLS_271) => any;
 } & {
-    footer?: (props: typeof __VLS_278) => any;
+    group?: (props: typeof __VLS_274) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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>;

package/dist/runtime/internal/ComboboxSelectBody.d.vue.ts

@@ -1,20 +1,21 @@
-import type { ResolvedOption, SelectItems, SelectOption } from '../composables/use-combobox-select.js';
+import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
+    listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
-    flatOptions: ResolvedOption[];
+    flatOptions: ResolvedItemOption[];
     virtualizeConfig: {
         estimateSize: number;
         overscan: number;
     } | null;
-    virtualizedOptions: ResolvedOption[];
-    toOption: (entry: SelectOption) => ResolvedOption;
+    virtualizedOptions: ResolvedItemOption[];
+    toOption: (entry: SelectOption) => ResolvedItemOption;
     groupOptions: (group: {
-        items: SelectOption[];
-    }) => ResolvedOption[];
+        items: readonly SelectOption[];
+    }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
     searchWrapperProps?: Record<string, unknown>;
@@ -28,35 +29,40 @@ export interface ComboboxSelectBodyProps {
 export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_19: {}, __VLS_33: {}, __VLS_53: {
-    item: SelectOption;
-}, __VLS_78: {
-    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
-}, __VLS_86: {
-    item: SelectOption;
-}, __VLS_105: {
-    item: SelectOption;
-}, __VLS_118: {};
+declare function focusSearch(): boolean;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_82: {
+    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_90: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_109: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_122: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
     'filter-icon'?: (props: typeof __VLS_3) => any;
 } & {
-    empty?: (props: typeof __VLS_19) => any;
+    empty?: (props: typeof __VLS_21) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_33) => any;
+    'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    item?: (props: typeof __VLS_53) => any;
+    'empty-filter'?: (props: typeof __VLS_37) => any;
 } & {
-    group?: (props: typeof __VLS_78) => any;
+    item?: (props: typeof __VLS_57) => any;
 } & {
-    item?: (props: typeof __VLS_86) => any;
+    group?: (props: typeof __VLS_82) => any;
 } & {
-    item?: (props: typeof __VLS_105) => any;
+    item?: (props: typeof __VLS_90) => any;
 } & {
-    footer?: (props: typeof __VLS_118) => any;
+    item?: (props: typeof __VLS_109) => any;
+} & {
+    footer?: (props: typeof __VLS_122) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
+    focusSearch: typeof focusSearch;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:searchText": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{
     "onUpdate:searchText"?: ((value: string) => any) | undefined;

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -7,19 +7,29 @@ import {
   ComboboxItemIndicator,
   ComboboxLabel,
   ComboboxViewport,
-  ComboboxVirtualizer
+  ComboboxVirtualizer,
+  ListboxContent,
+  ListboxFilter,
+  ListboxGroup,
+  ListboxGroupLabel,
+  ListboxItem,
+  ListboxItemIndicator,
+  ListboxVirtualizer,
+  useFilter
 } from "reka-ui";
+import { computed, mergeProps, ref, useId } from "vue";
 import Icon from "../components/Icon.vue";
-import { isOptionGroup } from "../composables/use-combobox-select";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
+import { isOptionGroup } from "./combobox-select";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
+  listbox: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   creatable: { type: Boolean, required: false },
   searchText: { type: String, required: true },
   displayValue: { type: Function, required: true },
-  items: { type: Array, required: true },
+  items: { type: null, required: true },
   flatOptions: { type: Array, required: true },
   virtualizeConfig: { type: [Object, null], required: true },
   virtualizedOptions: { type: Array, required: true },
@@ -38,6 +48,27 @@ defineProps({
 const emit = defineEmits(["update:searchText"]);
 const icons = useIcons();
 const messages = useMessages();
+const listboxId = `selaras-select-options-${useId()}`;
+const searchInput = ref();
+const { contains } = useFilter({ sensitivity: "base" });
+const primitives = computed(() => props.listbox ? { input: ListboxFilter, viewport: ListboxContent, group: ListboxGroup, label: ListboxGroupLabel, item: ListboxItem, indicator: ListboxItemIndicator, virtualizer: ListboxVirtualizer } : { input: ComboboxInput, viewport: ComboboxViewport, group: ComboboxGroup, label: ComboboxLabel, item: ComboboxItem, indicator: ComboboxItemIndicator, virtualizer: ComboboxVirtualizer });
+function matches(option) {
+  return !props.listbox || !props.searchable || contains(option.label, props.searchText);
+}
+const visibleOptions = computed(() => props.flatOptions.filter(matches));
+const virtualOptions = computed(() => props.listbox ? visibleOptions.value : props.virtualizedOptions);
+const filterInputProps = computed(() => mergeProps(
+  props.listbox ? { "role": "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listboxId, "aria-label": messages.value.search } : { displayValue: props.displayValue },
+  props.searchInputProps ?? {}
+));
+function focusSearch() {
+  const element = searchInput.value?.$el;
+  if (!element)
+    return false;
+  element.focus();
+  return true;
+}
+defineExpose({ focusSearch });
 </script>
 
 <template>
@@ -45,13 +76,14 @@ const messages = useMessages();
 
   <div v-if="searchable && !creatable" v-bind="searchWrapperProps">
     <slot name="filter-icon">
-      <Icon :name="icons.search" class="size-4 text-[var(--ui-text-muted)]" />
+      <Icon :name="icons.search" class="size-4 text-[var(--selaras-resolved-text-muted)]" />
     </slot>
-    <ComboboxInput
+    <component
+      :is="primitives.input"
+      ref="searchInput"
       :model-value="searchText"
-      :display-value="displayValue"
       :placeholder="messages.search"
-      v-bind="searchInputProps"
+      v-bind="filterInputProps"
       @update:model-value="(value) => emit('update:searchText', String(value ?? ''))"
       @keydown="onSearchKeydown"
       @blur="onSearchBlur"
@@ -63,29 +95,29 @@ const messages = useMessages();
       {{ messages.noOptions }}
     </slot>
   </div>
-  <ComboboxViewport v-else v-bind="viewportProps">
-    <ComboboxEmpty v-bind="emptyProps">
+  <component :is="primitives.viewport" v-else :id="listbox ? listboxId : void 0" v-bind="viewportProps">
+    <div v-if="listbox && visibleOptions.length === 0" v-bind="emptyProps">
+      <slot name="empty-filter">
+        {{ messages.noResultsFound }}
+      </slot>
+    </div>
+    <ComboboxEmpty v-else-if="!listbox" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
     </ComboboxEmpty>
 
-    <!--
-      @tanstack/vue-virtual measures real DOM/scroll state, so it can't
-      render identically during SSR - forcing it through anyway causes a
-      hydration mismatch that (confirmed empirically) breaks click
-      interactivity page-wide, not just on this component. Client-only
-      sidesteps it; the popover is closed at SSR time anyway, so there's
-      nothing meaningful to show real users in the fallback.
-    -->
+    <!-- Virtual row measurement needs client DOM, including default-open surfaces. -->
     <ClientOnly v-if="virtualizeConfig">
-      <ComboboxVirtualizer
+      <component
+        :is="primitives.virtualizer"
         v-slot="{ option, virtualItem }"
-        :options="virtualizedOptions"
+        :options="virtualOptions"
         :estimate-size="virtualizeConfig.estimateSize"
         :overscan="virtualizeConfig.overscan"
       >
-        <ComboboxItem
+        <component
+          :is="primitives.item"
           :key="String(virtualItem.key)"
           :value="option.value"
           :disabled="option.disabled"
@@ -95,23 +127,24 @@ const messages = useMessages();
           <slot name="item" :item="option.raw">
             {{ option.label }}
           </slot>
-          <ComboboxItemIndicator v-bind="itemIndicatorProps">
+          <component :is="primitives.indicator" v-bind="itemIndicatorProps">
             <Icon :name="icons.check" class="size-4" />
-          </ComboboxItemIndicator>
-        </ComboboxItem>
-      </ComboboxVirtualizer>
+          </component>
+        </component>
+      </component>
     </ClientOnly>
 
     <template v-else>
       <template v-for="(entry, index) in items" :key="index">
-        <ComboboxGroup v-if="isOptionGroup(entry)">
-          <ComboboxLabel v-bind="groupProps">
+        <component :is="primitives.group" v-if="isOptionGroup(entry) && groupOptions(entry).some(matches)">
+          <component :is="primitives.label" v-bind="groupProps">
             <slot name="group" :group="entry">
               {{ entry.label }}
             </slot>
-          </ComboboxLabel>
-          <ComboboxItem
-            v-for="option in groupOptions(entry)"
+          </component>
+          <component
+            :is="primitives.item"
+            v-for="option in groupOptions(entry).filter(matches)"
             :key="option.value"
             :value="option.value"
             :disabled="option.disabled"
@@ -120,13 +153,14 @@ const messages = useMessages();
             <slot name="item" :item="option.raw">
               {{ option.label }}
             </slot>
-            <ComboboxItemIndicator v-bind="itemIndicatorProps">
+            <component :is="primitives.indicator" v-bind="itemIndicatorProps">
               <Icon :name="icons.check" class="size-4" />
-            </ComboboxItemIndicator>
-          </ComboboxItem>
-        </ComboboxGroup>
-        <ComboboxItem
-          v-else
+            </component>
+          </component>
+        </component>
+        <component
+          :is="primitives.item"
+          v-else-if="!isOptionGroup(entry) && matches(toOption(entry))"
           :value="toOption(entry).value"
           :disabled="toOption(entry).disabled"
           v-bind="itemProps"
@@ -134,13 +168,13 @@ const messages = useMessages();
           <slot name="item" :item="entry">
             {{ toOption(entry).label }}
           </slot>
-          <ComboboxItemIndicator v-bind="itemIndicatorProps">
+          <component :is="primitives.indicator" v-bind="itemIndicatorProps">
             <Icon :name="icons.check" class="size-4" />
-          </ComboboxItemIndicator>
-        </ComboboxItem>
+          </component>
+        </component>
       </template>
     </template>
-  </ComboboxViewport>
+  </component>
 
   <slot name="footer" />
 </template>

package/dist/runtime/internal/ComboboxSelectBody.vue.d.ts

@@ -1,20 +1,21 @@
-import type { ResolvedOption, SelectItems, SelectOption } from '../composables/use-combobox-select.js';
+import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
+    listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
-    flatOptions: ResolvedOption[];
+    flatOptions: ResolvedItemOption[];
     virtualizeConfig: {
         estimateSize: number;
         overscan: number;
     } | null;
-    virtualizedOptions: ResolvedOption[];
-    toOption: (entry: SelectOption) => ResolvedOption;
+    virtualizedOptions: ResolvedItemOption[];
+    toOption: (entry: SelectOption) => ResolvedItemOption;
     groupOptions: (group: {
-        items: SelectOption[];
-    }) => ResolvedOption[];
+        items: readonly SelectOption[];
+    }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
     searchWrapperProps?: Record<string, unknown>;
@@ -28,35 +29,40 @@ export interface ComboboxSelectBodyProps {
 export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_19: {}, __VLS_33: {}, __VLS_53: {
-    item: SelectOption;
-}, __VLS_78: {
-    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
-}, __VLS_86: {
-    item: SelectOption;
-}, __VLS_105: {
-    item: SelectOption;
-}, __VLS_118: {};
+declare function focusSearch(): boolean;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_82: {
+    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_90: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_109: {
+    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_122: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
     'filter-icon'?: (props: typeof __VLS_3) => any;
 } & {
-    empty?: (props: typeof __VLS_19) => any;
+    empty?: (props: typeof __VLS_21) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_33) => any;
+    'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    item?: (props: typeof __VLS_53) => any;
+    'empty-filter'?: (props: typeof __VLS_37) => any;
 } & {
-    group?: (props: typeof __VLS_78) => any;
+    item?: (props: typeof __VLS_57) => any;
 } & {
-    item?: (props: typeof __VLS_86) => any;
+    group?: (props: typeof __VLS_82) => any;
 } & {
-    item?: (props: typeof __VLS_105) => any;
+    item?: (props: typeof __VLS_90) => any;
 } & {
-    footer?: (props: typeof __VLS_118) => any;
+    item?: (props: typeof __VLS_109) => any;
+} & {
+    footer?: (props: typeof __VLS_122) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
+    focusSearch: typeof focusSearch;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:searchText": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{
     "onUpdate:searchText"?: ((value: string) => any) | undefined;

package/dist/runtime/internal/DatePickerCalendarBody.d.vue.ts

@@ -1,11 +1,9 @@
 import type { DateValue } from '@internationalized/date';
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
+import type { ColorRole } from '../utils/color-registry.js';
 export interface DatePickerCalendarBodyProps {
     internalView: 'date' | 'month' | 'year';
-    color?: ButtonVariants['color'];
-    activeColor?: ButtonVariants['color'];
+    color?: ColorRole;
+    activeColor?: ColorRole;
     placeholder: DateValue;
     monthGridItems: {
         value: DateValue;

package/dist/runtime/internal/DatePickerCalendarBody.vue

@@ -60,9 +60,9 @@ defineProps({
 const icons = useIcons();
 const messages = useMessages();
 const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
-const headingButtonUi = "rounded-[var(--ui-radius-sm)] px-1.5 py-0.5 transition-colors hover:bg-[var(--ui-bg-elevated)] disabled:hover:bg-transparent disabled:cursor-default";
+const headingButtonUi = "rounded-[var(--selaras-resolved-radius-sm)] px-1.5 py-0.5 transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] disabled:hover:bg-transparent disabled:cursor-default";
 const cellTriggerUi = {
-  base: "relative data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--ui-primary)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through"
+  base: "relative data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--_selaras-color-fill)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through"
 };
 </script>
 

package/dist/runtime/internal/DatePickerCalendarBody.vue.d.ts

@@ -1,11 +1,9 @@
 import type { DateValue } from '@internationalized/date';
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
+import type { ColorRole } from '../utils/color-registry.js';
 export interface DatePickerCalendarBodyProps {
     internalView: 'date' | 'month' | 'year';
-    color?: ButtonVariants['color'];
-    activeColor?: ButtonVariants['color'];
+    color?: ColorRole;
+    activeColor?: ColorRole;
     placeholder: DateValue;
     monthGridItems: {
         value: DateValue;

package/dist/runtime/internal/DatePickerRangeCalendarBody.d.vue.ts

@@ -1,9 +1,7 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
+import type { ColorRole } from '../utils/color-registry.js';
 export interface DatePickerRangeCalendarBodyProps {
-    color?: ButtonVariants['color'];
-    activeColor?: ButtonVariants['color'];
+    color?: ColorRole;
+    activeColor?: ColorRole;
     headerProps?: Record<string, unknown>;
     headingProps?: Record<string, unknown>;
     gridsProps?: Record<string, unknown>;

package/dist/runtime/internal/DatePickerRangeCalendarBody.vue

@@ -31,7 +31,7 @@ const icons = useIcons();
 const messages = useMessages();
 const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
 const rangeCellTriggerUi = {
-  base: "relative w-full rounded-none data-[selection-start]:rounded-s-full data-[selection-end]:rounded-e-full data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--ui-primary)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through"
+  base: "relative w-full rounded-none data-[selection-start]:rounded-s-full data-[selection-end]:rounded-e-full data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--_selaras-color-fill)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through"
 };
 </script>
 

package/dist/runtime/internal/DatePickerRangeCalendarBody.vue.d.ts

@@ -1,9 +1,7 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
+import type { ColorRole } from '../utils/color-registry.js';
 export interface DatePickerRangeCalendarBodyProps {
-    color?: ButtonVariants['color'];
-    activeColor?: ButtonVariants['color'];
+    color?: ColorRole;
+    activeColor?: ColorRole;
     headerProps?: Record<string, unknown>;
     headingProps?: Record<string, unknown>;
     gridsProps?: Record<string, unknown>;

package/dist/runtime/internal/DatePickerTimeBody.d.vue.ts

@@ -1,6 +1,4 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
+import type { ColorRole } from '../utils/color-registry.js';
 export interface DatePickerTimeBodyProps {
     hour: number;
     minute: number;
@@ -13,7 +11,7 @@ export interface DatePickerTimeBodyProps {
     setHour: (hour24: number) => void;
     setMinute: (minute: number) => void;
     closeOnSelect?: boolean;
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     /** Closes the popover/modal - the Done button's own action. */
     close: () => void;
     timeSectionProps?: Record<string, unknown>;

package/dist/runtime/internal/DatePickerTimeBody.vue.d.ts

@@ -1,6 +1,4 @@
-import type { VariantProps } from 'tailwind-variants';
-import type { buttonTheme } from '../theme/button.js';
-type ButtonVariants = VariantProps<typeof buttonTheme>;
+import type { ColorRole } from '../utils/color-registry.js';
 export interface DatePickerTimeBodyProps {
     hour: number;
     minute: number;
@@ -13,7 +11,7 @@ export interface DatePickerTimeBodyProps {
     setHour: (hour24: number) => void;
     setMinute: (minute: number) => void;
     closeOnSelect?: boolean;
-    activeColor?: ButtonVariants['color'];
+    activeColor?: ColorRole;
     /** Closes the popover/modal - the Done button's own action. */
     close: () => void;
     timeSectionProps?: Record<string, unknown>;