@editora/ui-core 0.1.9 → 0.1.12

package/dist/password-field.esm.js

@@ -0,0 +1,925 @@
+import { E as z } from "./ElementBase-909688f3.mjs";
+const q = `
+  <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>
+`, C = `
+  <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>
+`, T = `
+  <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>
+`, B = `
+  :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;
+    }
+  }
+`, N = [
+  "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 M(a) {
+  return a === "none" || a === "large" || a === "full";
+}
+function I(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 L extends z {
+  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 [...N, "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>${B}</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>${q}</button>
+            <span class="suffix-slot" part="suffix"><slot name="suffix"></slot></span>
+            <button class="toggle-btn" part="toggle" type="button" aria-label="Show password">${C}</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 && !M(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 ? T : C);
+  }
+  _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 || I)(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), S = g(r), E = 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", !S), _ && _.toggleAttribute("hidden", !E), 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", L);
+export {
+  L as UIPasswordField
+};