vueless 1.4.12-beta.9 → 1.5.0

package/ui.dropdown-button/tests/UDropdownButtonTypes.vue

@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdownButton :options="options">
+    <!-- Forwarded through `UDropdown` to `UListbox`, so they inherit its group flattening — a
+         flattened member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdownButton>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownButton :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownButton>
+
+  <UDropdownButton :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownButton>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownButton :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownButton>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownButton
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdownButton>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownButton from "../UDropdownButton.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.dropdown-button/types.ts

@@ -1,11 +1,25 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownButtonSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected button.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-link/UDropdownLink.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownLinkSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownLinkSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 

package/ui.dropdown-link/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       {UDropdown}
       inline-flex gap-0.5 items-center justify-between rounded-small h-max
-      outline-solid outline-transparent
+      outline-solid outline-0 outline-transparent
       focus-visible:outline-offset-4
     `,
     defaults: {

package/ui.dropdown-link/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownLink from "../../ui.dropdown-link/UDropdownLink.vue";
+import UDropdownLinkComponent from "../../ui.dropdown-link/UDropdownLink.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,9 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownLink = UDropdownLinkComponent as typeof UDropdownLinkComponent & { __name: string };
+
 interface DefaultUDropdownLinkArgs extends Props {
   slotTemplate?: string;
 }

package/ui.dropdown-link/tests/UDropdownLink.test-d.ts

@@ -0,0 +1,55 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownLinkSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownLink types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownLinkSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.dropdown-link/tests/UDropdownLink.test.ts

@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownLink from "../UDropdownLink.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownLink.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },

package/ui.dropdown-link/tests/UDropdownLinkTypes.vue

@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdownLink :options="options">
+    <!-- Forwarded through `UDropdown` to `UListbox`, so they inherit its group flattening — a
+         flattened member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdownLink>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownLink :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownLink>
+
+  <UDropdownLink :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownLink>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownLink :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownLink>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownLink
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdownLink>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownLink from "../UDropdownLink.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.dropdown-link/types.ts

@@ -1,11 +1,25 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownLinkSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected link.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.form-calendar/config.ts

@@ -56,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-solid border-default outline-solid outline-transparent
+    flex items-center rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   },
   checkbox: {
     base: `
-      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -33,7 +33,7 @@ describe("UCheckbox.vue", () => {
     it("Value – returns correct value type when checkbox is checked", async () => {
       const testValues = ["string-value", 42, true, { id: 1, name: "test" }, [1, 2, 3]];
 
-      testValues.forEach(async (testValue) => {
+      for (const testValue of testValues) {
         const component = mount(UCheckbox, {
           props: {
             value: testValue,
@@ -48,7 +48,7 @@ describe("UCheckbox.vue", () => {
         const emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![0][0]).toEqual([testValue]);
-      });
+      }
     });
 
     it("TrueValue and FalseValue – returns correct values when checkbox is checked and unchecked", async () => {
@@ -59,7 +59,7 @@ describe("UCheckbox.vue", () => {
         { trueValue: true, falseValue: false },
       ];
 
-      testValuePairs.forEach(async ({ trueValue, falseValue }) => {
+      for (const { trueValue, falseValue } of testValuePairs) {
         const component = mount(UCheckbox, {
           props: {
             trueValue,
@@ -81,7 +81,7 @@ describe("UCheckbox.vue", () => {
         emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![1][0]).toEqual(falseValue);
-      });
+      }
     });
 
     it("Partial – displays correct icon when checkbox is partially checked", () => {

package/ui.form-checkbox/types.ts

@@ -4,16 +4,18 @@ import type { ComponentConfig, UnknownObject, UnknownArray } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UCheckboxOption {
+export interface BaseCheckboxOption {
   value?: string | number | boolean | UnknownObject | UnknownArray;
   falseValue?: string | number | boolean | UnknownObject | UnknownArray;
   trueValue?: string | number | boolean | UnknownObject | UnknownArray;
   label?: string;
   icon?: string;
   description?: string;
-  [key: string]: string | number | boolean | UnknownObject | UnknownArray | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UCheckboxOption = BaseCheckboxOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Checkbox value.

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch, useTemplateRef } from "vue";
+import { computed, provide, ref, watch, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -12,6 +12,7 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
 import type { UnknownObject } from "../types";
+import type { BaseCheckboxOption } from "../ui.form-checkbox/types";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
@@ -35,6 +36,11 @@ const listRef = useTemplateRef<HTMLDivElement>("list");
 
 const checkedItems = ref([] as UnknownObject[]);
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseCheckboxOption & Record<string, BaseCheckboxOption["value"]>)[],
+);
+
 provide<(value: UnknownObject[]) => void>(
   "setCheckboxGroupCheckedItems",
   (value: UnknownObject[]) => {
@@ -116,7 +122,7 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
       <!-- @slot Use it to add UCheckbox directly. -->
       <slot>
         <UCheckbox
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="modelValue"
           :value="option[valueKey]"

package/ui.form-date-picker/UDatePicker.vue

@@ -119,6 +119,16 @@ function deactivate() {
   customView.value = View.Day;
 }
 
+function deactivateOnBlur(event: FocusEvent) {
+  const related = event.relatedTarget as HTMLElement | null;
+
+  if (related && wrapperRef.value?.contains(related)) {
+    return;
+  }
+
+  deactivate();
+}
+
 function onUserFormatDateChange(value: string) {
   userFormatDate.value = value.trim();
 }
@@ -279,7 +289,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()" @focusout="deactivateOnBlur">
     <UInput
       :id="elementId"
       :key="String(userFormatDate)"

package/ui.form-date-picker/tests/UDatePicker.test.ts

@@ -356,6 +356,53 @@ describe("UDatePicker.vue", () => {
       expect(calendar.isVisible()).toBe(true);
     });
 
+    it("Calendar – hides when focus leaves the whole component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      const outsideElement = document.createElement("button");
+
+      document.body.appendChild(outsideElement);
+
+      await component.trigger("focusout", { relatedTarget: outsideElement });
+
+      expect(calendar.isVisible()).toBe(false);
+
+      outsideElement.remove();
+      component.unmount();
+    });
+
+    it("Calendar – stays open when focus moves inside the component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      await component.trigger("focusout", { relatedTarget: calendar.element });
+
+      expect(calendar.isVisible()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Calendar – hides when escape key is pressed on calendar", async () => {
       const component = mount(UDatePicker, {
         props: {

package/ui.form-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border border-solid rounded-medium border-default outline-solid outline-transparent
+      border border-solid rounded-medium border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-input-file/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzone: {
     base: `
       p-3 size-auto w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,