@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-otp-input/cg-otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-otp-input.js","sources":["../../../src/components/cg-otp-input/cg-otp-input.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-otp-input> — One-time password input with individual digit boxes.\n *\n * @example\n * ```html\n * <cg-otp-input length=\"6\"></cg-otp-input>\n * <cg-otp-input length=\"4\" mask></cg-otp-input>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-otp-change - On each digit change\n * @fires {CustomEvent<{value: string}>} cg-otp-complete - When all digits filled\n *\n * @cssprop --cg-component-otp-box-width - Box width (48px)\n * @cssprop --cg-component-otp-box-height - Box height (56px)\n * @cssprop --cg-color-input-border-default - Default border color\n */\n@customElement('cg-otp-input')\nexport class CgOtpInput extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    .container {\n      display: flex;\n      gap: var(--cg-spacing-8);\n    }\n\n    .box {\n      width: var(--cg-component-otp-box-width);\n      height: var(--cg-component-otp-box-height);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      text-align: center;\n      caret-color: var(--cg-color-action-primary-background-default);\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: otpCellIn var(--cg-transition-duration-slow) var(--cg-transition-easing-default) both;\n    }\n\n    @keyframes otpCellIn {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-4)) scale(0.95); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .box:hover:not(:disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    .box:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      transform: scale(1.05);\n    }\n\n    .box:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    :host([error]) .box {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .box:focus {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    /* ── Success state ── */\n    :host([success]) .box {\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .box:focus {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n\n    .box.filled {\n      border-color: var(--cg-color-surface-container-border);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .box { border-radius: 0; }\n    :host([rounded=\"sm\"]) .box { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .box { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .box { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .box { border-radius: var(--cg-border-radius-full); }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .box {\n        animation: none !important;\n        transform: none !important;\n      }\n    }\n  `];\n\n  @property({ type: Number }) length = 6;\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property() value = '';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean }) mask = false;\n\n  @state() private _digits: string[] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._syncDigits();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('length')) this._syncDigits();\n  }\n\n  private _syncDigits() {\n    this._digits = Array.from({ length: this.length }, (_, i) => this.value[i] || '');\n  }\n\n  private _getBoxes(): HTMLInputElement[] {\n    return Array.from(this.shadowRoot?.querySelectorAll<HTMLInputElement>('.box') ?? []);\n  }\n\n  private _focusBox(index: number) {\n    const boxes = this._getBoxes();\n    const target = boxes[Math.min(Math.max(0, index), this.length - 1)];\n    target?.focus();\n    target?.select();\n  }\n\n  private _emitValue() {\n    const val = this._digits.join('');\n    this.value = val;\n    this.dispatchEvent(new CustomEvent('cg-otp-change', { detail: { value: val }, bubbles: true, composed: true }));\n    if (val.length === this.length && val.split('').every(c => c !== '')) {\n      this.dispatchEvent(new CustomEvent('cg-otp-complete', { detail: { value: val }, bubbles: true, composed: true }));\n    }\n  }\n\n  private _onInput(index: number, e: Event) {\n    const input = e.target as HTMLInputElement;\n    const char = input.value.replace(/[^0-9]/g, '').slice(-1);\n    this._digits = [...this._digits];\n    this._digits[index] = char;\n    input.value = this.mask && char ? '\\u2022' : char;\n    this._emitValue();\n    if (char && index < this.length - 1) this._focusBox(index + 1);\n  }\n\n  private _onKeyDown(index: number, e: KeyboardEvent) {\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n      if (this._digits[index]) {\n        this._digits = [...this._digits];\n        this._digits[index] = '';\n        (e.target as HTMLInputElement).value = '';\n        this._emitValue();\n      } else if (index > 0) {\n        this._focusBox(index - 1);\n        this._digits = [...this._digits];\n        this._digits[index - 1] = '';\n        this._emitValue();\n      }\n    } else if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault(); this._focusBox(index - 1);\n    } else if (e.key === 'ArrowRight' && index < this.length - 1) {\n      e.preventDefault(); this._focusBox(index + 1);\n    }\n  }\n\n  private _onPaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const data = (e.clipboardData?.getData('text') || '').replace(/[^0-9]/g, '').slice(0, this.length);\n    this._digits = Array.from({ length: this.length }, (_, i) => data[i] || '');\n    this._emitValue();\n    this.requestUpdate();\n    this.updateComplete.then(() => {\n      this._focusBox(Math.min(data.length, this.length - 1));\n      const boxes = this._getBoxes();\n      this._digits.forEach((d, i) => { if (boxes[i]) boxes[i].value = this.mask && d ? '\\u2022' : d; });\n    });\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"One-time password input\">\n        ${Array.from({ length: this.length }, (_, i) => {\n          const digit = this._digits[i] || '';\n          const display = this.mask && digit ? '\\u2022' : digit;\n          return html`\n            <input class=\"box ${digit ? 'filled' : ''}\"\n              type=\"text\" inputmode=\"numeric\" maxlength=\"1\"\n              style=\"animation-delay: ${i * 40}ms\"\n              .value=${display}\n              ?disabled=${this.disabled}\n              autocomplete=\"one-time-code\"\n              aria-label=${`Digit ${i + 1} of ${this.length}`}\n              @input=${(e: Event) => this._onInput(i, e)}\n              @keydown=${(e: KeyboardEvent) => this._onKeyDown(i, e)}\n              @paste=${this._onPaste}\n              @focus=${(e: Event) => (e.target as HTMLInputElement).select()} />\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-otp-input': CgOtpInput;\n  }\n}\n"],"names":["CgOtpInput","LitElement","changed","_","i","index","target","val","c","input","char","e","data","boxes","d","html","digit","display","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-otp-input.js","sources":["../../../src/components/cg-otp-input/cg-otp-input.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-otp-input> — One-time password input with individual digit boxes.\n *\n * @example\n * ```html\n * <cg-otp-input length=\"6\"></cg-otp-input>\n * <cg-otp-input length=\"4\" mask></cg-otp-input>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-otp-change - On each digit change\n * @fires {CustomEvent<{value: string}>} cg-otp-complete - When all digits filled\n *\n * @cssprop --cg-component-otp-box-width - Box width (48px)\n * @cssprop --cg-component-otp-box-height - Box height (56px)\n * @cssprop --cg-color-input-border-default - Default border color\n */\n@customElement('cg-otp-input')\nexport class CgOtpInput extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    .container {\n      display: flex;\n      gap: var(--cg-spacing-8);\n    }\n\n    .box {\n      width: var(--cg-component-otp-box-width);\n      height: var(--cg-component-otp-box-height);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-input-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      text-align: center;\n      caret-color: var(--cg-color-accent-text);\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: otpCellIn var(--cg-transition-duration-slow) var(--cg-transition-easing-default) both;\n    }\n\n    @keyframes otpCellIn {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-4)) scale(0.95); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .box:hover:not(:disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    .box:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .box:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      background: var(--cg-color-input-background-disabled);\n      border-color: var(--cg-color-input-border-disabled);\n    }\n\n    :host([error]) .box {\n      border-color: var(--cg-color-input-border-error);\n    }\n    :host([error]) .box:focus {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n\n    /* ── Success state ── */\n    :host([success]) .box {\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .box:focus {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n\n    .box.filled {\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .box { border-radius: 0; }\n    :host([rounded=\"sm\"]) .box { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .box { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .box { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .box { border-radius: var(--cg-border-radius-full); }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .box {\n        animation: none !important;\n        transform: none !important;\n      }\n    }\n  `];\n\n  @property({ type: Number }) length = 6;\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property() value = '';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean }) mask = false;\n\n  @state() private _digits: string[] = [];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._syncDigits();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if ((changed.has('value') && this.value !== this._digits.join('')) || changed.has('length')) this._syncDigits();\n  }\n\n  private _syncDigits() {\n    this._digits = Array.from({ length: this.length }, (_, i) => this.value[i] || '');\n  }\n\n  private _getBoxes(): HTMLInputElement[] {\n    return Array.from(this.shadowRoot?.querySelectorAll<HTMLInputElement>('.box') ?? []);\n  }\n\n  private _focusBox(index: number) {\n    const boxes = this._getBoxes();\n    const target = boxes[Math.min(Math.max(0, index), this.length - 1)];\n    target?.focus();\n    target?.select();\n  }\n\n  private _emitValue() {\n    const val = this._digits.join('');\n    this.value = val;\n    this.dispatchEvent(new CustomEvent('cg-otp-change', { detail: { value: val }, bubbles: true, composed: true }));\n    if (val.length === this.length && val.split('').every(c => c !== '')) {\n      this.dispatchEvent(new CustomEvent('cg-otp-complete', { detail: { value: val }, bubbles: true, composed: true }));\n    }\n  }\n\n  private _onInput(index: number, e: Event) {\n    const input = e.target as HTMLInputElement;\n    const chars = input.value.replace(/[^0-9]/g, '');\n    if (chars.length > 1) {\n      // OS one-time-code autofill inserts the whole code as one input event —\n      // distribute across boxes like paste instead of keeping only one digit.\n      this._digits = Array.from({ length: this.length }, (_, i) => chars[i] || '');\n      this._emitValue();\n      this.updateComplete.then(() => {\n        const boxes = this._getBoxes();\n        this._digits.forEach((d, i) => {\n          const box = boxes[i];\n          if (box) box.value = this.mask && d ? '\\u2022' : d;\n        });\n        this._focusBox(Math.min(chars.length, this.length - 1));\n      });\n      return;\n    }\n    const char = chars;\n    this._digits = [...this._digits];\n    this._digits[index] = char;\n    input.value = this.mask && char ? '\\u2022' : char;\n    this._emitValue();\n    if (char && index < this.length - 1) this._focusBox(index + 1);\n  }\n\n  private _onKeyDown(index: number, e: KeyboardEvent) {\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n      if (this._digits[index]) {\n        this._digits = [...this._digits];\n        this._digits[index] = '';\n        (e.target as HTMLInputElement).value = '';\n        this._emitValue();\n      } else if (index > 0) {\n        this._focusBox(index - 1);\n        this._digits = [...this._digits];\n        this._digits[index - 1] = '';\n        this._emitValue();\n      }\n    } else if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault(); this._focusBox(index - 1);\n    } else if (e.key === 'ArrowRight' && index < this.length - 1) {\n      e.preventDefault(); this._focusBox(index + 1);\n    }\n  }\n\n  private _onPaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const data = (e.clipboardData?.getData('text') || '').replace(/[^0-9]/g, '').slice(0, this.length);\n    this._digits = Array.from({ length: this.length }, (_, i) => data[i] || '');\n    this._emitValue();\n    this.requestUpdate();\n    this.updateComplete.then(() => {\n      this._focusBox(Math.min(data.length, this.length - 1));\n      const boxes = this._getBoxes();\n      this._digits.forEach((d, i) => { if (boxes[i]) boxes[i].value = this.mask && d ? '\\u2022' : d; });\n    });\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"One-time password input\">\n        ${Array.from({ length: this.length }, (_, i) => {\n          const digit = this._digits[i] || '';\n          const display = this.mask && digit ? '\\u2022' : digit;\n          return html`\n            <input class=\"box ${digit ? 'filled' : ''}\"\n              type=\"text\" inputmode=\"numeric\" maxlength=\"1\"\n              style=\"animation-delay: calc(${i} * var(--cg-transition-duration-fast) / 2)\"\n              .value=${display}\n              ?disabled=${this.disabled}\n              aria-invalid=${this.error ? 'true' : 'false'}\n              autocomplete=\"one-time-code\"\n              aria-label=${`Digit ${i + 1} of ${this.length}`}\n              @input=${(e: Event) => this._onInput(i, e)}\n              @keydown=${(e: KeyboardEvent) => this._onKeyDown(i, e)}\n              @paste=${this._onPaste}\n              @focus=${(e: Event) => (e.target as HTMLInputElement).select()} />\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-otp-input': CgOtpInput;\n  }\n}\n"],"names":["CgOtpInput","LitElement","changed","_","i","index","target","val","c","input","chars","boxes","d","box","char","e","data","html","digit","display","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-pagination/cg-pagination.d.ts

@@ -20,6 +20,8 @@ export declare class CgPagination extends LitElement {
     total: number;
     current: number;
     siblings: number;
+    /** Accepts attribute "false" — plain Lit Booleans can never be turned off from markup. */
+    private static _boolConverter;
     showFirst: boolean;
     showLast: boolean;
     private _goToPage;

package/dist/components/cg-pagination/cg-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/cg-pagination/cg-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA2HnB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtD,KAAK,SAAK;IACV,OAAO,SAAK;IACZ,QAAQ,SAAK;IACZ,SAAS,UAAQ;IACjB,QAAQ,UAAQ;IAE7C,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,SAAS;IAqCR,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"cg-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/cg-pagination/cg-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA2HnB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtD,KAAK,SAAK;IACV,OAAO,SAAK;IACZ,QAAQ,SAAK;IACzC,0FAA0F;IAC1F,OAAO,CAAC,MAAM,CAAC,cAAc,CAA0D;IACjC,SAAS,UAAQ;IACjB,QAAQ,UAAQ;IAEtE,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,SAAS;IAqCR,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/cg-pagination/cg-pagination.js

@@ -1,43 +1,43 @@
-import { css as d, LitElement as u, html as l, nothing as h } from "lit";
+import { css as d, LitElement as p, html as l, nothing as h } from "lit";
 import { property as c, customElement as b } from "lit/decorators.js";
-import { h as v, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, a, n, t) => {
-  for (var i = t > 1 ? void 0 : t ? w(a, n) : a, g = e.length - 1, s; g >= 0; g--)
-    (s = e[g]) && (i = (t ? s(a, n, i) : s(i)) || i);
-  return t && i && m(a, n, i), i;
+import { h as v, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (t, a, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? w(a, n) : a, g = t.length - 1, s; g >= 0; g--)
+    (s = t[g]) && (i = (r ? s(a, n, i) : s(i)) || i);
+  return r && i && m(a, n, i), i;
 };
-let r = class extends u {
+let e = class extends p {
   constructor() {
     super(...arguments), this.size = "md", this.rounded = "md", this.total = 1, this.current = 1, this.siblings = 1, this.showFirst = !0, this.showLast = !0;
   }
-  _goToPage(e) {
-    e < 1 || e > this.total || e === this.current || this.dispatchEvent(new CustomEvent("cg-page-change", {
+  _goToPage(t) {
+    t < 1 || t > this.total || t === this.current || this.dispatchEvent(new CustomEvent("cg-page-change", {
       bubbles: !0,
       composed: !0,
-      detail: { page: e }
+      detail: { page: t }
     }));
   }
   _getPages() {
-    const e = this.total, a = this.current, n = this.siblings;
-    if (e <= 7)
-      return Array.from({ length: e }, (s, p) => p + 1);
-    const t = [];
-    this.showFirst && t.push(1);
-    const i = Math.max(2, a - n), g = Math.min(e - 1, a + n);
-    i > 2 && t.push("ellipsis");
+    const t = this.total, a = this.current, n = this.siblings;
+    if (t <= 7)
+      return Array.from({ length: t }, (s, u) => u + 1);
+    const r = [];
+    this.showFirst && r.push(1);
+    const i = Math.max(2, a - n), g = Math.min(t - 1, a + n);
+    i > 2 && r.push("ellipsis");
     for (let s = i; s <= g; s++)
-      t.push(s);
-    return g < e - 1 && t.push("ellipsis"), this.showLast && t.push(e), t;
+      r.push(s);
+    return g < t - 1 && r.push("ellipsis"), this.showLast && r.push(t), r;
   }
   render() {
-    const e = this._getPages(), a = this.current <= 1, n = this.current >= this.total;
+    const t = this._getPages(), a = this.current <= 1, n = this.current >= this.total;
     return l`
       <nav aria-label="Pagination">
         <ul class="pagination">
           <li>
             <button
               class="page-btn"
-              ?disabled="${a}"
+              aria-disabled="${a ? "true" : "false"}"
               aria-label="Previous page"
               @click="${() => this._goToPage(this.current - 1)}"
             >
@@ -45,19 +45,19 @@ let r = class extends u {
             </button>
           </li>
 
-          ${e.map((t) => {
-      if (t === "ellipsis")
-        return l`<li><span class="ellipsis" aria-hidden="true">...</span></li>`;
-      const i = t === this.current;
+          ${t.map((r) => {
+      if (r === "ellipsis")
+        return l`<li><span class="ellipsis" aria-hidden="true">…</span></li>`;
+      const i = r === this.current;
       return l`
               <li>
                 <button
                   class="page-btn ${i ? "active" : ""}"
-                  aria-label="Page ${t}"
+                  aria-label="Page ${r}"
                   aria-current="${i ? "page" : h}"
-                  @click="${() => this._goToPage(t)}"
+                  @click="${() => this._goToPage(r)}"
                 >
-                  ${t}
+                  ${r}
                 </button>
               </li>
             `;
@@ -66,7 +66,7 @@ let r = class extends u {
           <li>
             <button
               class="page-btn"
-              ?disabled="${n}"
+              aria-disabled="${n ? "true" : "false"}"
               aria-label="Next page"
               @click="${() => this._goToPage(this.current + 1)}"
             >
@@ -78,7 +78,7 @@ let r = class extends u {
     `;
   }
 };
-r.styles = [v, f, d`
+e.styles = [v, f, d`
     :host {
       display: flex;
     }
@@ -118,28 +118,29 @@ r.styles = [v, f, d`
       -webkit-font-smoothing: antialiased;
     }
 
-    .page-btn:hover:not(:disabled):not(.active) {
+    .page-btn:hover:not([aria-disabled="true"]):not(.active) {
       background: var(--cg-overlay-accent-subtle);
-      color: var(--cg-color-surface-container-text);
-      border-color: var(--cg-color-surface-base-border);
     }
 
-    .page-btn:active:not(:disabled) {
+    .page-btn:active:not([aria-disabled="true"]) {
       transform: scale(var(--cg-interaction-press-scale));
     }
 
     .page-btn:focus-visible {
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
       outline: none;
+      box-shadow:
+        0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);
     }
 
-    .page-btn:disabled {
+    .page-btn[aria-disabled="true"] {
       opacity: 0.5;
       cursor: not-allowed;
     }
 
     /* ── Active page ── */
     .page-btn.active {
+      cursor: default;
       background: var(--cg-color-action-primary-background-default);
       color: var(--cg-color-action-primary-text-default);
       border-color: var(--cg-color-action-primary-border-default);
@@ -156,7 +157,6 @@ r.styles = [v, f, d`
       color: var(--cg-color-surface-container-outlined);
       font-size: var(--cg-font-size-sm);
       user-select: none;
-      letter-spacing: var(--cg-letter-spacing-widest);
     }
 
     /* Size variants */
@@ -202,31 +202,32 @@ r.styles = [v, f, d`
     :host([rounded="lg"]) .page-btn { border-radius: var(--cg-border-radius-150); }
     :host([rounded="full"]) .page-btn { border-radius: var(--cg-border-radius-full); }
   `];
+e._boolConverter = { fromAttribute: (t) => t !== "false" };
 o([
   c({ reflect: !0 })
-], r.prototype, "size", 2);
+], e.prototype, "size", 2);
 o([
   c({ reflect: !0 })
-], r.prototype, "rounded", 2);
+], e.prototype, "rounded", 2);
 o([
   c({ type: Number })
-], r.prototype, "total", 2);
+], e.prototype, "total", 2);
 o([
   c({ type: Number })
-], r.prototype, "current", 2);
+], e.prototype, "current", 2);
 o([
   c({ type: Number })
-], r.prototype, "siblings", 2);
+], e.prototype, "siblings", 2);
 o([
-  c({ type: Boolean })
-], r.prototype, "showFirst", 2);
+  c({ converter: e._boolConverter })
+], e.prototype, "showFirst", 2);
 o([
-  c({ type: Boolean })
-], r.prototype, "showLast", 2);
-r = o([
+  c({ converter: e._boolConverter })
+], e.prototype, "showLast", 2);
+e = o([
   b("cg-pagination")
-], r);
+], e);
 export {
-  r as CgPagination
+  e as CgPagination
 };
 //# sourceMappingURL=cg-pagination.js.map

package/dist/components/cg-pagination/cg-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-pagination.js","sources":["../../../src/components/cg-pagination/cg-pagination.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-pagination\n * Page navigation with prev/next arrows, ellipsis gaps, and configurable siblings.\n *\n * @example\n * ```html\n * <cg-pagination total=\"20\" current=\"5\"></cg-pagination>\n * ```\n *\n * @fires {CustomEvent<{page: number}>} cg-page-change - When a page button is clicked\n *\n * @cssprop --cg-component-pagination-button-size - Button size (36px)\n * @cssprop --cg-color-action-primary-background-default - Active page background\n */\n@customElement('cg-pagination')\nexport class CgPagination extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n    }\n\n    .pagination {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    .page-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-component-pagination-button-size);\n      height: var(--cg-component-pagination-button-size);\n      padding: 0 var(--cg-spacing-8);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-border);\n      border-radius: var(--cg-border-radius-100);\n      background: transparent;\n      color: var(--cg-color-surface-container-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      font-variant-numeric: tabular-nums;\n      cursor: pointer;\n      line-height: 1;\n      white-space: nowrap;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      -webkit-font-smoothing: antialiased;\n    }\n\n    .page-btn:hover:not(:disabled):not(.active) {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-container-text);\n      border-color: var(--cg-color-surface-base-border);\n    }\n\n    .page-btn:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .page-btn:focus-visible {\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n\n    .page-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* ── Active page ── */\n    .page-btn.active {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-border-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    /* ── Ellipsis ── */\n    .ellipsis {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-component-pagination-button-size);\n      height: var(--cg-component-pagination-button-size);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      user-select: none;\n      letter-spacing: var(--cg-letter-spacing-widest);\n    }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .page-btn {\n      min-width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"sm\"]) .ellipsis {\n      min-width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    :host([size=\"lg\"]) .page-btn {\n      min-width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      font-size: var(--cg-font-size-base);\n    }\n    :host([size=\"lg\"]) .ellipsis {\n      min-width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      font-size: var(--cg-font-size-base);\n    }\n\n    @media (max-width: 480px) {\n      .page-btn {\n        min-width: var(--cg-spacing-32);\n        height: var(--cg-spacing-32);\n        font-size: var(--cg-font-size-xs);\n        padding: 0 var(--cg-spacing-4);\n      }\n      .ellipsis {\n        min-width: var(--cg-spacing-24);\n        height: var(--cg-spacing-32);\n      }\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .page-btn { border-radius: 0; }\n    :host([rounded=\"sm\"]) .page-btn { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .page-btn { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .page-btn { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .page-btn { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ type: Number }) total = 1;\n  @property({ type: Number }) current = 1;\n  @property({ type: Number }) siblings = 1;\n  @property({ type: Boolean }) showFirst = true;\n  @property({ type: Boolean }) showLast = true;\n\n  private _goToPage(page: number) {\n    if (page < 1 || page > this.total || page === this.current) return;\n    this.dispatchEvent(new CustomEvent('cg-page-change', {\n      bubbles: true,\n      composed: true,\n      detail: { page },\n    }));\n  }\n\n  private _getPages(): (number | 'ellipsis')[] {\n    const total = this.total;\n    const current = this.current;\n    const siblings = this.siblings;\n\n    if (total <= 7) {\n      return Array.from({ length: total }, (_, i) => i + 1);\n    }\n\n    const pages: (number | 'ellipsis')[] = [];\n\n    if (this.showFirst) {\n      pages.push(1);\n    }\n\n    const rangeStart = Math.max(2, current - siblings);\n    const rangeEnd = Math.min(total - 1, current + siblings);\n\n    if (rangeStart > 2) {\n      pages.push('ellipsis');\n    }\n\n    for (let i = rangeStart; i <= rangeEnd; i++) {\n      pages.push(i);\n    }\n\n    if (rangeEnd < total - 1) {\n      pages.push('ellipsis');\n    }\n\n    if (this.showLast) {\n      pages.push(total);\n    }\n\n    return pages;\n  }\n\n  override render() {\n    const pages = this._getPages();\n    const isFirstPage = this.current <= 1;\n    const isLastPage = this.current >= this.total;\n\n    return html`\n      <nav aria-label=\"Pagination\">\n        <ul class=\"pagination\">\n          <li>\n            <button\n              class=\"page-btn\"\n              ?disabled=\"${isFirstPage}\"\n              aria-label=\"Previous page\"\n              @click=\"${() => this._goToPage(this.current - 1)}\"\n            >\n              <cg-icon name=\"chevron-left\" size=\"sm\"></cg-icon>\n            </button>\n          </li>\n\n          ${pages.map(page => {\n            if (page === 'ellipsis') {\n              return html`<li><span class=\"ellipsis\" aria-hidden=\"true\">...</span></li>`;\n            }\n            const isActive = page === this.current;\n            return html`\n              <li>\n                <button\n                  class=\"page-btn ${isActive ? 'active' : ''}\"\n                  aria-label=\"Page ${page}\"\n                  aria-current=\"${isActive ? 'page' : nothing}\"\n                  @click=\"${() => this._goToPage(page)}\"\n                >\n                  ${page}\n                </button>\n              </li>\n            `;\n          })}\n\n          <li>\n            <button\n              class=\"page-btn\"\n              ?disabled=\"${isLastPage}\"\n              aria-label=\"Next page\"\n              @click=\"${() => this._goToPage(this.current + 1)}\"\n            >\n              <cg-icon name=\"chevron-right\" size=\"sm\"></cg-icon>\n            </button>\n          </li>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-pagination': CgPagination;\n  }\n}\n"],"names":["CgPagination","LitElement","page","total","current","siblings","_","i","pages","rangeStart","rangeEnd","isFirstPage","isLastPage","html","isActive","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-pagination.js","sources":["../../../src/components/cg-pagination/cg-pagination.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-pagination\n * Page navigation with prev/next arrows, ellipsis gaps, and configurable siblings.\n *\n * @example\n * ```html\n * <cg-pagination total=\"20\" current=\"5\"></cg-pagination>\n * ```\n *\n * @fires {CustomEvent<{page: number}>} cg-page-change - When a page button is clicked\n *\n * @cssprop --cg-component-pagination-button-size - Button size (36px)\n * @cssprop --cg-color-action-primary-background-default - Active page background\n */\n@customElement('cg-pagination')\nexport class CgPagination extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n    }\n\n    .pagination {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n\n    .page-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-component-pagination-button-size);\n      height: var(--cg-component-pagination-button-size);\n      padding: 0 var(--cg-spacing-8);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-border);\n      border-radius: var(--cg-border-radius-100);\n      background: transparent;\n      color: var(--cg-color-surface-container-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      font-variant-numeric: tabular-nums;\n      cursor: pointer;\n      line-height: 1;\n      white-space: nowrap;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      -webkit-font-smoothing: antialiased;\n    }\n\n    .page-btn:hover:not([aria-disabled=\"true\"]):not(.active) {\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    .page-btn:active:not([aria-disabled=\"true\"]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .page-btn:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);\n    }\n\n    .page-btn[aria-disabled=\"true\"] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* ── Active page ── */\n    .page-btn.active {\n      cursor: default;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-border-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    /* ── Ellipsis ── */\n    .ellipsis {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-component-pagination-button-size);\n      height: var(--cg-component-pagination-button-size);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      user-select: none;\n    }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .page-btn {\n      min-width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"sm\"]) .ellipsis {\n      min-width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    :host([size=\"lg\"]) .page-btn {\n      min-width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      font-size: var(--cg-font-size-base);\n    }\n    :host([size=\"lg\"]) .ellipsis {\n      min-width: var(--cg-spacing-48);\n      height: var(--cg-spacing-48);\n      font-size: var(--cg-font-size-base);\n    }\n\n    @media (max-width: 480px) {\n      .page-btn {\n        min-width: var(--cg-spacing-32);\n        height: var(--cg-spacing-32);\n        font-size: var(--cg-font-size-xs);\n        padding: 0 var(--cg-spacing-4);\n      }\n      .ellipsis {\n        min-width: var(--cg-spacing-24);\n        height: var(--cg-spacing-32);\n      }\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .page-btn { border-radius: 0; }\n    :host([rounded=\"sm\"]) .page-btn { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .page-btn { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .page-btn { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .page-btn { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ type: Number }) total = 1;\n  @property({ type: Number }) current = 1;\n  @property({ type: Number }) siblings = 1;\n  /** Accepts attribute \"false\" — plain Lit Booleans can never be turned off from markup. */\n  private static _boolConverter = { fromAttribute: (v: string | null) => v !== 'false' };\n  @property({ converter: CgPagination._boolConverter }) showFirst = true;\n  @property({ converter: CgPagination._boolConverter }) showLast = true;\n\n  private _goToPage(page: number) {\n    if (page < 1 || page > this.total || page === this.current) return;\n    this.dispatchEvent(new CustomEvent('cg-page-change', {\n      bubbles: true,\n      composed: true,\n      detail: { page },\n    }));\n  }\n\n  private _getPages(): (number | 'ellipsis')[] {\n    const total = this.total;\n    const current = this.current;\n    const siblings = this.siblings;\n\n    if (total <= 7) {\n      return Array.from({ length: total }, (_, i) => i + 1);\n    }\n\n    const pages: (number | 'ellipsis')[] = [];\n\n    if (this.showFirst) {\n      pages.push(1);\n    }\n\n    const rangeStart = Math.max(2, current - siblings);\n    const rangeEnd = Math.min(total - 1, current + siblings);\n\n    if (rangeStart > 2) {\n      pages.push('ellipsis');\n    }\n\n    for (let i = rangeStart; i <= rangeEnd; i++) {\n      pages.push(i);\n    }\n\n    if (rangeEnd < total - 1) {\n      pages.push('ellipsis');\n    }\n\n    if (this.showLast) {\n      pages.push(total);\n    }\n\n    return pages;\n  }\n\n  override render() {\n    const pages = this._getPages();\n    const isFirstPage = this.current <= 1;\n    const isLastPage = this.current >= this.total;\n\n    return html`\n      <nav aria-label=\"Pagination\">\n        <ul class=\"pagination\">\n          <li>\n            <button\n              class=\"page-btn\"\n              aria-disabled=\"${isFirstPage ? 'true' : 'false'}\"\n              aria-label=\"Previous page\"\n              @click=\"${() => this._goToPage(this.current - 1)}\"\n            >\n              <cg-icon name=\"chevron-left\" size=\"sm\"></cg-icon>\n            </button>\n          </li>\n\n          ${pages.map(page => {\n            if (page === 'ellipsis') {\n              return html`<li><span class=\"ellipsis\" aria-hidden=\"true\">…</span></li>`;\n            }\n            const isActive = page === this.current;\n            return html`\n              <li>\n                <button\n                  class=\"page-btn ${isActive ? 'active' : ''}\"\n                  aria-label=\"Page ${page}\"\n                  aria-current=\"${isActive ? 'page' : nothing}\"\n                  @click=\"${() => this._goToPage(page)}\"\n                >\n                  ${page}\n                </button>\n              </li>\n            `;\n          })}\n\n          <li>\n            <button\n              class=\"page-btn\"\n              aria-disabled=\"${isLastPage ? 'true' : 'false'}\"\n              aria-label=\"Next page\"\n              @click=\"${() => this._goToPage(this.current + 1)}\"\n            >\n              <cg-icon name=\"chevron-right\" size=\"sm\"></cg-icon>\n            </button>\n          </li>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-pagination': CgPagination;\n  }\n}\n"],"names":["CgPagination","LitElement","page","total","current","siblings","_","i","pages","rangeStart","rangeEnd","isFirstPage","isLastPage","html","isActive","nothing","hostBlock","reducedMotion","css","v","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-password-input/cg-password-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-password-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-password-input/cg-password-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA+HnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAS1B,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,MAAM,SAAM;IACZ,IAAI,SAAM;IACsB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IACH,YAAY,UAAS;IACzB,SAAS,SAAK;IAE1D,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAarD,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAShB,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"cg-password-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-password-input/cg-password-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAoInB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAS1B,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,MAAM,SAAM;IACZ,IAAI,SAAM;IACsB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IACH,YAAY,UAAS;IACzB,SAAS,SAAK;IAE1D,OAAO,CAAC,QAAQ,CAAS;IAEzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAarD,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;IAShB,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/cg-password-input/cg-password-input.js

@@ -1,17 +1,17 @@
-import { css as d, LitElement as h, nothing as l, html as s } from "lit";
-import { property as o, state as p, customElement as v } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, a, c, n) => {
-  for (var i = n > 1 ? void 0 : n ? y(a, c) : a, u = t.length - 1, g; u >= 0; u--)
-    (g = t[u]) && (i = (n ? g(a, c, i) : g(i)) || i);
-  return n && i && m(a, c, i), i;
+import { css as g, LitElement as h, nothing as n, html as o } from "lit";
+import { property as s, state as p, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, a, c, l) => {
+  for (var i = l > 1 ? void 0 : l ? y(a, c) : a, u = t.length - 1, d; u >= 0; u--)
+    (d = t[u]) && (i = (l ? d(a, c, i) : d(i)) || i);
+  return l && i && m(a, c, i), i;
 };
 let e = class extends h {
   constructor() {
     super(), this.value = "", this.label = "", this.placeholder = "", this.helper = "", this.name = "", this.required = !1, this.disabled = !1, this.error = !1, this.success = !1, this.showStrength = !1, this.minLength = 0, this._visible = !1, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
   }
   updated(t) {
-    t.has("value") && (this._internals?.setFormValue(this.value), this.required && !this.value ? this._internals?.setValidity({ valueMissing: !0 }, "Password is required") : this.minLength > 0 && this.value.length < this.minLength ? this._internals?.setValidity({ tooShort: !0 }, `Minimum length is ${this.minLength}`) : this._internals?.setValidity({}));
+    (t.has("value") || t.has("required") || t.has("minLength")) && (this._internals?.setFormValue(this.value), this.required && !this.value ? this._internals?.setValidity({ valueMissing: !0 }, "Password is required") : this.minLength > 0 && this.value.length < this.minLength ? this._internals?.setValidity({ tooShort: !0 }, `Minimum length is ${this.minLength}`) : this._internals?.setValidity({}));
   }
   _strengthScore() {
     const t = this.value;
@@ -39,17 +39,20 @@ let e = class extends h {
   }
   render() {
     const t = this._strengthScore();
-    return s`
+    return o`
       <div class="wrap">
-        ${this.label ? s`<label>${this.label}${this.required ? s` <span style="color:var(--cg-color-status-error-text-default);">*</span>` : l}</label>` : l}
+        ${this.label ? o`<label for="input">${this.label}${this.required ? o` <span class="required-marker">*</span>` : n}</label>` : n}
         <div class="input-wrap">
           <input
+            id="input"
             type=${this._visible ? "text" : "password"}
             .value=${this.value}
             placeholder=${this.placeholder}
             name=${this.name}
             ?disabled=${this.disabled}
             ?required=${this.required}
+            aria-label=${this.label ? n : this.placeholder || "Password"}
+            aria-describedby=${this.helper ? "helper" : n}
             aria-invalid=${this.error ? "true" : "false"}
             aria-required=${this.required ? "true" : "false"}
             @input=${this._handleInput}
@@ -57,16 +60,16 @@ let e = class extends h {
           <button
             type="button"
             class="toggle"
+            ?disabled=${this.disabled}
             aria-label=${this._visible ? "Hide password" : "Show password"}
-            aria-pressed=${this._visible ? "true" : "false"}
             @click=${this._toggleVisibility}
           >
-            ${this._visible ? s`
+            ${this._visible ? o`
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
                 <line x1="1" y1="1" x2="23" y2="23"/>
               </svg>
-            ` : s`
+            ` : o`
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                 <circle cx="12" cy="12" r="3"/>
@@ -74,20 +77,20 @@ let e = class extends h {
             `}
           </button>
         </div>
-        ${this.showStrength && this.value ? s`
+        ${this.showStrength && this.value ? o`
           <div class="strength" aria-hidden="true">
-            ${[1, 2, 3, 4].map((a) => s`
+            ${[1, 2, 3, 4].map((a) => o`
               <div class="strength-bar ${a <= t ? "active" : ""}" data-level=${t}></div>
             `)}
           </div>
-          <div class="strength-label">${this._strengthLabel()}</div>
-        ` : l}
-        ${this.helper ? s`<div class="helper">${this.helper}</div>` : l}
+          <div class="strength-label" role="status" aria-live="polite">${this._strengthLabel()}</div>
+        ` : n}
+        ${this.helper ? o`<div class="helper" id="helper">${this.helper}</div>` : n}
       </div>
     `;
   }
 };
-e.styles = [f, b, d`
+e.styles = [f, b, g`
     :host { display: block; }
 
     .wrap {
@@ -140,9 +143,11 @@ e.styles = [f, b, d`
     :host([error]) input {
       border-color: var(--cg-color-status-error-border-default);
     }
+    :host([error]) input:focus { box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }
     :host([success]) input {
       border-color: var(--cg-color-status-success-border-default);
     }
+    :host([success]) input:focus { box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }
 
     .toggle {
       position: absolute;
@@ -161,16 +166,18 @@ e.styles = [f, b, d`
       border-radius: var(--cg-border-radius-50);
       transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .toggle:hover {
+    .toggle:hover:not(:disabled) {
       color: var(--cg-color-surface-base-text);
       background: var(--cg-color-action-tertiary-background-hover);
     }
+    .toggle:disabled { opacity: 0.6; cursor: not-allowed; }
     .toggle:focus-visible {
       outline: none;
       box-shadow:
-        0 0 0 2px var(--cg-color-focus-ring-offset),
-        0 0 0 4px var(--cg-color-focus-ring);
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
     }
+    .toggle:active { transform: translateY(-50%) scale(var(--cg-interaction-press-scale)); }
 
     .helper {
       margin-top: var(--cg-spacing-6);
@@ -203,7 +210,6 @@ e.styles = [f, b, d`
       from { transform: scaleX(0); }
       to { transform: scaleX(1); }
     }
-    .toggle:active { transform: translateY(-50%) scale(0.9); }
     .strength-bar.active[data-level="1"] { background: var(--cg-color-status-error-text-default); }
     .strength-bar.active[data-level="2"] { background: var(--cg-color-status-warning-text-default); }
     .strength-bar.active[data-level="3"] { background: var(--cg-color-status-warning-text-default); }
@@ -214,40 +220,42 @@ e.styles = [f, b, d`
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-surface-container-outlined);
     }
+
+    .required-marker { color: var(--cg-color-status-error-text-default); }
   `];
 e.formAssociated = !0;
 r([
-  o()
+  s()
 ], e.prototype, "value", 2);
 r([
-  o()
+  s()
 ], e.prototype, "label", 2);
 r([
-  o()
+  s()
 ], e.prototype, "placeholder", 2);
 r([
-  o()
+  s()
 ], e.prototype, "helper", 2);
 r([
-  o()
+  s()
 ], e.prototype, "name", 2);
 r([
-  o({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "required", 2);
 r([
-  o({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 r([
-  o({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "error", 2);
 r([
-  o({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "success", 2);
 r([
-  o({ type: Boolean, attribute: "show-strength" })
+  s({ type: Boolean, attribute: "show-strength" })
 ], e.prototype, "showStrength", 2);
 r([
-  o({ type: Number, attribute: "min-length" })
+  s({ type: Number, attribute: "min-length" })
 ], e.prototype, "minLength", 2);
 r([
   p()

package/dist/components/cg-password-input/cg-password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-password-input.js","sources":["../../../src/components/cg-password-input/cg-password-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-password-input\n * Password input with visibility toggle and optional strength meter.\n *\n * @example\n * ```html\n * <cg-password-input label=\"Password\" show-strength></cg-password-input>\n * ```\n *\n * @fires {CustomEvent<{value: string, strength?: number}>} cg-password-change\n * @fires {CustomEvent<{visible: boolean}>} cg-password-toggle\n */\n@customElement('cg-password-input')\nexport class CgPasswordInput extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .wrap {\n      position: relative;\n      display: block;\n    }\n\n    label {\n      display: block;\n      margin-bottom: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .input-wrap {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    input {\n      flex: 1;\n      height: var(--cg-component-input-height-md);\n      padding: 0 var(--cg-spacing-40) 0 var(--cg-spacing-12);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      color: var(--cg-color-input-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-base);\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    input:hover:not(:disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    input:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    input:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    :host([error]) input {\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([success]) input {\n      border-color: var(--cg-color-status-success-border-default);\n    }\n\n    .toggle {\n      position: absolute;\n      right: var(--cg-spacing-8);\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .toggle:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    .helper {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n\n    /* Strength meter */\n    .strength {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      margin-top: var(--cg-spacing-12);\n    }\n    .strength-bar {\n      flex: 1;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-border);\n      border-radius: var(--cg-border-radius-full);\n      transition:\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      transform-origin: left;\n    }\n    .strength-bar.active {\n      animation: barIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    @keyframes barIn {\n      from { transform: scaleX(0); }\n      to { transform: scaleX(1); }\n    }\n    .toggle:active { transform: translateY(-50%) scale(0.9); }\n    .strength-bar.active[data-level=\"1\"] { background: var(--cg-color-status-error-text-default); }\n    .strength-bar.active[data-level=\"2\"] { background: var(--cg-color-status-warning-text-default); }\n    .strength-bar.active[data-level=\"3\"] { background: var(--cg-color-status-warning-text-default); }\n    .strength-bar.active[data-level=\"4\"] { background: var(--cg-color-status-success-text-default); }\n\n    .strength-label {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() value = '';\n  @property() label = '';\n  @property() placeholder = '';\n  @property() helper = '';\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, attribute: 'show-strength' }) showStrength = false;\n  @property({ type: Number, attribute: 'min-length' }) minLength = 0;\n\n  @state() private _visible = false;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n      if (this.required && !this.value) {\n        this._internals?.setValidity({ valueMissing: true }, 'Password is required');\n      } else if (this.minLength > 0 && this.value.length < this.minLength) {\n        this._internals?.setValidity({ tooShort: true }, `Minimum length is ${this.minLength}`);\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  private _strengthScore(): number {\n    const v = this.value;\n    if (!v) return 0;\n    let score = 0;\n    if (v.length >= 8) score++;\n    if (v.length >= 12) score++;\n    if (/[a-z]/.test(v) && /[A-Z]/.test(v)) score++;\n    if (/\\d/.test(v) && /[^a-zA-Z0-9]/.test(v)) score++;\n    return Math.min(4, score);\n  }\n\n  private _strengthLabel(): string {\n    const score = this._strengthScore();\n    if (score === 0) return '';\n    if (score === 1) return 'Weak';\n    if (score === 2) return 'Fair';\n    if (score === 3) return 'Good';\n    return 'Strong';\n  }\n\n  private _handleInput(e: Event): void {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(new CustomEvent('cg-password-change', {\n      detail: { value: this.value, strength: this._strengthScore() },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _toggleVisibility(): void {\n    this._visible = !this._visible;\n    this.dispatchEvent(new CustomEvent('cg-password-toggle', {\n      detail: { visible: this._visible },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const score = this._strengthScore();\n    return html`\n      <div class=\"wrap\">\n        ${this.label ? html`<label>${this.label}${this.required ? html` <span style=\"color:var(--cg-color-status-error-text-default);\">*</span>` : nothing}</label>` : nothing}\n        <div class=\"input-wrap\">\n          <input\n            type=${this._visible ? 'text' : 'password'}\n            .value=${this.value}\n            placeholder=${this.placeholder}\n            name=${this.name}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-invalid=${this.error ? 'true' : 'false'}\n            aria-required=${this.required ? 'true' : 'false'}\n            @input=${this._handleInput}\n          />\n          <button\n            type=\"button\"\n            class=\"toggle\"\n            aria-label=${this._visible ? 'Hide password' : 'Show password'}\n            aria-pressed=${this._visible ? 'true' : 'false'}\n            @click=${this._toggleVisibility}\n          >\n            ${this._visible ? html`\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        </div>\n        ${this.showStrength && this.value ? html`\n          <div class=\"strength\" aria-hidden=\"true\">\n            ${[1, 2, 3, 4].map(i => html`\n              <div class=\"strength-bar ${i <= score ? 'active' : ''}\" data-level=${score}></div>\n            `)}\n          </div>\n          <div class=\"strength-label\">${this._strengthLabel()}</div>\n        ` : nothing}\n        ${this.helper ? html`<div class=\"helper\">${this.helper}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-password-input': CgPasswordInput;\n  }\n}\n"],"names":["CgPasswordInput","LitElement","changed","v","score","e","html","nothing","i","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-password-input.js","sources":["../../../src/components/cg-password-input/cg-password-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-password-input\n * Password input with visibility toggle and optional strength meter.\n *\n * @example\n * ```html\n * <cg-password-input label=\"Password\" show-strength></cg-password-input>\n * ```\n *\n * @fires {CustomEvent<{value: string, strength?: number}>} cg-password-change\n * @fires {CustomEvent<{visible: boolean}>} cg-password-toggle\n */\n@customElement('cg-password-input')\nexport class CgPasswordInput extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .wrap {\n      position: relative;\n      display: block;\n    }\n\n    label {\n      display: block;\n      margin-bottom: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .input-wrap {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    input {\n      flex: 1;\n      height: var(--cg-component-input-height-md);\n      padding: 0 var(--cg-spacing-40) 0 var(--cg-spacing-12);\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      color: var(--cg-color-input-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-base);\n      outline: none;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n    input:hover:not(:disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    input:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    input:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    :host([error]) input {\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([error]) input:focus { box-shadow: 0 0 0 3px var(--cg-shadow-focus-error); }\n    :host([success]) input {\n      border-color: var(--cg-color-status-success-border-default);\n    }\n    :host([success]) input:focus { box-shadow: 0 0 0 3px var(--cg-shadow-focus-success); }\n\n    .toggle {\n      position: absolute;\n      right: var(--cg-spacing-8);\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle:hover:not(:disabled) {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .toggle:disabled { opacity: 0.6; cursor: not-allowed; }\n    .toggle:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .toggle:active { transform: translateY(-50%) scale(var(--cg-interaction-press-scale)); }\n\n    .helper {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n    :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n\n    /* Strength meter */\n    .strength {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      margin-top: var(--cg-spacing-12);\n    }\n    .strength-bar {\n      flex: 1;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-border);\n      border-radius: var(--cg-border-radius-full);\n      transition:\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      transform-origin: left;\n    }\n    .strength-bar.active {\n      animation: barIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    @keyframes barIn {\n      from { transform: scaleX(0); }\n      to { transform: scaleX(1); }\n    }\n    .strength-bar.active[data-level=\"1\"] { background: var(--cg-color-status-error-text-default); }\n    .strength-bar.active[data-level=\"2\"] { background: var(--cg-color-status-warning-text-default); }\n    .strength-bar.active[data-level=\"3\"] { background: var(--cg-color-status-warning-text-default); }\n    .strength-bar.active[data-level=\"4\"] { background: var(--cg-color-status-success-text-default); }\n\n    .strength-label {\n      margin-top: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .required-marker { color: var(--cg-color-status-error-text-default); }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() value = '';\n  @property() label = '';\n  @property() placeholder = '';\n  @property() helper = '';\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, attribute: 'show-strength' }) showStrength = false;\n  @property({ type: Number, attribute: 'min-length' }) minLength = 0;\n\n  @state() private _visible = false;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value') || changed.has('required') || changed.has('minLength')) {\n      this._internals?.setFormValue(this.value);\n      if (this.required && !this.value) {\n        this._internals?.setValidity({ valueMissing: true }, 'Password is required');\n      } else if (this.minLength > 0 && this.value.length < this.minLength) {\n        this._internals?.setValidity({ tooShort: true }, `Minimum length is ${this.minLength}`);\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  private _strengthScore(): number {\n    const v = this.value;\n    if (!v) return 0;\n    let score = 0;\n    if (v.length >= 8) score++;\n    if (v.length >= 12) score++;\n    if (/[a-z]/.test(v) && /[A-Z]/.test(v)) score++;\n    if (/\\d/.test(v) && /[^a-zA-Z0-9]/.test(v)) score++;\n    return Math.min(4, score);\n  }\n\n  private _strengthLabel(): string {\n    const score = this._strengthScore();\n    if (score === 0) return '';\n    if (score === 1) return 'Weak';\n    if (score === 2) return 'Fair';\n    if (score === 3) return 'Good';\n    return 'Strong';\n  }\n\n  private _handleInput(e: Event): void {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dispatchEvent(new CustomEvent('cg-password-change', {\n      detail: { value: this.value, strength: this._strengthScore() },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _toggleVisibility(): void {\n    this._visible = !this._visible;\n    this.dispatchEvent(new CustomEvent('cg-password-toggle', {\n      detail: { visible: this._visible },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const score = this._strengthScore();\n    return html`\n      <div class=\"wrap\">\n        ${this.label ? html`<label for=\"input\">${this.label}${this.required ? html` <span class=\"required-marker\">*</span>` : nothing}</label>` : nothing}\n        <div class=\"input-wrap\">\n          <input\n            id=\"input\"\n            type=${this._visible ? 'text' : 'password'}\n            .value=${this.value}\n            placeholder=${this.placeholder}\n            name=${this.name}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            aria-label=${this.label ? nothing : (this.placeholder || 'Password')}\n            aria-describedby=${this.helper ? 'helper' : nothing}\n            aria-invalid=${this.error ? 'true' : 'false'}\n            aria-required=${this.required ? 'true' : 'false'}\n            @input=${this._handleInput}\n          />\n          <button\n            type=\"button\"\n            class=\"toggle\"\n            ?disabled=${this.disabled}\n            aria-label=${this._visible ? 'Hide password' : 'Show password'}\n            @click=${this._toggleVisibility}\n          >\n            ${this._visible ? html`\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        </div>\n        ${this.showStrength && this.value ? html`\n          <div class=\"strength\" aria-hidden=\"true\">\n            ${[1, 2, 3, 4].map(i => html`\n              <div class=\"strength-bar ${i <= score ? 'active' : ''}\" data-level=${score}></div>\n            `)}\n          </div>\n          <div class=\"strength-label\" role=\"status\" aria-live=\"polite\">${this._strengthLabel()}</div>\n        ` : nothing}\n        ${this.helper ? html`<div class=\"helper\" id=\"helper\">${this.helper}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-password-input': CgPasswordInput;\n  }\n}\n"],"names":["CgPasswordInput","LitElement","changed","v","score","e","html","nothing","i","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}