@skdx/vue 0.26.0

package/dist/password-input/PasswordInputField.vue.js

@@ -0,0 +1 @@
+import e from"./PasswordInputField.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/password-input/PasswordInputField.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const s=require("../text-field/TextFieldInput.vue.cjs"),u=require("./context.cjs");let e=require("vue");var a=(0,e.defineComponent)({inheritAttrs:!1,__name:"PasswordInputField",setup(n){const t=(0,e.inject)(u.PASSWORD_INPUT_CONTEXT);if(!t)throw new Error("<SkdxPasswordInputField> must be used inside <SkdxPasswordInput>.");return(r,d)=>((0,e.openBlock)(),(0,e.createBlock)(s.default,(0,e.mergeProps)({class:"skdx-password-input__field","data-part":"field",autocomplete:"current-password","data-state":(0,e.unref)(t).visible.value?"visible":"hidden"},r.$attrs,{type:(0,e.unref)(t).visible.value?"text":"password"}),null,16,["data-state","type"]))}});exports.default=a;

package/dist/password-input/PasswordInputField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"../text-field/TextFieldInput.vue.js";import{PASSWORD_INPUT_CONTEXT as t}from"./context.js";import{createBlock as s,defineComponent as a,inject as r,mergeProps as o,openBlock as d,unref as i}from"vue";var n=/* @__PURE__ */a({inheritAttrs:!1,__name:"PasswordInputField",setup(a){const n=r(t);if(!n)throw new Error("<SkdxPasswordInputField> must be used inside <SkdxPasswordInput>.");return(t,a)=>(d(),s(e,o({class:"skdx-password-input__field","data-part":"field",autocomplete:"current-password","data-state":i(n).visible.value?"visible":"hidden"},t.$attrs,{type:i(n).visible.value?"text":"password"}),null,16,["data-state","type"]))}});export{n as default};

package/dist/password-input/PasswordInputToggle.vue.cjs

@@ -0,0 +1 @@
+const e=require("./PasswordInputToggle.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/password-input/PasswordInputToggle.vue.d.cts

@@ -0,0 +1,40 @@
+/**
+ * The reveal button for a `<SkdxPasswordInput>`. Renders a
+ * `<button type="button">` carrying `aria-pressed`, so assistive tech reports a
+ * toggle that is currently on or off rather than a button that did something
+ * unknowable.
+ *
+ * **It stays in the tab order.** `tabindex="-1"` is a common shortcut for
+ * "adornment inside a field" and it is wrong here: revealing the characters is
+ * the only way a keyboard user can check what they typed, and taking the button
+ * out of tab navigation makes that unreachable without a pointer (WCAG 2.1.1).
+ * Tab from the field lands on the toggle.
+ *
+ * An accessible name is always present: it defaults to "Show password" /
+ * "Hide password", flipping with the state so the name and `aria-pressed`
+ * agree. Pass your own `aria-label` to localise it — but pass one, because an
+ * icon-only button with no name announces as "button".
+ *
+ * Disabled follows the root's `disabled`, and both `data-state` and
+ * `data-disabled` are exposed for styling.
+ *
+ * Must be used inside `<SkdxPasswordInput>`.
+ *
+ * @example
+ * ```vue
+ * <SkdxPasswordInputToggle aria-label="Mot de passe visible">👁</SkdxPasswordInputToggle>
+ * ```
+ */
+type __VLS_Props = {};
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/password-input/PasswordInputToggle.vue.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The reveal button for a `<SkdxPasswordInput>`. Renders a
+ * `<button type="button">` carrying `aria-pressed`, so assistive tech reports a
+ * toggle that is currently on or off rather than a button that did something
+ * unknowable.
+ *
+ * **It stays in the tab order.** `tabindex="-1"` is a common shortcut for
+ * "adornment inside a field" and it is wrong here: revealing the characters is
+ * the only way a keyboard user can check what they typed, and taking the button
+ * out of tab navigation makes that unreachable without a pointer (WCAG 2.1.1).
+ * Tab from the field lands on the toggle.
+ *
+ * An accessible name is always present: it defaults to "Show password" /
+ * "Hide password", flipping with the state so the name and `aria-pressed`
+ * agree. Pass your own `aria-label` to localise it — but pass one, because an
+ * icon-only button with no name announces as "button".
+ *
+ * Disabled follows the root's `disabled`, and both `data-state` and
+ * `data-disabled` are exposed for styling.
+ *
+ * Must be used inside `<SkdxPasswordInput>`.
+ *
+ * @example
+ * ```vue
+ * <SkdxPasswordInputToggle aria-label="Mot de passe visible">👁</SkdxPasswordInputToggle>
+ * ```
+ */
+type __VLS_Props = {};
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/password-input/PasswordInputToggle.vue.js

@@ -0,0 +1 @@
+import e from"./PasswordInputToggle.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/password-input/PasswordInputToggle.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const d=require("./context.cjs");let e=require("vue");var r=["aria-pressed","aria-label","disabled","data-state","data-disabled"],l=(0,e.defineComponent)({__name:"PasswordInputToggle",setup(i){const a=(0,e.inject)(d.PASSWORD_INPUT_CONTEXT);if(!a)throw new Error("<SkdxPasswordInputToggle> must be used inside <SkdxPasswordInput>.");function t(){a.setVisible(!a.visible.value)}return(s,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{class:"skdx-password-input__toggle","data-part":"toggle",type:"button","aria-pressed":(0,e.unref)(a).visible.value,"aria-label":(0,e.unref)(a).visible.value?"Hide password":"Show password",disabled:(0,e.unref)(a).disabled.value,"data-state":(0,e.unref)(a).visible.value?"visible":"hidden","data-disabled":(0,e.unref)(a).disabled.value?"":void 0,onClick:t},[(0,e.renderSlot)(s.$slots,"default")],8,r))}});exports.default=l;

package/dist/password-input/PasswordInputToggle.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{PASSWORD_INPUT_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as s,inject as t,openBlock as d,renderSlot as i,unref as l}from"vue";var o=["aria-pressed","aria-label","disabled","data-state","data-disabled"],r=/* @__PURE__ */s({__name:"PasswordInputToggle",setup(s){const r=t(e);if(!r)throw new Error("<SkdxPasswordInputToggle> must be used inside <SkdxPasswordInput>.");function n(){r.setVisible(!r.visible.value)}return(e,s)=>(d(),a("button",{class:"skdx-password-input__toggle","data-part":"toggle",type:"button","aria-pressed":l(r).visible.value,"aria-label":l(r).visible.value?"Hide password":"Show password",disabled:l(r).disabled.value,"data-state":l(r).visible.value?"visible":"hidden","data-disabled":l(r).disabled.value?"":void 0,onClick:n},[i(e.$slots,"default")],8,o))}});export{r as default};

package/dist/password-input/context.cjs

@@ -0,0 +1 @@
+var T=Symbol("skdx-password-input-context");exports.PASSWORD_INPUT_CONTEXT=T;

package/dist/password-input/context.d.cts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Shared state a PasswordInput root provides so its Field/Toggle parts read the same visibility. */
+export interface PasswordInputContext {
+    /** Whether the characters are currently revealed — the resolved state, controlled or not. */
+    visible: ComputedRef<boolean>;
+    /** The root's `disabled`, so the Toggle disables together with the field. */
+    disabled: ComputedRef<boolean>;
+    /** Requests a new visibility. No-op when it matches the current state; a controlled parent may refuse it. */
+    setVisible: (visible: boolean) => void;
+}
+/** @internal Injection key a PasswordInput root provides so its Field flips `type` and its Toggle flips the state. */
+export declare const PASSWORD_INPUT_CONTEXT: InjectionKey<PasswordInputContext>;

package/dist/password-input/context.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Shared state a PasswordInput root provides so its Field/Toggle parts read the same visibility. */
+export interface PasswordInputContext {
+    /** Whether the characters are currently revealed — the resolved state, controlled or not. */
+    visible: ComputedRef<boolean>;
+    /** The root's `disabled`, so the Toggle disables together with the field. */
+    disabled: ComputedRef<boolean>;
+    /** Requests a new visibility. No-op when it matches the current state; a controlled parent may refuse it. */
+    setVisible: (visible: boolean) => void;
+}
+/** @internal Injection key a PasswordInput root provides so its Field flips `type` and its Toggle flips the state. */
+export declare const PASSWORD_INPUT_CONTEXT: InjectionKey<PasswordInputContext>;

package/dist/password-input/context.js

@@ -0,0 +1 @@
+var o=/* @__PURE__ */Symbol("skdx-password-input-context");export{o as PASSWORD_INPUT_CONTEXT};

package/dist/password-input/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PasswordInput.vue.cjs"),r=require("./PasswordInputField.vue.cjs"),u=require("./PasswordInputToggle.vue.cjs");exports.SkdxPasswordInput=e.default;exports.SkdxPasswordInputField=r.default;exports.SkdxPasswordInputToggle=u.default;

package/dist/password-input/index.d.cts

@@ -0,0 +1,3 @@
+export { default as SkdxPasswordInput } from './PasswordInput.vue.cjs';
+export { default as SkdxPasswordInputField } from './PasswordInputField.vue.cjs';
+export { default as SkdxPasswordInputToggle } from './PasswordInputToggle.vue.cjs';

package/dist/password-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SkdxPasswordInput } from './PasswordInput.vue.js';
+export { default as SkdxPasswordInputField } from './PasswordInputField.vue.js';
+export { default as SkdxPasswordInputToggle } from './PasswordInputToggle.vue.js';

package/dist/password-input/index.js

@@ -0,0 +1 @@
+import s from"./PasswordInput.vue.js";import o from"./PasswordInputField.vue.js";import r from"./PasswordInputToggle.vue.js";export{s as SkdxPasswordInput,o as SkdxPasswordInputField,r as SkdxPasswordInputToggle};

package/dist/pin-input/PinInput.vue.cjs

@@ -0,0 +1 @@
+const e=require("./PinInput.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/pin-input/PinInput.vue.d.cts

@@ -0,0 +1,99 @@
+/**
+ * The Vue implementation of the shared PinInput contract (see
+ * `@skdx/shared`'s `pinInputContract`). Owns the joined string value and
+ * `provide()`s it, plus cross-field focus movement, to `SkdxPinInputField`
+ * children. Renders a plain `<div>`.
+ *
+ * Emits `value-complete` the moment the last box is filled — with
+ * `auto-submit`, it also calls `requestSubmit()` on the surrounding `<form>`,
+ * which is what a one-time-passcode screen usually wants.
+ *
+ * With a `name`, one visually-hidden native input submits the joined value as a
+ * single entry with the surrounding `<form>` (the boxes themselves never submit
+ * — a passcode is one field, not six), `required` reports `valueMissing` when
+ * empty and `patternMismatch` when half-typed, and
+ * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to
+ * that input. Resetting the form restores the value the input was declared
+ * with, emitting `value-change` so a controlled parent follows it.
+ */
+type __VLS_Props = {
+    /** Current value, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string;
+    /** Initial combined value, for uncontrolled usage. */
+    defaultValue?: string;
+    /** Number of character boxes rendered and the max length of the combined value. */
+    length?: number;
+    /** Disables every field in this pin input. */
+    disabled?: boolean;
+    /** Marks the field as invalid, exposed as `data-invalid`/`aria-invalid`. */
+    invalid?: boolean;
+    /** Makes every field read-only, native `readOnly` plus `aria-readonly`. */
+    readOnly?: boolean;
+    /** `'numeric'` restricts each box to digits 0-9 and sets `inputmode="numeric"`. */
+    type?: 'text' | 'numeric';
+    /** Renders filled boxes as `type="password"` (dots) instead of plain text. */
+    mask?: boolean;
+    /**
+     * Submit the surrounding `<form>` (via `requestSubmit`, so validation and
+     * the submit event still run) as soon as the value completes.
+     */
+    autoSubmit?: boolean;
+    /**
+     * Cleans pasted text before it is distributed across the boxes — strip the
+     * spaces and dashes an authenticator app copies along with the code. Runs
+     * before the `type="numeric"` digit filter.
+     */
+    sanitize?: (pasted: string) => string;
+    /**
+     * Name for native form participation via a hidden input, which submits the
+     * joined value as a single entry — the individual boxes are never submitted.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Marks the hidden form input required, so an empty pin reports
+     * `valueMissing`. A partly-typed one reports `patternMismatch`: the input
+     * carries `pattern=".{length}"`, since "required" here means every box
+     * filled, not one character somewhere. Only meaningful with `name`.
+     * @default false
+     */
+    required?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the hidden form input satisfies its 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-complete": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+    "onValue-complete"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    type: "text" | "numeric";
+    length: number;
+    mask: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    invalid: boolean;
+    defaultValue: string;
+    readOnly: boolean;
+    autoSubmit: boolean;
+    sanitize: (pasted: string) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/pin-input/PinInput.vue.d.ts

@@ -0,0 +1,99 @@
+/**
+ * The Vue implementation of the shared PinInput contract (see
+ * `@skdx/shared`'s `pinInputContract`). Owns the joined string value and
+ * `provide()`s it, plus cross-field focus movement, to `SkdxPinInputField`
+ * children. Renders a plain `<div>`.
+ *
+ * Emits `value-complete` the moment the last box is filled — with
+ * `auto-submit`, it also calls `requestSubmit()` on the surrounding `<form>`,
+ * which is what a one-time-passcode screen usually wants.
+ *
+ * With a `name`, one visually-hidden native input submits the joined value as a
+ * single entry with the surrounding `<form>` (the boxes themselves never submit
+ * — a passcode is one field, not six), `required` reports `valueMissing` when
+ * empty and `patternMismatch` when half-typed, and
+ * `checkValidity()`/`reportValidity()` — exposed on this root — delegate to
+ * that input. Resetting the form restores the value the input was declared
+ * with, emitting `value-change` so a controlled parent follows it.
+ */
+type __VLS_Props = {
+    /** Current value, for controlled usage. Pair with `v-model:value` or `@value-change`. */
+    value?: string;
+    /** Initial combined value, for uncontrolled usage. */
+    defaultValue?: string;
+    /** Number of character boxes rendered and the max length of the combined value. */
+    length?: number;
+    /** Disables every field in this pin input. */
+    disabled?: boolean;
+    /** Marks the field as invalid, exposed as `data-invalid`/`aria-invalid`. */
+    invalid?: boolean;
+    /** Makes every field read-only, native `readOnly` plus `aria-readonly`. */
+    readOnly?: boolean;
+    /** `'numeric'` restricts each box to digits 0-9 and sets `inputmode="numeric"`. */
+    type?: 'text' | 'numeric';
+    /** Renders filled boxes as `type="password"` (dots) instead of plain text. */
+    mask?: boolean;
+    /**
+     * Submit the surrounding `<form>` (via `requestSubmit`, so validation and
+     * the submit event still run) as soon as the value completes.
+     */
+    autoSubmit?: boolean;
+    /**
+     * Cleans pasted text before it is distributed across the boxes — strip the
+     * spaces and dashes an authenticator app copies along with the code. Runs
+     * before the `type="numeric"` digit filter.
+     */
+    sanitize?: (pasted: string) => string;
+    /**
+     * Name for native form participation via a hidden input, which submits the
+     * joined value as a single entry — the individual boxes are never submitted.
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Marks the hidden form input required, so an empty pin reports
+     * `valueMissing`. A partly-typed one reports `patternMismatch`: the input
+     * carries `pattern=".{length}"`, since "required" here means every box
+     * filled, not one character somewhere. Only meaningful with `name`.
+     * @default false
+     */
+    required?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Reports whether the hidden form input satisfies its 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-complete": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    "onValue-change"?: ((value: string) => any) | undefined;
+    "onValue-complete"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    type: "text" | "numeric";
+    length: number;
+    mask: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    invalid: boolean;
+    defaultValue: string;
+    readOnly: boolean;
+    autoSubmit: boolean;
+    sanitize: (pasted: string) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/pin-input/PinInput.vue.js

@@ -0,0 +1 @@
+import t from"./PinInput.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/pin-input/PinInput.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const k=require("../utils/useFormReset.cjs"),b=require("./context.cjs");let e=require("vue");var V=["data-disabled","data-invalid","data-readonly"],q=["name","^value","pattern","required","disabled"],B=(0,e.defineComponent)({__name:"PinInput",props:{value:{default:void 0},defaultValue:{default:""},length:{default:6},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},type:{default:"text"},mask:{type:Boolean,default:!1},autoSubmit:{type:Boolean,default:!1},sanitize:{type:Function,default:void 0},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","value-complete"],setup(l,{expose:c,emit:f}){const t=l,d=f,o=(0,e.ref)(t.defaultValue),r=(0,e.computed)(()=>t.value===void 0?o.value:t.value),s=(0,e.ref)([]),v=(0,e.ref)(null);function p(a){const u=r.value.length===t.length;t.value===void 0&&(o.value=a),d("update:value",a),d("value-change",a),!(a.length!==t.length||u)&&(d("value-complete",a),t.autoSubmit&&v.value?.closest("form")?.requestSubmit())}function m(a){return t.sanitize?.(a)??a}function y(a){s.value[a]?.focus()}function h(a,u){s.value[a]=u}(0,e.provide)(b.PIN_INPUT_CONTEXT,{value:r,length:(0,e.computed)(()=>t.length),type:(0,e.computed)(()=>t.type),mask:(0,e.computed)(()=>t.mask),disabled:(0,e.computed)(()=>t.disabled),invalid:(0,e.computed)(()=>t.invalid),readOnly:(0,e.computed)(()=>t.readOnly),setValue:p,focusIndex:y,registerField:h,sanitizePaste:m});const n=(0,e.ref)(null),g=(0,e.computed)(()=>`.{${t.length}}`),i=t.value??t.defaultValue;return k.useFormReset(()=>n.value,()=>{t.value===void 0&&(o.value=i),d("update:value",i),d("value-change",i),(0,e.nextTick)(()=>{s.value.forEach((a,u)=>{a&&(a.value=i[u]??"")})})}),c({checkValidity:()=>n.value?.checkValidity()??!0,reportValidity:()=>n.value?.reportValidity()??!0}),(a,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-pin-input","data-part":"root","data-skdx-component":"pin-input",ref_key:"rootRef",ref:v,"data-disabled":l.disabled?"":void 0,"data-invalid":l.invalid?"":void 0,"data-readonly":l.readOnly?"":void 0},[(0,e.renderSlot)(a.$slots,"default"),l.name?((0,e.openBlock)(),(0,e.createElementBlock)("input",{key:0,ref_key:"hiddenEl",ref:n,type:"text","aria-hidden":"true",tabindex:"-1",name:l.name,"^value":r.value,pattern:g.value,required:l.required,disabled:l.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,q)):(0,e.createCommentVNode)("",!0)],8,V))}});exports.default=B;

package/dist/pin-input/PinInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useFormReset as e}from"../utils/useFormReset.js";import{PIN_INPUT_CONTEXT as a}from"./context.js";import{computed as t,createCommentVNode as l,createElementBlock as d,defineComponent as u,nextTick as n,openBlock as i,provide as o,ref as s,renderSlot as r}from"vue";var v=["data-disabled","data-invalid","data-readonly"],p=["name","^value","pattern","required","disabled"],f=/* @__PURE__ */u({__name:"PinInput",props:{value:{default:void 0},defaultValue:{default:""},length:{default:6},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},type:{default:"text"},mask:{type:Boolean,default:!1},autoSubmit:{type:Boolean,default:!1},sanitize:{type:Function,default:void 0},name:{default:void 0},required:{type:Boolean,default:!1}},emits:["update:value","value-change","value-complete"],setup(u,{expose:f,emit:m}){const c=u,y=m,h=s(c.defaultValue),b=t(()=>void 0===c.value?h.value:c.value),g=s([]),k=s(null);o(a,{value:b,length:t(()=>c.length),type:t(()=>c.type),mask:t(()=>c.mask),disabled:t(()=>c.disabled),invalid:t(()=>c.invalid),readOnly:t(()=>c.readOnly),setValue:function(e){const a=b.value.length===c.length;void 0===c.value&&(h.value=e),y("update:value",e),y("value-change",e),e.length===c.length&&!a&&(y("value-complete",e),c.autoSubmit&&k.value?.closest("form")?.requestSubmit())},focusIndex:function(e){g.value[e]?.focus()},registerField:function(e,a){g.value[e]=a},sanitizePaste:function(e){return c.sanitize?.(e)??e}});const x=s(null),V=t(()=>`.{${c.length}}`),B=c.value??c.defaultValue;return e(()=>x.value,()=>{void 0===c.value&&(h.value=B),y("update:value",B),y("value-change",B),n(()=>{g.value.forEach((e,a)=>{e&&(e.value=B[a]??"")})})}),f({checkValidity:()=>x.value?.checkValidity()??!0,reportValidity:()=>x.value?.reportValidity()??!0}),(e,a)=>(i(),d("div",{class:"skdx-pin-input","data-part":"root","data-skdx-component":"pin-input",ref_key:"rootRef",ref:k,"data-disabled":u.disabled?"":void 0,"data-invalid":u.invalid?"":void 0,"data-readonly":u.readOnly?"":void 0},[r(e.$slots,"default"),u.name?(i(),d("input",{key:0,ref_key:"hiddenEl",ref:x,type:"text","aria-hidden":"true",tabindex:"-1",name:u.name,"^value":b.value,pattern:V.value,required:u.required,disabled:u.disabled,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,p)):l("",!0)],8,v))}});export{f as default};

package/dist/pin-input/PinInputField.vue.cjs

@@ -0,0 +1 @@
+const e=require("./PinInputField.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

package/dist/pin-input/PinInputField.vue.d.cts

@@ -0,0 +1,13 @@
+/**
+ * A single character box of a `SkdxPinInput`. Reads/writes its character at
+ * `index` in the shared value via context. Typing or pasting auto-advances
+ * focus; Backspace on an empty box clears and moves back; Arrow Left/Right
+ * move focus between boxes; pasting a multi-character string fills
+ * consecutive boxes from `index` onward.
+ */
+type __VLS_Props = {
+    /** This box's 0-indexed position within the pin's combined value. */
+    index: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/pin-input/PinInputField.vue.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A single character box of a `SkdxPinInput`. Reads/writes its character at
+ * `index` in the shared value via context. Typing or pasting auto-advances
+ * focus; Backspace on an empty box clears and moves back; Arrow Left/Right
+ * move focus between boxes; pasting a multi-character string fills
+ * consecutive boxes from `index` onward.
+ */
+type __VLS_Props = {
+    /** This box's 0-indexed position within the pin's combined value. */
+    index: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/pin-input/PinInputField.vue.js

@@ -0,0 +1 @@
+import e from"./PinInputField.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/pin-input/PinInputField.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const g=require("../utils/reassertValue.cjs"),v=require("../utils/direction.cjs"),_=require("./context.cjs");let a=require("vue");var I=["inputmode","autocomplete","type","disabled","readonly","aria-invalid","aria-readonly","data-disabled","data-invalid","data-readonly","value"],b=(0,a.defineComponent)({__name:"PinInputField",props:{index:{}},setup(d){const f=/^[0-9]$/,n=d,e=(0,a.inject)(_.PIN_INPUT_CONTEXT);if(!e)throw new Error("<SkdxPinInputField> must be used inside <SkdxPinInput>.");const p=v.useDirection(),r=(0,a.computed)(()=>e.value.value[n.index]??""),x=(0,a.computed)(()=>r.value!=="");function o(t){const i=e.value.value.split("");i[n.index]=t,e.setValue(i.join("").slice(0,e.length.value))}function h(t){if(e.disabled.value)return;const i=t.target.value;if(i===""){o("");return}if(e.type.value==="numeric"&&!f.test(i)){t.target.value=r.value;return}o(i),g.reassertValue(t.target,()=>r.value),n.index<e.length.value-1&&e.focusIndex(n.index+1)}function y(t){if(e.disabled.value)return;const i=v.directionalKey(t.key,t.currentTarget,p());if(i==="Backspace"){if(e.readOnly.value)return;if(t.preventDefault(),r.value)o("");else if(n.index>0){const l=e.value.value.split("");l[n.index-1]="",e.setValue(l.join("").slice(0,e.length.value)),e.focusIndex(n.index-1)}}else i==="ArrowLeft"?n.index>0&&(t.preventDefault(),e.focusIndex(n.index-1)):i==="ArrowRight"&&n.index<e.length.value-1&&(t.preventDefault(),e.focusIndex(n.index+1))}function m(t){if(e.disabled.value||e.readOnly.value)return;t.preventDefault();const i=e.sanitizePaste(t.clipboardData?.getData("text")??""),l=e.type.value==="numeric"?i.replace(/[^0-9]/g,""):i;if(!l)return;const s=e.value.value.split("");let c=n.index-1;for(let u=0;u<l.length&&n.index+u<e.length.value;u++)s[n.index+u]=l[u],c=n.index+u;e.setValue(s.join("").slice(0,e.length.value)),e.focusIndex(Math.min(c+1,e.length.value-1))}return(t,i)=>((0,a.openBlock)(),(0,a.createElementBlock)("input",{class:"skdx-pin-input__field","data-part":"field",ref:l=>(0,a.unref)(e).registerField(d.index,l),inputmode:(0,a.unref)(e).type.value==="numeric"?"numeric":"text",autocomplete:d.index===0?"one-time-code":"off",type:(0,a.unref)(e).mask.value&&x.value?"password":"text",maxlength:"1",disabled:(0,a.unref)(e).disabled.value,readonly:(0,a.unref)(e).readOnly.value,"aria-invalid":(0,a.unref)(e).invalid.value?!0:void 0,"aria-readonly":(0,a.unref)(e).readOnly.value?!0:void 0,"data-disabled":(0,a.unref)(e).disabled.value?"":void 0,"data-invalid":(0,a.unref)(e).invalid.value?"":void 0,"data-readonly":(0,a.unref)(e).readOnly.value?"":void 0,value:r.value,onInput:h,onKeydown:y,onPaste:m},null,40,I))}});exports.default=b;

package/dist/pin-input/PinInputField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{reassertValue as e}from"../utils/reassertValue.js";import{directionalKey as a,useDirection as t}from"../utils/direction.js";import{PIN_INPUT_CONTEXT as n}from"./context.js";import{computed as l,createElementBlock as i,defineComponent as d,inject as u,openBlock as r,unref as o}from"vue";var s=["inputmode","autocomplete","type","disabled","readonly","aria-invalid","aria-readonly","data-disabled","data-invalid","data-readonly","value"],v=/* @__PURE__ */d({__name:"PinInputField",props:{index:{}},setup(d){const v=/^[0-9]$/,c=d,p=u(n);if(!p)throw new Error("<SkdxPinInputField> must be used inside <SkdxPinInput>.");const f=t(),x=l(()=>p.value.value[c.index]??""),m=l(()=>""!==x.value);function y(e){const a=p.value.value.split("");a[c.index]=e,p.setValue(a.join("").slice(0,p.length.value))}function g(a){if(p.disabled.value)return;const t=a.target.value;""!==t?"numeric"!==p.type.value||v.test(t)?(y(t),e(a.target,()=>x.value),c.index<p.length.value-1&&p.focusIndex(c.index+1)):a.target.value=x.value:y("")}function h(e){if(p.disabled.value)return;const t=a(e.key,e.currentTarget,f());if("Backspace"===t){if(p.readOnly.value)return;if(e.preventDefault(),x.value)y("");else if(c.index>0){const e=p.value.value.split("");e[c.index-1]="",p.setValue(e.join("").slice(0,p.length.value)),p.focusIndex(c.index-1)}}else"ArrowLeft"===t?c.index>0&&(e.preventDefault(),p.focusIndex(c.index-1)):"ArrowRight"===t&&c.index<p.length.value-1&&(e.preventDefault(),p.focusIndex(c.index+1))}function b(e){if(p.disabled.value||p.readOnly.value)return;e.preventDefault();const a=p.sanitizePaste(e.clipboardData?.getData("text")??""),t="numeric"===p.type.value?a.replace(/[^0-9]/g,""):a;if(!t)return;const n=p.value.value.split("");let l=c.index-1;for(let e=0;e<t.length&&c.index+e<p.length.value;e++)n[c.index+e]=t[e],l=c.index+e;p.setValue(n.join("").slice(0,p.length.value)),p.focusIndex(Math.min(l+1,p.length.value-1))}return(e,a)=>(r(),i("input",{class:"skdx-pin-input__field","data-part":"field",ref:e=>o(p).registerField(d.index,e),inputmode:"numeric"===o(p).type.value?"numeric":"text",autocomplete:0===d.index?"one-time-code":"off",type:o(p).mask.value&&m.value?"password":"text",maxlength:"1",disabled:o(p).disabled.value,readonly:o(p).readOnly.value,"aria-invalid":!!o(p).invalid.value||void 0,"aria-readonly":!!o(p).readOnly.value||void 0,"data-disabled":o(p).disabled.value?"":void 0,"data-invalid":o(p).invalid.value?"":void 0,"data-readonly":o(p).readOnly.value?"":void 0,value:x.value,onInput:g,onKeydown:h,onPaste:b},null,40,s))}});export{v as default};

package/dist/pin-input/context.cjs

@@ -0,0 +1 @@
+var N=Symbol("skdx-pin-input-context");exports.PIN_INPUT_CONTEXT=N;

package/dist/pin-input/context.d.cts

@@ -0,0 +1,18 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Injection key a PinInput provides so its fields can read/drive shared state. */
+export interface PinInputContext {
+    value: ComputedRef<string>;
+    length: ComputedRef<number>;
+    type: ComputedRef<'text' | 'numeric'>;
+    mask: ComputedRef<boolean>;
+    disabled: ComputedRef<boolean>;
+    invalid: ComputedRef<boolean>;
+    readOnly: ComputedRef<boolean>;
+    setValue: (next: string) => void;
+    focusIndex: (index: number) => void;
+    registerField: (index: number, el: HTMLInputElement | null) => void;
+    /** Runs the root's `sanitize` hook over pasted text; identity when none is set. */
+    sanitizePaste: (pasted: string) => string;
+}
+/** @internal Injection key a PinInput provides so its fields share value, config, and focus/registration handlers. */
+export declare const PIN_INPUT_CONTEXT: InjectionKey<PinInputContext>;

package/dist/pin-input/context.d.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+/** @internal Injection key a PinInput provides so its fields can read/drive shared state. */
+export interface PinInputContext {
+    value: ComputedRef<string>;
+    length: ComputedRef<number>;
+    type: ComputedRef<'text' | 'numeric'>;
+    mask: ComputedRef<boolean>;
+    disabled: ComputedRef<boolean>;
+    invalid: ComputedRef<boolean>;
+    readOnly: ComputedRef<boolean>;
+    setValue: (next: string) => void;
+    focusIndex: (index: number) => void;
+    registerField: (index: number, el: HTMLInputElement | null) => void;
+    /** Runs the root's `sanitize` hook over pasted text; identity when none is set. */
+    sanitizePaste: (pasted: string) => string;
+}
+/** @internal Injection key a PinInput provides so its fields share value, config, and focus/registration handlers. */
+export declare const PIN_INPUT_CONTEXT: InjectionKey<PinInputContext>;

package/dist/pin-input/context.js

@@ -0,0 +1 @@
+var t=/* @__PURE__ */Symbol("skdx-pin-input-context");export{t as PIN_INPUT_CONTEXT};

package/dist/pin-input/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PinInput.vue.cjs"),i=require("./PinInputField.vue.cjs");exports.SkdxPinInput=e.default;exports.SkdxPinInputField=i.default;

package/dist/pin-input/index.d.cts

@@ -0,0 +1,2 @@
+export { default as SkdxPinInput } from './PinInput.vue.cjs';
+export { default as SkdxPinInputField } from './PinInputField.vue.cjs';

package/dist/pin-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkdxPinInput } from './PinInput.vue.js';
+export { default as SkdxPinInputField } from './PinInputField.vue.js';

package/dist/pin-input/index.js

@@ -0,0 +1 @@
+import i from"./PinInput.vue.js";import n from"./PinInputField.vue.js";export{i as SkdxPinInput,n as SkdxPinInputField};

package/dist/popover/Popover.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Popover.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/popover/Popover.vue.d.cts

@@ -0,0 +1,47 @@
+/**
+ * The Vue implementation of the shared Popover contract (see
+ * `@skdx/shared`'s `popoverContract`). Root of a non-modal-by-default
+ * popover: owns open state and hands it down to `SkdxPopoverTrigger` /
+ * `SkdxPopoverAnchor` / `SkdxPopoverPortal` / `SkdxPopoverContent` /
+ * `SkdxPopoverArrow` / `SkdxPopoverClose` via context. Wraps children in the
+ * shared popper positioning root, so `SkdxPopoverContent` can float relative
+ * to the trigger (or a custom `SkdxPopoverAnchor`). Renders no DOM of its own.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxPopoverContent`'s enter
+ * or exit animation ends, or in the same task when it declares none.
+ *
+ * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ */
+type __VLS_Props = {
+    /** Whether the popover is open, for controlled usage via v-model:open. */
+    open?: boolean;
+    /** Whether the popover is initially open, for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Whether SkdxPopoverContent traps focus while open. Non-modal (the default) lets the rest of the page stay interactive. */
+    modal?: boolean;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    defaultOpen: boolean;
+    modal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/popover/Popover.vue.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The Vue implementation of the shared Popover contract (see
+ * `@skdx/shared`'s `popoverContract`). Root of a non-modal-by-default
+ * popover: owns open state and hands it down to `SkdxPopoverTrigger` /
+ * `SkdxPopoverAnchor` / `SkdxPopoverPortal` / `SkdxPopoverContent` /
+ * `SkdxPopoverArrow` / `SkdxPopoverClose` via context. Wraps children in the
+ * shared popper positioning root, so `SkdxPopoverContent` can float relative
+ * to the trigger (or a custom `SkdxPopoverAnchor`). Renders no DOM of its own.
+ *
+ * Emits `open-change` the instant the state flips and `open-change-complete`
+ * once the change has finished on screen — after `SkdxPopoverContent`'s enter
+ * or exit animation ends, or in the same task when it declares none.
+ *
+ * Works controlled (`v-model:open`) or uncontrolled (`default-open`).
+ */
+type __VLS_Props = {
+    /** Whether the popover is open, for controlled usage via v-model:open. */
+    open?: boolean;
+    /** Whether the popover is initially open, for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Whether SkdxPopoverContent traps focus while open. Non-modal (the default) lets the rest of the page stay interactive. */
+    modal?: boolean;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "open-change": (open: boolean) => any;
+    "open-change-complete": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onOpen-change"?: ((open: boolean) => any) | undefined;
+    "onOpen-change-complete"?: ((open: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    defaultOpen: boolean;
+    modal: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/popover/Popover.vue.js

@@ -0,0 +1 @@
+import e from"./Popover.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/popover/Popover.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const i=require("../utils/useOpenChangeComplete.cjs"),_=require("../utils/PopperRoot.vue.cjs"),r=require("./context.cjs");let e=require("vue");var m=(0,e.defineComponent)({__name:"Popover",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete"],setup(a,{emit:c}){const t=a,n=c,d=(0,e.ref)(null),p=(0,e.ref)(null),l=(0,e.ref)(t.defaultOpen),u=(0,e.computed)(()=>t.open??l.value),s=(0,e.computed)(()=>t.modal);i.useOpenChangeComplete(u,p,o=>n("open-change-complete",o));function f(o){t.open===void 0&&(l.value=o),n("update:open",o),n("open-change",o)}return(0,e.provide)(r.POPOVER_CONTEXT,{triggerRef:d,contentRef:p,contentId:r.nextPopoverContentId(),open:u,modal:s,setOpen:f}),(o,v)=>((0,e.openBlock)(),(0,e.createBlock)(_.default,null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"default")]),_:3}))}});exports.default=m;

package/dist/popover/Popover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{useOpenChangeComplete as e}from"../utils/useOpenChangeComplete.js";import o from"../utils/PopperRoot.vue.js";import{POPOVER_CONTEXT as t,nextPopoverContentId as n}from"./context.js";import{computed as p,createBlock as a,defineComponent as l,openBlock as s,provide as u,ref as r,renderSlot as d,withCtx as m}from"vue";var f=/* @__PURE__ */l({__name:"Popover",props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean,default:!1},modal:{type:Boolean,default:!1}},emits:["update:open","open-change","open-change-complete"],setup(l,{emit:f}){const c=l,i=f,v=r(null),g=r(null),C=r(c.defaultOpen),O=p(()=>c.open??C.value),h=p(()=>c.modal);return e(O,g,e=>i("open-change-complete",e)),u(t,{triggerRef:v,contentRef:g,contentId:n(),open:O,modal:h,setOpen:function(e){void 0===c.open&&(C.value=e),i("update:open",e),i("open-change",e)}}),(e,t)=>(s(),a(o,null,{default:m(()=>[d(e.$slots,"default")]),_:3}))}});export{f as default};

package/dist/popover/PopoverArrow.vue.cjs

@@ -0,0 +1 @@
+const e=require("./PopoverArrow.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;