@cognivo/components 0.8.0

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

@@ -0,0 +1,355 @@
+import { css as h, LitElement as g, nothing as n, html as c } from "lit";
+import { property as s, state as b, customElement as p } from "lit/decorators.js";
+import { a as v, r as f, c as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (r, e, l, i) => {
+  for (var a = i > 1 ? void 0 : i ? k(e, l) : e, u = r.length - 1, d; u >= 0; u--)
+    (d = r[u]) && (a = (i ? d(e, l, a) : d(a)) || a);
+  return i && a && y(e, l, a), a;
+};
+let t = class extends g {
+  constructor() {
+    super(), this._form = null, this.variant = "primary", this.size = "md", this.rounded = "lg", this.type = "normal", this.disabled = !1, this.loading = !1, this.full = !1, this.status = "idle", this.label = "", this.resetDelay = 1500, this.submit = !1, this.successMessage = "Done", this.errorMessage = "Failed", this._liveMessage = "", this._onHostClick = (r) => {
+      this.disabled || this.loading || this.submit && this._submitForm();
+    }, this._onFormKeydown = (r) => {
+      if (r.key !== "Enter" || !this.submit || this.disabled || this.loading) return;
+      const e = r.target;
+      e instanceof HTMLInputElement && (e.type === "submit" || e.type === "button" || e.type === "reset" || (r.preventDefault(), this._submitForm()));
+    }, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  /**
+   * Drive the button through loading → success / error using a Promise.
+   * The button shows the spinner while `task` is pending, then flips
+   * `status` to "success" or "error" on settle, then auto-reverts to
+   * idle after `resetDelay` ms (set 0 to keep the final state).
+   *
+   * @example
+   * btn.runAction(async () => { await api.save(); });
+   */
+  async runAction(r) {
+    this._resetTimer && (clearTimeout(this._resetTimer), this._resetTimer = void 0), this.status = "idle", this._liveMessage = "", this.loading = !0;
+    try {
+      const e = await r();
+      return this.loading = !1, this.status = "success", this._announce(this.successMessage), this._scheduleReset(), e;
+    } catch (e) {
+      throw this.loading = !1, this.status = "error", this._announce(this.errorMessage), this._scheduleReset(), e;
+    }
+  }
+  /**
+   * Push a message into the polite live region. Clearing first then setting
+   * on the next frame is what gets screen readers to announce identical
+   * messages back-to-back (e.g. two consecutive failures).
+   */
+  _announce(r) {
+    r && (this._liveMessage = "", requestAnimationFrame(() => {
+      this._liveMessage = r;
+    }));
+  }
+  _scheduleReset() {
+    this.resetDelay <= 0 || (this._resetTimer = window.setTimeout(() => {
+      this.status = "idle", this._resetTimer = void 0;
+    }, this.resetDelay));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._form = this._internals?.form ?? this.closest("form"), this._form?.addEventListener("keydown", this._onFormKeydown), this.addEventListener("click", this._onHostClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._form?.removeEventListener("keydown", this._onFormKeydown), this.removeEventListener("click", this._onHostClick), this._form = null, this._resetTimer && clearTimeout(this._resetTimer);
+  }
+  _submitForm() {
+    const r = this._internals?.form ?? this._form ?? this.closest("form");
+    r && (typeof r.requestSubmit == "function" ? r.requestSubmit() : r.dispatchEvent(new Event("submit", { bubbles: !0, cancelable: !0 })));
+  }
+  render() {
+    return c`
+      <button
+        type="button"
+        ?disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading ? "true" : "false"}
+        aria-label=${this.label || n}
+      >
+        ${this.loading ? c`<span class="spinner" aria-hidden="true"></span>` : n}
+        ${this.status === "success" && !this.loading ? c`
+          <svg class="status-icon" aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 8.5l3 3 7-7"/>
+          </svg>
+        ` : n}
+        ${this.status === "error" && !this.loading ? c`
+          <svg class="status-icon" aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M4 4l8 8M12 4l-8 8"/>
+          </svg>
+        ` : n}
+        <slot name="prefix"></slot>
+        <slot>${this.label}</slot>
+        <slot name="suffix"></slot>
+      </button>
+      <span class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this._liveMessage}</span>
+    `;
+  }
+};
+t.formAssociated = !0;
+t.styles = [v, f, m, h`
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-8);
+      border: var(--cg-border-width-50) solid transparent;
+      cursor: pointer;
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+      white-space: nowrap;
+      text-decoration: none;
+      transition:
+        background-color var(--cg-transition-duration-fast) ease,
+        border-color var(--cg-transition-duration-fast) ease,
+        box-shadow var(--cg-transition-duration-fast) ease,
+        transform var(--cg-transition-duration-fast) ease;
+      -webkit-font-smoothing: antialiased;
+      position: relative;
+    }
+
+    /* Press scale */
+    button:active:not(:disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    /* Focus ring — dual-layer */
+    button:focus-visible {
+      box-shadow:
+        0 0 0 2px var(--cg-color-focus-ring-offset),
+        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);
+      outline: none;
+    }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) button {
+      padding: 0 var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      border-radius: var(--cg-component-button-radius-sm);
+      height: var(--cg-component-button-height-sm);
+    }
+    :host([size="md"]) button {
+      padding: 0 var(--cg-spacing-16);
+      font-size: var(--cg-font-size-sm);
+      border-radius: var(--cg-component-button-radius-md);
+      height: var(--cg-component-button-height-md);
+    }
+    :host([size="lg"]) button {
+      padding: 0 var(--cg-spacing-24);
+      font-size: var(--cg-font-size-base);
+      border-radius: var(--cg-component-button-radius-lg);
+      height: var(--cg-component-button-height-lg);
+    }
+
+    /* ── Rounded overrides ── */
+    :host([rounded="none"]) button { border-radius: 0; }
+    :host([rounded="sm"]) button { border-radius: var(--cg-component-button-radius-sm); }
+    :host([rounded="md"]) button { border-radius: var(--cg-component-button-radius-md); }
+    :host([rounded="lg"]) button { border-radius: var(--cg-component-button-radius-lg); }
+    :host([rounded="full"]) button { border-radius: var(--cg-border-radius-full); }
+
+    /* ── Primary variant ── */
+    :host([variant="primary"]) button {
+      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);
+    }
+    :host([variant="primary"]) button:not(:disabled):hover {
+      background: var(--cg-color-action-primary-background-hover);
+    }
+
+    /* ── Secondary variant ── */
+    :host([variant="secondary"]) button {
+      background: var(--cg-color-action-secondary-background-default);
+      color: var(--cg-color-action-secondary-text-default);
+      border-color: var(--cg-color-action-secondary-border-default);
+    }
+    :host([variant="secondary"]) button:not(:disabled):hover {
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+
+    /* ── Tertiary (ghost) variant ── */
+    :host([variant="tertiary"]) button {
+      background: transparent;
+      color: var(--cg-color-action-tertiary-text-default);
+      border-color: transparent;
+    }
+    :host([variant="tertiary"]) button:not(:disabled):hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+
+    /* ── Danger type ── */
+    :host([type="danger"]) button {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    :host([type="danger"][variant="primary"]) button {
+      background: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-status-error-text-inverse);
+      border-color: transparent;
+    }
+    :host([type="danger"]) button:not(:disabled):hover {
+      background: var(--cg-color-status-error-background-hover);
+    }
+    :host([type="danger"][variant="primary"]) button:not(:disabled):hover {
+      background: var(--cg-color-status-error-background-hover);
+    }
+
+    /* ── Disabled ── */
+    button:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    /* ── Loading ── */
+    :host([loading]) button {
+      color: transparent;
+      pointer-events: none;
+    }
+    /* Slot contents fade out alongside the label so icons don't sit next to a spinner. */
+    :host([loading]) ::slotted(*) { visibility: hidden; }
+
+    .spinner {
+      position: absolute;
+      border-style: solid;
+      border-color: currentColor;
+      border-right-color: transparent;
+      border-radius: var(--cg-border-radius-full);
+      animation: spin 700ms linear infinite;
+    }
+    /* Spinner scales with the button's size — sm gets a smaller ring than lg. */
+    :host([size="sm"]) .spinner {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border-width: var(--cg-border-width-50);
+    }
+    :host([size="md"]) .spinner {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      border-width: var(--cg-border-width-100);
+    }
+    :host([size="lg"]) .spinner {
+      width: var(--cg-icon-size-150);
+      height: var(--cg-icon-size-150);
+      border-width: var(--cg-border-width-100);
+    }
+    :host([loading]) .spinner { color: var(--cg-color-action-primary-text-default); }
+    :host([loading][variant="secondary"]) .spinner { color: var(--cg-color-action-secondary-text-default); }
+    :host([loading][variant="tertiary"]) .spinner { color: var(--cg-color-action-tertiary-text-default); }
+
+    /* ── Status (success/error after a runAction) ── */
+    /* Hide the label + slotted icons while the status icon is showing. */
+    :host([status="success"]:not([loading])) button,
+    :host([status="error"]:not([loading])) button { color: transparent; }
+    :host([status="success"]:not([loading])) ::slotted(*),
+    :host([status="error"]:not([loading])) ::slotted(*) { visibility: hidden; }
+
+    .status-icon {
+      position: absolute;
+      stroke: currentColor;
+      animation: cg-button-pop var(--cg-transition-duration-default) var(--cg-transition-easing-spring) both;
+    }
+    :host([size="sm"]) .status-icon { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+    :host([size="md"]) .status-icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+    :host([size="lg"]) .status-icon { width: var(--cg-icon-size-150); height: var(--cg-icon-size-150); }
+
+    @keyframes cg-button-pop {
+      from { opacity: 0; transform: scale(0.4); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+
+    /* ── Error state ── */
+    :host([status="error"]) button {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    :host([status="error"]:not([loading])) .status-icon {
+      color: var(--cg-color-status-error-text-default);
+    }
+    :host([status="error"]) button:not(:disabled):hover {
+      background: var(--cg-color-status-error-background-hover);
+    }
+    :host([status="error"]) .spinner { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Success state ── */
+    :host([status="success"]) button {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      border-color: var(--cg-color-status-success-border-default);
+    }
+    :host([status="success"]:not([loading])) .status-icon {
+      color: var(--cg-color-status-success-text-default);
+    }
+    :host([status="success"]) button:not(:disabled):hover {
+      background: var(--cg-color-status-success-background-hover);
+    }
+    :host([status="success"]) .spinner { color: var(--cg-color-status-success-text-default); }
+
+    /* ── Full width ── */
+    :host([full]) {
+      display: block;
+      width: 100%;
+    }
+    :host([full]) button {
+      width: 100%;
+    }
+
+    /* Visually-hidden live region for screen-reader status announcements. */
+    .sr-only {
+      position: absolute; width: 1px; height: 1px;
+      padding: 0; margin: -1px; overflow: hidden;
+      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `];
+o([
+  s({ reflect: !0 })
+], t.prototype, "variant", 2);
+o([
+  s({ reflect: !0 })
+], t.prototype, "size", 2);
+o([
+  s({ reflect: !0 })
+], t.prototype, "rounded", 2);
+o([
+  s({ reflect: !0 })
+], t.prototype, "type", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+o([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "full", 2);
+o([
+  s({ reflect: !0 })
+], t.prototype, "status", 2);
+o([
+  s()
+], t.prototype, "label", 2);
+o([
+  s({ type: Number, attribute: "reset-delay" })
+], t.prototype, "resetDelay", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "submit", 2);
+o([
+  s({ attribute: "success-message" })
+], t.prototype, "successMessage", 2);
+o([
+  s({ attribute: "error-message" })
+], t.prototype, "errorMessage", 2);
+o([
+  b()
+], t.prototype, "_liveMessage", 2);
+t = o([
+  p("cg-button")
+], t);
+export {
+  t as CgButton
+};
+//# sourceMappingURL=cg-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-button.js","sources":["../../../src/components/cg-button/cg-button.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, spinKeyframes } from '../../styles/index.js';\n\n/**\n * @element cg-button\n * Button with variants, sizes, prefix/suffix icon slots, scaled loading\n * spinner, and a click → loading → success/error lifecycle via runAction().\n *\n * cg-button is a form-associated custom element. Set `submit` to true and the\n * button submits its parent form on click, and on Enter pressed inside any\n * non-textarea input within the same form. Submission flows through\n * ElementInternals rather than native bubbling, since the inner button lives\n * in shadow DOM and can't reach the outer form.\n *\n * @example Default\n * ```html\n * <cg-button variant=\"primary\">Click me</cg-button>\n * ```\n *\n * @example With icons\n * ```html\n * <cg-button variant=\"primary\">\n *   <cg-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></cg-icon>\n *   Create\n * </cg-button>\n * ```\n *\n * @example Async action\n * ```ts\n * const btn = document.querySelector('cg-button');\n * btn.runAction(async () => { await api.save(); });\n * // → spinner → ✓ pop → auto-revert after 1.5s\n * ```\n *\n * @slot - Default slot for button text/content\n * @slot prefix - Icon or content before the label\n * @slot suffix - Icon or content after the label\n *\n * @method runAction - Drive the button through loading → success / error\n *   using a Promise. Re-throws on rejection.\n *\n * @cssprop --cg-color-action-primary-background-default - Primary button background color\n * @cssprop --cg-component-button-height-md - Button height (md size, 48px)\n * @cssprop --cg-interaction-press-scale - Scale on press/active (0.97)\n * @cssprop --cg-transition-duration-fast - Color transition speed\n */\n@customElement('cg-button')\nexport class CgButton extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n  private _form: HTMLFormElement | null = null;\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, spinKeyframes, css`\n    button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      border: var(--cg-border-width-50) solid transparent;\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      text-decoration: none;\n      transition:\n        background-color var(--cg-transition-duration-fast) ease,\n        border-color var(--cg-transition-duration-fast) ease,\n        box-shadow var(--cg-transition-duration-fast) ease,\n        transform var(--cg-transition-duration-fast) ease;\n      -webkit-font-smoothing: antialiased;\n      position: relative;\n    }\n\n    /* Press scale */\n    button:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring — dual-layer */\n    button:focus-visible {\n      box-shadow:\n        0 0 0 2px var(--cg-color-focus-ring-offset),\n        0 0 0 calc(2px + 2px) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) button {\n      padding: 0 var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      border-radius: var(--cg-component-button-radius-sm);\n      height: var(--cg-component-button-height-sm);\n    }\n    :host([size=\"md\"]) button {\n      padding: 0 var(--cg-spacing-16);\n      font-size: var(--cg-font-size-sm);\n      border-radius: var(--cg-component-button-radius-md);\n      height: var(--cg-component-button-height-md);\n    }\n    :host([size=\"lg\"]) button {\n      padding: 0 var(--cg-spacing-24);\n      font-size: var(--cg-font-size-base);\n      border-radius: var(--cg-component-button-radius-lg);\n      height: var(--cg-component-button-height-lg);\n    }\n\n    /* ── Rounded overrides ── */\n    :host([rounded=\"none\"]) button { border-radius: 0; }\n    :host([rounded=\"sm\"]) button { border-radius: var(--cg-component-button-radius-sm); }\n    :host([rounded=\"md\"]) button { border-radius: var(--cg-component-button-radius-md); }\n    :host([rounded=\"lg\"]) button { border-radius: var(--cg-component-button-radius-lg); }\n    :host([rounded=\"full\"]) button { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Primary variant ── */\n    :host([variant=\"primary\"]) button {\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    }\n    :host([variant=\"primary\"]) button:not(:disabled):hover {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Secondary variant ── */\n    :host([variant=\"secondary\"]) button {\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-action-secondary-text-default);\n      border-color: var(--cg-color-action-secondary-border-default);\n    }\n    :host([variant=\"secondary\"]) button:not(:disabled):hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n\n    /* ── Tertiary (ghost) variant ── */\n    :host([variant=\"tertiary\"]) button {\n      background: transparent;\n      color: var(--cg-color-action-tertiary-text-default);\n      border-color: transparent;\n    }\n    :host([variant=\"tertiary\"]) button:not(:disabled):hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n\n    /* ── Danger type ── */\n    :host([type=\"danger\"]) button {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([type=\"danger\"][variant=\"primary\"]) button {\n      background: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-inverse);\n      border-color: transparent;\n    }\n    :host([type=\"danger\"]) button:not(:disabled):hover {\n      background: var(--cg-color-status-error-background-hover);\n    }\n    :host([type=\"danger\"][variant=\"primary\"]) button:not(:disabled):hover {\n      background: var(--cg-color-status-error-background-hover);\n    }\n\n    /* ── Disabled ── */\n    button:disabled {\n      opacity: 0.5;\n      pointer-events: none;\n    }\n\n    /* ── Loading ── */\n    :host([loading]) button {\n      color: transparent;\n      pointer-events: none;\n    }\n    /* Slot contents fade out alongside the label so icons don't sit next to a spinner. */\n    :host([loading]) ::slotted(*) { visibility: hidden; }\n\n    .spinner {\n      position: absolute;\n      border-style: solid;\n      border-color: currentColor;\n      border-right-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 700ms linear infinite;\n    }\n    /* Spinner scales with the button's size — sm gets a smaller ring than lg. */\n    :host([size=\"sm\"]) .spinner {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border-width: var(--cg-border-width-50);\n    }\n    :host([size=\"md\"]) .spinner {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"lg\"]) .spinner {\n      width: var(--cg-icon-size-150);\n      height: var(--cg-icon-size-150);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([loading]) .spinner { color: var(--cg-color-action-primary-text-default); }\n    :host([loading][variant=\"secondary\"]) .spinner { color: var(--cg-color-action-secondary-text-default); }\n    :host([loading][variant=\"tertiary\"]) .spinner { color: var(--cg-color-action-tertiary-text-default); }\n\n    /* ── Status (success/error after a runAction) ── */\n    /* Hide the label + slotted icons while the status icon is showing. */\n    :host([status=\"success\"]:not([loading])) button,\n    :host([status=\"error\"]:not([loading])) button { color: transparent; }\n    :host([status=\"success\"]:not([loading])) ::slotted(*),\n    :host([status=\"error\"]:not([loading])) ::slotted(*) { visibility: hidden; }\n\n    .status-icon {\n      position: absolute;\n      stroke: currentColor;\n      animation: cg-button-pop var(--cg-transition-duration-default) var(--cg-transition-easing-spring) both;\n    }\n    :host([size=\"sm\"]) .status-icon { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    :host([size=\"md\"]) .status-icon { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    :host([size=\"lg\"]) .status-icon { width: var(--cg-icon-size-150); height: var(--cg-icon-size-150); }\n\n    @keyframes cg-button-pop {\n      from { opacity: 0; transform: scale(0.4); }\n      to   { opacity: 1; transform: scale(1); }\n    }\n\n    /* ── Error state ── */\n    :host([status=\"error\"]) button {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([status=\"error\"]:not([loading])) .status-icon {\n      color: var(--cg-color-status-error-text-default);\n    }\n    :host([status=\"error\"]) button:not(:disabled):hover {\n      background: var(--cg-color-status-error-background-hover);\n    }\n    :host([status=\"error\"]) .spinner { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success state ── */\n    :host([status=\"success\"]) button {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-border-default);\n    }\n    :host([status=\"success\"]:not([loading])) .status-icon {\n      color: var(--cg-color-status-success-text-default);\n    }\n    :host([status=\"success\"]) button:not(:disabled):hover {\n      background: var(--cg-color-status-success-background-hover);\n    }\n    :host([status=\"success\"]) .spinner { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Full width ── */\n    :host([full]) {\n      display: block;\n      width: 100%;\n    }\n    :host([full]) button {\n      width: 100%;\n    }\n\n    /* Visually-hidden live region for screen-reader status announcements. */\n    .sr-only {\n      position: absolute; width: 1px; height: 1px;\n      padding: 0; margin: -1px; overflow: hidden;\n      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;\n    }\n  `];\n\n  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ reflect: true }) type: 'normal' | 'danger' = 'normal';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean, reflect: true }) full = false;\n  @property({ reflect: true }) status: 'idle' | 'error' | 'success' = 'idle';\n  @property() label = '';\n  /** Auto-revert status back to idle this many ms after success/error. 0 disables. */\n  @property({ type: Number, attribute: 'reset-delay' }) resetDelay = 1500;\n  /** Set to true to submit the surrounding form on click (native `type=\"submit\"`). */\n  @property({ type: Boolean }) submit = false;\n  /**\n   * Message announced to screen readers on a successful runAction(). Defaults\n   * to \"Done\". Set to empty string to suppress the announcement.\n   */\n  @property({ attribute: 'success-message' }) successMessage = 'Done';\n  /**\n   * Message announced to screen readers on a failed runAction(). Defaults\n   * to \"Failed\". Set to empty string to suppress the announcement.\n   */\n  @property({ attribute: 'error-message' }) errorMessage = 'Failed';\n\n  private _resetTimer: number | undefined;\n  /** Live-region content. Empty between announcements. */\n  @state() private _liveMessage = '';\n\n  /**\n   * Drive the button through loading → success / error using a Promise.\n   * The button shows the spinner while `task` is pending, then flips\n   * `status` to \"success\" or \"error\" on settle, then auto-reverts to\n   * idle after `resetDelay` ms (set 0 to keep the final state).\n   *\n   * @example\n   * btn.runAction(async () => { await api.save(); });\n   */\n  async runAction<T>(task: () => Promise<T>): Promise<T | undefined> {\n    if (this._resetTimer) {\n      clearTimeout(this._resetTimer);\n      this._resetTimer = undefined;\n    }\n    this.status = 'idle';\n    this._liveMessage = '';\n    this.loading = true;\n    try {\n      const result = await task();\n      this.loading = false;\n      this.status = 'success';\n      this._announce(this.successMessage);\n      this._scheduleReset();\n      return result;\n    } catch (err) {\n      this.loading = false;\n      this.status = 'error';\n      this._announce(this.errorMessage);\n      this._scheduleReset();\n      throw err;\n    }\n  }\n\n  /**\n   * Push a message into the polite live region. Clearing first then setting\n   * on the next frame is what gets screen readers to announce identical\n   * messages back-to-back (e.g. two consecutive failures).\n   */\n  private _announce(message: string): void {\n    if (!message) return;\n    this._liveMessage = '';\n    requestAnimationFrame(() => { this._liveMessage = message; });\n  }\n\n  private _scheduleReset(): void {\n    if (this.resetDelay <= 0) return;\n    this._resetTimer = window.setTimeout(() => {\n      this.status = 'idle';\n      this._resetTimer = undefined;\n    }, this.resetDelay);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._form = this._internals?.form ?? this.closest('form');\n    this._form?.addEventListener('keydown', this._onFormKeydown);\n    this.addEventListener('click', this._onHostClick);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._form?.removeEventListener('keydown', this._onFormKeydown);\n    this.removeEventListener('click', this._onHostClick);\n    this._form = null;\n    if (this._resetTimer) clearTimeout(this._resetTimer);\n  }\n\n  private _onHostClick = (_e: Event): void => {\n    if (this.disabled || this.loading) return;\n    if (!this.submit) return;\n    this._submitForm();\n  };\n\n  private _onFormKeydown = (e: KeyboardEvent): void => {\n    if (e.key !== 'Enter' || !this.submit || this.disabled || this.loading) return;\n    const target = e.target as HTMLElement | null;\n    if (!(target instanceof HTMLInputElement)) return;\n    if (target.type === 'submit' || target.type === 'button' || target.type === 'reset') return;\n    e.preventDefault();\n    this._submitForm();\n  };\n\n  private _submitForm(): void {\n    const form = this._internals?.form ?? this._form ?? this.closest('form');\n    if (!form) return;\n    if (typeof form.requestSubmit === 'function') {\n      form.requestSubmit();\n    } else {\n      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n    }\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        ?disabled=${this.disabled || this.loading}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        aria-label=${this.label || nothing}\n      >\n        ${this.loading ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>` : nothing}\n        ${this.status === 'success' && !this.loading ? html`\n          <svg class=\"status-icon\" aria-hidden=\"true\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M3 8.5l3 3 7-7\"/>\n          </svg>\n        ` : nothing}\n        ${this.status === 'error' && !this.loading ? html`\n          <svg class=\"status-icon\" aria-hidden=\"true\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M4 4l8 8M12 4l-8 8\"/>\n          </svg>\n        ` : nothing}\n        <slot name=\"prefix\"></slot>\n        <slot>${this.label}</slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">${this._liveMessage}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-button': CgButton;\n  }\n}\n"],"names":["CgButton","LitElement","_e","e","target","task","result","err","message","form","html","nothing","hostBase","reducedMotion","spinKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-button-group/cg-button-group.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-button-group> — Groups buttons with optional attached mode.
+ *
+ * Features:
+ * - Row or column direction
+ * - Attached mode (no gap, shared border radius)
+ * - Gap size control
+ * - Alignment (start/center/end/stretch)
+ * - ARIA group role
+ */
+export declare class CgButtonGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    direction: 'row' | 'column';
+    gap: 'none' | 'xs' | 'sm' | 'md';
+    align: 'start' | 'center' | 'end' | 'stretch';
+    attached: boolean;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-button-group': CgButtonGroup;
+    }
+}
+//# sourceMappingURL=cg-button-group.d.ts.map

package/dist/components/cg-button-group/cg-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-button-group/cg-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAqDnB;IAE0B,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAS;IACpC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACxC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAW;IACzC,QAAQ,UAAS;IAEpD,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,iBAAiB,EAAE,aAAa,CAAC;KAAE;CACtE"}

package/dist/components/cg-button-group/cg-button-group.js

@@ -0,0 +1,89 @@
+import { css as n, LitElement as g, html as p } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
+import { a as h, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, e = (c, o, d, a) => {
+  for (var r = a > 1 ? void 0 : a ? m(o, d) : o, i = c.length - 1, l; i >= 0; i--)
+    (l = c[i]) && (r = (a ? l(o, d, r) : l(r)) || r);
+  return a && r && f(o, d, r), r;
+};
+let t = class extends g {
+  constructor() {
+    super(...arguments), this.direction = "row", this.gap = "sm", this.align = "start", this.attached = !1;
+  }
+  render() {
+    return p`<div role="group"><slot></slot></div>`;
+  }
+};
+t.styles = [h, v, n`
+    div[role="group"] {
+      display: flex;
+    }
+
+    /* Direction */
+    :host([direction="row"]) div[role="group"] { flex-direction: row; }
+    :host([direction="column"]) div[role="group"] { flex-direction: column; width: 100%; }
+
+    /* Gap */
+    :host([gap="none"]) div[role="group"] { gap: 0; }
+    :host([gap="xs"]) div[role="group"] { gap: var(--cg-spacing-4); }
+    :host([gap="sm"]) div[role="group"] { gap: var(--cg-spacing-8); }
+    :host([gap="md"]) div[role="group"] { gap: var(--cg-spacing-12); }
+
+    /* Alignment */
+    :host([align="start"]) div[role="group"] { justify-content: flex-start; }
+    :host([align="center"]) div[role="group"] { justify-content: center; }
+    :host([align="end"]) div[role="group"] { justify-content: flex-end; }
+    :host([align="stretch"]) ::slotted(*) { flex: 1; }
+
+    /* Attached mode — buttons share borders */
+    :host([attached]) {
+      gap: 0;
+    }
+    :host([attached]) ::slotted(*) {
+      border-radius: 0;
+      margin-left: -1px;
+    }
+    :host([attached]) ::slotted(*:first-child) {
+      margin-left: 0;
+      border-radius: var(--cg-border-radius-150) 0 0 var(--cg-border-radius-150);
+    }
+    :host([attached]) ::slotted(*:last-child) {
+      border-radius: 0 var(--cg-border-radius-150) var(--cg-border-radius-150) 0;
+    }
+    :host([attached]) ::slotted(*:only-child) {
+      border-radius: var(--cg-border-radius-150);
+      margin-left: 0;
+    }
+
+    /* Attached vertical */
+    :host([attached][direction="column"]) ::slotted(*) {
+      margin-left: 0;
+      margin-top: -1px;
+    }
+    :host([attached][direction="column"]) ::slotted(*:first-child) {
+      margin-top: 0;
+      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) 0 0;
+    }
+    :host([attached][direction="column"]) ::slotted(*:last-child) {
+      border-radius: 0 0 var(--cg-border-radius-150) var(--cg-border-radius-150);
+    }
+  `];
+e([
+  s({ reflect: !0 })
+], t.prototype, "direction", 2);
+e([
+  s({ reflect: !0 })
+], t.prototype, "gap", 2);
+e([
+  s({ reflect: !0 })
+], t.prototype, "align", 2);
+e([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "attached", 2);
+t = e([
+  u("cg-button-group")
+], t);
+export {
+  t as CgButtonGroup
+};
+//# sourceMappingURL=cg-button-group.js.map

package/dist/components/cg-button-group/cg-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-button-group.js","sources":["../../../src/components/cg-button-group/cg-button-group.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-button-group> — Groups buttons with optional attached mode.\n *\n * Features:\n * - Row or column direction\n * - Attached mode (no gap, shared border radius)\n * - Gap size control\n * - Alignment (start/center/end/stretch)\n * - ARIA group role\n */\n@customElement('cg-button-group')\nexport class CgButtonGroup extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    div[role=\"group\"] {\n      display: flex;\n    }\n\n    /* Direction */\n    :host([direction=\"row\"]) div[role=\"group\"] { flex-direction: row; }\n    :host([direction=\"column\"]) div[role=\"group\"] { flex-direction: column; width: 100%; }\n\n    /* Gap */\n    :host([gap=\"none\"]) div[role=\"group\"] { gap: 0; }\n    :host([gap=\"xs\"]) div[role=\"group\"] { gap: var(--cg-spacing-4); }\n    :host([gap=\"sm\"]) div[role=\"group\"] { gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) div[role=\"group\"] { gap: var(--cg-spacing-12); }\n\n    /* Alignment */\n    :host([align=\"start\"]) div[role=\"group\"] { justify-content: flex-start; }\n    :host([align=\"center\"]) div[role=\"group\"] { justify-content: center; }\n    :host([align=\"end\"]) div[role=\"group\"] { justify-content: flex-end; }\n    :host([align=\"stretch\"]) ::slotted(*) { flex: 1; }\n\n    /* Attached mode — buttons share borders */\n    :host([attached]) {\n      gap: 0;\n    }\n    :host([attached]) ::slotted(*) {\n      border-radius: 0;\n      margin-left: -1px;\n    }\n    :host([attached]) ::slotted(*:first-child) {\n      margin-left: 0;\n      border-radius: var(--cg-border-radius-150) 0 0 var(--cg-border-radius-150);\n    }\n    :host([attached]) ::slotted(*:last-child) {\n      border-radius: 0 var(--cg-border-radius-150) var(--cg-border-radius-150) 0;\n    }\n    :host([attached]) ::slotted(*:only-child) {\n      border-radius: var(--cg-border-radius-150);\n      margin-left: 0;\n    }\n\n    /* Attached vertical */\n    :host([attached][direction=\"column\"]) ::slotted(*) {\n      margin-left: 0;\n      margin-top: -1px;\n    }\n    :host([attached][direction=\"column\"]) ::slotted(*:first-child) {\n      margin-top: 0;\n      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) 0 0;\n    }\n    :host([attached][direction=\"column\"]) ::slotted(*:last-child) {\n      border-radius: 0 0 var(--cg-border-radius-150) var(--cg-border-radius-150);\n    }\n  `];\n\n  @property({ reflect: true }) direction: 'row' | 'column' = 'row';\n  @property({ reflect: true }) gap: 'none' | 'xs' | 'sm' | 'md' = 'sm';\n  @property({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'start';\n  @property({ type: Boolean, reflect: true }) attached = false;\n\n  override render() {\n    return html`<div role=\"group\"><slot></slot></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-button-group': CgButtonGroup; }\n}\n"],"names":["CgButtonGroup","LitElement","html","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwDwB,KAAA,YAA8B,OAC9B,KAAA,MAAmC,MACnC,KAAA,QAAgD,SACjC,KAAA,WAAW;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAhEaF,EACK,SAAS,CAACG,GAAUC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqDlD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxDhBP,EAwDkB,WAAA,aAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzDhBP,EAyDkB,WAAA,OAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1DhBP,EA0DkB,WAAA,SAAA,CAAA;AACeM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BP,EA2DiC,WAAA,YAAA,CAAA;AA3DjCA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}

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

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-calendar
+ * Full month calendar view with single/range/multiple selection modes,
+ * keyboard navigation, and min/max bounds.
+ *
+ * @example
+ * ```html
+ * <cg-calendar value="2026-04-15"></cg-calendar>
+ * <cg-calendar mode="range" value="2026-04-10" range-end="2026-04-20"></cg-calendar>
+ * ```
+ *
+ * @fires {CustomEvent<{value: string, rangeEnd?: string}>} cg-calendar-change
+ */
+export declare class CgCalendar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    value: string;
+    rangeEnd: string;
+    mode: 'single' | 'range' | 'multiple';
+    min: string;
+    max: string;
+    weekStartsOn: 0 | 1;
+    name: string;
+    private _displayYear;
+    private _displayMonth;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _parseDate;
+    private _formatISO;
+    private _getDaysInMonth;
+    private _getFirstDayOfWeek;
+    private _isToday;
+    private _isSameDay;
+    private _isDisabled;
+    private _prevMonth;
+    private _nextMonth;
+    private _onGridKeydown;
+    private _selectDate;
+    private _getWeekdayNames;
+    private _getMonthName;
+    private _getDayClasses;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-calendar': CgCalendar;
+    }
+}
+//# sourceMappingURL=cg-calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-calendar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-calendar/cg-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAiInB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAS1B,KAAK,SAAM;IACe,QAAQ,SAAM;IACxC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAY;IACjD,GAAG,SAAM;IACT,GAAG,SAAM;IACoC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAK;IACrE,IAAI,SAAM;IAEb,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,aAAa,CAAyB;IAE9C,iBAAiB,IAAI,IAAI;IAWzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAcrD,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAuBb,MAAM;CA0DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}