@skdx/vue 0.27.0 → 0.28.0

package/dist/tag-group/context.d.cts

@@ -1,41 +1,71 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 /**
- * Layout axis of a `SkdxTagGroup`, which also picks the arrow-key axis. Mirrors
- * React's `TagGroupOrientation` (`packages/react/src/tag-group/types.ts:4`).
+ * Layout axis of a TagGroup; also picks the arrow-key axis.
  */
 export type TagGroupOrientation = 'horizontal' | 'vertical';
 /** @internal Marks the TagGroup root, so a tag being removed can find the group to fall back to. */
 export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
 /** @internal Marks a tag, so the group can discover its items from the DOM without a registration round-trip. */
 export declare const TAG_SELECTOR = "[data-skdx-tag]";
-/** @internal Shape a TagGroup provides so its `SkdxTag` children can join its single roving tab stop. */
+/** What a `SkdxTagGroup`'s `remove` event carries about the tag that just went. */
+export interface TagRemovedDetail {
+    /** The removed tag's own text, as it was passed to `SkdxTag`'s `label`. */
+    label: string;
+    /** The index the removed tag held. */
+    index: number;
+}
+/** @internal Context shape for TagGroup's roving tab stop and state. */
 export interface TagGroupContext {
-    /** Index of the tag that currently owns the group's single tab stop, clamped to the number of mounted tags. */
+    /** Current tab-stop index, clamped to mounted tag count. */
     tabStopIndex: ComputedRef<number>;
-    /** Claims the tab stop for the tag at `index` — on focus, and again after a removal shifts the indices. */
+    /** Claim tab stop for tag at index; called on focus and after removal shifts indices. */
     setActiveIndex: (index: number) => void;
-    /** Registers a mounted tag so the group knows how many exist; returns its unregister. */
-    register: () => () => void;
-    /** Whether the whole group is disabled. */
+    /** Register a tag; returns unregister. Catches duplicate indices. */
+    register: (index: number) => () => void;
+    /** Report un-prevented removal to the group. */
+    onTagRemoved: (detail: TagRemovedDetail) => void;
+    /** Mounted tag count. */
+    count: ComputedRef<number>;
+    /** TagGroupLabel id, if rendered, for aria-labelledby. */
+    labelId: ComputedRef<string | undefined>;
+    /** Register a label's id; returns unregister. */
+    registerLabel: (id: string) => () => void;
+    /** Whether TagGroupList is rendered; moves role="list" off root. */
+    hasList: ComputedRef<boolean>;
+    /** Register a list; returns unregister. */
+    registerList: () => () => void;
+    /** Root's aria-label/aria-labelledby, forwarded to List when present. */
+    labelling: ComputedRef<{
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
+    }>;
+    /** Layout axis for data-orientation. */
+    orientation: ComputedRef<TagGroupOrientation>;
+    /** Group-level disabled state. */
     disabled: ComputedRef<boolean>;
 }
+/**
+ * Warn once when two tags claim the same index. Duplicates break roving tabindex;
+ * gaps make the group unreachable. Index must match render order. @internal
+ */
+export declare function warnOnDuplicateIndex(claimed: Map<number, number>, index: number, delta: 1 | -1): void;
 /** @internal Injection key a TagGroup provides so its tags share the roving tab stop and the group-level disabled flag. */
 export declare const TAG_GROUP_CONTEXT: InjectionKey<TagGroupContext>;
+/** @internal Where focus goes when the tag at some index is removed, and the index the newly focused tag will then hold. */
+export interface TagNeighbor {
+    /** The element to focus: the following tag, the preceding one, or the group root when this was the only tag. */
+    target: HTMLElement | null;
+    /** The index that element will hold once the removal lands. */
+    index: number;
+}
+/**
+ * Where focus goes when tag at index is removed: next tag, previous if last,
+ * or group root if only one. Doesn't move focus (delete event is cancelable).
+ * @internal
+ */
+export declare function resolveTagNeighbor(tag: HTMLElement | null, index: number): TagNeighbor;
 /**
- * Moves focus off the tag at `index` *before* it is removed, and returns the
- * index the newly focused tag will hold once the removal lands.
- *
- * Focus moves to the following tag, or to the preceding one when the removed
- * tag was last, or to the group itself when it was the only one — never to
- * `<body>`, which is what happens by default when the focused element is
- * unmounted. Focus is moved first and the removal is left to the consumer, so
- * this works the same whether their state update is synchronous or not: the
- * neighbour element survives the re-render, so it keeps the focus it was
- * given.
- *
- * Mirrors `packages/react/src/tag-group/TagGroup.tsx`'s `focusTagNeighbor` —
- * duplicated rather than shared, because no framework package imports
- * `@skdx/shared` at runtime.
+ * Resolve and move focus in one call (used where no cancelable event follows).
  * @internal
  */
 export declare function focusTagNeighbor(tag: HTMLElement | null, index: number): number;

package/dist/tag-group/context.d.ts

@@ -1,41 +1,71 @@
 import type { ComputedRef, InjectionKey } from 'vue';
 /**
- * Layout axis of a `SkdxTagGroup`, which also picks the arrow-key axis. Mirrors
- * React's `TagGroupOrientation` (`packages/react/src/tag-group/types.ts:4`).
+ * Layout axis of a TagGroup; also picks the arrow-key axis.
  */
 export type TagGroupOrientation = 'horizontal' | 'vertical';
 /** @internal Marks the TagGroup root, so a tag being removed can find the group to fall back to. */
 export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
 /** @internal Marks a tag, so the group can discover its items from the DOM without a registration round-trip. */
 export declare const TAG_SELECTOR = "[data-skdx-tag]";
-/** @internal Shape a TagGroup provides so its `SkdxTag` children can join its single roving tab stop. */
+/** What a `SkdxTagGroup`'s `remove` event carries about the tag that just went. */
+export interface TagRemovedDetail {
+    /** The removed tag's own text, as it was passed to `SkdxTag`'s `label`. */
+    label: string;
+    /** The index the removed tag held. */
+    index: number;
+}
+/** @internal Context shape for TagGroup's roving tab stop and state. */
 export interface TagGroupContext {
-    /** Index of the tag that currently owns the group's single tab stop, clamped to the number of mounted tags. */
+    /** Current tab-stop index, clamped to mounted tag count. */
     tabStopIndex: ComputedRef<number>;
-    /** Claims the tab stop for the tag at `index` — on focus, and again after a removal shifts the indices. */
+    /** Claim tab stop for tag at index; called on focus and after removal shifts indices. */
     setActiveIndex: (index: number) => void;
-    /** Registers a mounted tag so the group knows how many exist; returns its unregister. */
-    register: () => () => void;
-    /** Whether the whole group is disabled. */
+    /** Register a tag; returns unregister. Catches duplicate indices. */
+    register: (index: number) => () => void;
+    /** Report un-prevented removal to the group. */
+    onTagRemoved: (detail: TagRemovedDetail) => void;
+    /** Mounted tag count. */
+    count: ComputedRef<number>;
+    /** TagGroupLabel id, if rendered, for aria-labelledby. */
+    labelId: ComputedRef<string | undefined>;
+    /** Register a label's id; returns unregister. */
+    registerLabel: (id: string) => () => void;
+    /** Whether TagGroupList is rendered; moves role="list" off root. */
+    hasList: ComputedRef<boolean>;
+    /** Register a list; returns unregister. */
+    registerList: () => () => void;
+    /** Root's aria-label/aria-labelledby, forwarded to List when present. */
+    labelling: ComputedRef<{
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
+    }>;
+    /** Layout axis for data-orientation. */
+    orientation: ComputedRef<TagGroupOrientation>;
+    /** Group-level disabled state. */
     disabled: ComputedRef<boolean>;
 }
+/**
+ * Warn once when two tags claim the same index. Duplicates break roving tabindex;
+ * gaps make the group unreachable. Index must match render order. @internal
+ */
+export declare function warnOnDuplicateIndex(claimed: Map<number, number>, index: number, delta: 1 | -1): void;
 /** @internal Injection key a TagGroup provides so its tags share the roving tab stop and the group-level disabled flag. */
 export declare const TAG_GROUP_CONTEXT: InjectionKey<TagGroupContext>;
+/** @internal Where focus goes when the tag at some index is removed, and the index the newly focused tag will then hold. */
+export interface TagNeighbor {
+    /** The element to focus: the following tag, the preceding one, or the group root when this was the only tag. */
+    target: HTMLElement | null;
+    /** The index that element will hold once the removal lands. */
+    index: number;
+}
+/**
+ * Where focus goes when tag at index is removed: next tag, previous if last,
+ * or group root if only one. Doesn't move focus (delete event is cancelable).
+ * @internal
+ */
+export declare function resolveTagNeighbor(tag: HTMLElement | null, index: number): TagNeighbor;
 /**
- * Moves focus off the tag at `index` *before* it is removed, and returns the
- * index the newly focused tag will hold once the removal lands.
- *
- * Focus moves to the following tag, or to the preceding one when the removed
- * tag was last, or to the group itself when it was the only one — never to
- * `<body>`, which is what happens by default when the focused element is
- * unmounted. Focus is moved first and the removal is left to the consumer, so
- * this works the same whether their state update is synchronous or not: the
- * neighbour element survives the re-render, so it keeps the focus it was
- * given.
- *
- * Mirrors `packages/react/src/tag-group/TagGroup.tsx`'s `focusTagNeighbor` —
- * duplicated rather than shared, because no framework package imports
- * `@skdx/shared` at runtime.
+ * Resolve and move focus in one call (used where no cancelable event follows).
  * @internal
  */
 export declare function focusTagNeighbor(tag: HTMLElement | null, index: number): number;

package/dist/tag-group/context.js

@@ -1 +1 @@
-var a="[data-skdx-tag-group]",t="[data-skdx-tag]",o=/* @__PURE__ */Symbol("skdx-tag-group-context");function r(a,o){const r=a?.closest("[data-skdx-tag-group]")??null,s=r?Array.from(r.querySelectorAll(t)):[],d=a?s.indexOf(a):-1,e=-1===d?void 0:s[d+1];return(e??s[d-1]??r)?.focus(),e?o:Math.max(o-1,0)}export{o as TAG_GROUP_CONTEXT,a as TAG_GROUP_SELECTOR,t as TAG_SELECTOR,r as focusTagNeighbor};
+import{isDevMode as e}from"../utils/is-dev-mode.js";var t="[data-skdx-tag-group]",a="[data-skdx-tag]";function r(t,a,r){const o=(t.get(a)??0)+r;o<=0?t.delete(a):t.set(a,o),1===r&&o>1&&e()&&console.warn(`[skdx] TagGroup: ${o} mounted Tags report index={${a}}. \`index\` must match render order — pass the array index from the v-for that produced the tags. Duplicates put more than one tag in the tab order; a gap leaves the group with none.`)}var o=/* @__PURE__ */Symbol("skdx-tag-group-context");function s(e,t){const r=e?.closest("[data-skdx-tag-group]")??null,o=r?Array.from(r.querySelectorAll(a)):[],s=e?o.indexOf(e):-1,n=-1===s?void 0:o[s+1];return{target:n??o[s-1]??r,index:n?t:Math.max(t-1,0)}}export{o as TAG_GROUP_CONTEXT,t as TAG_GROUP_SELECTOR,a as TAG_SELECTOR,s as resolveTagNeighbor,r as warnOnDuplicateIndex};

package/dist/tag-group/index.d.cts

@@ -1,2 +1,3 @@
 export { default as SkdxTagGroup } from './TagGroup.vue.cjs';
-export type { TagGroupOrientation } from './context.cjs';
+export type { TagGroupTag } from './types.cjs';
+export type { TagGroupOrientation, TagRemovedDetail } from './context.cjs';

package/dist/tag-group/index.d.ts

@@ -1,2 +1,3 @@
 export { default as SkdxTagGroup } from './TagGroup.vue.js';
-export type { TagGroupOrientation } from './context.js';
+export type { TagGroupTag } from './types.js';
+export type { TagGroupOrientation, TagRemovedDetail } from './context.js';

package/dist/tag-group/primitives.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./TagGroup.vue.cjs"),r=require("./TagGroupList.vue.cjs"),u=require("./TagGroupLabel.vue.cjs"),a=require("./TagGroupEmpty.vue.cjs");exports.SkdxTagGroup=e.default;exports.SkdxTagGroupEmpty=a.default;exports.SkdxTagGroupLabel=u.default;exports.SkdxTagGroupList=r.default;

package/dist/tag-group/primitives.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Advanced primitives for custom `SkdxTagGroup` layouts. Recipe built from
+ * these.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxTag } from '@skdx/vue';
+ * import { SkdxTagGroup, SkdxTagGroupEmpty, SkdxTagGroupLabel, SkdxTagGroupList } from '@skdx/vue/primitives/tag-group';
+ * </script>
+ *
+ * <template>
+ *   <SkdxTagGroup @remove="onRemove">
+ *     <SkdxTagGroupLabel>Topics</SkdxTagGroupLabel>
+ *     <SkdxTagGroupList>
+ *       <SkdxTag v-for="(tag, i) in tags" :key="tag" :index="i" :label="tag" deletable />
+ *     </SkdxTagGroupList>
+ *     <SkdxTagGroupEmpty>No topics yet.</SkdxTagGroupEmpty>
+ *   </SkdxTagGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxTagGroup } from './TagGroup.vue.cjs';
+export { default as SkdxTagGroupList } from './TagGroupList.vue.cjs';
+export { default as SkdxTagGroupLabel } from './TagGroupLabel.vue.cjs';
+export { default as SkdxTagGroupEmpty } from './TagGroupEmpty.vue.cjs';
+export type { TagGroupTag } from './types.cjs';
+export type { TagGroupOrientation, TagRemovedDetail } from './context.cjs';

package/dist/tag-group/primitives.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Advanced primitives for custom `SkdxTagGroup` layouts. Recipe built from
+ * these.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxTag } from '@skdx/vue';
+ * import { SkdxTagGroup, SkdxTagGroupEmpty, SkdxTagGroupLabel, SkdxTagGroupList } from '@skdx/vue/primitives/tag-group';
+ * </script>
+ *
+ * <template>
+ *   <SkdxTagGroup @remove="onRemove">
+ *     <SkdxTagGroupLabel>Topics</SkdxTagGroupLabel>
+ *     <SkdxTagGroupList>
+ *       <SkdxTag v-for="(tag, i) in tags" :key="tag" :index="i" :label="tag" deletable />
+ *     </SkdxTagGroupList>
+ *     <SkdxTagGroupEmpty>No topics yet.</SkdxTagGroupEmpty>
+ *   </SkdxTagGroup>
+ * </template>
+ * ```
+ */
+export { default as SkdxTagGroup } from './TagGroup.vue.js';
+export { default as SkdxTagGroupList } from './TagGroupList.vue.js';
+export { default as SkdxTagGroupLabel } from './TagGroupLabel.vue.js';
+export { default as SkdxTagGroupEmpty } from './TagGroupEmpty.vue.js';
+export type { TagGroupTag } from './types.js';
+export type { TagGroupOrientation, TagRemovedDetail } from './context.js';

package/dist/tag-group/primitives.js

@@ -0,0 +1 @@
+import o from"./TagGroup.vue.js";import r from"./TagGroupList.vue.js";import p from"./TagGroupLabel.vue.js";import a from"./TagGroupEmpty.vue.js";export{o as SkdxTagGroup,a as SkdxTagGroupEmpty,p as SkdxTagGroupLabel,r as SkdxTagGroupList};

package/dist/tag-group/types.d.cts

@@ -0,0 +1,13 @@
+/** One tag in a `SkdxTagGroup`'s `tags`. */
+export interface TagGroupTag {
+    /** Stable identifier for this tag, carried on the removal detail. */
+    value: string;
+    /** The tag's visible text, which also names its delete button (`Remove react`). */
+    label: string;
+    /**
+     * Disables this tag alone: it cannot be removed and arrow-key navigation
+     * skips it.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/tag-group/types.d.ts

@@ -0,0 +1,13 @@
+/** One tag in a `SkdxTagGroup`'s `tags`. */
+export interface TagGroupTag {
+    /** Stable identifier for this tag, carried on the removal detail. */
+    value: string;
+    /** The tag's visible text, which also names its delete button (`Remove react`). */
+    label: string;
+    /**
+     * Disables this tag alone: it cannot be removed and arrow-key navigation
+     * skips it.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/tags-input/TagsInput.vue.d.cts

@@ -1,15 +1,13 @@
+import { type TagsInputInvalidDetail } from './context.cjs';
 /**
- * The Vue implementation of the shared TagsInput contract (see
- * `@skdx/shared`'s `tagsInputContract`). Owns the `string[]` of committed
- * tags and `provide()`s it, plus add/remove, to `SkdxTagsInputItem` /
- * `SkdxTagsInputItemDelete` / `SkdxTagsInputInput` children. Renders a plain
- * `<div>`.
+ * Tag list with a controlled draft field. Works with `v-model:value` (tags)
+ * and `v-model:input-value` (draft). Supports validation, delimiters, and
+ * form integration with per-tag hidden inputs.
  *
- * Works controlled (`v-model:value`) or uncontrolled (`default-value`), and
- * the draft text in `SkdxTagsInputInput` is separately controllable with
- * `v-model:input-value` / `default-input-value`. A `validate` predicate can
- * reject a candidate tag, and `delimiter`/`add-on-paste` decide how typed and
- * pasted text is split into tags.
+ * @example
+ * ```vue
+ * <SkdxTagsInput v-model:value="tags" input-label="Topics" />
+ * ```
  */
 type __VLS_Props = {
     /** Current tags, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -24,8 +22,22 @@ type __VLS_Props = {
     readOnly?: boolean;
     /** Maximum number of tags; further additions are no-ops once reached. */
     max?: number;
-    /** Character that commits the draft as a tag while typing, and that pasted text is split on. */
-    delimiter?: string;
+    /**
+     * Characters that commit a tag while typing or split pasted text.
+     * Typed commit fires for single-character entries only (vs `KeyboardEvent.key`).
+     * @default [',', '\n']
+     */
+    delimiter?: string | string[];
+    /**
+     * How to handle draft text on blur: `'keep'`, `'clear'`, or `'commit'`.
+     * @default 'keep'
+     */
+    blurBehavior?: 'keep' | 'clear' | 'commit';
+    /**
+     * Allow editing tags in place (Enter commits, Escape reverts).
+     * @default false
+     */
+    editable?: boolean;
     /** Commit pasted text as tags (split on `delimiter`) instead of dropping it into the draft field. */
     addOnPaste?: boolean;
     /**
@@ -33,34 +45,92 @@ type __VLS_Props = {
      * tags accepted so far. Return `false` to reject it.
      */
     validate?: (tag: string, tags: string[]) => boolean;
+    /**
+     * Allow the same tag to appear more than once; defaults to exact-match
+     * deduplication. `validate` runs first and can override it.
+     * @default false
+     */
+    allowDuplicates?: boolean;
     /** Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`. */
     inputValue?: string;
     /** Initial draft text, for uncontrolled usage. */
     defaultInputValue?: string;
+    /**
+     * Form field name; each tag submitted as separate entry under this name.
+     */
+    name?: string;
+    /**
+     * Marks the field required: `valueMissing` while there are no tags,
+     * reported through the exposed `checkValidity()`/`reportValidity()`. Only
+     * meaningful with `name`, since a field that submits nothing cannot be
+     * invalid.
+     */
+    required?: boolean;
+    /**
+     * Id of the `<form>` this field submits to, for a TagsInput rendered
+     * outside it — the native `form` attribute, set on every mirrored input.
+     */
+    form?: string;
+    /**
+     * Accessible name for the derived draft field (announces the input, not group).
+     * Ignored if slot supplies `SkdxTagsInputInput`.
+     * @default 'Add a tag'
+     */
+    inputLabel?: string;
+    /**
+     * Placeholder text for the derived draft field. Hint copy only — it
+     * disappears the moment the user types, so it never replaces
+     * `inputLabel`. Ignored once the default slot supplies its own
+     * `SkdxTagsInputInput`.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Whether the derived anatomy renders a `SkdxTagsInputClear` — one press
+     * that empties the whole list, the case the per-tag delete buttons turn
+     * into twenty presses.
+     * @default false
+     */
+    clearable?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the mirrored form inputs satisfy their constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string[]) => any;
     "value-change": (value: string[]) => any;
+    "value-invalid": (detail: TagsInputInvalidDetail) => any;
     "update:inputValue": (inputValue: string) => any;
     "input-value-change": (inputValue: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: string[]) => any) | undefined;
     "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onValue-invalid"?: ((detail: TagsInputInvalidDetail) => any) | undefined;
     "onUpdate:inputValue"?: ((inputValue: string) => any) | undefined;
     "onInput-value-change"?: ((inputValue: string) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    placeholder: string;
     value: string[];
+    readOnly: boolean;
+    required: boolean;
+    name: string;
     invalid: boolean;
     defaultValue: string[];
     max: number;
-    readOnly: boolean;
+    clearable: boolean;
     validate: (tag: string, tags: string[]) => boolean;
-    delimiter: string;
+    inputLabel: string;
+    delimiter: string | string[];
+    blurBehavior: "keep" | "clear" | "commit";
+    editable: boolean;
     addOnPaste: boolean;
     inputValue: string;
     defaultInputValue: string;

package/dist/tags-input/TagsInput.vue.d.ts

@@ -1,15 +1,13 @@
+import { type TagsInputInvalidDetail } from './context.js';
 /**
- * The Vue implementation of the shared TagsInput contract (see
- * `@skdx/shared`'s `tagsInputContract`). Owns the `string[]` of committed
- * tags and `provide()`s it, plus add/remove, to `SkdxTagsInputItem` /
- * `SkdxTagsInputItemDelete` / `SkdxTagsInputInput` children. Renders a plain
- * `<div>`.
+ * Tag list with a controlled draft field. Works with `v-model:value` (tags)
+ * and `v-model:input-value` (draft). Supports validation, delimiters, and
+ * form integration with per-tag hidden inputs.
  *
- * Works controlled (`v-model:value`) or uncontrolled (`default-value`), and
- * the draft text in `SkdxTagsInputInput` is separately controllable with
- * `v-model:input-value` / `default-input-value`. A `validate` predicate can
- * reject a candidate tag, and `delimiter`/`add-on-paste` decide how typed and
- * pasted text is split into tags.
+ * @example
+ * ```vue
+ * <SkdxTagsInput v-model:value="tags" input-label="Topics" />
+ * ```
  */
 type __VLS_Props = {
     /** Current tags, for controlled usage. Pair with `v-model:value` or `@value-change`. */
@@ -24,8 +22,22 @@ type __VLS_Props = {
     readOnly?: boolean;
     /** Maximum number of tags; further additions are no-ops once reached. */
     max?: number;
-    /** Character that commits the draft as a tag while typing, and that pasted text is split on. */
-    delimiter?: string;
+    /**
+     * Characters that commit a tag while typing or split pasted text.
+     * Typed commit fires for single-character entries only (vs `KeyboardEvent.key`).
+     * @default [',', '\n']
+     */
+    delimiter?: string | string[];
+    /**
+     * How to handle draft text on blur: `'keep'`, `'clear'`, or `'commit'`.
+     * @default 'keep'
+     */
+    blurBehavior?: 'keep' | 'clear' | 'commit';
+    /**
+     * Allow editing tags in place (Enter commits, Escape reverts).
+     * @default false
+     */
+    editable?: boolean;
     /** Commit pasted text as tags (split on `delimiter`) instead of dropping it into the draft field. */
     addOnPaste?: boolean;
     /**
@@ -33,34 +45,92 @@ type __VLS_Props = {
      * tags accepted so far. Return `false` to reject it.
      */
     validate?: (tag: string, tags: string[]) => boolean;
+    /**
+     * Allow the same tag to appear more than once; defaults to exact-match
+     * deduplication. `validate` runs first and can override it.
+     * @default false
+     */
+    allowDuplicates?: boolean;
     /** Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`. */
     inputValue?: string;
     /** Initial draft text, for uncontrolled usage. */
     defaultInputValue?: string;
+    /**
+     * Form field name; each tag submitted as separate entry under this name.
+     */
+    name?: string;
+    /**
+     * Marks the field required: `valueMissing` while there are no tags,
+     * reported through the exposed `checkValidity()`/`reportValidity()`. Only
+     * meaningful with `name`, since a field that submits nothing cannot be
+     * invalid.
+     */
+    required?: boolean;
+    /**
+     * Id of the `<form>` this field submits to, for a TagsInput rendered
+     * outside it — the native `form` attribute, set on every mirrored input.
+     */
+    form?: string;
+    /**
+     * Accessible name for the derived draft field (announces the input, not group).
+     * Ignored if slot supplies `SkdxTagsInputInput`.
+     * @default 'Add a tag'
+     */
+    inputLabel?: string;
+    /**
+     * Placeholder text for the derived draft field. Hint copy only — it
+     * disappears the moment the user types, so it never replaces
+     * `inputLabel`. Ignored once the default slot supplies its own
+     * `SkdxTagsInputInput`.
+     * @default undefined — no placeholder.
+     */
+    placeholder?: string;
+    /**
+     * Whether the derived anatomy renders a `SkdxTagsInputClear` — one press
+     * that empties the whole list, the case the per-tag delete buttons turn
+     * into twenty presses.
+     * @default false
+     */
+    clearable?: boolean;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the mirrored form inputs satisfy their constraints. `true` without a `name`. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:value": (value: string[]) => any;
     "value-change": (value: string[]) => any;
+    "value-invalid": (detail: TagsInputInvalidDetail) => any;
     "update:inputValue": (inputValue: string) => any;
     "input-value-change": (inputValue: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:value"?: ((value: string[]) => any) | undefined;
     "onValue-change"?: ((value: string[]) => any) | undefined;
+    "onValue-invalid"?: ((detail: TagsInputInvalidDetail) => any) | undefined;
     "onUpdate:inputValue"?: ((inputValue: string) => any) | undefined;
     "onInput-value-change"?: ((inputValue: string) => any) | undefined;
 }>, {
+    form: string;
     disabled: boolean;
+    placeholder: string;
     value: string[];
+    readOnly: boolean;
+    required: boolean;
+    name: string;
     invalid: boolean;
     defaultValue: string[];
     max: number;
-    readOnly: boolean;
+    clearable: boolean;
     validate: (tag: string, tags: string[]) => boolean;
-    delimiter: string;
+    inputLabel: string;
+    delimiter: string | string[];
+    blurBehavior: "keep" | "clear" | "commit";
+    editable: boolean;
     addOnPaste: boolean;
     inputValue: string;
     defaultInputValue: string;

package/dist/tags-input/TagsInput.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const _=require("./context.cjs");let t=require("vue");var h=["data-disabled","data-invalid","data-readonly"],T=(0,t.defineComponent)({__name:"TagsInput",props:{value:{default:void 0},defaultValue:{default:()=>[]},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},max:{default:void 0},delimiter:{default:","},addOnPaste:{type:Boolean,default:!0},validate:{type:Function,default:void 0},inputValue:{default:void 0},defaultInputValue:{default:""}},emits:["update:value","value-change","update:inputValue","input-value-change"],setup(d,{emit:p}){const e=d,l=p,s=(0,t.ref)(e.defaultValue),o=(0,t.computed)(()=>e.value===void 0?s.value:e.value),v=(0,t.ref)(e.defaultInputValue),f=(0,t.computed)(()=>e.inputValue===void 0?v.value:e.inputValue);function r(a){e.value===void 0&&(s.value=a),l("update:value",a),l("value-change",a)}function m(a){e.inputValue===void 0&&(v.value=a),l("update:inputValue",a),l("input-value-change",a)}function c(a){const n=o.value,u=[...n];for(const y of a){const i=y.trim();if(!(!i||u.includes(i))){if(e.max!==void 0&&u.length>=e.max)break;e.validate?.(i,u)!==!1&&u.push(i)}}u.length!==n.length&&r(u)}function g(a){c([a])}function V(a){r(o.value.filter((n,u)=>u!==a))}return(0,t.provide)(_.TAGS_INPUT_CONTEXT,{value:o,inputValue:f,setInputValue:m,disabled:(0,t.computed)(()=>e.disabled),invalid:(0,t.computed)(()=>e.invalid),readOnly:(0,t.computed)(()=>e.readOnly),delimiter:(0,t.computed)(()=>e.delimiter),addOnPaste:(0,t.computed)(()=>e.addOnPaste),addTag:g,addTags:c,removeTag:V}),(a,n)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{class:"skdx-tags-input","data-part":"root","data-skdx-component":"tags-input","data-skdx-tags-input":"","data-disabled":d.disabled?"":void 0,"data-invalid":d.invalid?"":void 0,"data-readonly":d.readOnly?"":void 0},[(0,t.renderSlot)(a.$slots,"default")],8,h))}});exports.default=T;
+const P=require("../utils/useFormReset.cjs"),C=require("../utils/mirroredValues.cjs"),x=require("./context.cjs"),M=require("./TagsInputAnatomy.vue.cjs");let e=require("vue");var R=["data-disabled","data-invalid","data-readonly"],S=["name","^value","required","disabled","form"],_=(0,e.defineComponent)({inheritAttrs:!1,__name:"TagsInput",props:{value:{default:void 0},defaultValue:{default:()=>[]},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},max:{default:void 0},delimiter:{default:()=>x.DEFAULT_DELIMITER},blurBehavior:{default:"keep"},editable:{type:Boolean,default:!1},addOnPaste:{type:Boolean,default:!0},validate:{type:Function,default:void 0},allowDuplicates:{type:Boolean},inputValue:{default:void 0},defaultInputValue:{default:""},name:{default:void 0},required:{type:Boolean,default:!1},form:{default:void 0},inputLabel:{default:"Add a tag"},placeholder:{default:void 0},clearable:{type:Boolean,default:!1}},emits:["update:value","value-change","update:inputValue","input-value-change","value-invalid"],setup(u,{expose:k,emit:q}){const a=u,r=q,h=(0,e.ref)(a.defaultValue),o=(0,e.computed)(()=>a.value===void 0?h.value:a.value),b=(0,e.ref)(a.defaultInputValue),T=(0,e.computed)(()=>a.inputValue===void 0?b.value:a.inputValue);function v(t){a.value===void 0&&(h.value=t),r("update:value",t),r("value-change",t)}function E(t){a.inputValue===void 0&&(b.value=t),r("update:inputValue",t),r("input-value-change",t)}function V(t){const s=o.value,l=[...s],n=[];for(const i of t){const d=i.trim();if(!d)n.push({tag:d,reason:"empty"});else if(a.max!==void 0&&l.length>=a.max)n.push({tag:d,reason:"max"});else{const c=a.validate?.(d,l);c===!1?n.push({tag:d,reason:"validate"}):c!==!0&&!a.allowDuplicates&&l.includes(d)?n.push({tag:d,reason:"duplicate"}):l.push(d)}}for(const i of n)r("value-invalid",i);l.length!==s.length&&v(l)}function O(t,s){const l=o.value,n=l[t];if(n===void 0)return;const i=s.trim(),d=l.filter((m,y)=>y!==t),c=m=>r("value-invalid",{tag:i,reason:m});if(!i)return c("empty");const I=a.validate?.(i,d);if(I===!1)return c("validate");if(I!==!0&&!a.allowDuplicates&&d.includes(i))return c("duplicate");i!==n&&v(l.map((m,y)=>y===t?i:m))}function A(){o.value.length>0&&v([])}function F(t){V([t])}function w(t){v(o.value.filter((s,l)=>l!==t))}const B=(0,e.ref)(0),D=(0,e.computed)(()=>Math.min(B.value,Math.max(o.value.length-1,0))),f=(0,e.ref)(null),L=(0,e.computed)(()=>a.editable&&f.value!==null&&f.value<o.value.length?f.value:null);(0,e.provide)(x.TAGS_INPUT_CONTEXT,{value:o,inputValue:T,setInputValue:E,disabled:(0,e.computed)(()=>a.disabled),invalid:(0,e.computed)(()=>a.invalid),readOnly:(0,e.computed)(()=>a.readOnly),delimiter:(0,e.computed)(()=>a.delimiter),addOnPaste:(0,e.computed)(()=>a.addOnPaste),blurBehavior:(0,e.computed)(()=>a.blurBehavior),editable:(0,e.computed)(()=>a.editable),editingIndex:L,setEditingIndex:t=>{f.value=t},setTagAtIndex:O,clearTags:A,addTag:F,addTags:V,removeTag:w,tabStopIndex:D,setActiveIndex:t=>{B.value=t}});const N=(0,e.computed)(()=>C.mirroredFormValues(o.value,{required:a.required})),p=(0,e.ref)([]),g=a.value??a.defaultValue;return P.useFormReset(()=>p.value[0],()=>{a.value===void 0&&(h.value=g),r("update:value",g),r("value-change",g)}),k({checkValidity:()=>p.value[0]?.checkValidity()??!0,reportValidity:()=>p.value[0]?.reportValidity()??!0}),(t,s)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createElementVNode)("div",(0,e.mergeProps)({class:"skdx-tags-input","data-part":"root","data-skdx-component":"tags-input","data-skdx-tags-input":"","data-disabled":u.disabled?"":void 0,"data-invalid":u.invalid?"":void 0,"data-readonly":u.readOnly?"":void 0},t.$attrs),[(0,e.renderSlot)(t.$slots,"default",{},()=>[(0,e.createVNode)(M.default,{"input-label":u.inputLabel,placeholder:u.placeholder,clearable:u.clearable},null,8,["input-label","placeholder","clearable"])])],16,R),u.name?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(N.value,(l,n)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:l||n,ref_for:!0,ref_key:"hiddenEls",ref:p,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,"^value":l,required:u.required,disabled:u.disabled,form:u.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,S))),128)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=_;