@cognivo/components 0.8.0

package/dist/components/cg-navigation-menu/cg-navigation-menu.js

@@ -0,0 +1,257 @@
+import { css as p, LitElement as u, nothing as s, html as n } from "lit";
+import { property as c, state as v, customElement as h } from "lit/decorators.js";
+import { h as m, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (r, e, l, a) => {
+  for (var t = a > 1 ? void 0 : a ? _(e, l) : e, g = r.length - 1, d; g >= 0; g--)
+    (d = r[g]) && (t = (a ? d(e, l, t) : d(t)) || t);
+  return a && t && b(e, l, t), t;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.items = [], this.openDelay = 80, this.closeDelay = 120, this.columns = 2, this._openIndex = -1, this._openTimer = null, this._closeTimer = null;
+  }
+  _clearTimers() {
+    this._openTimer && (clearTimeout(this._openTimer), this._openTimer = null), this._closeTimer && (clearTimeout(this._closeTimer), this._closeTimer = null);
+  }
+  _scheduleOpen(r) {
+    this._clearTimers(), this._openTimer = window.setTimeout(() => {
+      this._openIndex = r;
+    }, this.openDelay);
+  }
+  _scheduleClose() {
+    this._clearTimers(), this._closeTimer = window.setTimeout(() => {
+      this._openIndex = -1;
+    }, this.closeDelay);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearTimers();
+  }
+  _onKeydown(r) {
+    r.key === "Escape" && this._openIndex !== -1 && (r.preventDefault(), this._openIndex = -1);
+  }
+  _selectLink(r, e) {
+    this.dispatchEvent(new CustomEvent("cg-navigation-menu-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { menu: r.id ?? r.label, link: e.title, href: e.href }
+    })), this._openIndex = -1;
+  }
+  render() {
+    return n`
+      <nav role="navigation" @mouseleave=${this._scheduleClose} @keydown=${this._onKeydown}>
+        ${this.items.map((r, e) => n`
+          <button
+            class="trigger ${this._openIndex === e ? "open" : ""}"
+            aria-haspopup="menu"
+            aria-expanded=${this._openIndex === e ? "true" : "false"}
+            aria-controls="cg-navigation-menu-panel"
+            @mouseenter=${() => this._scheduleOpen(e)}
+            @focus=${() => {
+      this._openIndex = e;
+    }}
+            @click=${() => {
+      this._openIndex = this._openIndex === e ? -1 : e;
+    }}
+          >
+            <span>${r.label}</span>
+            <span class="trigger-caret" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </span>
+          </button>
+        `)}
+        ${this._openIndex >= 0 && this.items[this._openIndex] ? n`
+          <div
+            id="cg-navigation-menu-panel"
+            class="panel"
+            role="menu"
+            style=${`--cg-nm-columns: ${this.columns};`}
+            @mouseenter=${() => {
+      this._clearTimers();
+    }}
+            @mouseleave=${this._scheduleClose}
+          >
+            ${this.items[this._openIndex].sections.map((r) => n`
+              <div>
+                ${r.heading ? n`<h4 class="section-heading">${r.heading}</h4>` : s}
+                ${r.links.map((e) => n`
+                  <button class="link" role="menuitem" @click=${() => this._selectLink(this.items[this._openIndex], e)}>
+                    ${e.icon ? n`<span class="link-icon" aria-hidden="true" .innerHTML=${e.icon}></span>` : s}
+                    <span class="link-title">${e.title}</span>
+                    ${e.description ? n`<span class="link-desc">${e.description}</span>` : s}
+                  </button>
+                `)}
+              </div>
+            `)}
+          </div>
+        ` : s}
+      </nav>
+    `;
+  }
+};
+i.styles = [m, f, p`
+    :host {
+      display: block;
+      font-family: var(--cg-font-family-primary);
+      color: var(--cg-color-surface-container-text);
+    }
+
+    [role="navigation"] {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: transparent;
+      border: none;
+      color: inherit;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover,
+    .trigger.open {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .trigger:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow:
+        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);
+    }
+
+    /* Caret indicator on triggers — rotates 180° when open. */
+    .trigger-caret {
+      display: inline-flex;
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-surface-container-outlined);
+      transition:
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .trigger:hover .trigger-caret,
+    .trigger.open .trigger-caret { color: var(--cg-color-surface-base-text); }
+    .trigger.open .trigger-caret { transform: rotate(180deg); }
+
+    .panel {
+      position: absolute;
+      top: calc(100% + var(--cg-spacing-8));
+      left: 0;
+      z-index: var(--cg-z-index-500);
+      min-width: var(--cg-component-navigation-menu-panel-min-width);
+      padding: var(--cg-spacing-24);
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-border-radius-200);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      display: grid;
+      grid-template-columns: repeat(var(--cg-nm-columns), minmax(0, 1fr));
+      gap: var(--cg-spacing-20);
+      transform-origin: top;
+      animation: navMenuPanelIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    @keyframes navMenuPanelIn {
+      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-6))) scale(0.98); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .section-heading {
+      margin: 0 0 var(--cg-spacing-12) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wider);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    .link {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-12);
+      background: transparent;
+      border: none;
+      text-align: left;
+      color: inherit;
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      text-decoration: none;
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      width: 100%;
+      box-sizing: border-box;
+    }
+    /* Optional leading icon — stacks above the title (vertical rhythm). */
+    .link-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      margin-bottom: var(--cg-spacing-4);
+      background: var(--cg-color-action-tertiary-background-hover);
+      border-radius: var(--cg-border-radius-100);
+      color: var(--cg-color-accent-text);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .link-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+    .link:hover .link-icon { background: var(--cg-color-surface-container-background); }
+    .link:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .link:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .link:focus-visible {
+      outline: none;
+      box-shadow:
+        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);
+    }
+    .link-title {
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .link-desc {
+      font-size: var(--cg-font-size-xs);
+      line-height: var(--cg-line-height-relaxed);
+      color: var(--cg-color-surface-container-outlined);
+    }
+  `];
+o([
+  c({ type: Array })
+], i.prototype, "items", 2);
+o([
+  c({ type: Number })
+], i.prototype, "openDelay", 2);
+o([
+  c({ type: Number })
+], i.prototype, "closeDelay", 2);
+o([
+  c({ type: Number })
+], i.prototype, "columns", 2);
+o([
+  v()
+], i.prototype, "_openIndex", 2);
+i = o([
+  h("cg-navigation-menu")
+], i);
+export {
+  i as CgNavigationMenu
+};
+//# sourceMappingURL=cg-navigation-menu.js.map

package/dist/components/cg-navigation-menu/cg-navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-navigation-menu.js","sources":["../../../src/components/cg-navigation-menu/cg-navigation-menu.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\nexport interface NavMenuLink {\n  title: string;\n  description?: string;\n  icon?: string;\n  href?: string;\n}\n\nexport interface NavMenuSection {\n  heading?: string;\n  links: NavMenuLink[];\n}\n\nexport interface NavMenuItem {\n  label: string;\n  id?: string;\n  sections: NavMenuSection[];\n}\n\n/**\n * @element cg-navigation-menu\n * Horizontal mega-menu with large panel drop-downs grouped by section.\n *\n * @fires {CustomEvent<{menu:string,link:string}>} cg-navigation-menu-select\n */\n@customElement('cg-navigation-menu')\nexport class CgNavigationMenu extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      font-family: var(--cg-font-family-primary);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    [role=\"navigation\"] {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n\n    .trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover,\n    .trigger.open {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .trigger:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .trigger: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\n    /* Caret indicator on triggers — rotates 180° when open. */\n    .trigger-caret {\n      display: inline-flex;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover .trigger-caret,\n    .trigger.open .trigger-caret { color: var(--cg-color-surface-base-text); }\n    .trigger.open .trigger-caret { transform: rotate(180deg); }\n\n    .panel {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-8));\n      left: 0;\n      z-index: var(--cg-z-index-500);\n      min-width: var(--cg-component-navigation-menu-panel-min-width);\n      padding: var(--cg-spacing-24);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-200);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      display: grid;\n      grid-template-columns: repeat(var(--cg-nm-columns), minmax(0, 1fr));\n      gap: var(--cg-spacing-20);\n      transform-origin: top;\n      animation: navMenuPanelIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    @keyframes navMenuPanelIn {\n      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-6))) scale(0.98); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .section-heading {\n      margin: 0 0 var(--cg-spacing-12) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wider);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .link {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      text-align: left;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      text-decoration: none;\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      width: 100%;\n      box-sizing: border-box;\n    }\n    /* Optional leading icon — stacks above the title (vertical rhythm). */\n    .link-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      margin-bottom: var(--cg-spacing-4);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-accent-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .link-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .link:hover .link-icon { background: var(--cg-color-surface-container-background); }\n    .link:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .link:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .link: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    .link-title {\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .link-desc {\n      font-size: var(--cg-font-size-xs);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  @property({ type: Array }) items: NavMenuItem[] = [];\n  @property({ type: Number }) openDelay = 80;\n  @property({ type: Number }) closeDelay = 120;\n  /** Panel grid column count. Default 2. */\n  @property({ type: Number }) columns: 1 | 2 | 3 | 4 = 2;\n\n  @state() private _openIndex = -1;\n  private _openTimer: number | null = null;\n  private _closeTimer: number | null = null;\n\n  private _clearTimers() {\n    if (this._openTimer) { clearTimeout(this._openTimer); this._openTimer = null; }\n    if (this._closeTimer) { clearTimeout(this._closeTimer); this._closeTimer = null; }\n  }\n\n  private _scheduleOpen(i: number): void {\n    this._clearTimers();\n    this._openTimer = window.setTimeout(() => { this._openIndex = i; }, this.openDelay);\n  }\n\n  private _scheduleClose(): void {\n    this._clearTimers();\n    this._closeTimer = window.setTimeout(() => { this._openIndex = -1; }, this.closeDelay);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTimers();\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && this._openIndex !== -1) {\n      e.preventDefault();\n      this._openIndex = -1;\n    }\n  }\n\n  private _selectLink(menu: NavMenuItem, link: NavMenuLink): void {\n    this.dispatchEvent(new CustomEvent('cg-navigation-menu-select', {\n      bubbles: true, composed: true,\n      detail: { menu: menu.id ?? menu.label, link: link.title, href: link.href },\n    }));\n    this._openIndex = -1;\n  }\n\n  override render() {\n    return html`\n      <nav role=\"navigation\" @mouseleave=${this._scheduleClose} @keydown=${this._onKeydown}>\n        ${this.items.map((menu, i) => html`\n          <button\n            class=\"trigger ${this._openIndex === i ? 'open' : ''}\"\n            aria-haspopup=\"menu\"\n            aria-expanded=${this._openIndex === i ? 'true' : 'false'}\n            aria-controls=\"cg-navigation-menu-panel\"\n            @mouseenter=${() => this._scheduleOpen(i)}\n            @focus=${() => { this._openIndex = i; }}\n            @click=${() => { this._openIndex = this._openIndex === i ? -1 : i; }}\n          >\n            <span>${menu.label}</span>\n            <span class=\"trigger-caret\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"6 9 12 15 18 9\"/>\n              </svg>\n            </span>\n          </button>\n        `)}\n        ${this._openIndex >= 0 && this.items[this._openIndex] ? html`\n          <div\n            id=\"cg-navigation-menu-panel\"\n            class=\"panel\"\n            role=\"menu\"\n            style=${`--cg-nm-columns: ${this.columns};`}\n            @mouseenter=${() => { this._clearTimers(); }}\n            @mouseleave=${this._scheduleClose}\n          >\n            ${this.items[this._openIndex]!.sections.map(section => html`\n              <div>\n                ${section.heading ? html`<h4 class=\"section-heading\">${section.heading}</h4>` : nothing}\n                ${section.links.map(link => html`\n                  <button class=\"link\" role=\"menuitem\" @click=${() => this._selectLink(this.items[this._openIndex]!, link)}>\n                    ${link.icon ? html`<span class=\"link-icon\" aria-hidden=\"true\" .innerHTML=${link.icon}></span>` : nothing}\n                    <span class=\"link-title\">${link.title}</span>\n                    ${link.description ? html`<span class=\"link-desc\">${link.description}</span>` : nothing}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-navigation-menu': CgNavigationMenu;\n  }\n}\n"],"names":["CgNavigationMenu","LitElement","i","e","menu","link","html","section","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * <cg-number-input> — Number input with increment/decrement buttons.
+ *
+ * @fires {CustomEvent<{value: number}>} cg-change - On value change
+ */
+export declare class CgNumberInput extends LitElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
+    static styles: import('lit').CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    label: string;
+    disabled: boolean;
+    error: boolean;
+    success: boolean;
+    loading: boolean;
+    size: 'sm' | 'md' | 'lg';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    name: string;
+    required: boolean;
+    updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    private _focused;
+    private _repeatTimer;
+    private _input;
+    private _clamp;
+    private _setValue;
+    private _increment;
+    private _decrement;
+    private _startRepeat;
+    private _stopRepeat;
+    private _onInput;
+    private _onKeyDown;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-number-input': CgNumberInput;
+    }
+}
+//# sourceMappingURL=cg-number-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-number-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-number-input/cg-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA2GnB;IAEyB,KAAK,SAAK;IACV,GAAG,SAAa;IAChB,GAAG,SAAY;IACf,IAAI,SAAK;IACzB,KAAK,SAAM;IACqB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,IAAI,SAAM;IACO,QAAQ,UAAS;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,OAAO,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,YAAY,CAAK;IAET,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,WAAW;IAEnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAKT,oBAAoB;IAEpB,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,266 @@
+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;
+};
+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());
+  }
+  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({}));
+  }
+  formResetCallback() {
+    const e = this.getAttribute("value");
+    this.value = e !== null ? Number(e) : 0;
+  }
+  formStateRestoreCallback(e) {
+    this.value = Number(e);
+  }
+  _clamp(e) {
+    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 })));
+  }
+  _increment() {
+    this._setValue(this.value + this.step);
+  }
+  _decrement() {
+    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);
+    };
+    this._repeatTimer = window.setTimeout(a, r);
+  }
+  _stopRepeat() {
+    clearTimeout(this._repeatTimer);
+  }
+  _onInput(e) {
+    const r = e.target.value, a = parseFloat(r);
+    Number.isNaN(a) || this._setValue(a);
+  }
+  _onKeyDown(e) {
+    e.key === "ArrowUp" ? (e.preventDefault(), this._increment()) : e.key === "ArrowDown" && (e.preventDefault(), this._decrement());
+  }
+  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}
+      <div class="wrapper ${this._focused ? "focused" : ""} ${this.disabled ? "disabled" : ""}">
+        <button class="btn" aria-label="Decrease"
+          ?disabled=${this.disabled || e}
+          @mousedown=${() => this._startRepeat(() => this._decrement())}
+          @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}
+          @touchstart=${(a) => {
+      a.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`
+        <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-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}
+          @input=${this._onInput}
+          @keydown=${this._onKeyDown}
+          @focus=${() => {
+      this._focused = !0;
+    }}
+          @blur=${() => {
+      this._focused = !1;
+    }} />`}
+        <button class="btn" aria-label="Increase"
+          ?disabled=${this.disabled || r}
+          @mousedown=${() => this._startRepeat(() => this._increment())}
+          @mouseup=${this._stopRepeat} @mouseleave=${this._stopRepeat}
+          @touchstart=${(a) => {
+      a.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>
+        </button>
+      </div>
+    `;
+  }
+};
+t.formAssociated = !0;
+t.styles = [f, m, 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);
+      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);
+    }
+    .wrapper.focused {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .wrapper:hover:not(.disabled) {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .wrapper.disabled { opacity: 0.5; cursor: not-allowed; background: var(--cg-color-input-background-disabled); border-color: var(--cg-color-input-border-disabled); }
+
+    /* Error */
+    :host([error]) .wrapper { border-color: var(--cg-color-input-border-error); }
+    :host([error]) .wrapper.focused {
+      border-color: var(--cg-color-status-error-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+    :host([error]) .label { color: var(--cg-color-status-error-text-default); }
+
+    /* Success */
+    :host([success]) .wrapper { border-color: var(--cg-color-status-success-text-default); }
+    :host([success]) .wrapper.focused {
+      border-color: var(--cg-color-status-success-text-default);
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
+    :host([success]) .label { color: var(--cg-color-status-success-text-default); }
+
+    /* Loading */
+    :host([loading]) .wrapper { pointer-events: none; opacity: 0.5; }
+    .loading-spinner {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: cg-number-spin var(--cg-transition-duration-slow) linear infinite;
+      flex-shrink: 0;
+      margin: 0 var(--cg-spacing-4);
+    }
+    @keyframes cg-number-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Rounded variants */
+    :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="full"]) .wrapper { border-radius: var(--cg-border-radius-full); }
+
+    .btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: var(--cg-color-action-secondary-background-default);
+      color: var(--cg-color-surface-base-text);
+      cursor: pointer;
+      padding: 0;
+      flex-shrink: 0;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    .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: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;
+      z-index: 1;
+      position: relative;
+    }
+    .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); }
+
+    input {
+      border: none;
+      outline: none;
+      background: transparent;
+      font-family: inherit;
+      color: var(--cg-color-input-text-default);
+      text-align: center;
+      min-width: 0;
+      -moz-appearance: textfield;
+    }
+    input::-webkit-inner-spin-button,
+    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); }
+
+    .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); }
+  `];
+s([
+  o({ type: Number })
+], t.prototype, "value", 2);
+s([
+  o({ type: Number })
+], t.prototype, "min", 2);
+s([
+  o({ type: Number })
+], t.prototype, "max", 2);
+s([
+  o({ type: Number })
+], t.prototype, "step", 2);
+s([
+  o()
+], t.prototype, "label", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "success", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+s([
+  o({ reflect: !0 })
+], t.prototype, "size", 2);
+s([
+  o({ reflect: !0 })
+], t.prototype, "rounded", 2);
+s([
+  o()
+], t.prototype, "name", 2);
+s([
+  o({ type: Boolean })
+], t.prototype, "required", 2);
+s([
+  g()
+], t.prototype, "_focused", 2);
+s([
+  b("input")
+], t.prototype, "_input", 2);
+t = s([
+  v("cg-number-input")
+], t);
+export {
+  t as CgNumberInput
+};
+//# sourceMappingURL=cg-number-input.js.map

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

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