@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/Drawer.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, VisuallyHidden } from "reka-ui";
-import { computed, ref, useSlots, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { drawerTheme } from "../theme/drawer";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 const props = defineProps({
-  open: { type: Boolean, required: false },
+  open: { type: Boolean, required: false, default: void 0 },
+  defaultOpen: { type: Boolean, required: false },
   title: { type: String, required: false },
   description: { type: String, required: false },
   side: { type: String, required: false, default: "bottom" },
@@ -46,15 +47,17 @@ function onContentAnimationEnd(event) {
   if (event.target.getAttribute("data-state") === "closed")
     emit("afterLeave");
 }
-const internalOpen = ref(props.open ?? false);
+const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
+const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
 watch(() => props.open, (value) => {
-  if (value !== void 0)
-    internalOpen.value = value;
+  if (isControlled)
+    internalOpen.value = value ?? false;
 });
 function onUpdateOpen(value, details) {
   if (!props.dismissible && details?.reason === "swipe")
     return;
-  internalOpen.value = value;
+  if (!isControlled)
+    internalOpen.value = value;
   emit("update:open", value);
 }
 watch(internalOpen, (value) => {
@@ -71,6 +74,7 @@ if (import.meta.dev) {
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("drawer", drawerTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ side: props.side, transition: props.transition }));
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
@@ -98,8 +102,17 @@ const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer
       <slot />
     </DrawerTrigger>
     <DrawerPortal>
-      <DrawerOverlay v-if="overlay" v-bind="overlayProps" />
+      <DrawerOverlay
+        v-if="overlay"
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
+        v-bind="overlayProps"
+      />
       <DrawerContent
+        :data-selaras-theme="themeBindings['data-selaras-theme']"
+        :data-selaras-mode="themeBindings['data-selaras-mode']"
+        :style="themeBindings.style"
         v-bind="contentProps"
         @escape-key-down="onEscapeKeyDown"
         @pointer-down-outside="onPointerDownOutside"

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

@@ -2,6 +2,8 @@ import type { DrawerThemeSlots } from '../theme/drawer.js';
 import type { UiProp } from '../utils/ui.js';
 export interface DrawerProps {
     open?: boolean;
+    /** Initial visibility for an uncontrolled drawer. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     title?: string;
     description?: string;
     /** Which edge the panel slides in from - also the direction it's swiped toward to dismiss it. */

package/dist/runtime/components/DrawerRenderer.vue

@@ -1,30 +1,37 @@
 <script setup>
-import { useDrawer } from "../composables/use-drawer";
+import { onUnmounted } from "vue";
+import { useDrawerService } from "../internal/programmatic-services";
+import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
 import Drawer from "./Drawer.vue";
-const { drawers, close, remove } = useDrawer();
+const { instances: drawers, close, remove, dispose } = useDrawerService();
+onUnmounted(dispose);
 </script>
 
 <template>
-  <Drawer
+  <ProgrammaticTheme
     v-for="instance in drawers"
     :key="instance.id"
-    :open="instance.isOpen"
-    :title="instance.title"
-    :description="instance.description"
-    :side="instance.side"
-    :handle="instance.handle"
-    :snap-points="instance.snapPoints"
-    :snap-point="instance.snapPoint"
-    :snap-to-sequential-points="instance.snapToSequentialPoints"
-    :dismissible="instance.dismissible"
-    :modal="instance.modal"
-    :overlay="instance.overlay"
-    :transition="instance.transition"
-    @update:open="(open) => !open && close(instance.id)"
-    @after-leave="remove(instance.id)"
+    :snapshot="instance._theme"
   >
-    <template #content>
-      <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
-    </template>
-  </Drawer>
+    <Drawer
+      :open="instance.isOpen"
+      :title="instance.title"
+      :description="instance.description"
+      :side="instance.side"
+      :handle="instance.handle"
+      :snap-points="instance.snapPoints"
+      :snap-point="instance.snapPoint"
+      :snap-to-sequential-points="instance.snapToSequentialPoints"
+      :dismissible="instance.dismissible"
+      :modal="instance.modal"
+      :overlay="instance.overlay"
+      :transition="instance.transition"
+      @update:open="(open) => !open && close(instance.id)"
+      @after-leave="remove(instance.id)"
+    >
+      <template #content>
+        <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
+      </template>
+    </Drawer>
+  </ProgrammaticTheme>
 </template>

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

@@ -12,19 +12,29 @@ export interface DropdownItem {
 }
 export interface DropdownProps {
     items: DropdownItem[][];
+    open?: boolean;
+    /** Initial visibility for an uncontrolled dropdown. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     /** Shows a small pointer triangle connecting the menu to its trigger. */
     arrow?: boolean;
     ui?: UiProp<DropdownThemeSlots>;
 }
-declare var __VLS_14: {}, __VLS_46: {
+export interface DropdownEmits {
+    'update:open': [value: boolean];
+}
+declare var __VLS_16: {}, __VLS_48: {
     item: DropdownItem;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
-    item?: (props: typeof __VLS_46) => any;
+    item?: (props: typeof __VLS_48) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DropdownProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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;

package/dist/runtime/components/Dropdown.vue

@@ -1,15 +1,30 @@
 <script setup>
 import { DropdownMenuArrow, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from "reka-ui";
-import { computed } from "vue";
+import { computed, getCurrentInstance, ref, watch } from "vue";
 import { dropdownTheme } from "../theme/dropdown";
-import { resolveSlot, useComponentTheme } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 import Icon from "./Icon.vue";
 const props = defineProps({
   items: { type: Array, required: true },
+  open: { type: Boolean, required: false, default: void 0 },
+  defaultOpen: { type: Boolean, required: false },
   arrow: { type: Boolean, required: false, default: false },
   ui: { type: Object, required: false }
 });
+const emit = defineEmits(["update:open"]);
+const isControlled = Object.hasOwn(getCurrentInstance()?.vnode.props ?? {}, "open");
+const internalOpen = ref(props.open ?? props.defaultOpen ?? false);
+watch(() => props.open, (value) => {
+  if (isControlled)
+    internalOpen.value = value ?? false;
+});
+function onUpdateOpen(value) {
+  if (!isControlled)
+    internalOpen.value = value;
+  emit("update:open", value);
+}
 const theme = useComponentTheme("dropdown", dropdownTheme);
+const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
 const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
@@ -23,12 +38,12 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
 </script>
 
 <template>
-  <DropdownMenuRoot>
+  <DropdownMenuRoot :open="internalOpen" @update:open="onUpdateOpen">
     <DropdownMenuTrigger as-child>
       <slot />
     </DropdownMenuTrigger>
     <DropdownMenuPortal>
-      <DropdownMenuContent :side-offset="6" align="start" v-bind="contentProps">
+      <DropdownMenuContent :side-offset="6" align="start" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <template v-for="(group, groupIndex) in items" :key="groupIndex">
           <DropdownMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
           <DropdownMenuItem

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

@@ -12,19 +12,29 @@ export interface DropdownItem {
 }
 export interface DropdownProps {
     items: DropdownItem[][];
+    open?: boolean;
+    /** Initial visibility for an uncontrolled dropdown. Supplying `open` makes the parent authoritative. */
+    defaultOpen?: boolean;
     /** Shows a small pointer triangle connecting the menu to its trigger. */
     arrow?: boolean;
     ui?: UiProp<DropdownThemeSlots>;
 }
-declare var __VLS_14: {}, __VLS_46: {
+export interface DropdownEmits {
+    'update:open': [value: boolean];
+}
+declare var __VLS_16: {}, __VLS_48: {
     item: DropdownItem;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
-    item?: (props: typeof __VLS_46) => any;
+    item?: (props: typeof __VLS_48) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<DropdownProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => 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;

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

@@ -1,4 +1,5 @@
 import type { FileTreeThemeSlots } from '../theme/file-tree.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface FileTreeNode {
     name: string;
@@ -12,6 +13,8 @@ export interface FileTreeProps {
     selected?: FileTreeNode;
     /** Whether a directory starts expanded. @default true */
     defaultExpanded?: boolean;
+    /** The selected-file accent. @default 'primary' */
+    color?: ColorRole;
     /** Internal - true for a recursive call rendering a directory's children, skipping the outer box. */
     isNested?: boolean;
     ui?: UiProp<FileTreeThemeSlots>;

package/dist/runtime/components/FileTree.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { fileTreeTheme } from "../theme/file-tree";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -9,6 +10,7 @@ const props = defineProps({
   items: { type: Array, required: true },
   selected: { type: Object, required: false },
   defaultExpanded: { type: Boolean, required: false, default: true },
+  color: { type: null, required: false },
   isNested: { type: Boolean, required: false, default: false },
   ui: { type: Object, required: false }
 });
@@ -37,18 +39,19 @@ function iconFor(node, index) {
   return isExpanded(index) ? icons.value.folderOpen : icons.value.folder;
 }
 const theme = useComponentTheme("fileTree", fileTreeTheme);
-const ui = computed(() => theme.value({ isNested: props.isNested }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ isNested: props.isNested, color: effectiveColor.value }));
 const rootProps = useRootProps(() => props.isNested ? ui.value.list : ui.value.root, () => props.isNested ? props.ui?.list : props.ui?.root);
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
 const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
 function rowProps(node) {
-  return resolveSlot(theme.value({ selected: props.selected === node }).row, props.ui?.row);
+  return resolveSlot(theme.value({ isNested: props.isNested, selected: props.selected === node, color: effectiveColor.value }).row, props.ui?.row);
 }
 </script>
 
 <template>
-  <ul v-bind="rootProps">
+  <ul :data-selaras-color="effectiveColor" v-bind="rootProps">
     <li v-for="(node, index) in items" :key="node.name" v-bind="itemProps">
       <button type="button" v-bind="rowProps(node)" @click="node.children ? toggle(index) : selectFile(node)">
         <Icon :name="iconFor(node, index)" v-bind="iconProps" />
@@ -59,6 +62,7 @@ function rowProps(node) {
         :items="node.children"
         is-nested
         :selected="selected"
+        :color="color"
         :default-expanded="defaultExpanded"
         :ui="props.ui"
         @update:selected="emit('update:selected', $event)"

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

@@ -1,4 +1,5 @@
 import type { FileTreeThemeSlots } from '../theme/file-tree.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 export interface FileTreeNode {
     name: string;
@@ -12,6 +13,8 @@ export interface FileTreeProps {
     selected?: FileTreeNode;
     /** Whether a directory starts expanded. @default true */
     defaultExpanded?: boolean;
+    /** The selected-file accent. @default 'primary' */
+    color?: ColorRole;
     /** Internal - true for a recursive call rendering a directory's children, skipping the outer box. */
     isNested?: boolean;
     ui?: UiProp<FileTreeThemeSlots>;

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { FileUploadThemeSlots } from '../theme/file-upload.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { fileUploadTheme } from '../theme/file-upload.js';
 type FileUploadVariants = VariantProps<typeof fileUploadTheme>;
@@ -20,7 +21,7 @@ export interface FileUploadProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: FileUploadVariants['size'];
-    color?: FileUploadVariants['color'];
+    color?: ColorRole;
     name?: string;
     required?: boolean;
     ui?: UiProp<FileUploadThemeSlots>;

package/dist/runtime/components/FileUpload.vue

@@ -1,12 +1,13 @@
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, getCurrentInstance, mergeProps, onMounted, onUnmounted, ref, watch } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { useLocale } from "../composables/use-locale";
 import { useMessages } from "../composables/use-messages";
 import { fileUploadTheme } from "../theme/file-upload";
 import { formatBytes } from "../utils/format-bytes";
-import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -28,6 +29,8 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue", "error"]);
 defineSlots();
+const instance = getCurrentInstance();
+const isControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
 const field = useFormField();
 const fileUploadId = computed(() => props.id ?? field?.id);
 const fileUploadInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
@@ -38,12 +41,35 @@ const messages = useMessages();
 const effectiveLocale = useLocale();
 const internalFiles = ref(props.modelValue ?? []);
 watch(() => props.modelValue, (value) => {
-  if (value !== void 0)
-    internalFiles.value = value;
+  if (isControlled())
+    internalFiles.value = value ?? [];
 });
+function updateFiles(next) {
+  if (!isControlled())
+    internalFiles.value = next;
+  emit("update:modelValue", next);
+}
 const isDragging = ref(false);
 const dropzoneEl = ref();
 const inputEl = ref();
+function syncNativeFiles() {
+  if (!inputEl.value || typeof DataTransfer === "undefined")
+    return;
+  const transfer = new DataTransfer();
+  internalFiles.value.forEach((file) => transfer.items.add(file));
+  inputEl.value.files = transfer.files;
+}
+watch(internalFiles, syncNativeFiles, { deep: true, flush: "post" });
+let ownerForm = null;
+onMounted(() => {
+  syncNativeFiles();
+  ownerForm = inputEl.value?.form ?? null;
+  ownerForm?.addEventListener("reset", onFormReset);
+});
+onUnmounted(() => {
+  ownerForm?.removeEventListener("reset", onFormReset);
+  internalFiles.value.forEach(revokePreview);
+});
 const previewUrls = /* @__PURE__ */ new WeakMap();
 function previewUrlFor(file) {
   if (!props.preview || !file.type.startsWith("image/"))
@@ -95,8 +121,7 @@ function processFiles(fileList) {
   }
   if (accepted.length) {
     const next = props.multiple ? [...internalFiles.value, ...accepted] : accepted.slice(0, 1);
-    internalFiles.value = next;
-    emit("update:modelValue", next);
+    updateFiles(next);
   }
   if (errors.length)
     emit("error", errors);
@@ -109,7 +134,15 @@ function onInputChange(event) {
   const target = event.target;
   if (target.files?.length)
     processFiles(target.files);
-  target.value = "";
+  syncNativeFiles();
+}
+function onFormReset(event) {
+  queueMicrotask(() => {
+    if (event.defaultPrevented)
+      return;
+    updateFiles([]);
+    syncNativeFiles();
+  });
 }
 function onDragEnter(event) {
   event.preventDefault();
@@ -131,25 +164,32 @@ function onDrop(event) {
     processFiles(event.dataTransfer.files);
 }
 function removeFile(index) {
-  const file = internalFiles.value[index];
-  if (file)
-    revokePreview(file);
   const next = internalFiles.value.filter((_, i) => i !== index);
-  internalFiles.value = next;
-  emit("update:modelValue", next);
+  updateFiles(next);
 }
+watch(internalFiles, (files, previous) => {
+  previous.forEach((file) => {
+    if (!files.includes(file))
+      revokePreview(file);
+  });
+});
 const theme = useComponentTheme("fileUpload", fileUploadTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   size: effectiveSize.value,
-  color: props.color,
+  color: effectiveColor.value,
   invalid: fileUploadInvalid.value
 }));
-const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+function isNativeFileInputAttr(key) {
+  return ["capture", "form", "webkitdirectory"].includes(key) || /^on(?:BeforeInput|Change|CompositionEnd|CompositionStart|CompositionUpdate|Focus|Input|KeyDown|KeyUp|Paste|Select|Blur)$/.test(key);
+}
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: isNativeFileInputAttr });
+const nativeFileInputAttrs = useFallthroughAttrs(isNativeFileInputAttr);
 const dropzoneProps = computed(() => resolveSlot(ui.value.dropzone, props.ui?.dropzone));
 const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
 const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
-const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+const inputProps = computed(() => mergeProps(resolveSlot(ui.value.input, props.ui?.input), nativeFileInputAttrs.value));
 const fileListProps = computed(() => resolveSlot(ui.value.fileList, props.ui?.fileList));
 const fileProps = computed(() => resolveSlot(ui.value.file, props.ui?.file));
 const fileThumbnailProps = computed(() => resolveSlot(ui.value.fileThumbnail, props.ui?.fileThumbnail));
@@ -162,12 +202,15 @@ const removeButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effec
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-color="effectiveColor" v-bind="rootProps">
     <button
       ref="dropzoneEl"
       type="button"
       :disabled="disabled"
       :data-dragging="isDragging ? '' : void 0"
+      :aria-labelledby="field?.labelId"
+      :aria-describedby="describedBy"
+      :aria-invalid="fileUploadInvalid || void 0"
       v-bind="dropzoneProps"
       @click="openDialog"
       @dragenter="onDragEnter"
@@ -184,23 +227,23 @@ const removeButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effec
           <template v-if="maxSize">{{ messages.upToSize(formatBytes(maxSize, effectiveLocale)) }}</template>
         </span>
       </slot>
-      <input
-        :id="fileUploadId"
-        ref="inputEl"
-        type="file"
-        :accept="accept"
-        :multiple="multiple"
-        :disabled="disabled"
-        :name="name ?? field?.name"
-        :required="required"
-        :aria-invalid="fileUploadInvalid || void 0"
-        :aria-describedby="describedBy"
-        tabindex="-1"
-        v-bind="inputProps"
-        @click.stop
-        @change="onInputChange"
-      >
     </button>
+    <input
+      :id="fileUploadId"
+      ref="inputEl"
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      :name="name ?? field?.name"
+      :required="required"
+      :aria-invalid="fileUploadInvalid || void 0"
+      :aria-describedby="describedBy"
+      tabindex="-1"
+      v-bind="inputProps"
+      @focus="dropzoneEl?.focus()"
+      @change="onInputChange"
+    >
     <ul v-if="internalFiles.length" v-bind="fileListProps">
       <li v-for="(file, index) in internalFiles" :key="index" v-bind="fileProps">
         <slot name="file" :file="file" :index="index" :remove="() => removeFile(index)">

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

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { FileUploadThemeSlots } from '../theme/file-upload.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { fileUploadTheme } from '../theme/file-upload.js';
 type FileUploadVariants = VariantProps<typeof fileUploadTheme>;
@@ -20,7 +21,7 @@ export interface FileUploadProps {
     disabled?: boolean;
     invalid?: boolean;
     size?: FileUploadVariants['size'];
-    color?: FileUploadVariants['color'];
+    color?: ColorRole;
     name?: string;
     required?: boolean;
     ui?: UiProp<FileUploadThemeSlots>;

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

@@ -4,6 +4,8 @@ import type { UiProp } from '../utils/ui.js';
 import { formFieldTheme } from '../theme/form-field.js';
 type FormFieldVariants = VariantProps<typeof formFieldTheme>;
 export interface FormFieldProps {
+    /** Stable ID for the underlying control and label relationship. Defaults to Vue's SSR-stable useId(). */
+    id?: string;
     label?: string;
     name?: string;
     /** A second, muted line under the label, before the control - for context the user should read before reaching it (e.g. "We'll use this to send your receipt"). Distinct from `hint`, which sits below the control instead. */

package/dist/runtime/components/FormField.vue

@@ -5,6 +5,7 @@ import { formFieldTheme } from "../theme/form-field";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
+  id: { type: String, required: false },
   label: { type: String, required: false },
   name: { type: String, required: false },
   description: { type: String, required: false },
@@ -15,18 +16,20 @@ const props = defineProps({
   orientation: { type: null, required: false, default: "vertical" },
   ui: { type: Object, required: false }
 });
-const id = useId();
+const id = props.id ?? useId();
 const invalid = computed(() => !!props.error);
 const errorMessage = computed(() => typeof props.error === "string" ? props.error : void 0);
 const describedBy = computed(() => {
-  if (invalid.value && errorMessage.value)
-    return `${id}-error`;
-  if (props.hint)
-    return `${id}-hint`;
-  return void 0;
+  const ids = [
+    props.description ? `${id}-description` : void 0,
+    props.hint ? `${id}-hint` : void 0,
+    invalid.value && errorMessage.value ? `${id}-error` : void 0
+  ].filter(Boolean);
+  return ids.length ? ids.join(" ") : void 0;
 });
 provideFormField({
   id,
+  labelId: props.label ? `${id}-label` : void 0,
   name: props.name,
   size: props.size,
   invalid,
@@ -49,10 +52,10 @@ const errorProps = computed(() => resolveSlot(ui.value.error, props.ui?.error));
   <div v-bind="rootProps">
     <div v-bind="bodyProps">
       <div v-bind="headerProps">
-        <label v-if="label" :for="id" v-bind="labelProps">
+        <label v-if="label" :id="`${id}-label`" :for="id" v-bind="labelProps">
           {{ label }}<span v-if="required" v-bind="requiredProps">*</span>
         </label>
-        <p v-if="description" v-bind="descriptionProps">
+        <p v-if="description" :id="`${id}-description`" v-bind="descriptionProps">
           <slot name="description">
             {{ description }}
           </slot>
@@ -65,7 +68,7 @@ const errorProps = computed(() => resolveSlot(ui.value.error, props.ui?.error));
     <p v-if="invalid && errorMessage" :id="`${id}-error`" role="alert" v-bind="errorProps">
       {{ errorMessage }}
     </p>
-    <p v-else-if="hint" :id="`${id}-hint`" v-bind="hintProps">
+    <p v-if="hint" :id="`${id}-hint`" v-bind="hintProps">
       {{ hint }}
     </p>
   </div>

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

@@ -4,6 +4,8 @@ import type { UiProp } from '../utils/ui.js';
 import { formFieldTheme } from '../theme/form-field.js';
 type FormFieldVariants = VariantProps<typeof formFieldTheme>;
 export interface FormFieldProps {
+    /** Stable ID for the underlying control and label relationship. Defaults to Vue's SSR-stable useId(). */
+    id?: string;
     label?: string;
     name?: string;
     /** A second, muted line under the label, before the control - for context the user should read before reaching it (e.g. "We'll use this to send your receipt"). Distinct from `hint`, which sits below the control instead. */

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

@@ -1,12 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
 import type { IconThemeSlots } from '../theme/icon.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
-import { iconTheme } from '../theme/icon.js';
-type IconVariants = VariantProps<typeof iconTheme>;
 export interface IconProps {
     /** Any name Nuxt Icon resolves, e.g. `hugeicons:star` (or any other registered set, like `lucide:star`). */
     name: string;
-    color?: IconVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<IconThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;