@skdx/vue 0.28.0 → 0.30.0

package/dist/tag-group/TagGroupLabel.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("./context.cjs");let e=require("vue");var n=["id"],d=(0,e.defineComponent)({__name:"TagGroupLabel",props:{id:{default:void 0}},setup(a){const o=a,t=(0,e.inject)(l.TAG_GROUP_CONTEXT);if(!t)throw new Error("<SkdxTagGroupLabel> must be used inside <SkdxTagGroup>.");const r=o.id??(0,e.useId)()??"skdx-tag-group-label";return(0,e.onUnmounted)(t.registerLabel(r)),(u,s)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{class:"skdx-tag-group__label","data-part":"label",id:(0,e.unref)(r)},[(0,e.renderSlot)(u.$slots,"default")],8,n))}});exports.default=d;
+const n=require("./context.cjs"),d=require("../utils/injectRequired.cjs");let e=require("vue");var l=["id"],s=(0,e.defineComponent)({__name:"TagGroupLabel",props:{id:{default:void 0}},setup(r){const u=r,a=d.injectRequired(n.TAG_GROUP_CONTEXT,"<SkdxTagGroupLabel> must be used inside <SkdxTagGroup>."),t=u.id??(0,e.useId)()??"skdx-tag-group-label";return(0,e.onUnmounted)(a.registerLabel(t)),(o,i)=>((0,e.openBlock)(),(0,e.createElementBlock)("span",{id:(0,e.unref)(t),class:"skdx-tag-group__label","data-part":"label"},[(0,e.renderSlot)(o.$slots,"default")],8,l))}});exports.default=s;

package/dist/tag-group/TagGroupLabel.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TAG_GROUP_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as s,inject as o,onUnmounted as t,openBlock as r,renderSlot as d,unref as n,useId as l}from"vue";var u=["id"],p=/* @__PURE__ */s({__name:"TagGroupLabel",props:{id:{default:void 0}},setup(s){const p=s,i=o(e);if(!i)throw new Error("<SkdxTagGroupLabel> must be used inside <SkdxTagGroup>.");const m=p.id??l()??"skdx-tag-group-label";return t(i.registerLabel(m)),(e,s)=>(r(),a("span",{class:"skdx-tag-group__label","data-part":"label",id:n(m)},[d(e.$slots,"default")],8,u))}});export{p as default};
+import{TAG_GROUP_CONTEXT as e}from"./context.js";import{injectRequired as a}from"../utils/injectRequired.js";import{createElementBlock as s,defineComponent as t,onUnmounted as o,openBlock as r,renderSlot as d,unref as l,useId as u}from"vue";var n=["id"],i=/* @__PURE__ */t({__name:"TagGroupLabel",props:{id:{default:void 0}},setup(t){const i=t,p=a(e,"<SkdxTagGroupLabel> must be used inside <SkdxTagGroup>."),m=i.id??u()??"skdx-tag-group-label";return o(p.registerLabel(m)),(e,a)=>(r(),s("span",{id:l(m),class:"skdx-tag-group__label","data-part":"label"},[d(e.$slots,"default")],8,n))}});export{i as default};

package/dist/tag-group/TagGroupList.vue.d.cts

@@ -1,4 +1,4 @@
-/** The `<ul>` holding tags when group has a visible heading. Optional; pairs with `<SkdxTagGroupLabel>`. */
+/** The `<ul>` holding tags when the group has a visible heading, pairing with `<SkdxTagGroupLabel>`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/tag-group/TagGroupList.vue.d.ts

@@ -1,4 +1,4 @@
-/** The `<ul>` holding tags when group has a visible heading. Optional; pairs with `<SkdxTagGroupLabel>`. */
+/** The `<ul>` holding tags when the group has a visible heading, pairing with `<SkdxTagGroupLabel>`. */
 type __VLS_Props = {};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/tag-group/TagGroupList.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const l=require("./context.cjs");let e=require("vue");var r=["data-orientation","data-disabled","aria-label","aria-labelledby"],i=(0,e.defineComponent)({__name:"TagGroupList",setup(n){const a=(0,e.inject)(l.TAG_GROUP_CONTEXT);if(!a)throw new Error("<SkdxTagGroupList> must be used inside <SkdxTagGroup>.");return(0,e.onUnmounted)(a.registerList()),(t,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("ul",{class:"skdx-tag-group__list","data-part":"list",role:"list","data-orientation":(0,e.unref)(a).orientation.value,"data-disabled":(0,e.unref)(a).disabled.value?"":void 0,"aria-label":(0,e.unref)(a).labelling.value["aria-label"],"aria-labelledby":(0,e.unref)(a).labelling.value["aria-labelledby"],tabindex:-1},[(0,e.renderSlot)(t.$slots,"default")],8,r))}});exports.default=i;
+const r=require("./context.cjs"),l=require("../utils/injectRequired.cjs");let e=require("vue");var i=["data-orientation","data-disabled","aria-label","aria-labelledby"],u=(0,e.defineComponent)({__name:"TagGroupList",setup(n){const a=l.injectRequired(r.TAG_GROUP_CONTEXT,"<SkdxTagGroupList> must be used inside <SkdxTagGroup>.");return(0,e.onUnmounted)(a.registerList()),(t,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("ul",{class:"skdx-tag-group__list","data-part":"list",role:"list","data-orientation":(0,e.unref)(a).orientation.value,"data-disabled":(0,e.unref)(a).disabled.value?"":void 0,"aria-label":(0,e.unref)(a).labelling.value["aria-label"],"aria-labelledby":(0,e.unref)(a).labelling.value["aria-labelledby"],tabindex:-1},[(0,e.renderSlot)(t.$slots,"default")],8,i))}});exports.default=u;

package/dist/tag-group/TagGroupList.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TAG_GROUP_CONTEXT as a}from"./context.js";import{createElementBlock as e,defineComponent as l,inject as t,onUnmounted as i,openBlock as r,renderSlot as o,unref as s}from"vue";var d=["data-orientation","data-disabled","aria-label","aria-labelledby"],n=/* @__PURE__ */l({__name:"TagGroupList",setup(l){const n=t(a);if(!n)throw new Error("<SkdxTagGroupList> must be used inside <SkdxTagGroup>.");return i(n.registerList()),(a,l)=>(r(),e("ul",{class:"skdx-tag-group__list","data-part":"list",role:"list","data-orientation":s(n).orientation.value,"data-disabled":s(n).disabled.value?"":void 0,"aria-label":s(n).labelling.value["aria-label"],"aria-labelledby":s(n).labelling.value["aria-labelledby"],tabindex:-1},[o(a.$slots,"default")],8,d))}});export{n as default};
+import{TAG_GROUP_CONTEXT as a}from"./context.js";import{injectRequired as e}from"../utils/injectRequired.js";import{createElementBlock as l,defineComponent as t,onUnmounted as i,openBlock as r,renderSlot as s,unref as o}from"vue";var d=["data-orientation","data-disabled","aria-label","aria-labelledby"],n=/* @__PURE__ */t({__name:"TagGroupList",setup(t){const n=e(a,"<SkdxTagGroupList> must be used inside <SkdxTagGroup>.");return i(n.registerList()),(a,e)=>(r(),l("ul",{class:"skdx-tag-group__list","data-part":"list",role:"list","data-orientation":o(n).orientation.value,"data-disabled":o(n).disabled.value?"":void 0,"aria-label":o(n).labelling.value["aria-label"],"aria-labelledby":o(n).labelling.value["aria-labelledby"],tabindex:-1},[s(a.$slots,"default")],8,d))}});export{n as default};

package/dist/tag-group/context.cjs

@@ -1 +1 @@
-const u=require("../utils/is-dev-mode.cjs");var d="[data-skdx-tag-group]",s="[data-skdx-tag]";function g(t,r,o){const e=(t.get(r)??0)+o;e<=0?t.delete(r):t.set(r,e),o===1&&e>1&&u.isDevMode()&&console.warn(`[skdx] TagGroup: ${e} mounted Tags report index={${r}}. \`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 T=Symbol("skdx-tag-group-context");function i(t,r){const o=t?.closest("[data-skdx-tag-group]")??null,e=o?Array.from(o.querySelectorAll(s)):[],a=t?e.indexOf(t):-1,n=a===-1?void 0:e[a+1];return{target:n??e[a-1]??o,index:n?r:Math.max(r-1,0)}}exports.TAG_GROUP_CONTEXT=T;exports.TAG_GROUP_SELECTOR=d;exports.TAG_SELECTOR=s;exports.resolveTagNeighbor=i;exports.warnOnDuplicateIndex=g;
+const u=require("../utils/dev-mode.cjs");var d="[data-skdx-tag-group]",s="[data-skdx-tag]";function g(t,r,o){const e=(t.get(r)??0)+o;e<=0?t.delete(r):t.set(r,e),o===1&&e>1&&u.isDevMode()&&console.warn(`[skdx] TagGroup: ${e} mounted Tags report index={${r}}. \`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 T=Symbol("skdx-tag-group-context");function i(t,r){const o=t?.closest("[data-skdx-tag-group]")??null,e=o?Array.from(o.querySelectorAll(s)):[],a=t?e.indexOf(t):-1,n=a===-1?void 0:e[a+1];return{target:n??e[a-1]??o,index:n?r:Math.max(r-1,0)}}exports.TAG_GROUP_CONTEXT=T;exports.TAG_GROUP_SELECTOR=d;exports.TAG_SELECTOR=s;exports.resolveTagNeighbor=i;exports.warnOnDuplicateIndex=g;

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

@@ -1,7 +1,5 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/**
- * Layout axis of a TagGroup; also picks the arrow-key axis.
- */
+/** 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]";
@@ -9,7 +7,7 @@ export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
 export declare const TAG_SELECTOR = "[data-skdx-tag]";
 /** 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`. */
+    /** The removed tag's own text, as it was passed to `SkdxBadge`'s `label`. */
     label: string;
     /** The index the removed tag held. */
     index: number;
@@ -36,18 +34,15 @@ export interface TagGroupContext {
     registerList: () => () => void;
     /** Root's aria-label/aria-labelledby, forwarded to List when present. */
     labelling: ComputedRef<{
-        'aria-label'?: string;
-        'aria-labelledby'?: string;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
     }>;
     /** 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
- */
+/** @internal Warns once when two tags claim the same index; duplicates break roving tabindex. */
 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>;
@@ -59,8 +54,7 @@ export interface TagNeighbor {
     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).
+ * Where focus goes when the tag at index is removed: next tag, previous if last, or the group root if only one.
  * @internal
  */
 export declare function resolveTagNeighbor(tag: HTMLElement | null, index: number): TagNeighbor;

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

@@ -1,7 +1,5 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-/**
- * Layout axis of a TagGroup; also picks the arrow-key axis.
- */
+/** 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]";
@@ -9,7 +7,7 @@ export declare const TAG_GROUP_SELECTOR = "[data-skdx-tag-group]";
 export declare const TAG_SELECTOR = "[data-skdx-tag]";
 /** 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`. */
+    /** The removed tag's own text, as it was passed to `SkdxBadge`'s `label`. */
     label: string;
     /** The index the removed tag held. */
     index: number;
@@ -36,18 +34,15 @@ export interface TagGroupContext {
     registerList: () => () => void;
     /** Root's aria-label/aria-labelledby, forwarded to List when present. */
     labelling: ComputedRef<{
-        'aria-label'?: string;
-        'aria-labelledby'?: string;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
     }>;
     /** 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
- */
+/** @internal Warns once when two tags claim the same index; duplicates break roving tabindex. */
 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>;
@@ -59,8 +54,7 @@ export interface TagNeighbor {
     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).
+ * Where focus goes when the tag at index is removed: next tag, previous if last, or the group root if only one.
  * @internal
  */
 export declare function resolveTagNeighbor(tag: HTMLElement | null, index: number): TagNeighbor;

package/dist/tag-group/context.js

@@ -1 +1 @@
-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};
+import{isDevMode as e}from"../utils/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/primitives.d.cts

@@ -1,11 +1,10 @@
 /**
- * Advanced primitives for custom `SkdxTagGroup` layouts. Recipe built from
- * these.
+ * Advanced primitives for custom `SkdxTagGroup` layouts, built from the same parts as the default recipe.
  *
  * @example
  * ```vue
  * <script setup lang="ts">
- * import { SkdxTag } from '@skdx/vue';
+ * import { SkdxBadge } from '@skdx/vue';
  * import { SkdxTagGroup, SkdxTagGroupEmpty, SkdxTagGroupLabel, SkdxTagGroupList } from '@skdx/vue/primitives/tag-group';
  * </script>
  *
@@ -13,7 +12,7 @@
  *   <SkdxTagGroup @remove="onRemove">
  *     <SkdxTagGroupLabel>Topics</SkdxTagGroupLabel>
  *     <SkdxTagGroupList>
- *       <SkdxTag v-for="(tag, i) in tags" :key="tag" :index="i" :label="tag" deletable />
+ *       <SkdxBadge v-for="(tag, i) in tags" :key="tag" :index="i" :label="tag" deletable />
  *     </SkdxTagGroupList>
  *     <SkdxTagGroupEmpty>No topics yet.</SkdxTagGroupEmpty>
  *   </SkdxTagGroup>

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

@@ -1,11 +1,10 @@
 /**
- * Advanced primitives for custom `SkdxTagGroup` layouts. Recipe built from
- * these.
+ * Advanced primitives for custom `SkdxTagGroup` layouts, built from the same parts as the default recipe.
  *
  * @example
  * ```vue
  * <script setup lang="ts">
- * import { SkdxTag } from '@skdx/vue';
+ * import { SkdxBadge } from '@skdx/vue';
  * import { SkdxTagGroup, SkdxTagGroupEmpty, SkdxTagGroupLabel, SkdxTagGroupList } from '@skdx/vue/primitives/tag-group';
  * </script>
  *
@@ -13,7 +12,7 @@
  *   <SkdxTagGroup @remove="onRemove">
  *     <SkdxTagGroupLabel>Topics</SkdxTagGroupLabel>
  *     <SkdxTagGroupList>
- *       <SkdxTag v-for="(tag, i) in tags" :key="tag" :index="i" :label="tag" deletable />
+ *       <SkdxBadge v-for="(tag, i) in tags" :key="tag" :index="i" :label="tag" deletable />
  *     </SkdxTagGroupList>
  *     <SkdxTagGroupEmpty>No topics yet.</SkdxTagGroupEmpty>
  *   </SkdxTagGroup>

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

@@ -1,8 +1,6 @@
 import { type TagsInputInvalidDetail } from './context.cjs';
 /**
- * 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.
+ * Tag list with a controlled draft field, supporting `v-model:value`, validation, delimiters, and per-tag form integration.
  *
  * @example
  * ```vue
@@ -11,7 +9,7 @@ import { type TagsInputInvalidDetail } from './context.cjs';
  */
 type __VLS_Props = {
     /** Current tags, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: string[];
+    value?: string[] | undefined;
     /** Initial tags, for uncontrolled usage — seeds the internally-tracked list. */
     defaultValue?: string[];
     /** Disables adding/removing tags and marks the root and its parts with `data-disabled`. */
@@ -21,10 +19,9 @@ type __VLS_Props = {
     /** Makes `SkdxTagsInputInput` read-only, exposed as `aria-readonly`/`data-readonly` on the root and the input. */
     readOnly?: boolean;
     /** Maximum number of tags; further additions are no-ops once reached. */
-    max?: number;
+    max?: number | undefined;
     /**
-     * Characters that commit a tag while typing or split pasted text.
-     * Typed commit fires for single-character entries only (vs `KeyboardEvent.key`).
+     * Characters that commit a tag while typing or split pasted text; typed commit fires for single-character entries only.
      * @default [',', '\n']
      */
     delimiter?: string | string[];
@@ -44,54 +41,54 @@ type __VLS_Props = {
      * Decides whether a tag may be added, given the trimmed candidate and the
      * tags accepted so far. Return `false` to reject it.
      */
-    validate?: (tag: string, tags: string[]) => boolean;
+    validator?: ((tag: string, tags: string[]) => boolean) | undefined;
     /**
-     * Allow the same tag to appear more than once; defaults to exact-match
-     * deduplication. `validate` runs first and can override it.
+     * Allow the same tag to appear more than once, instead of exact-match deduplication.
      * @default false
      */
     allowDuplicates?: boolean;
-    /** Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`. */
-    inputValue?: string;
+    /**
+     * Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`.
+     * @default undefined
+     */
+    inputValue?: string | undefined;
     /** Initial draft text, for uncontrolled usage. */
     defaultInputValue?: string;
     /**
      * Form field name; each tag submitted as separate entry under this name.
+     * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * 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.
+     * Marks the field required: `valueMissing` while there are no tags, only meaningful with `name`.
      */
     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.
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Accessible name for the derived draft field (announces the input, not group).
-     * Ignored if slot supplies `SkdxTagsInputInput`.
+     * Accessible name for the derived draft field, ignored once the default slot supplies its own `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`.
+     * Placeholder text for the derived draft field, ignored once the default slot supplies its own `SkdxTagsInputInput`.
      * @default undefined — no placeholder.
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
-     * 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.
+     * Whether the derived anatomy renders a `SkdxTagsInputClear` button that empties the whole list in one press.
      * @default false
      */
     clearable?: boolean;
+    /**
+     * Size rung the skin renders the input at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -102,38 +99,36 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the first mirrored form input, like `HTMLInputElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, 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;
+    "value-invalid": (detail: TagsInputInvalidDetail) => 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;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
+    "onUpdate:inputValue"?: (inputValue: string) => any;
+    "onInput-value-change"?: (inputValue: string) => any;
+    "onValue-invalid"?: (detail: TagsInputInvalidDetail) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    placeholder: string;
-    value: string[];
+    defaultValue: string[];
+    max: number | undefined;
     readOnly: boolean;
     required: boolean;
-    name: string;
+    value: string[] | undefined;
     invalid: boolean;
-    defaultValue: string[];
-    max: number;
     clearable: boolean;
-    validate: (tag: string, tags: string[]) => boolean;
-    inputLabel: string;
+    defaultInputValue: string;
+    validator: ((tag: string, tags: string[]) => boolean) | undefined;
     delimiter: string | string[];
     blurBehavior: "keep" | "clear" | "commit";
     editable: boolean;
     addOnPaste: boolean;
-    inputValue: string;
-    defaultInputValue: string;
+    inputLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,8 +1,6 @@
 import { type TagsInputInvalidDetail } from './context.js';
 /**
- * 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.
+ * Tag list with a controlled draft field, supporting `v-model:value`, validation, delimiters, and per-tag form integration.
  *
  * @example
  * ```vue
@@ -11,7 +9,7 @@ import { type TagsInputInvalidDetail } from './context.js';
  */
 type __VLS_Props = {
     /** Current tags, for controlled usage. Pair with `v-model:value` or `@value-change`. */
-    value?: string[];
+    value?: string[] | undefined;
     /** Initial tags, for uncontrolled usage — seeds the internally-tracked list. */
     defaultValue?: string[];
     /** Disables adding/removing tags and marks the root and its parts with `data-disabled`. */
@@ -21,10 +19,9 @@ type __VLS_Props = {
     /** Makes `SkdxTagsInputInput` read-only, exposed as `aria-readonly`/`data-readonly` on the root and the input. */
     readOnly?: boolean;
     /** Maximum number of tags; further additions are no-ops once reached. */
-    max?: number;
+    max?: number | undefined;
     /**
-     * Characters that commit a tag while typing or split pasted text.
-     * Typed commit fires for single-character entries only (vs `KeyboardEvent.key`).
+     * Characters that commit a tag while typing or split pasted text; typed commit fires for single-character entries only.
      * @default [',', '\n']
      */
     delimiter?: string | string[];
@@ -44,54 +41,54 @@ type __VLS_Props = {
      * Decides whether a tag may be added, given the trimmed candidate and the
      * tags accepted so far. Return `false` to reject it.
      */
-    validate?: (tag: string, tags: string[]) => boolean;
+    validator?: ((tag: string, tags: string[]) => boolean) | undefined;
     /**
-     * Allow the same tag to appear more than once; defaults to exact-match
-     * deduplication. `validate` runs first and can override it.
+     * Allow the same tag to appear more than once, instead of exact-match deduplication.
      * @default false
      */
     allowDuplicates?: boolean;
-    /** Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`. */
-    inputValue?: string;
+    /**
+     * Current draft text in `SkdxTagsInputInput`, for controlled usage via `v-model:input-value`.
+     * @default undefined
+     */
+    inputValue?: string | undefined;
     /** Initial draft text, for uncontrolled usage. */
     defaultInputValue?: string;
     /**
      * Form field name; each tag submitted as separate entry under this name.
+     * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * 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.
+     * Marks the field required: `valueMissing` while there are no tags, only meaningful with `name`.
      */
     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.
+     * @default undefined
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Accessible name for the derived draft field (announces the input, not group).
-     * Ignored if slot supplies `SkdxTagsInputInput`.
+     * Accessible name for the derived draft field, ignored once the default slot supplies its own `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`.
+     * Placeholder text for the derived draft field, ignored once the default slot supplies its own `SkdxTagsInputInput`.
      * @default undefined — no placeholder.
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
-     * 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.
+     * Whether the derived anatomy renders a `SkdxTagsInputClear` button that empties the whole list in one press.
      * @default false
      */
     clearable?: boolean;
+    /**
+     * Size rung the skin renders the input at, reflected as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -102,38 +99,36 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     checkValidity: () => boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the first mirrored form input, like `HTMLInputElement.setCustomValidity()`. */
+    setCustomValidity: (message: string) => void | undefined;
 }, {}, {}, {}, 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;
+    "value-invalid": (detail: TagsInputInvalidDetail) => 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;
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
+    "onUpdate:inputValue"?: (inputValue: string) => any;
+    "onInput-value-change"?: (inputValue: string) => any;
+    "onValue-invalid"?: (detail: TagsInputInvalidDetail) => any;
 }>, {
-    form: string;
     disabled: boolean;
-    placeholder: string;
-    value: string[];
+    defaultValue: string[];
+    max: number | undefined;
     readOnly: boolean;
     required: boolean;
-    name: string;
+    value: string[] | undefined;
     invalid: boolean;
-    defaultValue: string[];
-    max: number;
     clearable: boolean;
-    validate: (tag: string, tags: string[]) => boolean;
-    inputLabel: string;
+    defaultInputValue: string;
+    validator: ((tag: string, tags: string[]) => boolean) | undefined;
     delimiter: string | string[];
     blurBehavior: "keep" | "clear" | "commit";
     editable: boolean;
     addOnPaste: boolean;
-    inputValue: string;
-    defaultInputValue: string;
+    inputLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-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=_;
+const N=require("../utils/appearance.cjs"),P=require("../utils/useFormReset.cjs"),S=require("../utils/useControllable.cjs"),_=require("../utils/mirroredValues.cjs"),x=require("./context.cjs"),z=require("./TagsInputAnatomy.vue.cjs");let e=require("vue");var M=["data-disabled","data-invalid","data-readonly"],R=["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},validator:{type:Function,default:void 0},allowDuplicates:{type:Boolean},inputValue:{},defaultInputValue:{default:""},name:{},required:{type:Boolean,default:!1},form:{},inputLabel:{default:"Add a tag"},placeholder:{},clearable:{type:Boolean,default:!1},size:{}},emits:["update:value","value-change","update:inputValue","input-value-change","value-invalid"],setup(u,{expose:B,emit:I}){const t=u,r=I,h=(0,e.ref)(t.defaultValue),o=(0,e.computed)(()=>t.value===void 0?h.value:t.value),y=S.useControllable({controlled:()=>t.inputValue,defaultValue:()=>t.defaultInputValue,onChange:a=>{r("update:inputValue",a),r("input-value-change",a)}}),k=(0,e.computed)(()=>y.value.value??"");function f(a){t.value===void 0&&(h.value=a),r("update:value",a),r("value-change",a)}function T(a){y.set(a)}function V(a){const s=o.value,l=[...s],d=[];for(const i of a){const n=i.trim();if(!n)d.push({tag:n,reason:"empty"});else if(t.max!==void 0&&l.length>=t.max)d.push({tag:n,reason:"max"});else{const c=t.validator?.(n,l);c===!1?d.push({tag:n,reason:"validator"}):c!==!0&&!t.allowDuplicates&&l.includes(n)?d.push({tag:n,reason:"duplicate"}):l.push(n)}}for(const i of d)r("value-invalid",i);l.length!==s.length&&f(l)}function E(a,s){const l=o.value,d=l[a];if(d===void 0)return;const i=s.trim(),n=l.filter((m,g)=>g!==a),c=m=>r("value-invalid",{tag:i,reason:m});if(!i)return c("empty");const q=t.validator?.(i,n);if(q===!1)return c("validator");if(q!==!0&&!t.allowDuplicates&&n.includes(i))return c("duplicate");i!==d&&f(l.map((m,g)=>g===a?i:m))}function A(){o.value.length>0&&f([])}function C(a){V([a])}function O(a){f(o.value.filter((s,l)=>l!==a))}const b=(0,e.ref)(0),F=(0,e.computed)(()=>Math.min(b.value,Math.max(o.value.length-1,0))),p=(0,e.ref)(null),L=(0,e.computed)(()=>t.editable&&p.value!==null&&p.value<o.value.length?p.value:null);(0,e.provide)(x.TAGS_INPUT_CONTEXT,{value:o,inputValue:k,setInputValue:T,disabled:(0,e.computed)(()=>t.disabled),invalid:(0,e.computed)(()=>t.invalid),readOnly:(0,e.computed)(()=>t.readOnly),inputLabel:(0,e.computed)(()=>t.inputLabel),delimiter:(0,e.computed)(()=>t.delimiter),addOnPaste:(0,e.computed)(()=>t.addOnPaste),blurBehavior:(0,e.computed)(()=>t.blurBehavior),editable:(0,e.computed)(()=>t.editable),editingIndex:L,setEditingIndex:a=>{p.value=a},setTagAtIndex:E,clearTags:A,addTag:C,addTags:V,removeTag:O,tabStopIndex:F,setActiveIndex:a=>{b.value=a}});const w=(0,e.computed)(()=>_.mirroredFormValues(o.value,{required:t.required})),v=(0,e.ref)([]),D=t.value??t.defaultValue;return P.useFormReset(()=>v.value[0],()=>{const a=t.defaultValue.length>0?t.defaultValue:D;t.value===void 0&&(h.value=a),r("update:value",a),r("value-change",a)}),B({checkValidity:()=>v.value[0]?.checkValidity()??!0,reportValidity:()=>v.value[0]?.reportValidity()??!0,setCustomValidity:a=>v.value[0]?.setCustomValidity(a)}),(a,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},{...a.$attrs,...(0,e.unref)(N.appearanceAttrs)({size:u.size},a.$attrs)}),[(0,e.renderSlot)(a.$slots,"default",{},()=>[(0,e.createVNode)(z.default,{placeholder:u.placeholder,clearable:u.clearable},null,8,["placeholder","clearable"])])],16,M),u.name?((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,{key:0},(0,e.renderList)(w.value,(l,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:l||d,ref_for:!0,ref_key:"hiddenEls",ref:v,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,R))),128)):(0,e.createCommentVNode)("",!0)],64))}});exports.default=$;

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

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

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

@@ -1,16 +1,13 @@
 /**
- * The anatomy a `SkdxTagsInput` draws: one tag per value with delete button and in-place editor,
- * the draft field, and optional clear button. The editor mounts only for the tag being edited.
- * Not exported from the package — must stay in step with React `TagsInputAnatomy.tsx`.
+ * The anatomy a `SkdxTagsInput` draws: one tag per value with delete/editor, the draft field, and an optional clear button.
  * @internal
  */
 type __VLS_Props = {
-    inputLabel: string;
-    placeholder?: string;
-    clearable?: boolean;
+    placeholder?: string | undefined;
+    clearable?: boolean | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    placeholder: string;
-    clearable: boolean;
+    placeholder: string | undefined;
+    clearable: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;