@nuxt/ui 3.0.0-alpha.10 → 3.0.0-alpha.12

package/dist/runtime/components/Separator.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { SeparatorProps as _SeparatorProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/separator'
+import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
+const appConfigSeparator = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
 
-const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })
+const separator = tv({ extend: tv(theme), ...(appConfigSeparator.ui?.separator || {}) })
 
 type SeparatorVariants = VariantProps<typeof separator>
 

package/dist/runtime/components/Skeleton.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/skeleton'
+import { tv } from '../utils/tv'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 
-const appConfig = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
+const appConfigSkeleton = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
 
-const skeleton = tv({ extend: tv(theme), ...(appConfig.ui?.skeleton || {}) })
+const skeleton = tv({ extend: tv(theme), ...(appConfigSkeleton.ui?.skeleton || {}) })
 
 export interface SkeletonProps {
   /**

package/dist/runtime/components/Slideover.vue

@@ -1,15 +1,16 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slideover'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { ButtonProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
+const appConfigSlideover = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
 
-const slideover = tv({ extend: tv(theme), ...(appConfig.ui?.slideover || {}) })
+const slideover = tv({ extend: tv(theme), ...(appConfigSlideover.ui?.slideover || {}) })
 
 type SlideoverVariants = VariantProps<typeof slideover>
 
@@ -46,10 +47,10 @@ export interface SlideoverProps extends DialogRootProps {
    */
   closeIcon?: string
   /**
-   * When `true`, the slideover will not close when clicking outside.
-   * @defaultValue false
+   * When `false`, the slideover will not close when clicking outside or pressing escape.
+   * @defaultValue true
    */
-  preventClose?: boolean
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof slideover.slots>
 }
@@ -84,6 +85,7 @@ const props = withDefaults(defineProps<SlideoverProps>(), {
   overlay: true,
   transition: true,
   modal: true,
+  dismissible: true,
   side: 'right'
 })
 const emits = defineEmits<SlideoverEmits>()
@@ -95,7 +97,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),
@@ -103,13 +105,7 @@ const contentEvents = computed(() => {
     }
   }
 
-  return {
-    interactOutside: (e: Event) => {
-      if (e.target instanceof Element && e.target.closest('[data-sonner-toaster]')) {
-        return e.preventDefault()
-      }
-    }
-  }
+  return {}
 })
 
 const ui = computed(() => slideover({

package/dist/runtime/components/Slider.vue

@@ -1,13 +1,14 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { SliderRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/slider'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+const appConfigSlider = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
 
-const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+const slider = tv({ extend: tv(theme), ...(appConfigSlider.ui?.slider || {}) })
 
 type SliderVariants = VariantProps<typeof slider>
 
@@ -54,7 +55,7 @@ const modelValue = defineModel<number | number[]>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
 
-const { id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SliderProps>(props)
+const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SliderProps>(props)
 
 const defaultSliderValue = computed(() => {
   if (typeof props.defaultValue === 'number') {
@@ -94,7 +95,7 @@ function onChange(value: any) {
 
 <template>
   <SliderRoot
-    v-bind="rootProps"
+    v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     v-model="sliderValue"
     :name="name"

package/dist/runtime/components/Stepper.vue

@@ -1,21 +1,22 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/stepper'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { DynamicSlots } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { stepper: Partial<typeof theme> } }
+const appConfigStepper = _appConfig as AppConfig & { ui: { stepper: Partial<typeof theme> } }
 
-const stepper = tv({ extend: tv(theme), ...(appConfig.ui?.stepper || {}) })
+const stepper = tv({ extend: tv(theme), ...(appConfigStepper.ui?.stepper || {}) })
 
 type StepperVariants = VariantProps<typeof stepper>
 
 export interface StepperItem {
   slot?: string
-  value?: string
+  value?: string | number
   title?: string
   description?: string
   icon?: string
@@ -66,6 +67,7 @@ import { reactivePick } from '@vueuse/core'
 import UIcon from './Icon.vue'
 
 const props = withDefaults(defineProps<StepperProps<T>>(), {
+  orientation: 'horizontal',
   linear: true
 })
 const emits = defineEmits<StepperEmits<T>>()
@@ -146,12 +148,12 @@ defineExpose({
 
         <div :class="ui.wrapper({ class: props.ui?.wrapper })">
           <StepperTitle :class="ui.title({ class: props.ui?.title })">
-            <slot name="title" :item="currentStep">
+            <slot name="title" :item="item">
               {{ item.title }}
             </slot>
           </StepperTitle>
           <StepperDescription :class="ui.description({ class: props.ui?.description })">
-            <slot name="description" :item="currentStep">
+            <slot name="description" :item="item">
               {{ item.description }}
             </slot>
           </StepperDescription>

package/dist/runtime/components/Switch.vue

@@ -1,15 +1,16 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { SwitchRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { PartialString } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
+const appConfigSwitch = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
 
-const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
+const switchTv = tv({ extend: tv(theme), ...(appConfigSwitch.ui?.switch || {}) })
 
 type SwitchVariants = VariantProps<typeof switchTv>
 
@@ -67,7 +68,7 @@ const modelValue = defineModel<boolean>({ default: undefined })
 const appConfig = useAppConfig()
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<SwitchProps>(props)
 const id = _id.value ?? useId()
 
 const ui = computed(() => switchTv({
@@ -92,7 +93,7 @@ function onUpdate(value: any) {
     <div :class="ui.container({ class: props.ui?.container })">
       <SwitchRoot
         :id="id"
-        v-bind="rootProps"
+        v-bind="{ ...rootProps, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"

package/dist/runtime/components/Table.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { Ref } from 'vue'
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import type { RowData } from '@tanstack/table-core'
 import type {
@@ -26,6 +26,7 @@ import type {
 } from '@tanstack/vue-table'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/table'
+import { tv } from '../utils/tv'
 
 declare module '@tanstack/table-core' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -37,9 +38,9 @@ declare module '@tanstack/table-core' {
   }
 }
 
-const appConfig = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
+const appConfigTable = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
 
-const table = tv({ extend: tv(theme), ...(appConfig.ui?.table || {}) })
+const table = tv({ extend: tv(theme), ...(appConfigTable.ui?.table || {}) })
 
 type TableVariants = VariantProps<typeof table>
 

package/dist/runtime/components/Tabs.vue

@@ -1,16 +1,17 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
-const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
+const appConfigTabs = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
 
-const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
+const tabs = tv({ extend: tv(theme), ...(appConfigTabs.ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
@@ -96,6 +97,7 @@ const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
   orientation: 'horizontal',
+  unmountOnHide: true,
   labelKey: 'label'
 })
 const emits = defineEmits<TabsEmits>()

package/dist/runtime/components/Textarea.vue

@@ -1,12 +1,13 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/textarea'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
+const appConfigTextarea = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
 
-const textarea = tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })
+const textarea = tv({ extend: tv(theme), ...(appConfigTextarea.ui?.textarea || {}) })
 
 type TextareaVariants = VariantProps<typeof textarea>
 
@@ -65,7 +66,7 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 
 const ui = computed(() => textarea({
   color: color.value,
@@ -184,10 +185,11 @@ onMounted(() => {
       :class="ui.base({ class: props.ui?.base })"
       :disabled="disabled"
       :required="required"
-      v-bind="$attrs"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
+      @focus="emitFormFocus"
     />
 
     <slot />

package/dist/runtime/components/Toast.vue

@@ -1,15 +1,16 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
+const appConfigToast = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
 
-const toast = tv({ extend: tv(theme), ...(appConfig.ui?.toast || {}) })
+const toast = tv({ extend: tv(theme), ...(appConfigToast.ui?.toast || {}) })
 
 type ToastVariants = VariantProps<typeof toast>
 

package/dist/runtime/components/Toaster.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { ToastProviderProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
+const appConfigToaster = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
 
-const toaster = tv({ extend: tv(theme), ...(appConfig.ui?.toaster || {}) })
+const toaster = tv({ extend: tv(theme), ...(appConfigToaster.ui?.toaster || {}) })
 
 type ToasterVariants = VariantProps<typeof toaster>
 

package/dist/runtime/components/Tooltip.vue

@@ -1,15 +1,15 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { KbdProps } from '../types'
 
-const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
+const appConfigTooltip = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
 
-const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
+const tooltip = tv({ extend: tv(theme), ...(appConfigTooltip.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps {
   /** The text content of the tooltip. */

package/dist/runtime/composables/defineShortcuts.js

@@ -6,7 +6,7 @@ export function extractShortcuts(items) {
   const shortcuts = {};
   function traverse(items2) {
     items2.forEach((item) => {
-      if (item.kbds?.length && (item.select || item.click)) {
+      if (item.kbds?.length && (item.onSelect || item.onClick)) {
         const shortcutKey = item.kbds.join("_");
         shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }

package/dist/runtime/composables/useFormField.d.ts

@@ -8,13 +8,11 @@ type Props<T> = {
     name?: string;
     size?: GetObjectField<T, 'size'>;
     color?: GetObjectField<T, 'color'>;
-    eagerValidation?: boolean;
-    legend?: string;
     highlight?: boolean;
     disabled?: boolean;
 };
 export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>>;
-export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>>;
+export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>>;
 export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
 export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
 export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
@@ -24,6 +22,7 @@ export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
 export declare const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>>;
 export declare function useFormField<T>(props?: Props<T>, opts?: {
     bind?: boolean;
+    deferInputValidation?: boolean;
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
@@ -34,5 +33,10 @@ export declare function useFormField<T>(props?: Props<T>, opts?: {
     emitFormBlur: () => void;
     emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
     emitFormChange: () => void;
+    emitFormFocus: () => void;
+    ariaAttrs: ComputedRef<{
+        'aria-describedby': string;
+        'aria-invalid': boolean;
+    } | undefined>;
 };
 export {};

package/dist/runtime/composables/useFormField.js

@@ -1,4 +1,4 @@
-import { inject, ref, computed } from "vue";
+import { inject, computed } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 export const formOptionsInjectionKey = Symbol("nuxt-ui.form-options");
 export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
@@ -13,7 +13,7 @@ export function useFormField(props, opts) {
   const formInputs = inject(formInputsInjectionKey, void 0);
   const inputId = inject(inputIdInjectionKey, void 0);
   if (formField && inputId) {
-    if (opts?.bind === false || props?.legend) {
+    if (opts?.bind === false) {
       inputId.value = void 0;
     } else if (props?.id) {
       inputId.value = props?.id;
@@ -22,22 +22,23 @@ export function useFormField(props, opts) {
       formInputs.value[formField.value.name] = { id: inputId.value, pattern: formField.value.errorPattern };
     }
   }
-  const blurred = ref(false);
-  function emitFormEvent(type, name) {
+  function emitFormEvent(type, name, eager) {
     if (formBus && formField && name) {
-      formBus.emit({ type, name });
+      formBus.emit({ type, name, eager });
     }
   }
   function emitFormBlur() {
     emitFormEvent("blur", formField?.value.name);
-    blurred.value = true;
+  }
+  function emitFormFocus() {
+    emitFormEvent("focus", formField?.value.name);
   }
   function emitFormChange() {
     emitFormEvent("change", formField?.value.name);
   }
   const emitFormInput = useDebounceFn(
     () => {
-      emitFormEvent("input", formField?.value.name);
+      emitFormEvent("input", formField?.value.name, !opts?.deferInputValidation || formField?.value.eagerValidation);
     },
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   );
@@ -50,6 +51,15 @@ export function useFormField(props, opts) {
     disabled: computed(() => formOptions?.value.disabled || props?.disabled),
     emitFormBlur,
     emitFormInput,
-    emitFormChange
+    emitFormChange,
+    emitFormFocus,
+    ariaAttrs: computed(() => {
+      if (!formField?.value) return;
+      const descriptiveAttrs = ["error", "hint", "description"].filter((type) => formField?.value?.[type]).map((type) => `${formField?.value.ariaId}-${type}`) || [];
+      return {
+        "aria-describedby": descriptiveAttrs.join(" "),
+        "aria-invalid": !!formField?.value.error
+      };
+    })
   };
 }

package/dist/runtime/composables/useToast.d.ts

@@ -5,7 +5,7 @@ export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
 }
 export declare function useToast(): {
     toasts: import("vue").Ref<Toast[], Toast[]>;
-    add: (toast: Partial<Toast>) => Toast;
+    add: (toast: Partial<Toast>) => Promise<Toast>;
     update: (id: string | number, toast: Omit<Partial<Toast>, "id">) => void;
     remove: (id: string | number) => void;
     clear: () => void;

package/dist/runtime/composables/useToast.js

@@ -1,17 +1,31 @@
+import { ref, nextTick } from "vue";
 import { useState } from "#imports";
 export function useToast() {
   const toasts = useState("toasts", () => []);
-  function add(toast) {
+  const maxToasts = 5;
+  const running = ref(false);
+  const queue = [];
+  const generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  async function processQueue() {
+    if (running.value || queue.length === 0) {
+      return;
+    }
+    running.value = true;
+    while (queue.length > 0) {
+      const toast = queue.shift();
+      await nextTick();
+      toasts.value = [...toasts.value, toast].slice(-maxToasts);
+    }
+    running.value = false;
+  }
+  async function add(toast) {
     const body = {
-      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      id: generateId(),
       open: true,
       ...toast
     };
-    const index = toasts.value.findIndex((t) => t.id === body.id);
-    if (index === -1) {
-      toasts.value.push(body);
-    }
-    toasts.value = toasts.value.slice(-5);
+    queue.push(body);
+    await processQueue();
     return body;
   }
   function update(id, toast) {

package/dist/runtime/index.css

@@ -1 +1 @@
-@import "./keyframes.css";@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)] scheme-light dark:scheme-dark}:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}
+@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)] scheme-light dark:scheme-dark}.light,:root{--ui-text-dimmed:var(--ui-color-neutral-400);--ui-text-muted:var(--ui-color-neutral-500);--ui-text-toned:var(--ui-color-neutral-600);--ui-text:var(--ui-color-neutral-700);--ui-text-highlighted:var(--ui-color-neutral-900);--ui-bg:var(--color-white);--ui-bg-muted:var(--ui-color-neutral-50);--ui-bg-elevated:var(--ui-color-neutral-100);--ui-bg-accented:var(--ui-color-neutral-200);--ui-bg-inverted:var(--ui-color-neutral-900);--ui-border:var(--ui-color-neutral-200);--ui-border-muted:var(--ui-color-neutral-200);--ui-border-accented:var(--ui-color-neutral-300);--ui-border-inverted:var(--ui-color-neutral-900);--ui-radius:var(--radius-sm);--ui-container:var(--container-7xl)}.dark{--ui-text-dimmed:var(--ui-color-neutral-500);--ui-text-muted:var(--ui-color-neutral-400);--ui-text-toned:var(--ui-color-neutral-300);--ui-text:var(--ui-color-neutral-200);--ui-text-highlighted:var(--color-white);--ui-bg:var(--ui-color-neutral-900);--ui-bg-muted:var(--ui-color-neutral-800);--ui-bg-elevated:var(--ui-color-neutral-800);--ui-bg-accented:var(--ui-color-neutral-700);--ui-bg-inverted:var(--color-white);--ui-border:var(--ui-color-neutral-800);--ui-border-muted:var(--ui-color-neutral-700);--ui-border-accented:var(--ui-color-neutral-700);--ui-border-inverted:var(--color-white)}}

package/dist/runtime/locale/ar.js

@@ -20,6 +20,7 @@ export default defineLocale({
       decrement: "\u062A\u0642\u0644\u064A\u0644"
     },
     commandPalette: {
+      placeholder: "\u0627\u0643\u062A\u0628 \u0623\u0645\u0631\u064B\u0627 \u0623\u0648 \u0627\u0628\u062D\u062B...",
       noMatch: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C \u0645\u0637\u0627\u0628\u0642\u0629",
       noData: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A",
       close: "\u0625\u063A\u0644\u0627\u0642"
@@ -27,7 +28,8 @@ export default defineLocale({
     selectMenu: {
       noMatch: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u062A\u0627\u0626\u062C \u0645\u0637\u0627\u0628\u0642\u0629",
       noData: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0628\u064A\u0627\u0646\u0627\u062A",
-      create: '\u0625\u0646\u0634\u0627\u0621 "{label}"'
+      create: '\u0625\u0646\u0634\u0627\u0621 "{label}"',
+      search: "\u0628\u062D\u062B..."
     },
     toast: {
       close: "\u0625\u063A\u0644\u0627\u0642"

package/dist/runtime/locale/cs.js

@@ -19,6 +19,7 @@ export default defineLocale({
       decrement: "Sn\xED\u017Eit"
     },
     commandPalette: {
+      placeholder: "Zadejte p\u0159\xEDkaz nebo hledejte...",
       noMatch: "\u017D\xE1dn\xE1 shoda",
       noData: "\u017D\xE1dn\xE1 data",
       close: "Zav\u0159\xEDt"
@@ -26,7 +27,8 @@ export default defineLocale({
     selectMenu: {
       noMatch: "\u017D\xE1dn\xE1 shoda",
       noData: "\u017D\xE1dn\xE1 data",
-      create: 'Vytvo\u0159it "{label}"'
+      create: 'Vytvo\u0159it "{label}"',
+      search: "Hledat..."
     },
     toast: {
       close: "Zav\u0159\xEDt"

package/dist/runtime/locale/da.js

@@ -0,0 +1,54 @@
+import { defineLocale } from "../composables/defineLocale.js";
+export default defineLocale({
+  name: "Danish",
+  code: "da",
+  messages: {
+    inputMenu: {
+      noMatch: "Ingen matchende data",
+      noData: "Ingen data",
+      create: 'Opret "{label}"'
+    },
+    calendar: {
+      prevYear: "Forrige \xE5r",
+      nextYear: "N\xE6ste \xE5r",
+      prevMonth: "Forrige m\xE5ned",
+      nextMonth: "N\xE6ste m\xE5ned"
+    },
+    inputNumber: {
+      increment: "\xD8g",
+      decrement: "Reducer"
+    },
+    commandPalette: {
+      placeholder: "Skriv en kommando eller s\xF8g...",
+      noMatch: "Ingen matchende data",
+      noData: "Ingen data",
+      close: "Luk"
+    },
+    selectMenu: {
+      noMatch: "Ingen matchende data",
+      noData: "Ingen data",
+      create: 'Opret "{label}"',
+      search: "S\xF8g..."
+    },
+    toast: {
+      close: "Luk"
+    },
+    carousel: {
+      prev: "Forrige",
+      next: "N\xE6ste",
+      goto: "G\xE5 til slide {slide}"
+    },
+    modal: {
+      close: "Luk"
+    },
+    slideover: {
+      close: "Luk"
+    },
+    alert: {
+      close: "Luk"
+    },
+    table: {
+      noData: "Ingen data"
+    }
+  }
+});