@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,14 +1,16 @@
-import { css as p, LitElement as h, nothing as d, html as c } from "lit";
-import { property as o, state as g, query as b, customElement as v } from "lit/decorators.js";
-import { a as f, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, r, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? y(r, a) : r, l = e.length - 1, u; l >= 0; l--)
-    (u = e[l]) && (i = (n ? u(r, a, i) : u(i)) || i);
-  return n && i && w(r, a, i), i;
+import { css as p, LitElement as h, nothing as l, html as d } from "lit";
+import { property as s, state as g, query as v, customElement as b } from "lit/decorators.js";
+import { a as m, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (e, i, o, n) => {
+  for (var a = n > 1 ? void 0 : n ? _(i, o) : i, c = e.length - 1, u; c >= 0; c--)
+    (u = e[c]) && (a = (n ? u(i, o, a) : u(a)) || a);
+  return n && a && w(i, o, a), a;
 };
 let t = class extends h {
   constructor() {
-    super(), this.value = 0, this.min = -1 / 0, this.max = 1 / 0, this.step = 1, this.label = "", this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.size = "md", this.rounded = "lg", this.name = "", this.required = !1, this._focused = !1, this._repeatTimer = 0, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+    super(), this.value = 0, this.min = -1 / 0, this.max = 1 / 0, this.step = 1, this.label = "", this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.size = "md", this.rounded = "lg", this.name = "", this.required = !1, this._focused = !1, this._repeatTimer = 0, this._stopRepeat = () => {
+      clearTimeout(this._repeatTimer);
+    }, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
   }
   updated(e) {
     super.updated(e), e.has("value") && this._internals?.setFormValue(String(this.value)), (e.has("required") || e.has("value")) && (this.required && (this.value === void 0 || this.value === null) ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
@@ -24,8 +26,8 @@ let t = class extends h {
     return Math.min(this.max, Math.max(this.min, e));
   }
   _setValue(e) {
-    const r = this._clamp(e);
-    r !== this.value && (this.value = r, this.dispatchEvent(new CustomEvent("cg-change", { detail: { value: this.value }, bubbles: !0, composed: !0 })));
+    const i = this._clamp(e);
+    i !== this.value && (this.value = i, this.dispatchEvent(new CustomEvent("cg-change", { detail: { value: this.value }, bubbles: !0, composed: !0 })));
   }
   _increment() {
     this._setValue(this.value + this.step);
@@ -34,67 +36,74 @@ let t = class extends h {
     this._setValue(this.value - this.step);
   }
   _startRepeat(e) {
-    e();
-    let r = 400;
-    const a = () => {
-      e(), r = Math.max(60, r * 0.8), this._repeatTimer = window.setTimeout(a, r);
+    e(), window.addEventListener("mouseup", this._stopRepeat, { once: !0 }), window.addEventListener("touchend", this._stopRepeat, { once: !0 });
+    let i = 400;
+    const o = () => {
+      const n = this.value;
+      e(), !(this.disabled || this.value === n) && (i = Math.max(60, i * 0.8), this._repeatTimer = window.setTimeout(o, i));
     };
-    this._repeatTimer = window.setTimeout(a, r);
+    this._repeatTimer = window.setTimeout(o, i);
   }
-  _stopRepeat() {
-    clearTimeout(this._repeatTimer);
+  _onInput() {
   }
-  _onInput(e) {
-    const r = e.target.value, a = parseFloat(r);
-    Number.isNaN(a) || this._setValue(a);
+  _commitInput() {
+    const e = parseFloat(this._input?.value ?? "");
+    Number.isFinite(e) && this._setValue(e), this._input && (this._input.value = String(this.value));
   }
   _onKeyDown(e) {
-    e.key === "ArrowUp" ? (e.preventDefault(), this._increment()) : e.key === "ArrowDown" && (e.preventDefault(), this._decrement());
+    e.key === "ArrowUp" ? (e.preventDefault(), this._increment()) : e.key === "ArrowDown" ? (e.preventDefault(), this._decrement()) : e.key === "Enter" ? this._commitInput() : e.key === "Home" && Number.isFinite(this.min) ? (e.preventDefault(), this._setValue(this.min)) : e.key === "End" && Number.isFinite(this.max) && (e.preventDefault(), this._setValue(this.max));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._stopRepeat();
   }
   render() {
-    const e = this.value <= this.min, r = this.value >= this.max;
-    return c`
-      ${this.label ? c`<span class="label">${this.label}</span>` : d}
+    const e = this.value <= this.min, i = this.value >= this.max;
+    return d`
+      ${this.label ? d`<span class="label">${this.label}</span>` : l}
       <div class="wrapper ${this._focused ? "focused" : ""} ${this.disabled ? "disabled" : ""}">
         <button class="btn" aria-label="Decrease"
           ?disabled=${this.disabled || e}
+          @click=${(o) => {
+      o.detail === 0 && this._decrement();
+    }}
           @mousedown=${() => this._startRepeat(() => this._decrement())}
           @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}
-          @touchstart=${(a) => {
-      a.preventDefault(), this._startRepeat(() => this._decrement());
+          @touchstart=${(o) => {
+      o.preventDefault(), this._startRepeat(() => this._decrement());
     }}
           @touchend=${this._stopRepeat}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>
         </button>
-        ${this.loading ? c`<span class="loading-spinner" aria-hidden="true"></span>` : c`
+        ${this.loading ? d`<span class="loading-spinner" aria-hidden="true"></span>` : l}
         <input type="text" inputmode="numeric"
           role="spinbutton"
           aria-valuenow=${this.value}
-          aria-valuemin=${this.min === -1 / 0 ? d : this.min}
-          aria-valuemax=${this.max === 1 / 0 ? d : this.max}
+          aria-valuemin=${this.min === -1 / 0 ? l : this.min}
+          aria-valuemax=${this.max === 1 / 0 ? l : this.max}
           aria-label=${this.label || "Number input"}
           aria-required=${this.required ? "true" : "false"}
           aria-invalid=${this.error ? "true" : "false"}
           aria-busy=${this.loading ? "true" : "false"}
           .value=${String(this.value)}
           ?disabled=${this.disabled}
+          ?readonly=${this.loading}
           @input=${this._onInput}
           @keydown=${this._onKeyDown}
           @focus=${() => {
       this._focused = !0;
     }}
           @blur=${() => {
-      this._focused = !1;
-    }} />`}
+      this._focused = !1, this._commitInput();
+    }} />
         <button class="btn" aria-label="Increase"
-          ?disabled=${this.disabled || r}
+          ?disabled=${this.disabled || i}
+          @click=${(o) => {
+      o.detail === 0 && this._increment();
+    }}
           @mousedown=${() => this._startRepeat(() => this._increment())}
           @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}
-          @touchstart=${(a) => {
-      a.preventDefault(), this._startRepeat(() => this._increment());
+          @touchstart=${(o) => {
+      o.preventDefault(), this._startRepeat(() => this._increment());
     }}
           @touchend=${this._stopRepeat}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
@@ -104,12 +113,12 @@ let t = class extends h {
   }
 };
 t.formAssociated = !0;
-t.styles = [f, m, p`
+t.styles = [m, f, p`
     .wrapper {
       display: inline-flex;
       align-items: center;
       border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
-      border-radius: var(--cg-border-radius-100);
+      border-radius: var(--cg-component-input-radius);
       background: var(--cg-color-input-background-default);
       overflow: hidden;
       transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
@@ -159,7 +168,7 @@ t.styles = [f, m, p`
     :host([rounded="none"]) .wrapper { border-radius: 0; }
     :host([rounded="sm"]) .wrapper { border-radius: var(--cg-border-radius-50); }
     :host([rounded="md"]) .wrapper { border-radius: var(--cg-border-radius-100); }
-    :host([rounded="lg"]) .wrapper { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="lg"]) .wrapper { border-radius: var(--cg-component-input-radius); }
     :host([rounded="full"]) .wrapper { border-radius: var(--cg-border-radius-full); }
 
     .btn {
@@ -168,7 +177,7 @@ t.styles = [f, m, p`
       justify-content: center;
       border: none;
       background: var(--cg-color-action-secondary-background-default);
-      color: var(--cg-color-surface-base-text);
+      color: var(--cg-color-action-secondary-text-default);
       cursor: pointer;
       padding: 0;
       flex-shrink: 0;
@@ -178,7 +187,11 @@ t.styles = [f, m, p`
     }
     .btn:hover:not(:disabled) { background: var(--cg-color-action-secondary-background-hover); }
     .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }
-    .btn:disabled { cursor: not-allowed; opacity: 0.4; }
+    .btn:disabled {
+      cursor: not-allowed;
+      background: var(--cg-color-action-secondary-background-disable);
+      color: var(--cg-color-action-secondary-text-disable);
+    }
     .btn:focus-visible {
       box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);
       outline: none;
@@ -188,9 +201,9 @@ t.styles = [f, m, p`
     .btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
 
     /* Sizes */
-    :host([size="sm"]) .btn { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }
-    :host([size="md"]) .btn { width: var(--cg-spacing-40); height: var(--cg-spacing-40); }
-    :host([size="lg"]) .btn { width: var(--cg-spacing-48); height: var(--cg-spacing-48); }
+    :host([size="sm"]) .btn { width: var(--cg-component-input-height-sm); height: var(--cg-component-input-height-sm); }
+    :host([size="md"]) .btn { width: var(--cg-component-input-height-md); height: var(--cg-component-input-height-md); }
+    :host([size="lg"]) .btn { width: var(--cg-component-input-height-lg); height: var(--cg-component-input-height-lg); }
 
     input {
       border: none;
@@ -206,59 +219,59 @@ t.styles = [f, m, p`
     input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
     input:disabled { cursor: not-allowed; }
 
-    :host([size="sm"]) input { width: var(--cg-spacing-48); font-size: var(--cg-font-size-xs); height: var(--cg-spacing-32); }
-    :host([size="md"]) input { width: var(--cg-spacing-56); font-size: var(--cg-font-size-sm); height: var(--cg-spacing-40); }
-    :host([size="lg"]) input { width: var(--cg-spacing-64); font-size: var(--cg-font-size-base); height: var(--cg-spacing-48); }
+    :host([size="sm"]) input { width: var(--cg-spacing-48); font-size: var(--cg-font-size-xs); height: var(--cg-component-input-height-sm); }
+    :host([size="md"]) input { width: var(--cg-spacing-56); font-size: var(--cg-font-size-sm); height: var(--cg-component-input-height-md); }
+    :host([size="lg"]) input { width: var(--cg-spacing-64); font-size: var(--cg-font-size-base); height: var(--cg-component-input-height-lg); }
 
-    .label { display: block; font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-bottom: var(--cg-spacing-4); font-weight: var(--cg-font-weight-medium); }
+    .label { display: block; font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); margin-bottom: var(--cg-spacing-4); font-weight: var(--cg-font-weight-medium); }
   `];
-s([
-  o({ type: Number })
+r([
+  s({ type: Number })
 ], t.prototype, "value", 2);
-s([
-  o({ type: Number })
+r([
+  s({ type: Number })
 ], t.prototype, "min", 2);
-s([
-  o({ type: Number })
+r([
+  s({ type: Number })
 ], t.prototype, "max", 2);
-s([
-  o({ type: Number })
+r([
+  s({ type: Number })
 ], t.prototype, "step", 2);
-s([
-  o()
+r([
+  s()
 ], t.prototype, "label", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "error", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "success", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "loading", 2);
-s([
-  o({ reflect: !0 })
+r([
+  s({ reflect: !0 })
 ], t.prototype, "size", 2);
-s([
-  o({ reflect: !0 })
+r([
+  s({ reflect: !0 })
 ], t.prototype, "rounded", 2);
-s([
-  o()
+r([
+  s()
 ], t.prototype, "name", 2);
-s([
-  o({ type: Boolean })
+r([
+  s({ type: Boolean })
 ], t.prototype, "required", 2);
-s([
+r([
   g()
 ], t.prototype, "_focused", 2);
-s([
-  b("input")
+r([
+  v("input")
 ], t.prototype, "_input", 2);
-t = s([
-  v("cg-number-input")
+t = r([
+  b("cg-number-input")
 ], t);
 export {
   t as CgNumberInput

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

@@ -1 +1 @@
-{"version":3,"file":"cg-number-input.js","sources":["../../../src/components/cg-number-input/cg-number-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-number-input> — Number input with increment/decrement buttons.\n *\n * @fires {CustomEvent<{value: number}>} cg-change - On value change\n */\n@customElement('cg-number-input')\nexport class CgNumberInput extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBase, reducedMotion, css`\n    .wrapper {\n      display: inline-flex;\n      align-items: center;\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      overflow: hidden;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .wrapper.focused {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .wrapper:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .wrapper.disabled { opacity: 0.5; cursor: not-allowed; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }\n\n    /* Error */\n    :host([error]) .wrapper { border-color: var(--cg-color-input-border-error); }\n    :host([error]) .wrapper.focused {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n    :host([error]) .label { color: var(--cg-color-status-error-text-default); }\n\n    /* Success */\n    :host([success]) .wrapper { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .wrapper.focused {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n    :host([success]) .label { color: var(--cg-color-status-success-text-default); }\n\n    /* Loading */\n    :host([loading]) .wrapper { pointer-events: none; opacity: 0.5; }\n    .loading-spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-number-spin var(--cg-transition-duration-slow) linear infinite;\n      flex-shrink: 0;\n      margin: 0 var(--cg-spacing-4);\n    }\n    @keyframes cg-number-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .wrapper { border-radius: var(--cg-border-radius-full); }\n\n    .btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n      -webkit-user-select: none;\n      user-select: none;\n    }\n    .btn:hover:not(:disabled) { background: var(--cg-color-action-secondary-background-hover); }\n    .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    .btn:disabled { cursor: not-allowed; opacity: 0.4; }\n    .btn:focus-visible {\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n      outline: none;\n      z-index: 1;\n      position: relative;\n    }\n    .btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .btn { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }\n    :host([size=\"md\"]) .btn { width: var(--cg-spacing-40); height: var(--cg-spacing-40); }\n    :host([size=\"lg\"]) .btn { width: var(--cg-spacing-48); height: var(--cg-spacing-48); }\n\n    input {\n      border: none;\n      outline: none;\n      background: transparent;\n      font-family: inherit;\n      color: var(--cg-color-input-text-default);\n      text-align: center;\n      min-width: 0;\n      -moz-appearance: textfield;\n    }\n    input::-webkit-inner-spin-button,\n    input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }\n    input:disabled { cursor: not-allowed; }\n\n    :host([size=\"sm\"]) input { width: var(--cg-spacing-48); font-size: var(--cg-font-size-xs); height: var(--cg-spacing-32); }\n    :host([size=\"md\"]) input { width: var(--cg-spacing-56); font-size: var(--cg-font-size-sm); height: var(--cg-spacing-40); }\n    :host([size=\"lg\"]) input { width: var(--cg-spacing-64); font-size: var(--cg-font-size-base); height: var(--cg-spacing-48); }\n\n    .label { display: block; font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-bottom: var(--cg-spacing-4); font-weight: var(--cg-font-weight-medium); }\n  `];\n\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) min = -Infinity;\n  @property({ type: Number }) max = Infinity;\n  @property({ type: Number }) step = 1;\n  @property() label = '';\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, reflect: true }) loading = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() name = '';\n  @property({ type: Boolean }) required = false;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n    if (changed.has('required') || changed.has('value')) {\n      if (this.required && (this.value === undefined || this.value === null)) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    const attr = this.getAttribute('value');\n    this.value = attr !== null ? Number(attr) : 0;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.value = Number(state);\n  }\n\n  @state() private _focused = false;\n  private _repeatTimer = 0;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  private _clamp(v: number): number {\n    return Math.min(this.max, Math.max(this.min, v));\n  }\n\n  private _setValue(v: number) {\n    const clamped = this._clamp(v);\n    if (clamped !== this.value) {\n      this.value = clamped;\n      this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n    }\n  }\n\n  private _increment() { this._setValue(this.value + this.step); }\n  private _decrement() { this._setValue(this.value - this.step); }\n\n  private _startRepeat(action: () => void) {\n    action();\n    let delay = 400;\n    const repeat = () => {\n      action();\n      delay = Math.max(60, delay * 0.8);\n      this._repeatTimer = window.setTimeout(repeat, delay);\n    };\n    this._repeatTimer = window.setTimeout(repeat, delay);\n  }\n  private _stopRepeat() { clearTimeout(this._repeatTimer); }\n\n  private _onInput(e: Event) {\n    const raw = (e.target as HTMLInputElement).value;\n    const parsed = parseFloat(raw);\n    if (!Number.isNaN(parsed)) this._setValue(parsed);\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    if (e.key === 'ArrowUp') { e.preventDefault(); this._increment(); }\n    else if (e.key === 'ArrowDown') { e.preventDefault(); this._decrement(); }\n  }\n\n  override disconnectedCallback() { super.disconnectedCallback(); this._stopRepeat(); }\n\n  override render() {\n    const atMin = this.value <= this.min;\n    const atMax = this.value >= this.max;\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n      <div class=\"wrapper ${this._focused ? 'focused' : ''} ${this.disabled ? 'disabled' : ''}\">\n        <button class=\"btn\" aria-label=\"Decrease\"\n          ?disabled=${this.disabled || atMin}\n          @mousedown=${() => this._startRepeat(() => this._decrement())}\n          @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}\n          @touchstart=${(e: Event) => { e.preventDefault(); this._startRepeat(() => this._decrement()); }}\n          @touchend=${this._stopRepeat}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M5 12h14\"/></svg>\n        </button>\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`\n        <input type=\"text\" inputmode=\"numeric\"\n          role=\"spinbutton\"\n          aria-valuenow=${this.value}\n          aria-valuemin=${this.min === -Infinity ? nothing : this.min}\n          aria-valuemax=${this.max === Infinity ? nothing : this.max}\n          aria-label=${this.label || 'Number input'}\n          aria-required=${this.required ? 'true' : 'false'}\n          aria-invalid=${this.error ? 'true' : 'false'}\n          aria-busy=${this.loading ? 'true' : 'false'}\n          .value=${String(this.value)}\n          ?disabled=${this.disabled}\n          @input=${this._onInput}\n          @keydown=${this._onKeyDown}\n          @focus=${() => { this._focused = true; }}\n          @blur=${() => { this._focused = false; }} />`}\n        <button class=\"btn\" aria-label=\"Increase\"\n          ?disabled=${this.disabled || atMax}\n          @mousedown=${() => this._startRepeat(() => this._increment())}\n          @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}\n          @touchstart=${(e: Event) => { e.preventDefault(); this._startRepeat(() => this._increment()); }}\n          @touchend=${this._stopRepeat}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-number-input': CgNumberInput;\n  }\n}\n"],"names":["CgNumberInput","LitElement","changed","attr","state","v","clamped","action","delay","repeat","raw","parsed","atMin","atMax","html","nothing","e","hostBase","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-number-input.js","sources":["../../../src/components/cg-number-input/cg-number-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-number-input> — Number input with increment/decrement buttons.\n *\n * @fires {CustomEvent<{value: number}>} cg-change - On value change\n */\n@customElement('cg-number-input')\nexport class CgNumberInput extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBase, reducedMotion, css`\n    .wrapper {\n      display: inline-flex;\n      align-items: center;\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-component-input-radius);\n      background: var(--cg-color-input-background-default);\n      overflow: hidden;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .wrapper.focused {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .wrapper:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .wrapper.disabled { opacity: 0.5; cursor: not-allowed; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }\n\n    /* Error */\n    :host([error]) .wrapper { border-color: var(--cg-color-input-border-error); }\n    :host([error]) .wrapper.focused {\n      border-color: var(--cg-color-status-error-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n    :host([error]) .label { color: var(--cg-color-status-error-text-default); }\n\n    /* Success */\n    :host([success]) .wrapper { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .wrapper.focused {\n      border-color: var(--cg-color-status-success-text-default);\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n    :host([success]) .label { color: var(--cg-color-status-success-text-default); }\n\n    /* Loading */\n    :host([loading]) .wrapper { pointer-events: none; opacity: 0.5; }\n    .loading-spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-number-spin var(--cg-transition-duration-slow) linear infinite;\n      flex-shrink: 0;\n      margin: 0 var(--cg-spacing-4);\n    }\n    @keyframes cg-number-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-component-input-radius); }\n    :host([rounded=\"full\"]) .wrapper { border-radius: var(--cg-border-radius-full); }\n\n    .btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: none;\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-action-secondary-text-default);\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n      -webkit-user-select: none;\n      user-select: none;\n    }\n    .btn:hover:not(:disabled) { background: var(--cg-color-action-secondary-background-hover); }\n    .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    .btn:disabled {\n      cursor: not-allowed;\n      background: var(--cg-color-action-secondary-background-disable);\n      color: var(--cg-color-action-secondary-text-disable);\n    }\n    .btn:focus-visible {\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n      outline: none;\n      z-index: 1;\n      position: relative;\n    }\n    .btn svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .btn { width: var(--cg-component-input-height-sm); height: var(--cg-component-input-height-sm); }\n    :host([size=\"md\"]) .btn { width: var(--cg-component-input-height-md); height: var(--cg-component-input-height-md); }\n    :host([size=\"lg\"]) .btn { width: var(--cg-component-input-height-lg); height: var(--cg-component-input-height-lg); }\n\n    input {\n      border: none;\n      outline: none;\n      background: transparent;\n      font-family: inherit;\n      color: var(--cg-color-input-text-default);\n      text-align: center;\n      min-width: 0;\n      -moz-appearance: textfield;\n    }\n    input::-webkit-inner-spin-button,\n    input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }\n    input:disabled { cursor: not-allowed; }\n\n    :host([size=\"sm\"]) input { width: var(--cg-spacing-48); font-size: var(--cg-font-size-xs); height: var(--cg-component-input-height-sm); }\n    :host([size=\"md\"]) input { width: var(--cg-spacing-56); font-size: var(--cg-font-size-sm); height: var(--cg-component-input-height-md); }\n    :host([size=\"lg\"]) input { width: var(--cg-spacing-64); font-size: var(--cg-font-size-base); height: var(--cg-component-input-height-lg); }\n\n    .label { display: block; font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); margin-bottom: var(--cg-spacing-4); font-weight: var(--cg-font-weight-medium); }\n  `];\n\n  @property({ type: Number }) value = 0;\n  @property({ type: Number }) min = -Infinity;\n  @property({ type: Number }) max = Infinity;\n  @property({ type: Number }) step = 1;\n  @property() label = '';\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, reflect: true }) loading = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() name = '';\n  @property({ type: Boolean }) required = false;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n    if (changed.has('required') || changed.has('value')) {\n      if (this.required && (this.value === undefined || this.value === null)) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    const attr = this.getAttribute('value');\n    this.value = attr !== null ? Number(attr) : 0;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.value = Number(state);\n  }\n\n  @state() private _focused = false;\n  private _repeatTimer = 0;\n\n  @query('input') private _input!: HTMLInputElement;\n\n  private _clamp(v: number): number {\n    return Math.min(this.max, Math.max(this.min, v));\n  }\n\n  private _setValue(v: number) {\n    const clamped = this._clamp(v);\n    if (clamped !== this.value) {\n      this.value = clamped;\n      this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n    }\n  }\n\n  private _increment() { this._setValue(this.value + this.step); }\n  private _decrement() { this._setValue(this.value - this.step); }\n\n  private _startRepeat(action: () => void) {\n    action();\n    // The button disables itself at the boundary mid-press, which suppresses\n    // its mouseup — release must be caught at the window level or the timer\n    // loops forever.\n    window.addEventListener('mouseup', this._stopRepeat, { once: true });\n    window.addEventListener('touchend', this._stopRepeat, { once: true });\n    let delay = 400;\n    const repeat = () => {\n      const before = this.value;\n      action();\n      if (this.disabled || this.value === before) return; // boundary reached — stop\n      delay = Math.max(60, delay * 0.8);\n      this._repeatTimer = window.setTimeout(repeat, delay);\n    };\n    this._repeatTimer = window.setTimeout(repeat, delay);\n  }\n  private _stopRepeat = () => { clearTimeout(this._repeatTimer); };\n\n  private _onInput() {\n    // Don't clamp while typing (min=10 would turn a keystroke \"5\" — intending\n    // 50 — into 10 mid-edit). The value commits on blur or Enter.\n  }\n\n  private _commitInput() {\n    const parsed = parseFloat(this._input?.value ?? '');\n    if (Number.isFinite(parsed)) this._setValue(parsed);\n    if (this._input) this._input.value = String(this.value);\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    if (e.key === 'ArrowUp') { e.preventDefault(); this._increment(); }\n    else if (e.key === 'ArrowDown') { e.preventDefault(); this._decrement(); }\n    else if (e.key === 'Enter') { this._commitInput(); }\n    else if (e.key === 'Home' && Number.isFinite(this.min)) { e.preventDefault(); this._setValue(this.min); }\n    else if (e.key === 'End' && Number.isFinite(this.max)) { e.preventDefault(); this._setValue(this.max); }\n  }\n\n  override disconnectedCallback() { super.disconnectedCallback(); this._stopRepeat(); }\n\n  override render() {\n    const atMin = this.value <= this.min;\n    const atMax = this.value >= this.max;\n    return html`\n      ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n      <div class=\"wrapper ${this._focused ? 'focused' : ''} ${this.disabled ? 'disabled' : ''}\">\n        <button class=\"btn\" aria-label=\"Decrease\"\n          ?disabled=${this.disabled || atMin}\n          @click=${(e: MouseEvent) => { if (e.detail === 0) this._decrement(); }}\n          @mousedown=${() => this._startRepeat(() => this._decrement())}\n          @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}\n          @touchstart=${(e: Event) => { e.preventDefault(); this._startRepeat(() => this._decrement()); }}\n          @touchend=${this._stopRepeat}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M5 12h14\"/></svg>\n        </button>\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : nothing}\n        <input type=\"text\" inputmode=\"numeric\"\n          role=\"spinbutton\"\n          aria-valuenow=${this.value}\n          aria-valuemin=${this.min === -Infinity ? nothing : this.min}\n          aria-valuemax=${this.max === Infinity ? nothing : this.max}\n          aria-label=${this.label || 'Number input'}\n          aria-required=${this.required ? 'true' : 'false'}\n          aria-invalid=${this.error ? 'true' : 'false'}\n          aria-busy=${this.loading ? 'true' : 'false'}\n          .value=${String(this.value)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.loading}\n          @input=${this._onInput}\n          @keydown=${this._onKeyDown}\n          @focus=${() => { this._focused = true; }}\n          @blur=${() => { this._focused = false; this._commitInput(); }} />\n        <button class=\"btn\" aria-label=\"Increase\"\n          ?disabled=${this.disabled || atMax}\n          @click=${(e: MouseEvent) => { if (e.detail === 0) this._increment(); }}\n          @mousedown=${() => this._startRepeat(() => this._increment())}\n          @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}\n          @touchstart=${(e: Event) => { e.preventDefault(); this._startRepeat(() => this._increment()); }}\n          @touchend=${this._stopRepeat}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-number-input': CgNumberInput;\n  }\n}\n"],"names":["CgNumberInput","LitElement","changed","attr","state","v","clamped","action","delay","repeat","before","parsed","atMin","atMax","html","nothing","e","hostBase","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-otp-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-otp-input/cg-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAmFnB;IAEyB,MAAM,SAAK;IACV,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACqB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,IAAI,UAAS;IAEjC,OAAO,CAAC,OAAO,CAAgB;IAE/B,iBAAiB;IAKjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,QAAQ;IAaP,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
+{"version":3,"file":"cg-otp-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-otp-input/cg-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAiFnB;IAEyB,MAAM,SAAK;IACV,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACqB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAC/B,IAAI,UAAS;IAEjC,OAAO,CAAC,OAAO,CAAgB;IAE/B,iBAAiB;IAKjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,QAAQ;IA0BhB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,QAAQ;IAaP,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

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

@@ -1,12 +1,12 @@
-import { css as u, LitElement as h, html as d } from "lit";
-import { property as n, state as g, customElement as p } from "lit/decorators.js";
-import { a as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (t, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? m(e, o) : e, c = t.length - 1, l; c >= 0; c--)
-    (l = t[c]) && (s = (r ? l(e, o, s) : l(s)) || s);
-  return r && s && v(e, o, s), s;
+import { css as g, LitElement as p, html as u } from "lit";
+import { property as c, state as f, customElement as b } from "lit/decorators.js";
+import { a as v, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? x(e, r) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (o = (s ? n(e, r, o) : n(o)) || o);
+  return s && o && _(e, r, o), o;
 };
-let a = class extends h {
+let i = class extends p {
   constructor() {
     super(...arguments), this.length = 6, this.rounded = "md", this.value = "", this.disabled = !1, this.error = !1, this.success = !1, this.mask = !1, this._digits = [];
   }
@@ -14,7 +14,7 @@ let a = class extends h {
     super.connectedCallback(), this._syncDigits();
   }
   updated(t) {
-    (t.has("value") || t.has("length")) && this._syncDigits();
+    (t.has("value") && this.value !== this._digits.join("") || t.has("length")) && this._syncDigits();
   }
   _syncDigits() {
     this._digits = Array.from({ length: this.length }, (t, e) => this.value[e] || "");
@@ -23,16 +23,27 @@ let a = class extends h {
     return Array.from(this.shadowRoot?.querySelectorAll(".box") ?? []);
   }
   _focusBox(t) {
-    const o = this._getBoxes()[Math.min(Math.max(0, t), this.length - 1)];
-    o?.focus(), o?.select();
+    const r = this._getBoxes()[Math.min(Math.max(0, t), this.length - 1)];
+    r?.focus(), r?.select();
   }
   _emitValue() {
     const t = this._digits.join("");
     this.value = t, this.dispatchEvent(new CustomEvent("cg-otp-change", { detail: { value: t }, bubbles: !0, composed: !0 })), t.length === this.length && t.split("").every((e) => e !== "") && this.dispatchEvent(new CustomEvent("cg-otp-complete", { detail: { value: t }, bubbles: !0, composed: !0 }));
   }
   _onInput(t, e) {
-    const o = e.target, r = o.value.replace(/[^0-9]/g, "").slice(-1);
-    this._digits = [...this._digits], this._digits[t] = r, o.value = this.mask && r ? "•" : r, this._emitValue(), r && t < this.length - 1 && this._focusBox(t + 1);
+    const r = e.target, s = r.value.replace(/[^0-9]/g, "");
+    if (s.length > 1) {
+      this._digits = Array.from({ length: this.length }, (l, n) => s[n] || ""), this._emitValue(), this.updateComplete.then(() => {
+        const l = this._getBoxes();
+        this._digits.forEach((n, h) => {
+          const d = l[h];
+          d && (d.value = this.mask && n ? "•" : n);
+        }), this._focusBox(Math.min(s.length, this.length - 1));
+      });
+      return;
+    }
+    const o = s;
+    this._digits = [...this._digits], this._digits[t] = o, r.value = this.mask && o ? "•" : o, this._emitValue(), o && t < this.length - 1 && this._focusBox(t + 1);
   }
   _onKeyDown(t, e) {
     e.key === "Backspace" ? (e.preventDefault(), this._digits[t] ? (this._digits = [...this._digits], this._digits[t] = "", e.target.value = "", this._emitValue()) : t > 0 && (this._focusBox(t - 1), this._digits = [...this._digits], this._digits[t - 1] = "", this._emitValue())) : e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), this._focusBox(t - 1)) : e.key === "ArrowRight" && t < this.length - 1 && (e.preventDefault(), this._focusBox(t + 1));
@@ -40,38 +51,39 @@ let a = class extends h {
   _onPaste(t) {
     t.preventDefault();
     const e = (t.clipboardData?.getData("text") || "").replace(/[^0-9]/g, "").slice(0, this.length);
-    this._digits = Array.from({ length: this.length }, (o, r) => e[r] || ""), this._emitValue(), this.requestUpdate(), this.updateComplete.then(() => {
+    this._digits = Array.from({ length: this.length }, (r, s) => e[s] || ""), this._emitValue(), this.requestUpdate(), this.updateComplete.then(() => {
       this._focusBox(Math.min(e.length, this.length - 1));
-      const o = this._getBoxes();
-      this._digits.forEach((r, s) => {
-        o[s] && (o[s].value = this.mask && r ? "•" : r);
+      const r = this._getBoxes();
+      this._digits.forEach((s, o) => {
+        r[o] && (r[o].value = this.mask && s ? "•" : s);
       });
     });
   }
   render() {
-    return d`
+    return u`
       <div class="container" role="group" aria-label="One-time password input">
         ${Array.from({ length: this.length }, (t, e) => {
-      const o = this._digits[e] || "", r = this.mask && o ? "•" : o;
-      return d`
-            <input class="box ${o ? "filled" : ""}"
+      const r = this._digits[e] || "", s = this.mask && r ? "•" : r;
+      return u`
+            <input class="box ${r ? "filled" : ""}"
               type="text" inputmode="numeric" maxlength="1"
-              style="animation-delay: ${e * 40}ms"
-              .value=${r}
+              style="animation-delay: calc(${e} * var(--cg-transition-duration-fast) / 2)"
+              .value=${s}
               ?disabled=${this.disabled}
+              aria-invalid=${this.error ? "true" : "false"}
               autocomplete="one-time-code"
               aria-label=${`Digit ${e + 1} of ${this.length}`}
-              @input=${(s) => this._onInput(e, s)}
-              @keydown=${(s) => this._onKeyDown(e, s)}
+              @input=${(o) => this._onInput(e, o)}
+              @keydown=${(o) => this._onKeyDown(e, o)}
               @paste=${this._onPaste}
-              @focus=${(s) => s.target.select()} />
+              @focus=${(o) => o.target.select()} />
           `;
     })}
       </div>
     `;
   }
 };
-a.styles = [f, b, u`
+i.styles = [v, m, g`
     .container {
       display: flex;
       gap: var(--cg-spacing-8);
@@ -88,12 +100,11 @@ a.styles = [f, b, u`
       font-size: var(--cg-font-size-lg);
       font-weight: var(--cg-font-weight-semibold);
       text-align: center;
-      caret-color: var(--cg-color-action-primary-background-default);
+      caret-color: var(--cg-color-accent-text);
       outline: none;
       transition:
         border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       animation: otpCellIn var(--cg-transition-duration-slow) var(--cg-transition-easing-default) both;
     }
 
@@ -109,7 +120,6 @@ a.styles = [f, b, u`
     .box:focus {
       border-color: var(--cg-color-input-border-focus);
       box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
-      transform: scale(1.05);
     }
 
     .box:disabled {
@@ -137,7 +147,7 @@ a.styles = [f, b, u`
     }
 
     .box.filled {
-      border-color: var(--cg-color-surface-container-border);
+      border-color: var(--cg-color-surface-cards-border-strong);
     }
 
     /* Rounded variants */
@@ -155,34 +165,34 @@ a.styles = [f, b, u`
       }
     }
   `];
-i([
-  n({ type: Number })
-], a.prototype, "length", 2);
-i([
-  n({ reflect: !0 })
-], a.prototype, "rounded", 2);
-i([
-  n()
-], a.prototype, "value", 2);
-i([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
-i([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "error", 2);
-i([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "success", 2);
-i([
-  n({ type: Boolean })
-], a.prototype, "mask", 2);
-i([
-  g()
-], a.prototype, "_digits", 2);
-a = i([
-  p("cg-otp-input")
-], a);
+a([
+  c({ type: Number })
+], i.prototype, "length", 2);
+a([
+  c({ reflect: !0 })
+], i.prototype, "rounded", 2);
+a([
+  c()
+], i.prototype, "value", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "error", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "success", 2);
+a([
+  c({ type: Boolean })
+], i.prototype, "mask", 2);
+a([
+  f()
+], i.prototype, "_digits", 2);
+i = a([
+  b("cg-otp-input")
+], i);
 export {
-  a as CgOtpInput
+  i as CgOtpInput
 };
 //# sourceMappingURL=cg-otp-input.js.map