@skdx/vue 0.27.0 → 0.29.0

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

@@ -1,33 +1,9 @@
 /**
- * The Vue implementation of the shared PasswordInput contract (see
- * `@skdx/shared`'s `passwordInputContract`). Root of a password input: a
- * `<SkdxTextField>` that additionally owns whether the characters are revealed,
- * handing that down to `<SkdxPasswordInputField>` (which flips its `type`) and
- * `<SkdxPasswordInputToggle>` (which flips the state) through `provide()`.
- *
- * The value itself is the TextField's — this component renders one rather than
- * re-declaring its value handling, so `v-model:value`/`@value-change`,
- * `disabled`, `invalid` and `required` behave identically to a plain text field
- * and `data-disabled`/`data-invalid` land in the same places. The only state
- * added here is visibility.
- *
- * Every change of visibility is announced politely through the shared live
- * region ("Password shown" / "Password hidden"). A masked field flipping to
- * plaintext is a purely visual event: without the announcement a screen-reader
- * user pressing the toggle gets `aria-pressed` and nothing else, and never
- * learns that their password is now on screen. The announcement is driven by
- * the resolved state, not by the click, so a controlled parent that refuses the
- * change does not produce a false announcement — and the initial state is never
- * announced, because there was no change for the user to miss.
- *
- * Supports `v-model:visible`, independently of how the value is controlled.
+ * A `<SkdxTextField>` that also owns and toggles whether the password characters are revealed.
  *
  * @example
  * ```vue
- * <SkdxPasswordInput v-model:value="password">
- *   <SkdxPasswordInputField placeholder="Password" />
- *   <SkdxPasswordInputToggle>👁</SkdxPasswordInputToggle>
- * </SkdxPasswordInput>
+ * <SkdxPasswordInput v-model:value="password" clearable />
  * ```
  */
 type __VLS_Props = {
@@ -36,11 +12,10 @@ type __VLS_Props = {
      * `v-model:visible` or `@visible-change`.
      * @default undefined — uncontrolled, the field tracks its own visibility internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
      * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the field starts masked, which is the only safe default
-     * for a credential rendered on a screen someone else might be looking at.
+     * @default false — the field starts masked.
      */
     defaultVisible?: boolean;
     /**
@@ -48,17 +23,14 @@ type __VLS_Props = {
      * controlled usage. Pair with `v-model:value` or `@value-change`.
      * @default undefined — uncontrolled, the field tracks its own value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
-     * Initial value, for uncontrolled usage — forwarded to the underlying
-     * TextField, which seeds itself with it and restores it on form reset.
-     * Ignored while `value` is set.
+     * Initial value for uncontrolled usage, forwarded to the underlying TextField, which restores it on form reset.
      * @default '' — the field starts empty.
      */
     defaultValue?: string;
     /**
-     * Disables the field and the toggle together — there is nothing to reveal
-     * in a field nobody can use.
+     * Disables the field and the toggle together.
      * @default false — the field is interactive and the toggle can reveal.
      */
     disabled?: boolean;
@@ -74,33 +46,115 @@ type __VLS_Props = {
      */
     required?: boolean;
     /**
-     * Words the polite live-region message announced when visibility changes.
-     * The toggle's own name does not change, so this announcement is the only
-     * confirmation a screen-reader user gets that the characters are now
-     * readable on screen. Return `''` to announce nothing.
+     * Form field name, forwarded to the underlying TextField and set on the
+     * wrapped native `<input>`.
+     * @default undefined — the field submits nothing.
+     */
+    name?: string | undefined;
+    /**
+     * Words the polite live-region message announced when visibility changes. Return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
      */
-    getVisibilityAnnouncement?: (visible: boolean) => string;
+    getVisibilityAnnouncement?: ((visible: boolean) => string) | undefined;
+    /**
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel?: string;
+    /**
+     * Makes the field read-only: the value stays focusable and submitted, only editing is blocked; the toggle stays operable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Renders a derived clear button that resets the value to empty.
+     * Inherited from `TextFieldProps`.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Accessible name for the derived clear button. Inherited from
+     * `TextFieldProps`.
+     * @default 'Clear'
+     */
+    clearLabel?: string;
+    /**
+     * Native `<input>` `placeholder`, forwarded to the derived Field.
+     * Inherited from `TextFieldProps`.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+    /**
+     * Renders a derived reveal Toggle beside the Field; `trailing` is omitted since the Toggle already occupies that slot.
+     * @default true
+     */
+    showToggle?: 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;
+    /**
+     * Visual style family the skin gives the field, forwarded as `data-variant`.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 };
-declare var __VLS_5: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
+type __VLS_Slots = {
+    /** Full manual composition — a Field plus an optional Toggle part. */
+    default?(): unknown;
+    /** The derived leading Slot's content — an icon or adornment. */
+    leading?(): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function setVisible(next: boolean): void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Shows or masks the password, emitting `visible-change` when it changes. */
+    setVisible: typeof setVisible;
+    /** Reports whether the wrapped input satisfies its constraints. `true` without one. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the wrapped input, like `HTMLInputElement.setCustomValidity()`; `''` clears it. */
+    setCustomValidity: (message: string) => void | undefined;
+    /** The wrapped native input's `ValidityState`; `null` before an input has mounted. */
+    validity: import("vue").ComputedRef<{
+        readonly badInput: boolean;
+        readonly customError: boolean;
+        readonly patternMismatch: boolean;
+        readonly rangeOverflow: boolean;
+        readonly rangeUnderflow: boolean;
+        readonly stepMismatch: boolean;
+        readonly tooLong: boolean;
+        readonly tooShort: boolean;
+        readonly typeMismatch: boolean;
+        readonly valid: boolean;
+        readonly valueMissing: boolean;
+    } | null>;
+    /** The browser's validation message for the current validity; `''` when valid. */
+    validationMessage: import("vue").ComputedRef<string>;
+    /** The wrapped native input element, for focus and measurement. */
+    inputEl: import("vue").ComputedRef<HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "value-change": (value: string) => any;
     "update:visible": (visible: boolean) => any;
     "visible-change": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
-    "onVisible-change"?: ((visible: boolean) => any) | undefined;
+    "onValue-change"?: (value: string) => any;
+    "onUpdate:visible"?: (visible: boolean) => any;
+    "onVisible-change"?: (visible: boolean) => any;
 }>, {
+    visible: boolean | undefined;
     disabled: boolean;
+    defaultValue: string;
+    readOnly: boolean;
     required: boolean;
-    value: string;
     invalid: boolean;
-    visible: boolean;
-    defaultValue: string;
+    clearable: boolean;
+    clearLabel: string;
+    showToggle: boolean;
     defaultVisible: boolean;
-    getVisibilityAnnouncement: (visible: boolean) => string;
+    getVisibilityAnnouncement: ((visible: boolean) => string) | undefined;
+    revealLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,33 +1,9 @@
 /**
- * The Vue implementation of the shared PasswordInput contract (see
- * `@skdx/shared`'s `passwordInputContract`). Root of a password input: a
- * `<SkdxTextField>` that additionally owns whether the characters are revealed,
- * handing that down to `<SkdxPasswordInputField>` (which flips its `type`) and
- * `<SkdxPasswordInputToggle>` (which flips the state) through `provide()`.
- *
- * The value itself is the TextField's — this component renders one rather than
- * re-declaring its value handling, so `v-model:value`/`@value-change`,
- * `disabled`, `invalid` and `required` behave identically to a plain text field
- * and `data-disabled`/`data-invalid` land in the same places. The only state
- * added here is visibility.
- *
- * Every change of visibility is announced politely through the shared live
- * region ("Password shown" / "Password hidden"). A masked field flipping to
- * plaintext is a purely visual event: without the announcement a screen-reader
- * user pressing the toggle gets `aria-pressed` and nothing else, and never
- * learns that their password is now on screen. The announcement is driven by
- * the resolved state, not by the click, so a controlled parent that refuses the
- * change does not produce a false announcement — and the initial state is never
- * announced, because there was no change for the user to miss.
- *
- * Supports `v-model:visible`, independently of how the value is controlled.
+ * A `<SkdxTextField>` that also owns and toggles whether the password characters are revealed.
  *
  * @example
  * ```vue
- * <SkdxPasswordInput v-model:value="password">
- *   <SkdxPasswordInputField placeholder="Password" />
- *   <SkdxPasswordInputToggle>👁</SkdxPasswordInputToggle>
- * </SkdxPasswordInput>
+ * <SkdxPasswordInput v-model:value="password" clearable />
  * ```
  */
 type __VLS_Props = {
@@ -36,11 +12,10 @@ type __VLS_Props = {
      * `v-model:visible` or `@visible-change`.
      * @default undefined — uncontrolled, the field tracks its own visibility internally.
      */
-    visible?: boolean;
+    visible?: boolean | undefined;
     /**
      * Initial visibility, for uncontrolled usage, seeding the first render.
-     * @default false — the field starts masked, which is the only safe default
-     * for a credential rendered on a screen someone else might be looking at.
+     * @default false — the field starts masked.
      */
     defaultVisible?: boolean;
     /**
@@ -48,17 +23,14 @@ type __VLS_Props = {
      * controlled usage. Pair with `v-model:value` or `@value-change`.
      * @default undefined — uncontrolled, the field tracks its own value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
-     * Initial value, for uncontrolled usage — forwarded to the underlying
-     * TextField, which seeds itself with it and restores it on form reset.
-     * Ignored while `value` is set.
+     * Initial value for uncontrolled usage, forwarded to the underlying TextField, which restores it on form reset.
      * @default '' — the field starts empty.
      */
     defaultValue?: string;
     /**
-     * Disables the field and the toggle together — there is nothing to reveal
-     * in a field nobody can use.
+     * Disables the field and the toggle together.
      * @default false — the field is interactive and the toggle can reveal.
      */
     disabled?: boolean;
@@ -74,33 +46,115 @@ type __VLS_Props = {
      */
     required?: boolean;
     /**
-     * Words the polite live-region message announced when visibility changes.
-     * The toggle's own name does not change, so this announcement is the only
-     * confirmation a screen-reader user gets that the characters are now
-     * readable on screen. Return `''` to announce nothing.
+     * Form field name, forwarded to the underlying TextField and set on the
+     * wrapped native `<input>`.
+     * @default undefined — the field submits nothing.
+     */
+    name?: string | undefined;
+    /**
+     * Words the polite live-region message announced when visibility changes. Return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Password shown" / "Password hidden").
      */
-    getVisibilityAnnouncement?: (visible: boolean) => string;
+    getVisibilityAnnouncement?: ((visible: boolean) => string) | undefined;
+    /**
+     * Accessible name for the reveal button, whose children are an icon with no text content.
+     * @default 'Show password' — English; translate it.
+     */
+    revealLabel?: string;
+    /**
+     * Makes the field read-only: the value stays focusable and submitted, only editing is blocked; the toggle stays operable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Renders a derived clear button that resets the value to empty.
+     * Inherited from `TextFieldProps`.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Accessible name for the derived clear button. Inherited from
+     * `TextFieldProps`.
+     * @default 'Clear'
+     */
+    clearLabel?: string;
+    /**
+     * Native `<input>` `placeholder`, forwarded to the derived Field.
+     * Inherited from `TextFieldProps`.
+     * @default undefined
+     */
+    placeholder?: string | undefined;
+    /**
+     * Renders a derived reveal Toggle beside the Field; `trailing` is omitted since the Toggle already occupies that slot.
+     * @default true
+     */
+    showToggle?: 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;
+    /**
+     * Visual style family the skin gives the field, forwarded as `data-variant`.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 };
-declare var __VLS_5: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
+type __VLS_Slots = {
+    /** Full manual composition — a Field plus an optional Toggle part. */
+    default?(): unknown;
+    /** The derived leading Slot's content — an icon or adornment. */
+    leading?(): unknown;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function setVisible(next: boolean): void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** Shows or masks the password, emitting `visible-change` when it changes. */
+    setVisible: typeof setVisible;
+    /** Reports whether the wrapped input satisfies its constraints. `true` without one. */
+    checkValidity: () => boolean;
+    /** Like `checkValidity()`, but also shows the browser's validation message. */
+    reportValidity: () => boolean;
+    /** Pushes an externally-computed error onto the wrapped input, like `HTMLInputElement.setCustomValidity()`; `''` clears it. */
+    setCustomValidity: (message: string) => void | undefined;
+    /** The wrapped native input's `ValidityState`; `null` before an input has mounted. */
+    validity: import("vue").ComputedRef<{
+        readonly badInput: boolean;
+        readonly customError: boolean;
+        readonly patternMismatch: boolean;
+        readonly rangeOverflow: boolean;
+        readonly rangeUnderflow: boolean;
+        readonly stepMismatch: boolean;
+        readonly tooLong: boolean;
+        readonly tooShort: boolean;
+        readonly typeMismatch: boolean;
+        readonly valid: boolean;
+        readonly valueMissing: boolean;
+    } | null>;
+    /** The browser's validation message for the current validity; `''` when valid. */
+    validationMessage: import("vue").ComputedRef<string>;
+    /** The wrapped native input element, for focus and measurement. */
+    inputEl: import("vue").ComputedRef<HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "value-change": (value: string) => any;
     "update:visible": (visible: boolean) => any;
     "visible-change": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
-    "onVisible-change"?: ((visible: boolean) => any) | undefined;
+    "onValue-change"?: (value: string) => any;
+    "onUpdate:visible"?: (visible: boolean) => any;
+    "onVisible-change"?: (visible: boolean) => any;
 }>, {
+    visible: boolean | undefined;
     disabled: boolean;
+    defaultValue: string;
+    readOnly: boolean;
     required: boolean;
-    value: string;
     invalid: boolean;
-    visible: boolean;
-    defaultValue: string;
+    clearable: boolean;
+    clearLabel: string;
+    showToggle: boolean;
     defaultVisible: boolean;
-    getVisibilityAnnouncement: (visible: boolean) => string;
+    getVisibilityAnnouncement: ((visible: boolean) => string) | undefined;
+    revealLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-const v=require("../text-field/TextField.vue.cjs"),c=require("../utils/liveAnnouncer.cjs"),f=require("./context.cjs");let e=require("vue");var b=(0,e.defineComponent)({__name:"PasswordInput",props:{visible:{type:Boolean,default:void 0},defaultVisible:{type:Boolean,default:!1},value:{default:void 0},defaultValue:{default:""},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},getVisibilityAnnouncement:{type:Function,default:void 0}},emits:["update:visible","visible-change"],setup(t,{emit:n}){const a=t,u=n,s=(0,e.ref)(a.defaultVisible),l=(0,e.computed)(()=>a.visible===void 0?s.value:a.visible);function o(i){i!==l.value&&(a.visible===void 0&&(s.value=i),u("update:visible",i),u("visible-change",i))}return(0,e.watch)(l,i=>{const d=(a.getVisibilityAnnouncement??(r=>r?"Password shown":"Password hidden"))(i);d&&c.announce(d)}),(0,e.provide)(f.PASSWORD_INPUT_CONTEXT,{visible:l,disabled:(0,e.computed)(()=>a.disabled),setVisible:o}),(i,d)=>((0,e.openBlock)(),(0,e.createBlock)(v.default,{class:"skdx-password-input","data-part":"root","data-skdx-component":"password-input",value:t.value,"default-value":t.defaultValue,disabled:t.disabled,invalid:t.invalid,required:t.required,"data-state":l.value?"visible":"hidden"},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(i.$slots,"default")]),_:3},8,["value","default-value","disabled","invalid","required","data-state"]))}});exports.default=b;
+const m=require("../utils/appearance.cjs"),y=require("../utils/liveAnnouncer.cjs"),g=require("../utils/useFormReset.cjs"),h=require("../text-field/TextField.vue.cjs"),V=require("./context.cjs"),q=require("./PasswordInputAnatomy.vue.cjs");let e=require("vue");var w=(0,e.defineComponent)({inheritAttrs:!1,__name:"PasswordInput",props:{visible:{type:Boolean,default:void 0},defaultVisible:{type:Boolean,default:!1},value:{},defaultValue:{default:""},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},getVisibilityAnnouncement:{type:Function,default:void 0},revealLabel:{default:"Show password"},readOnly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},clearLabel:{default:"Clear"},placeholder:{},showToggle:{type:Boolean,default:!0},size:{},variant:{}},emits:["update:visible","visible-change","value-change"],setup(a,{expose:c,emit:f}){const t=a,o=(0,e.useAttrs)(),b=(0,e.computed)(()=>t.size??o["data-size"]),p=(0,e.computed)(()=>t.variant??o["data-variant"]),r=f,i=(0,e.ref)(null),v=(0,e.ref)(t.defaultVisible),u=(0,e.computed)(()=>t.visible===void 0?v.value:t.visible);function n(l){t.disabled||l!==u.value&&(t.visible===void 0&&(v.value=l),r("update:visible",l),r("visible-change",l))}return(0,e.watch)(u,l=>{const d=(t.getVisibilityAnnouncement??(s=>s?"Password shown":"Password hidden"))(l);d&&y.announce(d)}),(0,e.provide)(V.PASSWORD_INPUT_CONTEXT,{visible:u,disabled:(0,e.computed)(()=>t.disabled),readOnly:(0,e.computed)(()=>t.readOnly),revealLabel:(0,e.computed)(()=>t.revealLabel),setVisible:n}),g.useFormReset(()=>i.value?.inputEl,()=>n(t.defaultVisible)),c({setVisible:n,checkValidity:()=>i.value?.checkValidity()??!0,reportValidity:()=>i.value?.reportValidity()??!0,setCustomValidity:l=>i.value?.setCustomValidity(l),validity:(0,e.computed)(()=>i.value?.validity??null),validationMessage:(0,e.computed)(()=>i.value?.validationMessage??""),inputEl:(0,e.computed)(()=>i.value?.inputEl??null)}),(l,d)=>((0,e.openBlock)(),(0,e.createBlock)(h.default,(0,e.mergeProps)({ref_key:"textFieldRef",ref:i,class:"skdx-password-input","data-part":"root","data-skdx-component":"password-input",value:a.value,"default-value":a.defaultValue,disabled:a.disabled,invalid:a.invalid,required:a.required,name:a.name,"read-only":a.readOnly,"data-state":u.value?"visible":"hidden"},{...l.$attrs,...(0,e.unref)(m.appearanceAttrs)({size:a.size,variant:a.variant},l.$attrs)},{onValueChange:d[0]||(d[0]=s=>r("value-change",s))}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"default",{},()=>[(0,e.createVNode)(q.default,{placeholder:a.placeholder,clearable:a.clearable,"clear-label":a.clearLabel,"show-toggle":a.showToggle,size:b.value,variant:p.value},(0,e.createSlots)({_:2},[l.$slots.leading?{name:"leading",fn:(0,e.withCtx)(()=>[(0,e.renderSlot)(l.$slots,"leading")]),key:"0"}:void 0]),1032,["placeholder","clearable","clear-label","show-toggle","size","variant"])])]),_:3},16,["value","default-value","disabled","invalid","required","name","read-only","data-state"]))}});exports.default=w;

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

@@ -1 +1 @@
-import e from"../text-field/TextField.vue.js";import{announce as a}from"../utils/liveAnnouncer.js";import{PASSWORD_INPUT_CONTEXT as i}from"./context.js";import{computed as t,createBlock as l,defineComponent as d,openBlock as s,provide as o,ref as u,renderSlot as n,watch as r,withCtx as v}from"vue";var p=/* @__PURE__ */d({__name:"PasswordInput",props:{visible:{type:Boolean,default:void 0},defaultVisible:{type:Boolean,default:!1},value:{default:void 0},defaultValue:{default:""},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},getVisibilityAnnouncement:{type:Function,default:void 0}},emits:["update:visible","visible-change"],setup(d,{emit:p}){const f=d,b=p,c=u(f.defaultVisible),m=t(()=>void 0===f.visible?c.value:f.visible);return r(m,e=>{const i=(f.getVisibilityAnnouncement??(e=>e?"Password shown":"Password hidden"))(e);i&&a(i)}),o(i,{visible:m,disabled:t(()=>f.disabled),setVisible:function(e){e!==m.value&&(void 0===f.visible&&(c.value=e),b("update:visible",e),b("visible-change",e))}}),(a,i)=>(s(),l(e,{class:"skdx-password-input","data-part":"root","data-skdx-component":"password-input",value:d.value,"default-value":d.defaultValue,disabled:d.disabled,invalid:d.invalid,required:d.required,"data-state":m.value?"visible":"hidden"},{default:v(()=>[n(a.$slots,"default")]),_:3},8,["value","default-value","disabled","invalid","required","data-state"]))}});export{p as default};
+import{appearanceAttrs as e}from"../utils/appearance.js";import{announce as a}from"../utils/liveAnnouncer.js";import{useFormReset as l}from"../utils/useFormReset.js";import t from"../text-field/TextField.vue.js";import{PASSWORD_INPUT_CONTEXT as i}from"./context.js";import s from"./PasswordInputAnatomy.vue.js";import{computed as d,createBlock as o,createSlots as r,createVNode as n,defineComponent as u,mergeProps as v,openBlock as p,provide as c,ref as f,renderSlot as b,unref as m,useAttrs as y,watch as h,withCtx as g}from"vue";var V=/* @__PURE__ */u({inheritAttrs:!1,__name:"PasswordInput",props:{visible:{type:Boolean,default:void 0},defaultVisible:{type:Boolean,default:!1},value:{},defaultValue:{default:""},disabled:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},required:{type:Boolean,default:!1},name:{},getVisibilityAnnouncement:{type:Function,default:void 0},revealLabel:{default:"Show password"},readOnly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},clearLabel:{default:"Clear"},placeholder:{},showToggle:{type:Boolean,default:!0},size:{},variant:{}},emits:["update:visible","visible-change","value-change"],setup(u,{expose:V,emit:w}){const B=u,x=y(),k=d(()=>B.size??x["data-size"]),A=d(()=>B.variant??x["data-variant"]),z=w,C=f(null),P=f(B.defaultVisible),_=d(()=>void 0===B.visible?P.value:B.visible);function j(e){B.disabled||e!==_.value&&(void 0===B.visible&&(P.value=e),z("update:visible",e),z("visible-change",e))}return h(_,e=>{const l=(B.getVisibilityAnnouncement??(e=>e?"Password shown":"Password hidden"))(e);l&&a(l)}),c(i,{visible:_,disabled:d(()=>B.disabled),readOnly:d(()=>B.readOnly),revealLabel:d(()=>B.revealLabel),setVisible:j}),l(()=>C.value?.inputEl,()=>j(B.defaultVisible)),V({setVisible:j,checkValidity:()=>C.value?.checkValidity()??!0,reportValidity:()=>C.value?.reportValidity()??!0,setCustomValidity:e=>C.value?.setCustomValidity(e),validity:d(()=>C.value?.validity??null),validationMessage:d(()=>C.value?.validationMessage??""),inputEl:d(()=>C.value?.inputEl??null)}),(a,l)=>(p(),o(t,v({ref_key:"textFieldRef",ref:C,class:"skdx-password-input","data-part":"root","data-skdx-component":"password-input",value:u.value,"default-value":u.defaultValue,disabled:u.disabled,invalid:u.invalid,required:u.required,name:u.name,"read-only":u.readOnly,"data-state":_.value?"visible":"hidden"},{...a.$attrs,...m(e)({size:u.size,variant:u.variant},a.$attrs)},{onValueChange:l[0]||(l[0]=e=>z("value-change",e))}),{default:g(()=>[b(a.$slots,"default",{},()=>[n(s,{placeholder:u.placeholder,clearable:u.clearable,"clear-label":u.clearLabel,"show-toggle":u.showToggle,size:k.value,variant:A.value},r({_:2},[a.$slots.leading?{name:"leading",fn:g(()=>[b(a.$slots,"leading")]),key:"0"}:void 0]),1032,["placeholder","clearable","clear-label","show-toggle","size","variant"])])]),_:3},16,["value","default-value","disabled","invalid","required","name","read-only","data-state"]))}});export{V as default};

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

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

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

@@ -0,0 +1,35 @@
+/** @internal */
+type __VLS_Props = {
+    placeholder?: string | undefined;
+    clearable?: boolean | undefined;
+    clearLabel?: string | undefined;
+    showToggle?: boolean | undefined;
+    /**
+     * Size rung the skin renders the field at, applied to the derived Field part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Visual style family the skin gives the field, applied to the derived Field part.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+};
+type __VLS_Slots = {
+    leading?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | (string & {}) | undefined;
+    variant: "filled" | "ghost" | (string & {}) | undefined;
+    placeholder: string | undefined;
+    clearable: boolean | undefined;
+    clearLabel: string | undefined;
+    showToggle: boolean | undefined;
+}, {}, {}, {}, 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/PasswordInputAnatomy.vue.d.ts

@@ -0,0 +1,35 @@
+/** @internal */
+type __VLS_Props = {
+    placeholder?: string | undefined;
+    clearable?: boolean | undefined;
+    clearLabel?: string | undefined;
+    showToggle?: boolean | undefined;
+    /**
+     * Size rung the skin renders the field at, applied to the derived Field part.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Visual style family the skin gives the field, applied to the derived Field part.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+};
+type __VLS_Slots = {
+    leading?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | (string & {}) | undefined;
+    variant: "filled" | "ghost" | (string & {}) | undefined;
+    placeholder: string | undefined;
+    clearable: boolean | undefined;
+    clearLabel: string | undefined;
+    showToggle: boolean | undefined;
+}, {}, {}, {}, 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/PasswordInputAnatomy.vue.js

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

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

@@ -0,0 +1 @@
+const r=require("../text-field/TextFieldClearButton.vue.cjs"),o=require("../text-field/TextFieldSlot.vue.cjs"),u=require("./PasswordInputField.vue.cjs"),n=require("./PasswordInputToggle.vue.cjs");let e=require("vue");var d=(0,e.defineComponent)({__name:"PasswordInputAnatomy",props:{placeholder:{default:void 0},clearable:{type:Boolean,default:!1},clearLabel:{default:"Clear"},showToggle:{type:Boolean,default:!0},size:{default:void 0},variant:{default:void 0}},setup(t){const l=(0,e.useSlots)();return(a,c)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.unref)(l).leading?((0,e.openBlock)(),(0,e.createBlock)(o.default,{key:0,side:"start"},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"leading")]),_:3})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(u.default,{placeholder:t.placeholder,size:t.size,variant:t.variant},null,8,["placeholder","size","variant"]),t.clearable?((0,e.openBlock)(),(0,e.createBlock)(r.default,{key:1,label:t.clearLabel},null,8,["label"])):(0,e.createCommentVNode)("",!0),t.showToggle?((0,e.openBlock)(),(0,e.createBlock)(n.default,{key:2})):(0,e.createCommentVNode)("",!0)],64))}});exports.default=d;

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

@@ -0,0 +1 @@
+import e from"../text-field/TextFieldClearButton.vue.js";import a from"../text-field/TextFieldSlot.vue.js";import l from"./PasswordInputField.vue.js";import t from"./PasswordInputToggle.vue.js";import{Fragment as o,createBlock as r,createCommentVNode as s,createElementBlock as d,createVNode as n,defineComponent as i,openBlock as u,renderSlot as p,unref as f,useSlots as m,withCtx as c}from"vue";var v=/* @__PURE__ */i({__name:"PasswordInputAnatomy",props:{placeholder:{default:void 0},clearable:{type:Boolean,default:!1},clearLabel:{default:"Clear"},showToggle:{type:Boolean,default:!0},size:{default:void 0},variant:{default:void 0}},setup(i){const v=m();return(m,g)=>(u(),d(o,null,[f(v).leading?(u(),r(a,{key:0,side:"start"},{default:c(()=>[p(m.$slots,"leading")]),_:3})):s("",!0),n(l,{placeholder:i.placeholder,size:i.size,variant:i.variant},null,8,["placeholder","size","variant"]),i.clearable?(u(),r(e,{key:1,label:i.clearLabel},null,8,["label"])):s("",!0),i.showToggle?(u(),r(t,{key:2})):s("",!0)],64))}});export{v as default};

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

@@ -1,23 +1,5 @@
 /**
- * The native `<input>` for a `<SkdxPasswordInput>`. It *is* a
- * `<SkdxTextFieldInput>` — same `id`, same value wiring, same
- * `aria-invalid`/`data-disabled`/`data-invalid` — with one attribute taken
- * over: `type` is `password` while the root is hidden and `text` while it is
- * visible. Toggling the type rather than swapping the element keeps the same
- * DOM node, so focus, selection and caret position survive the flip.
- *
- * `type` is deliberately not a prop and is bound after `$attrs`, so a consumer
- * cannot pin the field open while the toggle claims it is masked.
- *
- * `autocomplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
- * Input Purpose) and is overridable — a sign-up or change-password form wants
- * `new-password`.
- *
- * The value is never written into an attribute by this component: nothing here
- * copies it into a `data-*` or `aria-*` where a plaintext credential would end
- * up in serialised HTML.
- *
- * Must be used inside `<SkdxPasswordInput>`.
+ * Native `<input>` for a password field, toggling between `password` and `text` types.
  *
  * @example
  * ```vue
@@ -27,6 +9,17 @@
  * </SkdxPasswordInput>
  * ```
  */
-type __VLS_Props = {};
+type __VLS_Props = {
+    /**
+     * Visual style family the skin gives the input, forwarded as `data-variant`.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the input at, forwarded as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+};
 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/password-input/PasswordInputField.vue.d.ts

@@ -1,23 +1,5 @@
 /**
- * The native `<input>` for a `<SkdxPasswordInput>`. It *is* a
- * `<SkdxTextFieldInput>` — same `id`, same value wiring, same
- * `aria-invalid`/`data-disabled`/`data-invalid` — with one attribute taken
- * over: `type` is `password` while the root is hidden and `text` while it is
- * visible. Toggling the type rather than swapping the element keeps the same
- * DOM node, so focus, selection and caret position survive the flip.
- *
- * `type` is deliberately not a prop and is bound after `$attrs`, so a consumer
- * cannot pin the field open while the toggle claims it is masked.
- *
- * `autocomplete` defaults to `current-password` (WCAG 2.1 SC 1.3.5, Identify
- * Input Purpose) and is overridable — a sign-up or change-password form wants
- * `new-password`.
- *
- * The value is never written into an attribute by this component: nothing here
- * copies it into a `data-*` or `aria-*` where a plaintext credential would end
- * up in serialised HTML.
- *
- * Must be used inside `<SkdxPasswordInput>`.
+ * Native `<input>` for a password field, toggling between `password` and `text` types.
  *
  * @example
  * ```vue
@@ -27,6 +9,17 @@
  * </SkdxPasswordInput>
  * ```
  */
-type __VLS_Props = {};
+type __VLS_Props = {
+    /**
+     * Visual style family the skin gives the input, forwarded as `data-variant`.
+     * @default undefined — falls back to a `data-variant` attribute.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders the input at, forwarded as `data-size`.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+};
 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/password-input/PasswordInputField.vue_vue_type_script_setup_true_lang.cjs

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

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

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