@cognivo/components 0.8.0

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-otp-input> — One-time password input with individual digit boxes.
+ *
+ * @example
+ * ```html
+ * <cg-otp-input length="6"></cg-otp-input>
+ * <cg-otp-input length="4" mask></cg-otp-input>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string}>} cg-otp-change - On each digit change
+ * @fires {CustomEvent<{value: string}>} cg-otp-complete - When all digits filled
+ *
+ * @cssprop --cg-component-otp-box-width - Box width (48px)
+ * @cssprop --cg-component-otp-box-height - Box height (56px)
+ * @cssprop --cg-color-input-border-default - Default border color
+ */
+export declare class CgOtpInput extends LitElement {
+    static styles: import('lit').CSSResult[];
+    length: number;
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    value: string;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    mask: boolean;
+    private _digits;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _syncDigits;
+    private _getBoxes;
+    private _focusBox;
+    private _emitValue;
+    private _onInput;
+    private _onKeyDown;
+    private _onPaste;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-otp-input': CgOtpInput;
+    }
+}
+//# sourceMappingURL=cg-otp-input.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,188 @@
+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;
+};
+let a = class extends h {
+  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 = [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._syncDigits();
+  }
+  updated(t) {
+    (t.has("value") || t.has("length")) && this._syncDigits();
+  }
+  _syncDigits() {
+    this._digits = Array.from({ length: this.length }, (t, e) => this.value[e] || "");
+  }
+  _getBoxes() {
+    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();
+  }
+  _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);
+  }
+  _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));
+  }
+  _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._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);
+      });
+    });
+  }
+  render() {
+    return d`
+      <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" : ""}"
+              type="text" inputmode="numeric" maxlength="1"
+              style="animation-delay: ${e * 40}ms"
+              .value=${r}
+              ?disabled=${this.disabled}
+              autocomplete="one-time-code"
+              aria-label=${`Digit ${e + 1} of ${this.length}`}
+              @input=${(s) => this._onInput(e, s)}
+              @keydown=${(s) => this._onKeyDown(e, s)}
+              @paste=${this._onPaste}
+              @focus=${(s) => s.target.select()} />
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+a.styles = [f, b, u`
+    .container {
+      display: flex;
+      gap: var(--cg-spacing-8);
+    }
+
+    .box {
+      width: var(--cg-component-otp-box-width);
+      height: var(--cg-component-otp-box-height);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-input-text-default);
+      font-family: inherit;
+      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);
+      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);
+      animation: otpCellIn var(--cg-transition-duration-slow) var(--cg-transition-easing-default) both;
+    }
+
+    @keyframes otpCellIn {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-4)) scale(0.95); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .box:hover:not(:disabled) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+
+    .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 {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background: var(--cg-color-input-background-disabled);
+      border-color: var(--cg-color-input-border-disabled);
+    }
+
+    :host([error]) .box {
+      border-color: var(--cg-color-input-border-error);
+    }
+    :host([error]) .box:focus {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+
+    /* ── Success state ── */
+    :host([success]) .box {
+      border-color: var(--cg-color-status-success-text-default);
+    }
+    :host([success]) .box:focus {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+
+    .box.filled {
+      border-color: var(--cg-color-surface-container-border);
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .box { border-radius: 0; }
+    :host([rounded="sm"]) .box { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .box { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .box { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .box { border-radius: var(--cg-border-radius-full); }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .box {
+        animation: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+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);
+export {
+  a as CgOtpInput
+};
+//# sourceMappingURL=cg-otp-input.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-pagination
+ * Page navigation with prev/next arrows, ellipsis gaps, and configurable siblings.
+ *
+ * @example
+ * ```html
+ * <cg-pagination total="20" current="5"></cg-pagination>
+ * ```
+ *
+ * @fires {CustomEvent<{page: number}>} cg-page-change - When a page button is clicked
+ *
+ * @cssprop --cg-component-pagination-button-size - Button size (36px)
+ * @cssprop --cg-color-action-primary-background-default - Active page background
+ */
+export declare class CgPagination extends LitElement {
+    static styles: import('lit').CSSResult[];
+    size: 'sm' | 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    total: number;
+    current: number;
+    siblings: number;
+    showFirst: boolean;
+    showLast: boolean;
+    private _goToPage;
+    private _getPages;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-pagination': CgPagination;
+    }
+}
+//# sourceMappingURL=cg-pagination.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,232 @@
+import { css as d, LitElement as u, 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;
+};
+let r = class extends u {
+  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", {
+      bubbles: !0,
+      composed: !0,
+      detail: { page: e }
+    }));
+  }
+  _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");
+    for (let s = i; s <= g; s++)
+      t.push(s);
+    return g < e - 1 && t.push("ellipsis"), this.showLast && t.push(e), t;
+  }
+  render() {
+    const e = 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-label="Previous page"
+              @click="${() => this._goToPage(this.current - 1)}"
+            >
+              <cg-icon name="chevron-left" size="sm"></cg-icon>
+            </button>
+          </li>
+
+          ${e.map((t) => {
+      if (t === "ellipsis")
+        return l`<li><span class="ellipsis" aria-hidden="true">...</span></li>`;
+      const i = t === this.current;
+      return l`
+              <li>
+                <button
+                  class="page-btn ${i ? "active" : ""}"
+                  aria-label="Page ${t}"
+                  aria-current="${i ? "page" : h}"
+                  @click="${() => this._goToPage(t)}"
+                >
+                  ${t}
+                </button>
+              </li>
+            `;
+    })}
+
+          <li>
+            <button
+              class="page-btn"
+              ?disabled="${n}"
+              aria-label="Next page"
+              @click="${() => this._goToPage(this.current + 1)}"
+            >
+              <cg-icon name="chevron-right" size="sm"></cg-icon>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+};
+r.styles = [v, f, d`
+    :host {
+      display: flex;
+    }
+
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .page-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-component-pagination-button-size);
+      height: var(--cg-component-pagination-button-size);
+      padding: 0 var(--cg-spacing-8);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-border);
+      border-radius: var(--cg-border-radius-100);
+      background: transparent;
+      color: var(--cg-color-surface-container-text);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      font-variant-numeric: tabular-nums;
+      cursor: pointer;
+      line-height: 1;
+      white-space: nowrap;
+      transition:
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .page-btn:hover:not(:disabled):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) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    .page-btn:focus-visible {
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      outline: none;
+    }
+
+    .page-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* ── Active page ── */
+    .page-btn.active {
+      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);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    /* ── Ellipsis ── */
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-component-pagination-button-size);
+      height: var(--cg-component-pagination-button-size);
+      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 */
+    :host([size="sm"]) .page-btn {
+      min-width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      font-size: var(--cg-font-size-xs);
+    }
+    :host([size="sm"]) .ellipsis {
+      min-width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    :host([size="lg"]) .page-btn {
+      min-width: var(--cg-spacing-48);
+      height: var(--cg-spacing-48);
+      font-size: var(--cg-font-size-base);
+    }
+    :host([size="lg"]) .ellipsis {
+      min-width: var(--cg-spacing-48);
+      height: var(--cg-spacing-48);
+      font-size: var(--cg-font-size-base);
+    }
+
+    @media (max-width: 480px) {
+      .page-btn {
+        min-width: var(--cg-spacing-32);
+        height: var(--cg-spacing-32);
+        font-size: var(--cg-font-size-xs);
+        padding: 0 var(--cg-spacing-4);
+      }
+      .ellipsis {
+        min-width: var(--cg-spacing-24);
+        height: var(--cg-spacing-32);
+      }
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .page-btn { border-radius: 0; }
+    :host([rounded="sm"]) .page-btn { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .page-btn { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .page-btn { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .page-btn { border-radius: var(--cg-border-radius-full); }
+  `];
+o([
+  c({ reflect: !0 })
+], r.prototype, "size", 2);
+o([
+  c({ reflect: !0 })
+], r.prototype, "rounded", 2);
+o([
+  c({ type: Number })
+], r.prototype, "total", 2);
+o([
+  c({ type: Number })
+], r.prototype, "current", 2);
+o([
+  c({ type: Number })
+], r.prototype, "siblings", 2);
+o([
+  c({ type: Boolean })
+], r.prototype, "showFirst", 2);
+o([
+  c({ type: Boolean })
+], r.prototype, "showLast", 2);
+r = o([
+  b("cg-pagination")
+], r);
+export {
+  r as CgPagination
+};
+//# sourceMappingURL=cg-pagination.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-password-input
+ * Password input with visibility toggle and optional strength meter.
+ *
+ * @example
+ * ```html
+ * <cg-password-input label="Password" show-strength></cg-password-input>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string, strength?: number}>} cg-password-change
+ * @fires {CustomEvent<{visible: boolean}>} cg-password-toggle
+ */
+export declare class CgPasswordInput extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    value: string;
+    label: string;
+    placeholder: string;
+    helper: string;
+    name: string;
+    required: boolean;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    showStrength: boolean;
+    minLength: number;
+    private _visible;
+    updated(changed: Map<string, unknown>): void;
+    private _strengthScore;
+    private _strengthLabel;
+    private _handleInput;
+    private _toggleVisibility;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-password-input': CgPasswordInput;
+    }
+}
+//# sourceMappingURL=cg-password-input.d.ts.map

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

@@ -0,0 +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"}