@sewadah/selaras 0.3.1 → 0.3.2

package/dist/runtime/internal/combobox-select.js

@@ -2,30 +2,42 @@ import { computed } from "vue";
 function optionValue(value) {
   if (typeof value === "string" || typeof value === "number" && Number.isFinite(value))
     return value;
-  throw new TypeError("[selaras] Select option values must be strings or finite numbers.");
+  if (typeof value === "object" && value !== null && !Array.isArray(value))
+    return value;
+  throw new TypeError("[selaras] Select option values must be strings, finite numbers, or objects.");
 }
 export function isOptionGroup(entry) {
-  return typeof entry.label === "string" && "items" in entry && Array.isArray(entry.items);
+  return typeof entry === "object" && entry !== null && !Array.isArray(entry) && "label" in entry && typeof entry.label === "string" && "items" in entry && Array.isArray(entry.items);
 }
 export function flattenItems(items) {
   return items.flatMap((entry) => isOptionGroup(entry) ? entry.items : [entry]);
 }
 export function useComboboxSelect(props, emit, { creatable = false } = {}) {
-  const valueKey = computed(() => props.valueKey ?? "value");
+  const valueKey = computed(() => props.valueKey);
   const labelKey = computed(() => props.labelKey ?? "label");
   const flatOptions = computed(() => {
     const identities = /* @__PURE__ */ new Set();
-    return flattenItems(props.items).map((raw) => {
-      const value = optionValue(raw[valueKey.value]);
+    return flattenItems(props.items).map((raw, index) => {
+      if (typeof raw === "string" || typeof raw === "number") {
+        const value2 = optionValue(raw);
+        if (identities.has(value2))
+          throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate value: ${typeof value2} ${JSON.stringify(value2)}.`);
+        identities.add(value2);
+        return { value: value2, key: `${typeof value2}:${String(value2)}`, label: String(value2), disabled: false, raw };
+      }
+      const option = raw;
+      const key = valueKey.value ?? (option.value !== void 0 ? "value" : void 0);
+      const value = optionValue(key === void 0 ? option : option[key]);
       if (identities.has(value)) {
-        throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate ${valueKey.value}: ${typeof value} ${JSON.stringify(value)}.`);
+        throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate ${key ?? "object identity"}: ${typeof value} ${JSON.stringify(value)}.`);
       }
       identities.add(value);
       return {
         value,
-        label: String(raw[labelKey.value] ?? value),
-        disabled: !!raw.disabled,
-        raw
+        key: typeof value === "object" ? `object:${index}` : `${typeof value}:${String(value)}`,
+        label: String(option[labelKey.value] ?? (typeof value === "object" ? "" : value)),
+        disabled: !!option.disabled,
+        raw: option
       };
     });
   });
@@ -36,14 +48,24 @@ export function useComboboxSelect(props, emit, { creatable = false } = {}) {
     return Array.isArray(v) ? v : [v];
   });
   function resolveOption(value) {
-    return flatOptions.value.find((o) => o.value === value) ?? { value, label: String(value), disabled: false, raw: void 0 };
+    const option = flatOptions.value.find((o) => o.value === value);
+    if (option)
+      return option;
+    const label = typeof value === "object" ? value[labelKey.value] : value;
+    return { value, key: typeof value === "object" ? "missing-object" : `${typeof value}:${String(value)}`, label: String(label ?? ""), disabled: false, raw: void 0 };
   }
   function toOption(raw) {
+    if (typeof raw === "string" || typeof raw === "number")
+      return { value: optionValue(raw), key: `${typeof raw}:${String(raw)}`, label: String(raw), disabled: false, raw };
+    const option = raw;
+    const key = valueKey.value ?? (option.value !== void 0 ? "value" : void 0);
+    const value = optionValue(key === void 0 ? option : option[key]);
     return {
-      value: optionValue(raw[valueKey.value]),
-      label: String(raw[labelKey.value] ?? raw[valueKey.value] ?? ""),
-      disabled: !!raw.disabled,
-      raw
+      value,
+      key: typeof value === "object" ? "object:unknown" : `${typeof value}:${String(value)}`,
+      label: String(option[labelKey.value] ?? (typeof value === "object" ? "" : value)),
+      disabled: !!option.disabled,
+      raw: option
     };
   }
   const selectedOptions = computed(() => selectedValues.value.map(resolveOption));

package/dist/runtime/internal/programmatic-services.d.ts

@@ -1,5 +1,6 @@
 import type { Component, Ref } from 'vue';
 import type { ToastOptions } from '../composables/use-toast.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { ProgrammaticThemeSnapshot } from '../utils/programmatic-theme.js';
 interface ProgrammaticOverlayInstance {
     id: number;
@@ -47,6 +48,15 @@ export interface SlideoverInstance extends ProgrammaticOverlayInstance {
     transition?: boolean;
     _theme: ProgrammaticThemeSnapshot;
 }
+export interface ConfirmInstance extends ProgrammaticOverlayInstance {
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: ColorRole;
+    icon?: string;
+    _theme: ProgrammaticThemeSnapshot;
+}
 export interface ToastItem extends ToastOptions {
     id: number;
     _theme: ProgrammaticThemeSnapshot;
@@ -69,5 +79,6 @@ export interface ToastService {
 export declare const useModalService: () => ProgrammaticOverlayService<ModalInstance>;
 export declare const useDrawerService: () => ProgrammaticOverlayService<DrawerInstance>;
 export declare const useSlideoverService: () => ProgrammaticOverlayService<SlideoverInstance>;
+export declare const useConfirmService: () => ProgrammaticOverlayService<ConfirmInstance>;
 export declare function useToastService(): ToastService;
 export {};

package/dist/runtime/internal/programmatic-services.js

@@ -40,6 +40,7 @@ function createOverlayService() {
 export const useModalService = createOverlayService();
 export const useDrawerService = createOverlayService();
 export const useSlideoverService = createOverlayService();
+export const useConfirmService = createOverlayService();
 const useToastState = createAppScopedState(() => ({
   toasts: ref([]),
   max: ref(5),

package/dist/runtime/theme/badge.d.ts

@@ -18,6 +18,9 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         outline: {
             base: string;
         };
+        subtle: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -74,6 +77,9 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         outline: {
             base: string;
         };
+        subtle: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -130,6 +136,9 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         outline: {
             base: string;
         };
+        subtle: {
+            base: string;
+        };
     };
     size: {
         sm: {

package/dist/runtime/theme/badge.js

@@ -25,7 +25,8 @@ export const badgeTheme = tv({
     variant: {
       solid: { base: "bg-[var(--_selaras-color-fill)] text-[var(--_selaras-color-on-fill)]" },
       soft: { base: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-on-subtle)]" },
-      outline: { base: "ring-1 ring-inset ring-[var(--_selaras-color-border)] text-[var(--_selaras-color-text)]" }
+      outline: { base: "ring-1 ring-inset ring-[var(--_selaras-color-border)] text-[var(--_selaras-color-text)]" },
+      subtle: { base: "bg-[var(--selaras-resolved-surface-elevated)] ring-1 ring-[var(--selaras-resolved-border-default)] text-[var(--_selaras-color-text)]" }
     },
     size: {
       sm: { base: "h-4 px-1 text-xs", leadingIcon: "size-2.5", trailingIcon: "size-2.5", dot: "size-1.5" },

package/dist/runtime/theme/button.d.ts

@@ -15,6 +15,9 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         soft: {
             base: string;
         };
+        subtle: {
+            base: string;
+        };
         outline: {
             base: string;
         };
@@ -24,6 +27,9 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         text: {
             base: string;
         };
+        link: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -76,6 +82,9 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         soft: {
             base: string;
         };
+        subtle: {
+            base: string;
+        };
         outline: {
             base: string;
         };
@@ -85,6 +94,9 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         text: {
             base: string;
         };
+        link: {
+            base: string;
+        };
     };
     size: {
         sm: {
@@ -137,6 +149,9 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         soft: {
             base: string;
         };
+        subtle: {
+            base: string;
+        };
         outline: {
             base: string;
         };
@@ -146,6 +161,9 @@ export declare const buttonTheme: import("tailwind-variants").TVReturnType<{
         text: {
             base: string;
         };
+        link: {
+            base: string;
+        };
     };
     size: {
         sm: {

package/dist/runtime/theme/button.js

@@ -19,10 +19,13 @@ export const buttonTheme = tv({
     variant: {
       solid: { base: "bg-[var(--_selaras-color-fill)] text-[var(--_selaras-color-on-fill)] hover:bg-[var(--_selaras-color-fill-hover)] active:bg-[var(--_selaras-color-fill-pressed)]" },
       soft: { base: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-on-subtle)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
+      subtle: { base: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-on-subtle)] ring-1 ring-inset ring-[var(--_selaras-color-border)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
       outline: { base: "ring-1 ring-inset ring-[var(--_selaras-color-border)] text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
       ghost: { base: "text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle-hover)] active:bg-[var(--_selaras-color-subtle-pressed)]" },
       // Text actions never paint a background, including their interaction states.
-      text: { base: "text-[var(--_selaras-color-text)] hover:text-[var(--_selaras-color-text-hover)] active:text-[var(--_selaras-color-text-pressed)]" }
+      text: { base: "text-[var(--_selaras-color-text)] hover:text-[color-mix(in_srgb,var(--_selaras-color-text-hover)_60%,var(--selaras-resolved-text-default))] active:text-[color-mix(in_srgb,var(--_selaras-color-text-pressed)_40%,var(--selaras-resolved-text-default))]" },
+      // Link actions underline on hover while keeping text's interaction treatment.
+      link: { base: "text-[var(--_selaras-color-text)] underline-offset-4 hover:underline hover:text-[color-mix(in_srgb,var(--_selaras-color-text-hover)_60%,var(--selaras-resolved-text-default))] active:text-[color-mix(in_srgb,var(--_selaras-color-text-pressed)_40%,var(--selaras-resolved-text-default))]" }
     },
     size: {
       sm: { base: "h-8 px-3 text-sm", leadingIcon: "size-4", trailingIcon: "size-4" },

package/dist/runtime/theme/toast.js

@@ -10,7 +10,7 @@ export const toastTheme = tv({
     // Cards behind the front one cover their own content with an overlay
     // of the card surface (after:), so they read as a clean pile and fade
     // their content back in when they move to the front or fan out.
-    root: "absolute inset-x-4 flex items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--_selaras-color-subtle,var(--selaras-resolved-surface-default))] p-4 pe-10 shadow-[var(--selaras-resolved-shadow-lg)] ring-1 ring-[var(--selaras-resolved-border-default)] transition-[transform,opacity,height] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-[inherit] after:opacity-0 after:transition-opacity after:duration-400 data-[stack=behind]:overflow-hidden data-[stack=behind]:after:opacity-100 data-[stack=hidden]:pointer-events-none data-[stack=hidden]:overflow-hidden data-[stack=hidden]:opacity-0 data-[stack=hidden]:after:opacity-100 data-[state=open]:animate-[selaras-toast-in_400ms_cubic-bezier(0.22,1,0.36,1)] data-[state=closed]:animate-[selaras-toast-out_200ms_ease-in_forwards] data-[stack=behind]:[--_selaras-toast-exit:-25%] data-[stack=hidden]:[--_selaras-toast-exit:-25%] motion-reduce:transition-none motion-reduce:animate-none motion-reduce:after:transition-none",
+    root: "absolute inset-x-4 flex items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--_selaras-color-subtle,var(--selaras-resolved-surface-default))] p-4 pe-10 shadow-[var(--selaras-resolved-shadow-lg)] ring-1 ring-[var(--selaras-resolved-border-default)] transition-[transform,opacity,height] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:[background:inherit] after:opacity-0 after:transition-opacity after:duration-400 data-[stack=behind]:overflow-hidden data-[stack=behind]:after:opacity-100 data-[stack=hidden]:pointer-events-none data-[stack=hidden]:overflow-hidden data-[stack=hidden]:opacity-0 data-[stack=hidden]:after:opacity-100 data-[state=open]:animate-[selaras-toast-in_400ms_cubic-bezier(0.22,1,0.36,1)] data-[state=closed]:animate-[selaras-toast-out_200ms_ease-in_forwards] data-[stack=behind]:[--_selaras-toast-exit:-25%] data-[stack=hidden]:[--_selaras-toast-exit:-25%] motion-reduce:transition-none motion-reduce:animate-none motion-reduce:after:transition-none",
     title: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
     description: "mt-1 text-sm text-[var(--selaras-resolved-text-muted)]",
     // Base (no color set) is a plain neutral glyph - only shown at all when

package/dist/runtime/theme-config.d.ts

@@ -265,7 +265,7 @@ export interface ThemeComponentRegistry {
     };
     chip: {
         slots: ChipThemeSlots;
-        conditions: WithRegisteredColor<Pick<ChipVariants, 'color' | 'size'>>;
+        conditions: WithRegisteredColor<Pick<ChipVariants, 'color' | 'variant' | 'size'>>;
         defaults: WithRegisteredColor<Pick<ChipVariants, 'color' | 'size'>>;
     };
     collapsible: {

package/dist/runtime/types/index.d.ts

@@ -19,6 +19,7 @@ export type * from '../components/CodeButton.vue';
 export type * from '../components/CodeGroup.vue';
 export type * from '../components/CodeTree.vue';
 export type * from '../components/Collapsible.vue';
+export type * from '../components/ColorModeSwitch.vue';
 export type * from '../components/ColorModeToggle.vue';
 export type * from '../components/ColorPicker.vue';
 export type * from '../components/CommandPalette.vue';
@@ -84,6 +85,7 @@ export type * from '../components/ToggleGroup.vue';
 export type * from '../components/Tooltip.vue';
 export type * from '../components/Tree.vue';
 export type { UseCommandPaletteReturn } from '../composables/use-command-palette.js';
+export type { UseConfirmOptions, UseConfirmReturn } from '../composables/use-confirm.js';
 export type { UseDrawerOpenOptions, UseDrawerReturn } from '../composables/use-drawer.js';
 export type { UseModalOpenOptions, UseModalReturn } from '../composables/use-modal.js';
 export type { UseSlideoverOpenOptions, UseSlideoverReturn } from '../composables/use-slideover.js';
@@ -98,8 +100,9 @@ export type { IconRegistry } from '../utils/icons.js';
 export { defaultIcons } from '../utils/icons.js';
 export type { MessageRegistry } from '../utils/messages.js';
 export { defaultMessages } from '../utils/messages.js';
+export type { NavigationMenuItem } from '../utils/navigation-menu.js';
 export type { ContextMenuPositioning, OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
-export type { SelectGroup, SelectIdentity, SelectModel, SelectResolvedOption, SelectValue } from '../utils/select-contracts.js';
+export type { SelectGroup, SelectIdentity, SelectModel, SelectModelValue, SelectResolvedOption, SelectValue } from '../utils/select-contracts.js';
 export type { TableEmits, TableProps, TableSlots } from '../utils/table-contracts.js';
 export type { TimelineItem, TimelineProps, TimelineSlotProps, TimelineSlots } from '../utils/timeline-contracts.js';
 export type { SelarasRuntimeConfig } from './app-config.js';

package/dist/runtime/utils/autocomplete-contracts.d.ts

@@ -1,6 +1,6 @@
-import type { SelectIdentity, SelectModel, SelectProps, SelectSlots, SelectValue } from './select-contracts.js';
+import type { SelectEntry, SelectIdentity, SelectModel, SelectProps, SelectSlots, SelectValue } from './select-contracts.js';
 export type AutocompleteValue<Entry, Key extends string = 'value', Forced extends boolean = false> = Forced extends true ? SelectIdentity<Entry, Key> : SelectIdentity<Entry, Key> | string;
-export interface AutocompleteProps<Entry extends object = {
+export interface AutocompleteProps<Entry extends SelectEntry = {
     value: SelectValue;
     label?: string;
     disabled?: boolean;
@@ -13,7 +13,7 @@ export interface AutocompleteProps<Entry extends object = {
     /** Blocks unmatched free-text commits; does not require async option membership. */
     forceSelection?: Forced;
 }
-export interface AutocompleteEmits<Entry extends object = {
+export interface AutocompleteEmits<Entry extends SelectEntry = {
     value: SelectValue;
 }, Key extends string = 'value', Multiple extends boolean = false, Forced extends boolean = false> {
     'update:open': [value: boolean];
@@ -21,4 +21,4 @@ export interface AutocompleteEmits<Entry extends object = {
     'update:searchTerm': [value: string];
 }
 /** Autocomplete's editable input has no value or filter-icon slot. */
-export type AutocompleteSlots<Entry extends object> = Omit<SelectSlots<Entry>, 'value' | 'filter-icon'>;
+export type AutocompleteSlots<Entry extends SelectEntry> = Omit<SelectSlots<Entry>, 'value' | 'filter-icon'>;

package/dist/runtime/utils/file-icons.js

@@ -108,6 +108,7 @@ export const defaultFileIcons = {
   "npm": "vscode-icons:file-type-npm",
   "pnpm": "vscode-icons:file-type-pnpm",
   "yarn": "vscode-icons:file-type-yarn",
+  "bun": "vscode-icons:file-type-bun",
   "nuxt": "vscode-icons:file-type-nuxt",
   "ansible": "vscode-icons:file-type-ansible",
   "bicep": "vscode-icons:file-type-bicep"

package/dist/runtime/utils/messages.d.ts

@@ -3,6 +3,7 @@ export interface MessageRegistry {
     clear: string;
     close: string;
     cancel: string;
+    confirmation: string;
     continue: string;
     colorModeToggle: string;
     colorPicker: string;

package/dist/runtime/utils/messages.js

@@ -3,6 +3,7 @@ export const defaultMessages = {
   clear: "Clear",
   close: "Close",
   cancel: "Cancel",
+  confirmation: "Confirm action",
   continue: "Continue",
   colorModeToggle: "Toggle color mode",
   colorPicker: "Color picker",

package/dist/runtime/utils/select-contracts.d.ts

@@ -5,19 +5,25 @@ import type { ColorRole } from './color-registry.js';
 import type { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
-export interface SelectGroup<Item extends object> {
+export type SelectModelValue = SelectValue | object;
+export type SelectEntry = SelectValue | object;
+export interface SelectGroup<Item extends SelectEntry> {
     label: string;
     items: readonly Item[];
 }
 /** Infer options from the entry array before unwrapping one group level. */
 export type SelectEntryItem<Entry> = Entry extends SelectGroup<infer Item> ? Item : Entry;
-export type SelectEntryGroup<Entry> = Extract<Entry, SelectGroup<object>>;
-export type SelectIdentityKeys<Item> = {
-    [Key in keyof Item]-?: Item[Key] extends SelectValue ? Key : never;
-}[keyof Item] & string;
-export type SelectIdentity<Entry, Key extends string> = SelectEntryItem<Entry>[Key & keyof SelectEntryItem<Entry>] & SelectValue;
+export type SelectEntryGroup<Entry> = Extract<Entry, SelectGroup<SelectEntry>>;
+export type SelectIdentityKeys<Item> = [Item] extends [object] ? {
+    [Key in keyof Item]-?: Item[Key] extends SelectModelValue ? Key : never;
+}[keyof Item] & string : never;
+type DefaultObjectIdentity<Item extends object> = 'value' extends keyof Item ? Item extends {
+    value: infer Value;
+} ? Value : NonNullable<Item['value' & keyof Item]> | Item : Item;
+type ItemIdentity<Item, Key extends string> = Item extends SelectValue ? Item : Key extends 'value' ? Item extends object ? DefaultObjectIdentity<Item> : never : Key extends keyof Item ? Item[Key] : never;
+export type SelectIdentity<Entry, Key extends string = 'value'> = ItemIdentity<SelectEntryItem<Entry>, Key>;
 export type SelectModel<Value, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-type ValidEntry<Entry, Key extends string> = Entry extends SelectGroup<infer Item> ? SelectGroup<Item & Record<Key, SelectValue>> : Entry & Record<Key, SelectValue>;
+type ValidEntry<Entry, Key extends string> = Entry extends SelectGroup<infer Item> ? SelectGroup<Item extends SelectValue ? Item : Key extends 'value' ? Item : Item & Record<Key, SelectModelValue>> : Entry extends SelectValue ? Entry : Key extends 'value' ? Entry : Entry & Record<Key, SelectModelValue>;
 export interface SelectResolvedOption<Entry, Key extends string = 'value'> {
     value: SelectIdentity<Entry, Key>;
     label: string;
@@ -25,7 +31,7 @@ export interface SelectResolvedOption<Entry, Key extends string = 'value'> {
     /** Undefined while a selected identity is absent from the current options. */
     raw: SelectEntryItem<Entry> | undefined;
 }
-export interface SelectProps<Entry extends object = {
+export interface SelectProps<Entry extends SelectEntry = {
     value: SelectValue;
     label?: string;
     disabled?: boolean;
@@ -35,7 +41,9 @@ export interface SelectProps<Entry extends object = {
     /** ID of an associated form outside the component's ancestors. */
     form?: string;
     items: readonly Entry[] & NoInfer<readonly ValidEntry<Entry, Key>[]>;
+    /** Uses an option's `value` field by default, or the whole object if absent. */
     valueKey?: Key & SelectIdentityKeys<SelectEntryItem<Entry>>;
+    /** Object field used for display; defaults to `label`. */
     labelKey?: keyof SelectEntryItem<Entry> & string;
     open?: boolean;
     /** Initial uncontrolled open state. */
@@ -78,14 +86,14 @@ export interface SelectProps<Entry extends object = {
     adaptive?: boolean;
     ui?: UiProp<SelectThemeSlots>;
 }
-export interface SelectEmits<Entry extends object = {
+export interface SelectEmits<Entry extends SelectEntry = {
     value: SelectValue;
 }, Key extends string = 'value', Multiple extends boolean = false> {
     'update:open': [value: boolean];
     'update:modelValue': [value: SelectModel<SelectIdentity<Entry, Key>, Multiple>];
     'update:searchTerm': [value: string];
 }
-export interface SelectSlots<Entry extends object, Key extends string = 'value'> {
+export interface SelectSlots<Entry extends SelectEntry, Key extends string = 'value'> {
     'item'?: (props: {
         item: SelectEntryItem<Entry>;
     }) => any;

package/dist/runtime/utils/ui.d.ts

@@ -107,6 +107,10 @@ export declare function useRootProps<T extends AnySlotFn>(slotFn: () => T, overr
 }): ComputedRef<{
     [x: string]: unknown;
 }>;
+/** Routes fallthrough attrs to a chosen non-root target without theme bindings. */
+export declare function useFallthroughProps(override?: () => UiSlotValue | undefined): ComputedRef<{
+    [x: string]: unknown;
+}>;
 /**
  * Returns fallthrough attributes selected for a component's real interactive
  * element. Wrapped controls use this alongside useRootProps: layout and
@@ -124,6 +128,13 @@ export declare function useFallthroughAttrs(select: (key: string) => boolean): C
  * to the base theme untouched when neither exists.
  */
 export declare function useComponentTheme<T extends (...args: any[]) => any>(key: string, base: T): ComputedRef<T>;
+/**
+ * Tailwind Variants drops the classes for an axis when its supplied value is
+ * unknown. Keep malformed runtime props usable by resolving them to the
+ * active theme's own default, and report the mistake once in development.
+ * Theme-configured variant values and compound-variant values stay valid.
+ */
+export declare function withVariantFallback<T extends (...args: any[]) => any>(theme: T, key: string): T;
 /**
  * The nearest (chain-merged) STheme `defaults.<key>` override, if any - a
  * component reads this as its own prop's fallback, one level below its

package/dist/runtime/utils/ui.js

@@ -53,6 +53,13 @@ export function useRootProps(slotFn, override, options) {
     resolveSlot(slotFn(), withFallthroughClass(options?.includeClass === false ? void 0 : fallthroughClass.value, override()))
   ));
 }
+export function useFallthroughProps(override) {
+  const { fallthroughClass, attrsWithoutClass } = useRootFallthrough();
+  return computed(() => mergeProps(
+    attrsWithoutClass.value,
+    resolveSlot((options) => options?.class ?? "", withFallthroughClass(fallthroughClass.value, override?.()))
+  ));
+}
 export function useFallthroughAttrs(select) {
   const attrs = useAttrs();
   return computed(() => Object.fromEntries(
@@ -78,7 +85,53 @@ export function useComponentTheme(key, base) {
       result = tv({ extend: result, ...globalOverride });
     for (const override of collectThemeChain(themeContext?.value, (c) => c.ui, key))
       result = tv({ extend: result, ...override });
-    return result;
+    return withVariantFallback(result, key);
+  });
+}
+const warnedThemeValues = /* @__PURE__ */ new Set();
+export function withVariantFallback(theme, key) {
+  return new Proxy(theme, {
+    apply(target, thisArg, args) {
+      const supplied = args[0];
+      if (!supplied || typeof supplied !== "object")
+        return Reflect.apply(target, thisArg, args);
+      let resolved;
+      for (const axis of ["variant", "size"]) {
+        const value = supplied[axis];
+        if (value === void 0)
+          continue;
+        const values = target.variants?.[axis];
+        if (!values)
+          continue;
+        const accepted = new Set(Object.keys(values));
+        for (const compound of target.compoundVariants ?? []) {
+          const condition = compound[axis];
+          if (Array.isArray(condition)) {
+            for (const entry of condition)
+              accepted.add(String(entry));
+          } else if (condition !== void 0) {
+            accepted.add(String(condition));
+          }
+        }
+        if (accepted.has(String(value)))
+          continue;
+        const defaults = target.defaultVariants;
+        const fallback = defaults?.[axis];
+        resolved ??= { ...supplied };
+        resolved[axis] = fallback;
+        if (import.meta.dev) {
+          const signature = `${key}:${axis}:${String(value)}`;
+          if (!warnedThemeValues.has(signature)) {
+            warnedThemeValues.add(signature);
+            const component = `${key[0]?.toUpperCase() ?? ""}${key.slice(1)}`;
+            const values2 = [...accepted].join(", ");
+            const fallbackMessage = fallback === void 0 ? "the default styling" : `"${String(fallback)}"`;
+            console.warn(`[Selaras ${component}] Unknown ${axis} "${String(value)}"; using ${fallbackMessage}. Valid values: ${values2}.`);
+          }
+        }
+      }
+      return Reflect.apply(target, thisArg, resolved ? [resolved, ...args.slice(1)] : args);
+    }
   });
 }
 export function useThemeProps(key) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sewadah/selaras",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A UI component library for Nuxt, built on Reka UI and Tailwind v4",
   "author": "Wicaksana Pratama <wicaksanapratama@gmail.com>",
   "license": "MIT",
@@ -45,6 +45,7 @@
       "import": "./dist/runtime/theme-api.js"
     },
     "./components/DrawerRenderer*": {},
+    "./components/ConfirmRenderer*": {},
     "./components/ModalRenderer*": {},
     "./components/NavigationMenuAccordionItem*": {},
     "./components/NavigationMenuFlyoutList*": {},
@@ -76,6 +77,7 @@
         "./dist/runtime/theme-api.d.ts"
       ],
       "components/DrawerRenderer*": [],
+      "components/ConfirmRenderer*": [],
       "components/ModalRenderer*": [],
       "components/NavigationMenuAccordionItem*": [],
       "components/NavigationMenuFlyoutList*": [],
@@ -98,18 +100,16 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "bun run docs:dev",
+    "dev": "bun run docs:prepare && nuxt dev docs",
     "dev:build": "bun run docs:build",
     "dev:generate": "bun run docs:generate",
     "dev:preview": "bunx nuxt preview docs",
     "dev:prepare": "bun run docs:prepare",
     "docs:build": "nuxt build docs",
-    "docs:dev": "bun run docs:prepare && nuxt dev docs",
+    "docs:dev": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview && nuxt dev packages/docs/preview",
     "docs:generate": "nuxt generate docs",
     "docs:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare docs && bun run scripts/sync-workspace-dist.mjs",
     "docs:types": "cd docs && vue-tsc --noEmit",
-    "docs-template:dev": "bun run docs-template:prepare && nuxt dev packages/docs/preview",
-    "docs-template:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare packages/docs/preview",
     "release": "bun run release:both",
     "release:both": "bun run release:selaras && bun run release:docs",
     "release:selaras": "bun run lint && bun run test && (if [ -n \"$RELEASE_VERSION\" ]; then npx changelogen --bump -r \"$RELEASE_VERSION\"; elif [ \"${RELEASE_BUMP:-auto}\" = \"auto\" ]; then npx changelogen --bump; else npx changelogen --bump \"--$RELEASE_BUMP\"; fi) && bun run test:release && npm publish --access public && bash scripts/tag-and-push-release.sh selaras && changelogen gh release",