@lovince/ui-vue 0.1.1 → 0.3.0

package/README.md

@@ -6,7 +6,7 @@ effects run through [`@lovince/ui-dom`](../ui-dom). This package subscribes to
 the machine, feeds props in, and renders what `connect()` returns. It holds no
 behaviour of its own.
 
-> **Status: `0.1.0`, experimental.** The API may change before `1.0`.
+> **Status: `0.3.0`, experimental.** The API may change before `1.0`.
 
 ```bash
 bun add @lovince/ui-vue
@@ -16,41 +16,261 @@ Requires Vue 3.5+ (for SSR-stable `useId`). No CSS ships with the package. Style
 it with classes and the `data-*` state attributes, or use
 [`@lovince/themes`](../themes) for tokens.
 
+Every component export carries the `Lv` prefix (`LvButton`, `LvDialogRoot`), so
+names never clash with your own components or native elements.
+
 ## Components
 
 | Group | Component | Parts |
 |---|---|---|
-| Disclosure | Disclosure | `DisclosureRoot`, `DisclosureTrigger`, `DisclosureContent` |
-| | Accordion | `AccordionRoot`, `AccordionItem`, `AccordionHeader`, `AccordionTrigger`, `AccordionContent` |
-| | Tabs | `TabsRoot`, `TabsList`, `TabsTrigger`, `TabsContent` |
-| Overlays | Dialog | `DialogRoot`, `DialogTrigger`, `DialogPortal`, `DialogOverlay`, `DialogContent`, `DialogTitle`, `DialogDescription`, `DialogClose` |
-| | Popover | `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`, `PopoverPortal`, `PopoverContent`, `PopoverClose` |
-| | Tooltip | `TooltipRoot`, `TooltipTrigger`, `TooltipPortal`, `TooltipContent` |
-| | Hover card | `HoverCardRoot`, `HoverCardTrigger`, `HoverCardPortal`, `HoverCardContent` |
-| | Menu | `DropdownMenuRoot`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuItemIndicator`, `DropdownMenuLabel`, `DropdownMenuGroup`, `DropdownMenuSeparator`, `ContextMenuTrigger` |
-| | Navigation menu | `NavigationMenuRoot`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink` |
-| | Toast | `ToastViewport`, `ToastRoot`, `ToastTitle`, `ToastDescription`, `ToastAction`, `ToastClose`, plus `toast()` |
-| Choice | Checkbox, Switch | `CheckboxRoot`, `CheckboxIndicator`, `SwitchRoot`, `SwitchThumb` |
-| | Radio group | `RadioGroupRoot`, `RadioGroupItem`, `RadioGroupIndicator` |
-| | Toggle, toggle group | `ToggleRoot`, `ToggleGroupRoot`, `ToggleGroupItem` |
-| | Select | `SelectRoot`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectItemText`, `SelectItemIndicator`, `SelectGroup`, `SelectLabel`, `SelectSeparator` |
-| | Combobox | `ComboboxRoot`, `ComboboxAnchor`, `ComboboxInput`, `ComboboxTrigger`, `ComboboxClear`, `ComboboxContent`, `ComboboxItem`, `ComboboxItemIndicator`, `ComboboxEmpty` |
-| | Command palette | `CommandRoot`, `CommandInput`, `CommandList`, `CommandGroup`, `CommandItem`, `CommandEmpty`, `CommandSeparator` |
-| | Emoji picker | `EmojiPickerRoot`, `EmojiPickerSearch`, `EmojiPickerList`, `EmojiPickerGroup`, `EmojiPickerItem`, `EmojiPickerNav`… |
-| Input | Slider | `SliderRoot`, `SliderTrack`, `SliderRange`, `SliderThumb` |
-| | Number field | `NumberFieldRoot`, `NumberFieldInput`, `NumberFieldIncrement`, `NumberFieldDecrement` |
-| | PIN input | `PinInputRoot`, `PinInputInput` |
-| | Calendar | `CalendarRoot`, `CalendarHeading`, `CalendarPrev`, `CalendarNext`, `CalendarGrid`, `CalendarHeadCell`, `CalendarCell`, `CalendarDay` |
-| Layout | Splitter | `SplitterGroup`, `SplitterPanel`, `SplitterHandle` |
-| | Tree | `TreeRoot`, `TreeItem`, `TreeGroup` |
-| | Carousel | `CarouselRoot`, `CarouselViewport`, `CarouselSlide`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `CarouselIndicator` |
-| | Sortable | `SortableRoot`, `SortableItem`, `SortableHandle` |
-| Display | Avatar, Progress | `AvatarRoot`, `AvatarImage`, `AvatarFallback`, `ProgressRoot`, `ProgressIndicator` |
+| Primitives | Text, Heading, Label, Link, Code, Kbd, Box, AspectRatio, VisuallyHidden, Separator | |
+| | Icon | `LvIcon`, from the separate `@lovince/ui-vue/icon` entry |
+| Disclosure | Disclosure | `LvDisclosureRoot`, `LvDisclosureTrigger`, `LvDisclosureContent` |
+| | Accordion | `LvAccordionRoot`, `LvAccordionItem`, `LvAccordionHeader`, `LvAccordionTrigger`, `LvAccordionContent` |
+| | Tabs | `LvTabsRoot`, `LvTabsList`, `LvTabsTrigger`, `LvTabsContent` |
+| Overlays | Dialog | `LvDialogRoot`, `LvDialogTrigger`, `LvDialogPortal`, `LvDialogOverlay`, `LvDialogContent`, `LvDialogTitle`, `LvDialogDescription`, `LvDialogClose` |
+| | Popover | `LvPopoverRoot`, `LvPopoverTrigger`, `LvPopoverAnchor`, `LvPopoverPortal`, `LvPopoverContent`, `LvPopoverClose` |
+| | Tooltip | `LvTooltipRoot`, `LvTooltipTrigger`, `LvTooltipPortal`, `LvTooltipContent` |
+| | Hover card | `LvHoverCardRoot`, `LvHoverCardTrigger`, `LvHoverCardPortal`, `LvHoverCardContent` |
+| | Menu | `LvDropdownMenuRoot`, `LvDropdownMenuTrigger`, `LvDropdownMenuContent`, `LvDropdownMenuItem`, `LvDropdownMenuCheckboxItem`, `LvDropdownMenuRadioGroup`, `LvDropdownMenuRadioItem`, `LvDropdownMenuItemIndicator`, `LvDropdownMenuLabel`, `LvDropdownMenuGroup`, `LvDropdownMenuSeparator`, `LvContextMenuTrigger` |
+| | Navigation menu | `LvNavigationMenuRoot`, `LvNavigationMenuList`, `LvNavigationMenuItem`, `LvNavigationMenuTrigger`, `LvNavigationMenuContent`, `LvNavigationMenuLink` |
+| | Toast | `LvToastViewport`, `LvToastRoot`, `LvToastTitle`, `LvToastDescription`, `LvToastAction`, `LvToastClose`, plus `toast()` |
+| Choice | Checkbox, Switch | `LvCheckboxRoot`, `LvCheckboxIndicator`, `LvSwitchRoot`, `LvSwitchThumb` |
+| | Radio group | `LvRadioGroupRoot`, `LvRadioGroupItem`, `LvRadioGroupIndicator` |
+| | Toggle, toggle group | `LvToggleRoot`, `LvToggleGroupRoot`, `LvToggleGroupItem` |
+| | Select | `LvSelectRoot`, `LvSelectTrigger`, `LvSelectValue`, `LvSelectContent`, `LvSelectItem`, `LvSelectItemText`, `LvSelectItemIndicator`, `LvSelectGroup`, `LvSelectLabel`, `LvSelectSeparator` |
+| | Combobox | `LvComboboxRoot`, `LvComboboxAnchor`, `LvComboboxInput`, `LvComboboxTrigger`, `LvComboboxClear`, `LvComboboxContent`, `LvComboboxItem`, `LvComboboxItemIndicator`, `LvComboboxEmpty` |
+| | Command palette | `LvCommandRoot`, `LvCommandInput`, `LvCommandList`, `LvCommandGroup`, `LvCommandItem`, `LvCommandEmpty`, `LvCommandSeparator` |
+| | Emoji picker | `LvEmojiPickerRoot`, `LvEmojiPickerSearch`, `LvEmojiPickerList`, `LvEmojiPickerGroup`, `LvEmojiPickerItem`, `LvEmojiPickerNav`… |
+| Input | Slider | `LvSliderRoot`, `LvSliderTrack`, `LvSliderRange`, `LvSliderThumb` |
+| | Number field | `LvNumberFieldRoot`, `LvNumberFieldInput`, `LvNumberFieldIncrement`, `LvNumberFieldDecrement` |
+| | PIN input | `LvPinInputRoot`, `LvPinInputInput` |
+| | Calendar | `LvCalendarRoot`, `LvCalendarHeading`, `LvCalendarPrev`, `LvCalendarNext`, `LvCalendarGrid`, `LvCalendarHeadCell`, `LvCalendarCell`, `LvCalendarDay` |
+| Forms | Field, Input, Textarea, Form, TagsInput, FileUpload, TimeField, PhoneInput | `LvFieldRoot`, `LvFieldLabel`, `LvTagsInputRoot`, `LvTagsInputInput`, `LvTagsInputItem`, `LvTagsInputRemove`, `LvFileUploadRoot`, `LvFileUploadInput`, `LvFileUploadItem`, `LvFileUploadRemove`, `LvTimeFieldRoot`, `LvTimeFieldInput`, `LvPhoneInputRoot`, `LvPhoneInputInput`, `LvPhoneInputCountrySelect` |
+| Layout | ScrollArea | `LvScrollAreaRoot`, `LvScrollAreaViewport`, `LvScrollAreaScrollbar`, `LvScrollAreaThumb` |
+| | Splitter | `LvSplitterGroup`, `LvSplitterPanel`, `LvSplitterHandle` |
+| | Tree | `LvTreeRoot`, `LvTreeItem`, `LvTreeGroup` |
+| | Carousel | `LvCarouselRoot`, `LvCarouselViewport`, `LvCarouselSlide`, `LvCarouselPrevious`, `LvCarouselNext`, `LvCarouselIndicators`, `LvCarouselIndicator` |
+| | Sortable | `LvSortableRoot`, `LvSortableItem`, `LvSortableHandle` |
+| | Section | `LvSectionRoot`, `LvSectionHeader`, `LvSectionEyebrow`, `LvSectionTitle`, `LvSectionDescription`, `LvSectionContent` |
+| Display | Avatar, Progress | `LvAvatarRoot`, `LvAvatarImage`, `LvAvatarFallback`, `LvProgressRoot`, `LvProgressIndicator` |
+| | Table | `LvTableContainer`, `LvTableRoot`, `LvTableCaption`, `LvTableHeader`, `LvTableBody`, `LvTableFooter`, `LvTableRow`, `LvTableHead`, `LvTableCell`, plus `LvDataTable` |
+
+### Primitives
+
+The primitives provide semantic HTML and stable styling hooks without imposing
+CSS. `LvText` and `LvHeading` expose a `data-text-role` matching the typography
+roles in `@lovince/tokens`; heading level controls semantics independently from
+visual size.
+
+```vue
+<script setup lang="ts">
+import { LvAspectRatio, LvCode, LvHeading, LvKbd, LvLabel, LvLink, LvSeparator, LvText, LvVisuallyHidden } from '@lovince/ui-vue'
+</script>
+
+<template>
+  <LvHeading :level="1" size="display-md">Workspace</LvHeading>
+  <LvText variant="body-md">Manage projects and members.</LvText>
+  <LvLabel for="query">Search</LvLabel>
+  <LvLink href="/guide">Read the guide</LvLink>
+  <LvCode>bun test</LvCode>
+  <LvKbd>Ctrl+K</LvKbd>
+  <LvAspectRatio :ratio="16 / 9">
+    <img src="/product.webp" alt="Product detail" />
+  </LvAspectRatio>
+  <LvVisuallyHidden>Search projects</LvVisuallyHidden>
+  <LvSeparator :decorative="false" />
+</template>
+```
+
+`LvBox`, `LvAspectRatio`, `LvText`, `LvHeading`, `LvLabel`, `LvLink`, `LvCode`, `LvKbd`, and
+`LvVisuallyHidden` support `as` and `asChild`. `LvAspectRatio` defaults to a 1:1
+frame; set `ratio` to a positive finite number such as `16 / 9` to size its
+content region. `LvLink` defaults to an anchor and leaves navigation attributes
+such as `href`, `target`, and `rel` under the caller's control. `LvCode` and
+`LvKbd` default to their corresponding semantic elements. When `LvHeading`
+renders a non-heading element, it keeps its semantic level with
+`role="heading"` and `aria-level`. `LvVisuallyHidden` applies the minimal inline
+clipping styles needed to remain available to assistive technology. A
+non-decorative `LvSeparator` exposes separator semantics and its orientation;
+decorative separators are hidden from the accessibility tree.
+
+### Button
+
+`LvButton` is the one part that names a design decision: `variant`
+(`solid`, `subtle`, `outline`, `ghost`, `danger`) and `size` (`sm`, `md`, `lg`,
+`icon`) become `data-variant` and `data-size`, and your stylesheet decides what
+each of them looks like. What the component owns is the markup a hand-written
+button gets wrong.
+
+```vue
+<script setup lang="ts">
+import { LvButton } from '@lovince/ui-vue'
+</script>
+
+<template>
+  <LvButton @click="save">Save</LvButton>
+  <LvButton type="submit" variant="solid" size="lg" :loading="saving">Save</LvButton>
+  <LvButton as="a" href="/settings" variant="ghost" size="sm">Settings</LvButton>
+  <LvButton :disabled="!valid" variant="outline">Publish</LvButton>
+</template>
+```
+
+- `type` defaults to `button`, so a button inside a form never submits by
+  accident; ask for `submit` or `reset` explicitly.
+- `disabled` sets the native attribute when the element is a real `button`, and
+  `aria-disabled` when it is not, since an anchor cannot be disabled.
+- `loading` sets `aria-busy` and keeps the control in the tab order — a request
+  started from the keyboard stays visible to the keyboard — while swallowing
+  clicks so the handler cannot fire twice.
+- Both states also appear as `data-disabled` and `data-loading`, and neither
+  runs the `onClick` it was given. With `asChild` the element is yours, click
+  handling included; the state attributes still arrive.
+
+### Icon
+
+`LvIcon` draws a glyph from `@lovince/icons` on the registry's shared 24-unit
+canvas. It is its own entry because the icon registry is an optional peer:
+importing `@lovince/ui-vue` loads no icon data, and an app that brings its own
+icons needs nothing extra.
+
+```vue
+<script setup lang="ts">
+import { LvIcon } from '@lovince/ui-vue/icon'
+</script>
+
+<template>
+  <LvIcon name="arrowRight" />
+  <LvIcon name="success" :size="16" :stroke-width="1.5" label="Completed" />
+</template>
+```
+
+An icon is decorative — `aria-hidden="true"` — unless it is given a `label`,
+which makes it `role="img"` with that accessible name. `absoluteStrokeWidth`
+keeps the rendered stroke thickness constant as `size` grows; `fill` takes 0 to
+1 for a partial wash; `rotate` and `flip` turn about the canvas centre. Size and
+stroke fall back to the registry's own defaults, and an unknown `name` renders an
+empty box rather than breaking layout.
+
+### Forms
+
+`LvFieldRoot` provides a stable input id and wires the label, description, and
+error into `LvInput` or `LvTextarea`. Description and error copy can be passed as
+props or named slots. Set `invalid` to expose an error slot, or pass `error` to
+mark the field invalid automatically. `required` and `disabled` are propagated
+to the field control; each control can override them.
+
+```vue
+<script setup lang="ts">
+import { LvFieldLabel, LvFieldRoot, LvForm, LvInput, LvTextarea } from '@lovince/ui-vue'
+</script>
+
+<template>
+  <LvForm @submit.prevent="save">
+    <LvFieldRoot required description="Use your work email.">
+      <LvFieldLabel>Email</LvFieldLabel>
+      <LvInput type="email" name="email" autocomplete="email" />
+    </LvFieldRoot>
+
+    <LvFieldRoot :invalid="Boolean(message)" :error="message">
+      <LvFieldLabel>Project summary</LvFieldLabel>
+      <LvTextarea name="summary" />
+    </LvFieldRoot>
+
+    <button type="submit">Save</button>
+  </LvForm>
+</template>
+```
+
+`LvInput` and `LvTextarea` support `modelValue` / `defaultValue` and emit
+`update:modelValue`. `LvTextarea` uses content-based field sizing where the
+browser supports it and retains a native `rows` fallback. `LvForm` is a native
+form wrapper: browser constraint validation and submit events remain in
+control. Set `submitting` to expose `aria-busy` and `data-submitting`, or
+`noValidate` when validation is handled elsewhere.
+
+`TagsInput` and `FileUpload` expose their current values and rejected entries
+through the root's default slot. Their pure rules and rejection reasons live in
+`@lovince/ui-headless`.
+
+```vue
+<script setup lang="ts">
+import {
+  LvFileUploadInput,
+  LvFileUploadItem,
+  LvFileUploadRemove,
+  LvFileUploadRoot,
+  LvTagsInputInput,
+  LvTagsInputItem,
+  LvTagsInputRemove,
+  LvTagsInputRoot,
+} from '@lovince/ui-vue'
+</script>
+
+<LvTagsInputRoot v-model="emails" :max="5" :validate="isEmail" name="emails">
+  <LvTagsInputItem v-for="(email, index) in emails" :key="email" :index="index">
+    {{ email }} <LvTagsInputRemove />
+  </LvTagsInputItem>
+  <LvTagsInputInput label="Add email address" />
+</LvTagsInputRoot>
+
+<LvFileUploadRoot v-model="files" accept="image/*,.pdf" :max-files="4" :max-size="5000000">
+  <LvFileUploadInput />
+  <LvFileUploadItem v-for="(file, index) in files" :key="file.name" :index="index">
+    <template #default="{ file, size }">
+      {{ file.name }} ({{ size }}) <LvFileUploadRemove />
+    </template>
+  </LvFileUploadItem>
+</LvFileUploadRoot>
+```
+
+Tags are created with Enter or a configured separator; pasted separator-delimited
+text is split, and duplicate, invalid, and over-limit values emit `rejected`.
+File selection and dropping share the same type, per-file size, count, and total
+size checks. `LvFileUploadRoot` emits accepted `File[]` values and rejected files
+with their reason; `LvFileUploadItem` also exposes kind, extension, and localized
+size to its slot.
+
+`TimeField` accepts human-entered times and stores normalized `HH:mm` values.
+It validates optional `min` and `max` bounds on blur or Enter, and exposes
+`invalid` when parsing or range validation fails. `PhoneInput` formats a
+national number on blur, recognizes supported international prefixes, and
+emits E.164 values. It includes a country selector and accepts an optional
+custom country list.
+
+```vue
+<LvTimeFieldRoot v-model="appointment" min="09:00" max="17:00" required name="appointment">
+  <LvTimeFieldInput label="Appointment time" />
+</LvTimeFieldRoot>
+
+<LvPhoneInputRoot v-model="phone" country="KE" name="phone">
+  <LvPhoneInputCountrySelect />
+  <LvPhoneInputInput label="Mobile number" />
+</LvPhoneInputRoot>
+```
+
+`ScrollArea` keeps scrolling native while exposing custom, keyboard-operable
+scrollbar parts. Size the root from its container, then render the viewport and
+the scrollbar/ thumb parts inside it. The root slot reports current overflow
+metrics; style the track and thumb with their `data-scroll-area-*` attributes.
+The viewport keeps its native scroll behavior and uses `scrollbar-width: none`
+where that property is supported.
+
+```vue
+<LvScrollAreaRoot class="results">
+  <LvScrollAreaViewport>
+    <div v-for="result in results" :key="result.id">{{ result.title }}</div>
+  </LvScrollAreaViewport>
+  <LvScrollAreaScrollbar>
+    <LvScrollAreaThumb />
+  </LvScrollAreaScrollbar>
+</LvScrollAreaRoot>
+```
 
 Composables: `useDataTable`, `useVirtualList`, `useInView`, `useScrollEdges`,
 `useActiveSection`, `useClipboard`, plus the building blocks below.
 
-The package is `sideEffects: false`. An app importing only `DialogRoot` ships
+The package is `sideEffects: false`. An app importing only `LvDialogRoot` ships
 no menu, select or table code, and a test enforces this.
 
 ## Shared conventions

package/dist/components/{combobox.d.ts → choice/combobox.d.ts}

@@ -1,10 +1,5 @@
 import { PropType } from 'vue';
-/**
- * A text input that filters a list of options, per the WAI-ARIA combobox
- * pattern with list autocomplete. Focus stays in the input throughout; the
- * highlighted option is announced through `aria-activedescendant`.
- */
-export declare const ComboboxRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: {
         type: PropType<string | string[]>;
         default: undefined;
@@ -13,7 +8,6 @@ export declare const ComboboxRoot: import('vue').DefineComponent<import('vue').E
         type: PropType<string | string[]>;
         default: undefined;
     };
-    /** Pick several: `v-model` is an array, picking toggles, and the list stays open. */
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -38,12 +32,10 @@ export declare const ComboboxRoot: import('vue').DefineComponent<import('vue').E
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Filter options by the typed text. Turn off when the server filters and you render the results. */
     filter: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Adds a hidden input so the value submits with a native form. */
     name: {
         type: StringConstructor;
         default: undefined;
@@ -63,7 +55,6 @@ export declare const ComboboxRoot: import('vue').DefineComponent<import('vue').E
         type: PropType<string | string[]>;
         default: undefined;
     };
-    /** Pick several: `v-model` is an array, picking toggles, and the list stays open. */
     multiple: {
         type: BooleanConstructor;
         default: boolean;
@@ -88,12 +79,10 @@ export declare const ComboboxRoot: import('vue').DefineComponent<import('vue').E
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Filter options by the typed text. Turn off when the server filters and you render the results. */
     filter: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Adds a hidden input so the value submits with a native form. */
     name: {
         type: StringConstructor;
         default: undefined;
@@ -114,8 +103,7 @@ export declare const ComboboxRoot: import('vue').DefineComponent<import('vue').E
     defaultValue: string | string[];
     searchTerm: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** What the list is positioned against: usually a wrapper round the input and its buttons. */
-export declare const ComboboxAnchor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxAnchor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly as: {
         readonly type: PropType<string | import('vue').Component>;
         readonly default: "div";
@@ -139,7 +127,7 @@ export declare const ComboboxAnchor: import('vue').DefineComponent<import('vue')
     readonly as: string | import('vue').Component;
     readonly asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const ComboboxInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -163,8 +151,7 @@ export declare const ComboboxInput: import('vue').DefineComponent<import('vue').
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** Toggles the list. Out of the tab order: the input is the one control. */
-export declare const ComboboxTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: string;
@@ -197,8 +184,7 @@ export declare const ComboboxTrigger: import('vue').DefineComponent<import('vue'
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** Clears the value and the text. Renders nothing while there is nothing to clear. */
-export declare const ComboboxClear: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxClear: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: string;
@@ -231,7 +217,7 @@ export declare const ComboboxClear: import('vue').DefineComponent<import('vue').
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const ComboboxPortal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxPortal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     to: {
         type: PropType<string | HTMLElement>;
         default: string;
@@ -255,7 +241,7 @@ export declare const ComboboxPortal: import('vue').DefineComponent<import('vue')
     to: string | HTMLElement;
     disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const ComboboxContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     align: {
         default: string;
         type: PropType<import('@lovince/ui-headless').Align>;
@@ -328,7 +314,7 @@ export declare const ComboboxContent: import('vue').DefineComponent<import('vue'
     collisionPadding: number;
     avoidCollisions: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const ComboboxItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     value: {
         type: StringConstructor;
         required: true;
@@ -337,7 +323,6 @@ export declare const ComboboxItem: import('vue').DefineComponent<import('vue').E
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Text used for matching and shown in the input; defaults to the item's text. */
     textValue: {
         type: StringConstructor;
         default: undefined;
@@ -361,7 +346,6 @@ export declare const ComboboxItem: import('vue').DefineComponent<import('vue').E
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Text used for matching and shown in the input; defaults to the item's text. */
     textValue: {
         type: StringConstructor;
         default: undefined;
@@ -380,7 +364,7 @@ export declare const ComboboxItem: import('vue').DefineComponent<import('vue').E
     disabled: boolean;
     textValue: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const ComboboxItemIndicator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxItemIndicator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -404,8 +388,7 @@ export declare const ComboboxItemIndicator: import('vue').DefineComponent<import
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** Shown when no option matches. A live region, so the result is announced. */
-export declare const ComboboxEmpty: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvComboboxEmpty: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly as: {
         readonly type: PropType<string | import('vue').Component>;
         readonly default: "div";

package/dist/components/{command.d.ts → choice/command.d.ts}

@@ -1,14 +1,9 @@
 import { PropType } from 'vue';
-/**
- * A command palette: a search field over a list of actions, filtered as you
- * type. Focus stays in the field; Enter runs the highlighted action.
- */
-export declare const CommandRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvCommandRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     search: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Filter items by the search. Turn off when you render server results yourself. */
     filter: {
         type: BooleanConstructor;
         default: boolean;
@@ -30,7 +25,6 @@ export declare const CommandRoot: import('vue').DefineComponent<import('vue').Ex
         type: StringConstructor;
         default: undefined;
     };
-    /** Filter items by the search. Turn off when you render server results yourself. */
     filter: {
         type: BooleanConstructor;
         default: boolean;
@@ -51,7 +45,7 @@ export declare const CommandRoot: import('vue').DefineComponent<import('vue').Ex
     asChild: boolean;
     search: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const CommandInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvCommandInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -75,7 +69,7 @@ export declare const CommandInput: import('vue').DefineComponent<import('vue').E
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const CommandList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvCommandList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: string;
@@ -108,8 +102,7 @@ export declare const CommandList: import('vue').DefineComponent<import('vue').Ex
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** A labelled set of items. Hidden while none of its items match. */
-export declare const CommandGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvCommandGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     heading: {
         type: StringConstructor;
         default: undefined;
@@ -142,13 +135,11 @@ export declare const CommandGroup: import('vue').DefineComponent<import('vue').E
     asChild: boolean;
     heading: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const CommandItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /** Passed to `@select`; defaults to the item's text. */
+export declare const LvCommandItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     value: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Extra words that should find this item: synonyms, codes, old names. */
     keywords: {
         type: PropType<string[]>;
         default: () => never[];
@@ -170,12 +161,10 @@ export declare const CommandItem: import('vue').DefineComponent<import('vue').Ex
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (value: string) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /** Passed to `@select`; defaults to the item's text. */
     value: {
         type: StringConstructor;
         default: undefined;
     };
-    /** Extra words that should find this item: synonyms, codes, old names. */
     keywords: {
         type: PropType<string[]>;
         default: () => never[];
@@ -201,7 +190,7 @@ export declare const CommandItem: import('vue').DefineComponent<import('vue').Ex
     disabled: boolean;
     keywords: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const CommandEmpty: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvCommandEmpty: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly as: {
         readonly type: PropType<string | import('vue').Component>;
         readonly default: "div";
@@ -225,8 +214,7 @@ export declare const CommandEmpty: import('vue').DefineComponent<import('vue').E
     readonly as: string | import('vue').Component;
     readonly asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** Hidden while searching, when groups no longer sit in their usual order. */
-export declare const CommandSeparator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvCommandSeparator: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly as: {
         readonly type: PropType<string | import('vue').Component>;
         readonly default: "div";

package/dist/components/{emoji-picker.d.ts → choice/emoji-picker.d.ts}

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { Direction, EmojiGroup, EmojiPickerSection, EmojiRecord, SkinTone } from '@lovince/ui-headless';
 export type { EmojiPickerSection };
-export declare const EmojiPickerRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     emojis: {
         type: PropType<readonly EmojiRecord[]>;
         default: () => never[];
@@ -107,7 +107,7 @@ export declare const EmojiPickerRoot: import('vue').DefineComponent<import('vue'
     maxRecent: number;
     columns: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerSearch: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerSearch: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -131,7 +131,7 @@ export declare const EmojiPickerSearch: import('vue').DefineComponent<import('vu
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: string;
@@ -164,7 +164,7 @@ export declare const EmojiPickerList: import('vue').DefineComponent<import('vue'
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     section: {
         type: PropType<EmojiPickerSection>;
         required: true;
@@ -196,7 +196,7 @@ export declare const EmojiPickerGroup: import('vue').DefineComponent<import('vue
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerGroupHeading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerGroupHeading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -220,7 +220,7 @@ export declare const EmojiPickerGroupHeading: import('vue').DefineComponent<impo
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -260,7 +260,7 @@ export declare const EmojiPickerItem: import('vue').DefineComponent<import('vue'
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerNav: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerNav: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: string;
@@ -293,7 +293,7 @@ export declare const EmojiPickerNav: import('vue').DefineComponent<import('vue')
     asChild: boolean;
     label: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerNavItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerNavItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     section: {
         type: StringConstructor;
         required: true;
@@ -333,7 +333,7 @@ export declare const EmojiPickerNavItem: import('vue').DefineComponent<import('v
     as: string | import('vue').Component;
     asChild: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const EmojiPickerEmpty: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvEmojiPickerEmpty: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly as: {
         readonly type: PropType<string | import('vue').Component>;
         readonly default: "div";