@editora/ui-core 0.1.9 → 0.1.12

package/dist/password-field.cjs.js

@@ -0,0 +1,626 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const q=require("./ElementBase-1b301e7f.js"),T=`
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="m6 6 8 8M14 6l-8 8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+  </svg>
+`,S=`
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="M2.4 10c1.5-3 4.3-5 7.6-5s6.1 2 7.6 5c-1.5 3-4.3 5-7.6 5s-6.1-2-7.6-5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="10" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/>
+  </svg>
+`,B=`
+  <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+    <path d="M3 3l14 14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
+    <path d="M6.1 6.1A9.3 9.3 0 0 1 10 5c3.3 0 6.1 2 7.6 5-.5 1-1.2 1.9-2 2.7M8.2 8.2A2.5 2.5 0 0 1 11.8 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M4.4 7.1C3.6 7.9 3 8.9 2.4 10c1.5 3 4.3 5 7.6 5 1.2 0 2.4-.3 3.4-.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`,N=`
+  :host {
+    --ui-input-padding: var(--ui-padding, 10px 12px);
+    --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-input-border-width: 1px;
+    --ui-input-border-style: solid;
+    --ui-input-border: var(--ui-input-border-width) var(--ui-input-border-style) var(--ui-input-border-color);
+    --ui-input-border-radius: var(--ui-radius, 10px);
+    --ui-input-min-height: var(--ui-min-height, 40px);
+    --ui-input-width: 100%;
+    --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-label-color: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-description-color: var(--ui-color-muted, var(--ui-muted, #64748b));
+    --ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-input-success: var(--ui-color-success, var(--ui-success, #16a34a));
+    --ui-input-warning: var(--ui-color-warning, var(--ui-warning, #d97706));
+    --ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-input-shadow: none;
+    --ui-input-gap: 8px;
+    --ui-input-meta-gap: 4px;
+    --ui-input-shell-gap: 8px;
+    --ui-input-placeholder: color-mix(in srgb, var(--ui-input-color) 40%, transparent);
+    --ui-password-field-strength-gap: 8px;
+    --ui-password-field-track-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 10%, transparent);
+    --ui-password-field-strength-weak: var(--ui-color-danger, #dc2626);
+    --ui-password-field-strength-fair: var(--ui-color-warning, #d97706);
+    --ui-password-field-strength-good: var(--ui-color-primary, #2563eb);
+    --ui-password-field-strength-strong: var(--ui-color-success, #16a34a);
+    --ui-password-field-toggle-bg: transparent;
+    --ui-password-field-toggle-hover-bg: color-mix(in srgb, var(--ui-input-color) 10%, transparent);
+    --ui-password-field-toggle-active-bg: color-mix(in srgb, var(--ui-input-color) 16%, transparent);
+    color-scheme: light dark;
+    display: block;
+    inline-size: var(--ui-input-width);
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .root {
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: grid;
+    gap: var(--ui-input-gap);
+    color: var(--ui-input-color);
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: var(--ui-input-meta-gap);
+  }
+
+  .label {
+    margin: 0;
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-label-color);
+    font: 600 13px/1.35 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-input-error);
+    font-size: 12px;
+    line-height: 1;
+    transform: translateY(-0.5px);
+  }
+
+  .description {
+    margin: 0;
+    color: var(--ui-description-color);
+    font-size: 12px;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+  }
+
+  .description[hidden],
+  .label[hidden],
+  .prefix[hidden],
+  .suffix-slot[hidden],
+  .error[hidden],
+  .counter[hidden],
+  .meta[hidden],
+  .footer[hidden],
+  .strength[hidden] {
+    display: none;
+  }
+
+  .shell {
+    position: relative;
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--ui-input-shell-gap);
+    box-sizing: border-box;
+    min-block-size: var(--ui-input-min-height);
+    padding-inline: 10px;
+    border: var(--ui-input-border);
+    border-radius: var(--ui-input-border-radius);
+    background: var(--ui-input-bg);
+    box-shadow: var(--ui-input-shadow);
+    transition: border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
+  }
+
+  .shell:focus-within {
+    border-color: color-mix(in srgb, var(--ui-input-focus-ring) 56%, var(--ui-input-border-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-focus-ring) 24%, transparent);
+  }
+
+  .prefix,
+  .suffix-slot {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: color-mix(in srgb, var(--ui-input-color) 62%, transparent);
+    white-space: nowrap;
+    line-height: 1;
+  }
+
+  .prefix {
+    flex: 0 0 auto;
+  }
+
+  .suffix-slot {
+    flex: 0 0 auto;
+    min-inline-size: max-content;
+  }
+
+  .suffix-slot ::slotted(*) {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .control {
+    flex: 1 1 auto;
+    inline-size: 100%;
+    min-inline-size: 0;
+    position: relative;
+    display: grid;
+    align-items: center;
+  }
+
+  .floating-label {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: color-mix(in srgb, var(--ui-input-color) 44%, transparent);
+    font-size: 13px;
+    transition: transform 150ms ease, font-size 150ms ease, color 150ms ease, top 150ms ease;
+    white-space: nowrap;
+  }
+
+  .shell[data-has-value="true"] .floating-label,
+  .shell:focus-within .floating-label {
+    top: -1px;
+    transform: translateY(calc(-100% - 4px));
+    font-size: 11px;
+    color: var(--ui-label-color);
+  }
+
+  input {
+    inline-size: 100%;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: 500 14px/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: var(--ui-input-padding);
+    min-block-size: calc(var(--ui-input-min-height) - 2px);
+    margin: 0;
+    outline: none;
+  }
+
+  input::placeholder {
+    color: var(--ui-input-placeholder);
+  }
+
+  .actions {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .clear-btn,
+  .toggle-btn {
+    flex: 0 0 auto;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    inline-size: 28px;
+    block-size: 28px;
+    border-radius: 8px;
+    display: inline-grid;
+    place-items: center;
+    background: transparent;
+    color: color-mix(in srgb, var(--ui-input-color) 74%, transparent);
+    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
+    padding: 0;
+    line-height: 0;
+  }
+
+  .clear-btn svg,
+  .toggle-btn svg {
+    inline-size: 15px;
+    block-size: 15px;
+    pointer-events: none;
+  }
+
+  .clear-btn:hover,
+  .toggle-btn:hover {
+    background: color-mix(in srgb, var(--ui-input-color) 14%, transparent);
+    color: var(--ui-input-color);
+  }
+
+  .toggle-btn {
+    background: var(--ui-password-field-toggle-bg);
+  }
+
+  .toggle-btn:hover {
+    background: var(--ui-password-field-toggle-hover-bg);
+  }
+
+  .toggle-btn:active {
+    background: var(--ui-password-field-toggle-active-bg);
+    transform: translateY(0);
+  }
+
+  .toggle-btn:hover {
+    transform: translateY(-1px);
+  }
+
+  .clear-btn:focus-visible,
+  .toggle-btn:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-input-focus-ring) 32%, transparent);
+  }
+
+  .clear-btn[hidden],
+  .toggle-btn[hidden] {
+    display: none;
+  }
+
+  .footer {
+    min-inline-size: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .error {
+    margin: 0;
+    min-inline-size: 0;
+    color: var(--ui-input-error);
+    font-size: 12px;
+    line-height: 1.35;
+    letter-spacing: 0.01em;
+  }
+
+  .counter {
+    margin: 0;
+    color: var(--ui-description-color);
+    font-size: 11px;
+    line-height: 1.35;
+    white-space: nowrap;
+  }
+
+  .strength {
+    display: grid;
+    gap: var(--ui-password-field-strength-gap);
+  }
+
+  .strength-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+
+  .strength-label {
+    font: 600 11px/1.35 "Inter", "IBM Plex Sans", sans-serif;
+    color: var(--ui-color-text, #0f172a);
+    letter-spacing: 0.01em;
+  }
+
+  .strength-caption {
+    color: var(--ui-color-muted, #64748b);
+    font-size: 11px;
+    line-height: 1.35;
+  }
+
+  .strength-track {
+    position: relative;
+    inline-size: 100%;
+    block-size: 6px;
+    border-radius: 999px;
+    overflow: hidden;
+    background: var(--ui-password-field-track-bg);
+  }
+
+  .strength-bar {
+    block-size: 100%;
+    inline-size: 0%;
+    border-radius: inherit;
+    background: var(--ui-password-field-strength-weak);
+    transition: inline-size 170ms ease, background-color 170ms ease;
+  }
+
+  .strength[data-score="1"] .strength-bar {
+    inline-size: 25%;
+    background: var(--ui-password-field-strength-weak);
+  }
+
+  .strength[data-score="2"] .strength-bar {
+    inline-size: 50%;
+    background: var(--ui-password-field-strength-fair);
+  }
+
+  .strength[data-score="3"] .strength-bar {
+    inline-size: 75%;
+    background: var(--ui-password-field-strength-good);
+  }
+
+  .strength[data-score="4"] .strength-bar {
+    inline-size: 100%;
+    background: var(--ui-password-field-strength-strong);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.64;
+    filter: saturate(0.85);
+  }
+
+  :host([disabled]) input,
+  :host([disabled]) .clear-btn,
+  :host([disabled]) .toggle-btn {
+    pointer-events: none;
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-input-min-height: 34px;
+    --ui-input-padding: 7px 8px;
+    --ui-input-shell-gap: 6px;
+  }
+
+  :host([size="sm"]) input,
+  :host([size="1"]) input {
+    font-size: 12px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-input-min-height: 46px;
+    --ui-input-padding: 11px 14px;
+    --ui-input-shell-gap: 10px;
+  }
+
+  :host([size="lg"]) input,
+  :host([size="3"]) input {
+    font-size: 16px;
+  }
+
+  :host([variant="classic"]),
+  :host([variant="outlined"]) {
+    --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+  }
+
+  :host([variant="surface"]) {
+    --ui-input-bg: var(--ui-color-surface-alt, var(--ui-surface-alt, #f8fafc));
+    --ui-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 56%, transparent);
+  }
+
+  :host([variant="soft"]) {
+    --ui-input-bg: color-mix(in srgb, var(--ui-input-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-input-border-color: color-mix(in srgb, var(--ui-input-accent) 28%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="filled"]) {
+    --ui-input-bg: color-mix(in srgb, var(--ui-input-color) 6%, var(--ui-color-surface, #ffffff));
+    --ui-input-border-color: transparent;
+    --ui-input-border: 1px solid transparent;
+  }
+
+  :host([variant="flushed"]) {
+    --ui-input-bg: transparent;
+    --ui-input-border: 0;
+    --ui-input-shadow: none;
+  }
+
+  :host([variant="flushed"]) .shell {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-input-border-color) 92%, transparent);
+    border-radius: 0;
+    padding-inline: 0;
+  }
+
+  :host([variant="minimal"]) {
+    --ui-input-bg: transparent;
+    --ui-input-border: 0;
+    --ui-input-shadow: none;
+  }
+
+  :host([variant="minimal"]) .shell {
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    border-radius: 0;
+    padding-inline: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-input-bg: #0f172a;
+    --ui-input-color: #e2e8f0;
+    --ui-label-color: #cbd5e1;
+    --ui-description-color: #93a4bd;
+    --ui-input-border-color: #334155;
+    --ui-input-focus-ring: #93c5fd;
+    --ui-input-placeholder: color-mix(in srgb, #e2e8f0 46%, transparent);
+    --ui-input-shadow: 0 2px 8px rgba(2, 6, 23, 0.24);
+    --ui-password-field-toggle-hover-bg: color-mix(in srgb, #e2e8f0 12%, transparent);
+    --ui-password-field-toggle-active-bg: color-mix(in srgb, #e2e8f0 18%, transparent);
+  }
+
+  :host([variant="elevated"]) {
+    --ui-input-bg: linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 99%, transparent)
+    );
+    --ui-input-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+    --ui-input-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.08),
+      0 12px 24px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([tone="brand"]) {
+    --ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+  }
+
+  :host([tone="success"]) {
+    --ui-input-accent: var(--ui-color-success, var(--ui-success, #16a34a));
+  }
+
+  :host([tone="warning"]) {
+    --ui-input-accent: var(--ui-input-warning);
+  }
+
+  :host([tone="danger"]) {
+    --ui-input-accent: var(--ui-input-error);
+  }
+
+  :host([validation="success"]) {
+    --ui-input-border-color: color-mix(in srgb, var(--ui-input-success) 58%, transparent);
+  }
+
+  :host([validation="error"]) {
+    --ui-input-border-color: color-mix(in srgb, var(--ui-input-error) 62%, transparent);
+    --ui-label-color: var(--ui-input-error);
+  }
+
+  :host([validation="error"]) .shell {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-error) 20%, transparent);
+  }
+
+  :host([radius="none"]) {
+    --ui-input-border-radius: 0px;
+  }
+
+  :host([radius="large"]) {
+    --ui-input-border-radius: 14px;
+  }
+
+  :host([radius="full"]) {
+    --ui-input-border-radius: 999px;
+  }
+
+  :host([shape="square"]) {
+    --ui-input-border-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-input-border-radius: 16px;
+  }
+
+  :host([density="compact"]) {
+    --ui-input-gap: 6px;
+    --ui-input-meta-gap: 2px;
+    --ui-input-shell-gap: 6px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-input-gap: 10px;
+    --ui-input-meta-gap: 6px;
+    --ui-input-shell-gap: 10px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shell,
+    .clear-btn,
+    .toggle-btn,
+    .floating-label,
+    .strength-bar {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-input-border: 2px solid var(--ui-input-border-color);
+      --ui-input-shadow: none;
+    }
+
+    .shell:focus-within,
+    :host([validation="error"]) .shell {
+      box-shadow: none;
+      outline: 2px solid var(--ui-input-focus-ring);
+      outline-offset: 1px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-input-bg: Canvas;
+      --ui-input-color: CanvasText;
+      --ui-input-border-color: CanvasText;
+      --ui-label-color: CanvasText;
+      --ui-description-color: CanvasText;
+      --ui-input-focus-ring: Highlight;
+      --ui-input-error: CanvasText;
+      --ui-input-success: CanvasText;
+      --ui-input-shadow: none;
+    }
+
+    .shell,
+    .clear-btn,
+    .toggle-btn {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+      box-shadow: none;
+    }
+  }
+`,M=["value","placeholder","disabled","clearable","debounce","validation","size","minlength","maxlength","readonly","autofocus","counter","floating-label","name","required","pattern","autocomplete","spellcheck","variant","tone","density","shape","color","radius","label","description","data-error"];function d(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function g(a){if(!a)return!1;const t=a.assignedNodes({flatten:!0});return t.length?t.some(e=>{var i;return e.nodeType===Node.TEXT_NODE?!!((i=e.textContent)!=null&&i.trim()):e.nodeType===Node.ELEMENT_NODE}):!1}function p(a,t){const e=a.getAttribute(t);if(e==null)return!1;const i=String(e).trim().toLowerCase();return i!=="false"&&i!=="0"}function I(a){return a==="none"||a==="large"||a==="full"}function U(a){let t=0;switch(a.length>=8&&(t+=1),/[a-z]/.test(a)&&/[A-Z]/.test(a)&&(t+=1),/\d/.test(a)&&(t+=1),(/[^A-Za-z0-9]/.test(a)||a.length>=14)&&(t+=1),Math.max(1,Math.min(4,t||1))){case 1:return{score:1,label:"Weak",caption:"Use more characters and mix case, numbers, or symbols."};case 2:return{score:2,label:"Fair",caption:"Add numbers or symbols to reduce guessability."};case 3:return{score:3,label:"Good",caption:"Solid baseline. Longer passphrases are even better."};default:return{score:4,label:"Strong",caption:"Strong password shape for production accounts."}}}class C extends q.ElementBase{constructor(){super(),this._input=null,this._clearBtn=null,this._toggleBtn=null,this._debounceTimer=null,this._formUnregister=null,this._uid=Math.random().toString(36).slice(2,9),this._autofocusApplied=!1,this._revealed=!1,this._lastStrengthKey="",this.strengthEvaluator=null,this._onNativeInput=this._onNativeInput.bind(this),this._onNativeChange=this._onNativeChange.bind(this),this._onClearClick=this._onClearClick.bind(this),this._onToggleClick=this._onToggleClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return[...M,"show-strength","revealable"]}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get revealed(){return this._revealed}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._registerWithForm()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),this._detachListeners(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this._formUnregister&&(this._formUnregister(),this._formUnregister=null),this._autofocusApplied=!1,super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="name"&&this.isConnected&&this._registerWithForm(),t==="autofocus"&&!this.hasAttribute("autofocus")&&(this._autofocusApplied=!1),!(!this.isConnected||!this._input))){if(t==="value"){this._syncInputValue(this.value),this._syncStrengthUi();return}this._syncUi(),t==="autofocus"&&this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{var r,n;if(this.isConnected)try{(r=this._input)==null||r.focus({preventScroll:!0})}catch{(n=this._input)==null||n.focus()}}))}}shouldRenderOnAttributeChange(){return!1}focus(t){if(this._input){this._input.focus(t);return}super.focus(t)}blur(){var t;(t=this._input)==null||t.blur()}select(){var t;(t=this._input)==null||t.select()}toggleVisibility(t){var n,s;if(p(this,"disabled")||this.hasAttribute("readonly")||this.getAttribute("revealable")==="false")return;const e=typeof t=="boolean"?t:!this._revealed;if(e===this._revealed)return;const i=((n=this._input)==null?void 0:n.selectionStart)??null,r=((s=this._input)==null?void 0:s.selectionEnd)??null;this._revealed=e,this._syncToggleUi(),this.dispatchEvent(new CustomEvent("visibility-change",{detail:{revealed:this._revealed},bubbles:!0,composed:!0})),queueMicrotask(()=>{const o=this._input;if(o){try{o.focus({preventScroll:!0})}catch{o.focus()}if(i!=null&&r!=null&&typeof o.setSelectionRange=="function")try{o.setSelectionRange(i,r)}catch{}}})}render(){var l,u,c,h;const t=this.value,e=this.getAttribute("label")||"",i=this.getAttribute("description")||"",r=this.getAttribute("data-error")||"",n=this.getAttribute("placeholder")||"",s=this.hasAttribute("required")?'<span class="required" aria-hidden="true">*</span>':"",o=this.hasAttribute("floating-label");this.setContent(`
+      <style>${N}</style>
+      <div class="root" part="root">
+        <div class="meta" part="meta">
+          <label class="label" id="${this._uid}-label" part="label">
+            <slot name="label">${d(e)}</slot>
+            ${s}
+          </label>
+          <p class="description" id="${this._uid}-description" part="description">
+            <slot name="description">${d(i)}</slot>
+          </p>
+        </div>
+
+        <div class="shell" part="shell" data-has-value="${t?"true":"false"}">
+          <span class="prefix" part="prefix"><slot name="prefix"></slot></span>
+
+          <div class="control" part="control">
+            <input
+              part="input"
+              type="password"
+              value="${d(t)}"
+              placeholder="${d(n)}"
+            />
+            ${o?`<span class="floating-label" part="floating-label">${d(e||n||"Password")}</span>`:""}
+          </div>
+
+          <div class="actions" part="actions">
+            <button class="clear-btn" part="clear" type="button" aria-label="Clear" hidden>${T}</button>
+            <span class="suffix-slot" part="suffix"><slot name="suffix"></slot></span>
+            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${S}</button>
+          </div>
+        </div>
+
+        <div class="footer" part="footer">
+          <p class="error" id="${this._uid}-error" part="error" aria-live="polite">
+            <slot name="error">${d(r)}</slot>
+          </p>
+          <p class="counter" part="counter"></p>
+        </div>
+
+        <div class="strength" part="strength" hidden>
+          <div class="strength-header">
+            <span class="strength-label" part="strength-label"></span>
+            <span class="strength-caption" part="strength-caption"></span>
+          </div>
+          <div class="strength-track" part="strength-track">
+            <div class="strength-bar" part="strength-bar"></div>
+          </div>
+        </div>
+      </div>
+    `),this._detachListeners(),this._input=this.root.querySelector("input"),this._clearBtn=this.root.querySelector(".clear-btn"),this._toggleBtn=this.root.querySelector(".toggle-btn"),(l=this._input)==null||l.addEventListener("input",this._onNativeInput),(u=this._input)==null||u.addEventListener("change",this._onNativeChange),(c=this._clearBtn)==null||c.addEventListener("click",this._onClearClick),(h=this._toggleBtn)==null||h.addEventListener("click",this._onToggleClick),this._syncUi()}_detachListeners(){var t,e,i,r;(t=this._input)==null||t.removeEventListener("input",this._onNativeInput),(e=this._input)==null||e.removeEventListener("change",this._onNativeChange),(i=this._clearBtn)==null||i.removeEventListener("click",this._onClearClick),(r=this._toggleBtn)==null||r.removeEventListener("click",this._onToggleClick),this._clearBtn=null,this._toggleBtn=null}_syncHostTokens(){const t=this.getAttribute("color");t?this.style.setProperty("--ui-input-accent",t):this.style.removeProperty("--ui-input-accent");const e=this.getAttribute("radius")||"";e&&!I(e)?this.style.setProperty("--ui-input-border-radius",e):this.style.removeProperty("--ui-input-border-radius")}_syncControlAttrs(){if(this._syncHostTokens(),!this._input)return;const t=p(this,"disabled"),e=this.hasAttribute("required"),i=this.hasAttribute("readonly"),r=this.getAttribute("maxlength")||"",n=this.getAttribute("minlength")||"",s=this.getAttribute("pattern")||"",o=this.getAttribute("autocomplete")||"current-password",l=this.getAttribute("spellcheck")||"",u=this.getAttribute("placeholder")||"",c=this.getAttribute("name")||"";this._input.disabled=t,this._input.required=e,this._input.readOnly=i,this._input.placeholder=u,this._input.name=c,this._input.type=this._revealed?"text":"password",o?this._input.setAttribute("autocomplete",o):this._input.removeAttribute("autocomplete"),s?this._input.setAttribute("pattern",s):this._input.removeAttribute("pattern"),l?this._input.setAttribute("spellcheck",l):this._input.removeAttribute("spellcheck"),r&&Number.isFinite(Number(r))?this._input.setAttribute("maxlength",r):this._input.removeAttribute("maxlength"),n&&Number.isFinite(Number(n))?this._input.setAttribute("minlength",n):this._input.removeAttribute("minlength")}_syncInputValue(t){this._input&&this._input.value!==t&&(this._input.value=t);const e=this.root.querySelector(".shell");e&&e.setAttribute("data-has-value",t?"true":"false"),this._clearBtn&&(p(this,"clearable")&&t.length>0&&!p(this,"disabled")&&!this.hasAttribute("readonly")?this._clearBtn.removeAttribute("hidden"):this._clearBtn.setAttribute("hidden",""));const i=this.root.querySelector(".counter");if(i&&this.hasAttribute("counter")){const r=this.getAttribute("maxlength");i.textContent=r?`${t.length}/${r}`:String(t.length)}else i&&(i.textContent="")}_syncToggleUi(){if(!this._toggleBtn||!this._input)return;this._input.type=this._revealed?"text":"password";const t=this.getAttribute("revealable")!=="false",e=p(this,"disabled")||this.hasAttribute("readonly");this._toggleBtn.hidden=!t,this._toggleBtn.disabled=e,this._toggleBtn.setAttribute("aria-pressed",this._revealed?"true":"false"),this._toggleBtn.setAttribute("aria-label",this._revealed?"Hide password":"Show password");const i=this._revealed?"revealed":"hidden";this._toggleBtn.dataset.iconState!==i&&(this._toggleBtn.dataset.iconState=i,this._toggleBtn.innerHTML=this._revealed?B:S)}_syncStrengthUi(){const t=this.root.querySelector(".strength"),e=this.root.querySelector(".strength-label"),i=this.root.querySelector(".strength-caption");if(!t||!e||!i)return;const r=this.value,n=this.hasAttribute("show-strength")&&r.length>0;if(t.hidden=!n,!n){delete t.dataset.score,e.textContent="",i.textContent="",this._lastStrengthKey="";return}const s=(this.strengthEvaluator||U)(r);t.dataset.score=String(s.score),e.textContent=s.label,i.textContent=s.caption;const o=`${r}|${s.score}|${s.label}|${s.caption}`;o!==this._lastStrengthKey&&(this._lastStrengthKey=o,this.dispatchEvent(new CustomEvent("strength-change",{detail:{value:r,score:s.score,label:s.label,caption:s.caption},bubbles:!0,composed:!0})))}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),e=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="error"]'),r=this.root.querySelector('slot[name="prefix"]'),n=this.root.querySelector('slot[name="suffix"]'),s=(this.getAttribute("label")||"").trim(),o=(this.getAttribute("description")||"").trim(),l=(this.getAttribute("data-error")||"").trim(),u=!!s||g(t),c=!!o||g(e),h=!!l||g(i),E=g(r),z=g(n),f=this.root.querySelector(".label"),v=this.root.querySelector(".description"),m=this.root.querySelector(".prefix"),_=this.root.querySelector(".suffix-slot"),x=this.root.querySelector(".meta"),y=this.root.querySelector(".footer"),A=this.root.querySelector(".error"),w=this.root.querySelector(".counter");f&&f.toggleAttribute("hidden",!u),v&&v.toggleAttribute("hidden",!c),m&&m.toggleAttribute("hidden",!E),_&&_.toggleAttribute("hidden",!z),x&&x.toggleAttribute("hidden",!u&&!c);const k=this.hasAttribute("counter");if(w&&w.toggleAttribute("hidden",!k),A&&A.toggleAttribute("hidden",!h),y&&y.toggleAttribute("hidden",!h&&!k),!this._input)return;u?this._input.setAttribute("aria-labelledby",`${this._uid}-label`):this._input.removeAttribute("aria-labelledby");const b=[];c&&b.push(`${this._uid}-description`),h&&b.push(`${this._uid}-error`),b.length?this._input.setAttribute("aria-describedby",b.join(" ")):this._input.removeAttribute("aria-describedby"),this.getAttribute("validation")==="error"||!!l?this._input.setAttribute("aria-invalid","true"):this._input.removeAttribute("aria-invalid"),this.hasAttribute("required")?this._input.setAttribute("aria-required","true"):this._input.removeAttribute("aria-required")}_syncUi(){this._syncControlAttrs(),this._syncInputValue(this.value),this._syncDerivedState(),this._syncToggleUi(),this._syncStrengthUi(),this.hasAttribute("autofocus")&&!this._autofocusApplied&&(this._autofocusApplied=!0,queueMicrotask(()=>{var t,e;if(this.isConnected)try{(t=this._input)==null||t.focus({preventScroll:!0})}catch{(e=this._input)==null||e.focus()}}))}_emitValueEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0}))}_registerWithForm(){var t;this._formUnregister&&(this._formUnregister(),this._formUnregister=null);try{const i=this.getRootNode().host,n=((t=i==null?void 0:i.closest)==null?void 0:t.call(i,"ui-form"))||null||this.closest("ui-form"),s=this.getAttribute("name");n&&typeof n.registerField=="function"&&s&&(this._formUnregister=n.registerField(s,{name:s,getValue:()=>this.value,setValue:o=>{this.value=String(o??"")},validate:async()=>this._input?{valid:this._input.checkValidity(),message:this._input.validationMessage||void 0}:{valid:!0},setError:o=>{o?(this.setAttribute("validation","error"),this.setAttribute("data-error",o)):(this.removeAttribute("validation"),this.removeAttribute("data-error")),this._syncUi()}}))}catch{}}_onSlotChange(){this._syncDerivedState()}_onNativeInput(t){const e=t.target.value;this.getAttribute("value")!==e?e?this.setAttribute("value",e):this.removeAttribute("value"):(this._syncInputValue(e),this._syncStrengthUi()),this._emitValueEvent("input",e);const i=Number(this.getAttribute("debounce")||0);i>0?(this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._emitValueEvent("debounced-input",e),this._debounceTimer=null},i)):this._emitValueEvent("debounced-input",e)}_onNativeChange(t){const e=t.target.value;this._emitValueEvent("change",e)}_onClearClick(t){if(t.preventDefault(),!(p(this,"disabled")||this.hasAttribute("readonly"))&&this._input){this.value="",this._input.value="",this._input.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this._input.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0}));try{this._input.focus({preventScroll:!0})}catch{this._input.focus()}}}_onToggleClick(t){t.preventDefault(),t.stopPropagation(),this.toggleVisibility()}}typeof customElements<"u"&&!customElements.get("ui-password-field")&&customElements.define("ui-password-field",C);exports.UIPasswordField=C;