@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +1 @@
-{"version":3,"file":"cg-breadcrumbs.js","sources":["../../../src/components/cg-breadcrumbs/cg-breadcrumbs.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Breadcrumb segment for cg-breadcrumbs, with label, optional href, and optional icon. */\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  icon?: string;\n}\n\n/**\n * @element cg-breadcrumbs\n * Navigation breadcrumb trail with responsive collapse and custom separators.\n *\n * @example\n * ```html\n * <cg-breadcrumbs\n *   separator=\"/\"\n *   .items=${[\n *     {label:'Home', href:'/'},\n *     {label:'Products', href:'/products'},\n *     {label:'Widget'},\n *   ]}\n * ></cg-breadcrumbs>\n * <cg-breadcrumbs maxVisible=\"3\" .items=${longTrail}></cg-breadcrumbs>\n * ```\n *\n * @fires {CustomEvent<{label: string, href?: string, index: number}>} cg-breadcrumb-click - When a breadcrumb link is clicked\n *\n * @cssprop [--cg-color-text-secondary=#a1a1aa] - Link text color\n * @cssprop [--cg-color-text-primary=#fafafa] - Current page text color\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring color\n * @cssprop [--cg-font-size-sm=14px] - Breadcrumb font size (md)\n */\n@customElement('cg-breadcrumbs')\nexport class CgBreadcrumbs extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    nav {\n      display: flex;\n      align-items: center;\n    }\n\n    .breadcrumb-list {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 0;\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: inline-flex;\n      align-items: center;\n      min-width: 0;\n    }\n\n    .separator {\n      display: inline-flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-8);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      user-select: none;\n      flex-shrink: 0;\n    }\n\n    .crumb-link {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) 0;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      text-decoration: none;\n      text-underline-offset: var(--cg-spacing-4);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 200px;\n      cursor: pointer;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      line-height: var(--cg-line-height-snug);\n      border-radius: var(--cg-border-radius-50);\n      -webkit-font-smoothing: antialiased;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .crumb-link:hover {\n      color: var(--cg-color-surface-base-text);\n      text-decoration: underline;\n    }\n\n    .crumb-link:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .crumb-link:focus-visible {\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* Current (last) item */\n    .crumb-current {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 200px;\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .crumb-icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      font-size: var(--cg-font-size-sm);\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      justify-content: center;\n    }\n\n    /* ── Ellipsis button ── */\n    .ellipsis {\n      display: inline-flex;\n      align-items: center;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: var(--cg-spacing-2) var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      letter-spacing: var(--cg-letter-spacing-widest);\n    }\n\n    .ellipsis:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .ellipsis:focus-visible {\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .crumb-link,\n    :host([size=\"sm\"]) .crumb-current { font-size: var(--cg-font-size-xs); }\n    :host([size=\"sm\"]) .separator { padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-xs); }\n    :host([size=\"sm\"]) .ellipsis { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"lg\"]) .crumb-link,\n    :host([size=\"lg\"]) .crumb-current { font-size: var(--cg-font-size-base); }\n    :host([size=\"lg\"]) .separator { padding: 0 var(--cg-spacing-8); font-size: var(--cg-font-size-sm); }\n    :host([size=\"lg\"]) .ellipsis { font-size: var(--cg-font-size-base); }\n\n    /* ── Responsive collapse on small screens ── */\n    @media (max-width: 640px) {\n      .breadcrumb-item.collapsible-middle {\n        display: none;\n      }\n\n      .breadcrumb-item.ellipsis-item-auto {\n        display: inline-flex;\n      }\n\n      .crumb-link,\n      .crumb-current {\n        max-width: 120px;\n      }\n    }\n\n    /* When not on small screen, hide the auto-collapse ellipsis */\n    @media (min-width: 641px) {\n      .breadcrumb-item.ellipsis-item-auto {\n        display: none;\n      }\n    }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) items: BreadcrumbItem[] = [];\n  @property({ type: String }) separator = '/';\n\n  /** Max visible items (0 = show all). Always shows first + last (maxVisible - 1) items. */\n  @property({ type: Number }) maxVisible = 0;\n\n  @state() private _expanded = false;\n\n  private _handleClick(item: BreadcrumbItem, index: number) {\n    this.dispatchEvent(new CustomEvent('cg-breadcrumb-click', {\n      bubbles: true,\n      composed: true,\n      detail: { label: item.label, href: item.href, index },\n    }));\n  }\n\n  private _expandCollapsed() {\n    this._expanded = true;\n  }\n\n  private _renderCrumb(item: BreadcrumbItem, index: number, isLast: boolean) {\n    if (isLast) {\n      return html`\n        <span class=\"crumb-current\" aria-current=\"page\">\n          ${item.icon ? html`<span class=\"crumb-icon\">${item.icon}</span>` : nothing}\n          ${item.label}\n        </span>\n      `;\n    }\n\n    if (item.href) {\n      return html`\n        <a\n          class=\"crumb-link\"\n          href=\"${item.href}\"\n          @click=\"${(e: Event) => { e.preventDefault(); this._handleClick(item, index); }}\"\n        >\n          ${item.icon ? html`<span class=\"crumb-icon\">${item.icon}</span>` : nothing}\n          ${item.label}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"crumb-link\"\n        @click=\"${() => this._handleClick(item, index)}\"\n      >\n        ${item.icon ? html`<span class=\"crumb-icon\">${item.icon}</span>` : nothing}\n        ${item.label}\n      </button>\n    `;\n  }\n\n  private _renderItem(item: BreadcrumbItem, index: number, isLast: boolean, extraClass = '') {\n    return html`\n      <li class=\"breadcrumb-item ${extraClass}\">\n        ${this._renderCrumb(item, index, isLast)}\n        ${!isLast ? html`\n          <span class=\"separator\" aria-hidden=\"true\">${this.separator}</span>\n        ` : nothing}\n      </li>\n    `;\n  }\n\n  private _renderEllipsis(cssClass = '') {\n    return html`\n      <li class=\"breadcrumb-item ${cssClass}\">\n        <button\n          class=\"ellipsis\"\n          @click=\"${this._expandCollapsed}\"\n          aria-label=\"Show all breadcrumb items\"\n        >&hellip;</button>\n        <span class=\"separator\" aria-hidden=\"true\">${this.separator}</span>\n      </li>\n    `;\n  }\n\n  override render() {\n    if (!this.items.length) return nothing;\n\n    const items = this.items;\n    const shouldCollapse = this.maxVisible > 0 && items.length > this.maxVisible && !this._expanded;\n\n    if (shouldCollapse) {\n      // Show first item, ellipsis, then last (maxVisible - 1) items\n      const tailCount = Math.max(1, this.maxVisible - 1);\n      const firstItem = items[0]!;\n      const tailItems = items.slice(items.length - tailCount);\n\n      return html`\n        <nav aria-label=\"Breadcrumb\">\n          <ol class=\"breadcrumb-list\">\n            ${this._renderItem(firstItem, 0, false)}\n            ${this._renderEllipsis()}\n            ${tailItems.map((item, i) => {\n              const originalIndex = items.length - tailCount + i;\n              const isLast = originalIndex === items.length - 1;\n              return this._renderItem(item, originalIndex, isLast);\n            })}\n          </ol>\n        </nav>\n      `;\n    }\n\n    // Full render — with auto-collapse classes for CSS media query on small screens\n    const hasAutoCollapsibleMiddle = items.length > 3;\n\n    return html`\n      <nav aria-label=\"Breadcrumb\">\n        <ol class=\"breadcrumb-list\">\n          ${items.map((item, index) => {\n            const isLast = index === items.length - 1;\n            const isFirst = index === 0;\n            const isMiddle = !isFirst && !isLast && hasAutoCollapsibleMiddle;\n            return html`\n              ${this._renderItem(item, index, isLast, isMiddle ? 'collapsible-middle' : '')}\n              ${isFirst && hasAutoCollapsibleMiddle ? this._renderEllipsis('ellipsis-item-auto') : nothing}\n            `;\n          })}\n        </ol>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-breadcrumbs': CgBreadcrumbs;\n  }\n}\n"],"names":["CgBreadcrumbs","LitElement","item","index","isLast","html","nothing","e","extraClass","cssClass","items","tailCount","firstItem","tailItems","i","originalIndex","hasAutoCollapsibleMiddle","isFirst","isMiddle","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-breadcrumbs.js","sources":["../../../src/components/cg-breadcrumbs/cg-breadcrumbs.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Breadcrumb segment for cg-breadcrumbs, with label, optional href, and optional icon. */\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  icon?: string;\n}\n\n/**\n * @element cg-breadcrumbs\n * Navigation breadcrumb trail with responsive collapse and custom separators.\n *\n * @example\n * ```html\n * <cg-breadcrumbs\n *   separator=\"/\"\n *   .items=${[\n *     {label:'Home', href:'/'},\n *     {label:'Products', href:'/products'},\n *     {label:'Widget'},\n *   ]}\n * ></cg-breadcrumbs>\n * <cg-breadcrumbs maxVisible=\"3\" .items=${longTrail}></cg-breadcrumbs>\n * ```\n *\n * @fires {CustomEvent<{label: string, href?: string, index: number}>} cg-breadcrumb-click - When a breadcrumb link is clicked\n *\n * @cssprop [--cg-color-text-secondary=#a1a1aa] - Link text color\n * @cssprop [--cg-color-text-primary=#fafafa] - Current page text color\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring color\n * @cssprop [--cg-font-size-sm=14px] - Breadcrumb font size (md)\n */\n@customElement('cg-breadcrumbs')\nexport class CgBreadcrumbs extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    nav {\n      display: flex;\n      align-items: center;\n    }\n\n    .breadcrumb-list {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 0;\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: inline-flex;\n      align-items: center;\n      min-width: 0;\n    }\n\n    .separator {\n      display: inline-flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-8);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      user-select: none;\n      flex-shrink: 0;\n    }\n\n    .crumb-link {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) 0;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-text);\n      text-decoration: none;\n      text-underline-offset: var(--cg-spacing-4);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 200px;\n      cursor: pointer;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      line-height: var(--cg-line-height-snug);\n      border-radius: var(--cg-border-radius-50);\n      -webkit-font-smoothing: antialiased;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .crumb-link:hover {\n      color: var(--cg-color-surface-base-text);\n      text-decoration: underline;\n    }\n\n    .crumb-link:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .crumb-link:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-border-width-100) var(--cg-color-surface-base-background),\n        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* Current (last) item */\n    .crumb-current {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 200px;\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .crumb-icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      font-size: var(--cg-font-size-sm);\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      justify-content: center;\n    }\n\n    /* ── Ellipsis button ── */\n    .ellipsis {\n      display: inline-flex;\n      align-items: center;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: var(--cg-spacing-2) var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-snug);\n      letter-spacing: var(--cg-letter-spacing-widest);\n    }\n\n    .ellipsis:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .ellipsis:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-border-width-100) var(--cg-color-surface-base-background),\n        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);\n      outline: none;\n    }\n\n    /* Size variants */\n    :host([size=\"sm\"]) .crumb-link,\n    :host([size=\"sm\"]) .crumb-current { font-size: var(--cg-font-size-xs); }\n    :host([size=\"sm\"]) .separator { padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-xs); }\n    :host([size=\"sm\"]) .ellipsis { font-size: var(--cg-font-size-xs); }\n\n    :host([size=\"lg\"]) .crumb-link,\n    :host([size=\"lg\"]) .crumb-current { font-size: var(--cg-font-size-base); }\n    :host([size=\"lg\"]) .separator { padding: 0 var(--cg-spacing-8); font-size: var(--cg-font-size-sm); }\n    :host([size=\"lg\"]) .ellipsis { font-size: var(--cg-font-size-base); }\n\n    /* ── Responsive collapse on small screens ── */\n    @media (max-width: 640px) {\n      .breadcrumb-item.collapsible-middle {\n        display: none;\n      }\n\n      .breadcrumb-item.ellipsis-item-auto {\n        display: inline-flex;\n      }\n\n      .crumb-link,\n      .crumb-current {\n        max-width: 120px;\n      }\n    }\n\n    /* When not on small screen, hide the auto-collapse ellipsis */\n    @media (min-width: 641px) {\n      .breadcrumb-item.ellipsis-item-auto {\n        display: none;\n      }\n    }\n  `];\n\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) items: BreadcrumbItem[] = [];\n  @property({ type: String }) separator = '/';\n\n  /** Max visible items (0 = show all). Always shows first + last (maxVisible - 1) items. */\n  @property({ type: Number }) maxVisible = 0;\n\n  @state() private _expanded = false;\n\n  private _handleClick(item: BreadcrumbItem, index: number) {\n    this.dispatchEvent(new CustomEvent('cg-breadcrumb-click', {\n      bubbles: true,\n      composed: true,\n      detail: { label: item.label, href: item.href, index },\n    }));\n  }\n\n  private _expandCollapsed() {\n    this._expanded = true;\n  }\n\n  private _renderCrumb(item: BreadcrumbItem, index: number, isLast: boolean) {\n    if (isLast) {\n      return html`\n        <span class=\"crumb-current\" aria-current=\"page\">\n          ${item.icon ? html`<span class=\"crumb-icon\">${item.icon}</span>` : nothing}\n          ${item.label}\n        </span>\n      `;\n    }\n\n    if (item.href) {\n      return html`\n        <a\n          class=\"crumb-link\"\n          href=\"${item.href}\"\n          @click=\"${(e: Event) => { e.preventDefault(); this._handleClick(item, index); }}\"\n        >\n          ${item.icon ? html`<span class=\"crumb-icon\">${item.icon}</span>` : nothing}\n          ${item.label}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        class=\"crumb-link\"\n        @click=\"${() => this._handleClick(item, index)}\"\n      >\n        ${item.icon ? html`<span class=\"crumb-icon\">${item.icon}</span>` : nothing}\n        ${item.label}\n      </button>\n    `;\n  }\n\n  private _renderItem(item: BreadcrumbItem, index: number, isLast: boolean, extraClass = '') {\n    return html`\n      <li class=\"breadcrumb-item ${extraClass}\">\n        ${this._renderCrumb(item, index, isLast)}\n        ${!isLast ? html`\n          <span class=\"separator\" aria-hidden=\"true\">${this.separator}</span>\n        ` : nothing}\n      </li>\n    `;\n  }\n\n  private _renderEllipsis(cssClass = '') {\n    return html`\n      <li class=\"breadcrumb-item ${cssClass}\">\n        <button\n          class=\"ellipsis\"\n          @click=\"${this._expandCollapsed}\"\n          aria-label=\"Show all breadcrumb items\"\n        >&hellip;</button>\n        <span class=\"separator\" aria-hidden=\"true\">${this.separator}</span>\n      </li>\n    `;\n  }\n\n  override render() {\n    if (!this.items.length) return nothing;\n\n    const items = this.items;\n    const shouldCollapse = this.maxVisible > 0 && items.length > this.maxVisible && !this._expanded;\n\n    if (shouldCollapse) {\n      // Show first item, ellipsis, then last (maxVisible - 1) items\n      const tailCount = Math.max(1, this.maxVisible - 1);\n      const firstItem = items[0]!;\n      const tailItems = items.slice(items.length - tailCount);\n\n      return html`\n        <nav aria-label=\"Breadcrumb\">\n          <ol class=\"breadcrumb-list\">\n            ${this._renderItem(firstItem, 0, false)}\n            ${this._renderEllipsis()}\n            ${tailItems.map((item, i) => {\n              const originalIndex = items.length - tailCount + i;\n              const isLast = originalIndex === items.length - 1;\n              return this._renderItem(item, originalIndex, isLast);\n            })}\n          </ol>\n        </nav>\n      `;\n    }\n\n    // Full render — with auto-collapse classes for CSS media query on small screens\n    const hasAutoCollapsibleMiddle = items.length > 3;\n\n    return html`\n      <nav aria-label=\"Breadcrumb\">\n        <ol class=\"breadcrumb-list\">\n          ${items.map((item, index) => {\n            const isLast = index === items.length - 1;\n            const isFirst = index === 0;\n            const isMiddle = !isFirst && !isLast && hasAutoCollapsibleMiddle;\n            return html`\n              ${this._renderItem(item, index, isLast, isMiddle ? 'collapsible-middle' : '')}\n              ${isFirst && hasAutoCollapsibleMiddle ? this._renderEllipsis('ellipsis-item-auto') : nothing}\n            `;\n          })}\n        </ol>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-breadcrumbs': CgBreadcrumbs;\n  }\n}\n"],"names":["CgBreadcrumbs","LitElement","item","index","isLast","html","nothing","e","extraClass","cssClass","items","tailCount","firstItem","tailItems","i","originalIndex","hasAutoCollapsibleMiddle","isFirst","isMiddle","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,52 +1,25 @@
 import { LitElement } from 'lit';
 /**
  * @element cg-button
- * Button with variants, sizes, prefix/suffix icon slots, scaled loading
- * spinner, and a click → loading → success/error lifecycle via runAction().
+ * A button with variants, sizes, loading state, and press feedback.
  *
- * cg-button is a form-associated custom element. Set `submit` to true and the
- * button submits its parent form on click, and on Enter pressed inside any
- * non-textarea input within the same form. Submission flows through
- * ElementInternals rather than native bubbling, since the inner button lives
- * in shadow DOM and can't reach the outer form.
- *
- * @example Default
- * ```html
- * <cg-button variant="primary">Click me</cg-button>
- * ```
- *
- * @example With icons
+ * @example
  * ```html
- * <cg-button variant="primary">
- *   <cg-icon slot="prefix" name="plus" size="sm"></cg-icon>
- *   Create
- * </cg-button>
- * ```
- *
- * @example Async action
- * ```ts
- * const btn = document.querySelector('cg-button');
- * btn.runAction(async () => { await api.save(); });
- * // → spinner → ✓ pop → auto-revert after 1.5s
+ * <cg-button variant="primary" size="md">Click me</cg-button>
+ * <cg-button variant="secondary" loading>Saving...</cg-button>
+ * <cg-button type="danger"><span slot="prefix">[trash icon]</span>Delete</cg-button>
  * ```
  *
  * @slot - Default slot for button text/content
  * @slot prefix - Icon or content before the label
  * @slot suffix - Icon or content after the label
  *
- * @method runAction - Drive the button through loading → success / error
- *   using a Promise. Re-throws on rejection.
- *
  * @cssprop --cg-color-action-primary-background-default - Primary button background color
  * @cssprop --cg-component-button-height-md - Button height (md size, 48px)
  * @cssprop --cg-interaction-press-scale - Scale on press/active (0.97)
  * @cssprop --cg-transition-duration-fast - Color transition speed
  */
 export declare class CgButton extends LitElement {
-    static formAssociated: boolean;
-    private _internals;
-    private _form;
-    constructor();
     static styles: import('lit').CSSResult[];
     variant: 'primary' | 'secondary' | 'tertiary';
     size: 'sm' | 'md' | 'lg';
@@ -57,45 +30,6 @@ export declare class CgButton extends LitElement {
     full: boolean;
     status: 'idle' | 'error' | 'success';
     label: string;
-    /** Auto-revert status back to idle this many ms after success/error. 0 disables. */
-    resetDelay: number;
-    /** Set to true to submit the surrounding form on click (native `type="submit"`). */
-    submit: boolean;
-    /**
-     * Message announced to screen readers on a successful runAction(). Defaults
-     * to "Done". Set to empty string to suppress the announcement.
-     */
-    successMessage: string;
-    /**
-     * Message announced to screen readers on a failed runAction(). Defaults
-     * to "Failed". Set to empty string to suppress the announcement.
-     */
-    errorMessage: string;
-    private _resetTimer;
-    /** Live-region content. Empty between announcements. */
-    private _liveMessage;
-    /**
-     * 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(); });
-     */
-    runAction<T>(task: () => Promise<T>): Promise<T | undefined>;
-    /**
-     * 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).
-     */
-    private _announce;
-    private _scheduleReset;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _onHostClick;
-    private _onFormKeydown;
-    private _submitForm;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"cg-button.d.ts","sourceRoot":"","sources":["../../../src/components/cg-button/cg-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,KAAK,CAAgC;;IAS7C,OAAgB,MAAM,4BAwNnB;IAE0B,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,IAAI,UAAS;IAC5B,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAU;IAC/D,KAAK,SAAM;IACvB,oFAAoF;IAC9B,UAAU,SAAQ;IACxE,oFAAoF;IACvD,MAAM,UAAS;IAC5C;;;OAGG;IACyC,cAAc,SAAU;IACpE;;;OAGG;IACuC,YAAY,SAAY;IAElE,OAAO,CAAC,WAAW,CAAqB;IACxC,wDAAwD;IAC/C,OAAO,CAAC,YAAY,CAAM;IAEnC;;;;;;;;OAQG;IACG,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IAwBlE;;;;OAIG;IACH,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAQb,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,cAAc,CAOpB;IAEF,OAAO,CAAC,WAAW;IAUV,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"cg-button.d.ts","sourceRoot":"","sources":["../../../src/components/cg-button/cg-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAuLnB;IAE0B,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,IAAI,UAAS;IAC5B,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAU;IAC/D,KAAK,SAAM;IAEd,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -1,93 +1,32 @@
-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;
+import { css as b, LitElement as g, nothing as l, html as u } from "lit";
+import { property as t, customElement as v } from "lit/decorators.js";
+import { a as h, r as p, c as f } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (d, e, n, s) => {
+  for (var a = s > 1 ? void 0 : s ? m(e, n) : e, c = d.length - 1, i; c >= 0; c--)
+    (i = d[c]) && (a = (s ? i(e, n, a) : i(a)) || a);
+  return s && a && y(e, n, a), a;
 };
-let t = class extends g {
+let r = 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 })));
+    super(...arguments), 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 = "";
   }
   render() {
-    return c`
+    return u`
       <button
-        type="button"
+        part="button"
         ?disabled=${this.disabled || this.loading}
         aria-busy=${this.loading ? "true" : "false"}
-        aria-label=${this.label || n}
+        aria-label=${this.label || l}
       >
-        ${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}
+        ${this.loading ? u`<span class="spinner"></span>` : l}
         <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`
+r.styles = [h, p, f, b`
     button {
       display: inline-flex;
       align-items: center;
@@ -117,8 +56,8 @@ t.styles = [v, f, m, h`
     /* 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);
+        0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);
       outline: none;
     }
 
@@ -197,78 +136,55 @@ t.styles = [v, f, m, h`
       background: var(--cg-color-status-error-background-hover);
     }
 
-    /* ── Disabled ── */
+    /* ── Disabled ──
+       Themeable per-variant disabled colors (no opacity smudge on re-pointed brands).
+       Scoped with :host so these win over the variant/type/status background rules. */
     button:disabled {
-      opacity: 0.5;
       pointer-events: none;
     }
+    :host([variant="primary"]) button:disabled,
+    :host([type="danger"][variant="primary"]) button:disabled,
+    :host([status="error"]) button:disabled,
+    :host([status="success"]) button:disabled {
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
+      border-color: var(--cg-color-action-primary-border-disable);
+    }
+    :host([variant="secondary"]) button:disabled {
+      background: var(--cg-color-action-secondary-background-disable);
+      color: var(--cg-color-action-secondary-text-disable);
+      border-color: var(--cg-color-action-secondary-border-disable);
+    }
+    :host([variant="tertiary"]) button:disabled {
+      background: var(--cg-color-action-tertiary-background-disable);
+      color: var(--cg-color-action-tertiary-text-disable);
+      border-color: var(--cg-color-action-tertiary-border-disable);
+    }
 
     /* ── 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);
+      border: var(--cg-border-width-100) solid currentColor;
+      border-right-color: transparent;
+      border-radius: var(--cg-border-radius-full);
+      animation: spin var(--cg-transition-duration-slow) linear infinite;
     }
     :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);
     }
@@ -280,9 +196,6 @@ t.styles = [v, f, m, h`
       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);
     }
@@ -296,60 +209,38 @@ t.styles = [v, f, m, h`
     :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);
+  t({ reflect: !0 })
+], r.prototype, "variant", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "full", 2);
+  t({ reflect: !0 })
+], r.prototype, "size", 2);
 o([
-  s({ reflect: !0 })
-], t.prototype, "status", 2);
+  t({ reflect: !0 })
+], r.prototype, "rounded", 2);
 o([
-  s()
-], t.prototype, "label", 2);
+  t({ reflect: !0 })
+], r.prototype, "type", 2);
 o([
-  s({ type: Number, attribute: "reset-delay" })
-], t.prototype, "resetDelay", 2);
+  t({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
 o([
-  s({ type: Boolean })
-], t.prototype, "submit", 2);
+  t({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
 o([
-  s({ attribute: "success-message" })
-], t.prototype, "successMessage", 2);
+  t({ type: Boolean, reflect: !0 })
+], r.prototype, "full", 2);
 o([
-  s({ attribute: "error-message" })
-], t.prototype, "errorMessage", 2);
+  t({ reflect: !0 })
+], r.prototype, "status", 2);
 o([
-  b()
-], t.prototype, "_liveMessage", 2);
-t = o([
-  p("cg-button")
-], t);
+  t()
+], r.prototype, "label", 2);
+r = o([
+  v("cg-button")
+], r);
 export {
-  t as CgButton
+  r as CgButton
 };
 //# sourceMappingURL=cg-button.js.map

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

@@ -1 +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":";;;;;;;;AAgDO,IAAMA,IAAN,cAAuBC,EAAW;AAAA,EAKvC,cAAc;AACZ,UAAA,GAHF,KAAQ,QAAgC,MAmOX,KAAA,UAAgD,WAChD,KAAA,OAA2B,MAC3B,KAAA,UAAgD,MAChD,KAAA,OAA4B,UACb,KAAA,WAAW,IACX,KAAA,UAAU,IACV,KAAA,OAAO,IACtB,KAAA,SAAuC,QACxD,KAAA,QAAQ,IAEkC,KAAA,aAAa,MAEtC,KAAA,SAAS,IAKM,KAAA,iBAAiB,QAKnB,KAAA,eAAe,UAIhD,KAAQ,eAAe,IAqEhC,KAAQ,eAAe,CAACC,MAAoB;AAC1C,MAAI,KAAK,YAAY,KAAK,WACrB,KAAK,UACV,KAAK,YAAA;AAAA,IACP,GAEA,KAAQ,iBAAiB,CAACC,MAA2B;AACnD,UAAIA,EAAE,QAAQ,WAAW,CAAC,KAAK,UAAU,KAAK,YAAY,KAAK,QAAS;AACxE,YAAMC,IAASD,EAAE;AACjB,MAAMC,aAAkB,qBACpBA,EAAO,SAAS,YAAYA,EAAO,SAAS,YAAYA,EAAO,SAAS,YAC5ED,EAAE,eAAA,GACF,KAAK,YAAA;AAAA,IACP,GA3UM,OAAO,KAAK,mBAAoB,eAClC,KAAK,aAAa,KAAK,gBAAA;AAAA,EAE3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiQA,MAAM,UAAaE,GAAgD;AACjE,IAAI,KAAK,gBACP,aAAa,KAAK,WAAW,GAC7B,KAAK,cAAc,SAErB,KAAK,SAAS,QACd,KAAK,eAAe,IACpB,KAAK,UAAU;AACf,QAAI;AACF,YAAMC,IAAS,MAAMD,EAAA;AACrB,kBAAK,UAAU,IACf,KAAK,SAAS,WACd,KAAK,UAAU,KAAK,cAAc,GAClC,KAAK,eAAA,GACEC;AAAA,IACT,SAASC,GAAK;AACZ,iBAAK,UAAU,IACf,KAAK,SAAS,SACd,KAAK,UAAU,KAAK,YAAY,GAChC,KAAK,eAAA,GACCA;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,UAAUC,GAAuB;AACvC,IAAKA,MACL,KAAK,eAAe,IACpB,sBAAsB,MAAM;AAAE,WAAK,eAAeA;AAAA,IAAS,CAAC;AAAA,EAC9D;AAAA,EAEQ,iBAAuB;AAC7B,IAAI,KAAK,cAAc,MACvB,KAAK,cAAc,OAAO,WAAW,MAAM;AACzC,WAAK,SAAS,QACd,KAAK,cAAc;AAAA,IACrB,GAAG,KAAK,UAAU;AAAA,EACpB;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,QAAQ,KAAK,YAAY,QAAQ,KAAK,QAAQ,MAAM,GACzD,KAAK,OAAO,iBAAiB,WAAW,KAAK,cAAc,GAC3D,KAAK,iBAAiB,SAAS,KAAK,YAAY;AAAA,EAClD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,OAAO,oBAAoB,WAAW,KAAK,cAAc,GAC9D,KAAK,oBAAoB,SAAS,KAAK,YAAY,GACnD,KAAK,QAAQ,MACT,KAAK,eAAa,aAAa,KAAK,WAAW;AAAA,EACrD;AAAA,EAiBQ,cAAoB;AAC1B,UAAMC,IAAO,KAAK,YAAY,QAAQ,KAAK,SAAS,KAAK,QAAQ,MAAM;AACvE,IAAKA,MACD,OAAOA,EAAK,iBAAkB,aAChCA,EAAK,cAAA,IAELA,EAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,IAAM,YAAY,GAAA,CAAM,CAAC;AAAA,EAE/E;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,oBAGS,KAAK,YAAY,KAAK,OAAO;AAAA,oBAC7B,KAAK,UAAU,SAAS,OAAO;AAAA,qBAC9B,KAAK,SAASC,CAAO;AAAA;AAAA,UAEhC,KAAK,UAAUD,sDAAyDC,CAAO;AAAA,UAC/E,KAAK,WAAW,aAAa,CAAC,KAAK,UAAUD;AAAA;AAAA;AAAA;AAAA,YAI3CC,CAAO;AAAA,UACT,KAAK,WAAW,WAAW,CAAC,KAAK,UAAUD;AAAA;AAAA;AAAA;AAAA,YAIzCC,CAAO;AAAA;AAAA,gBAEH,KAAK,KAAK;AAAA;AAAA;AAAA,kFAGwD,KAAK,YAAY;AAAA;AAAA,EAEjG;AACF;AAxXaX,EACJ,iBAAiB;AADbA,EAYK,SAAS,CAACY,GAAUC,GAAeC,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;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;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;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;AAAA;AAAA;AAAA;AAAA,GAwNjE;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtOhBjB,EAsOkB,WAAA,WAAA,CAAA;AACAgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvOhBjB,EAuOkB,WAAA,QAAA,CAAA;AACAgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxOhBjB,EAwOkB,WAAA,WAAA,CAAA;AACAgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzOhBjB,EAyOkB,WAAA,QAAA,CAAA;AACegB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1O/BjB,EA0OiC,WAAA,YAAA,CAAA;AACAgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3O/BjB,EA2OiC,WAAA,WAAA,CAAA;AACAgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5O/BjB,EA4OiC,WAAA,QAAA,CAAA;AACfgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7OhBjB,EA6OkB,WAAA,UAAA,CAAA;AACjBgB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9OCjB,EA8OC,WAAA,SAAA,CAAA;AAE0CgB,EAAA;AAAA,EAArDC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GAhPzCjB,EAgP2C,WAAA,cAAA,CAAA;AAEzBgB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlPhBjB,EAkPkB,WAAA,UAAA,CAAA;AAKegB,EAAA;AAAA,EAA3CC,EAAS,EAAE,WAAW,kBAAA,CAAmB;AAAA,GAvP/BjB,EAuPiC,WAAA,kBAAA,CAAA;AAKFgB,EAAA;AAAA,EAAzCC,EAAS,EAAE,WAAW,gBAAA,CAAiB;AAAA,GA5P7BjB,EA4P+B,WAAA,gBAAA,CAAA;AAIzBgB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhQIlB,EAgQM,WAAA,gBAAA,CAAA;AAhQNA,IAANgB,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,GACbnB,CAAA;"}
+{"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 } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, spinKeyframes } from '../../styles/index.js';\n\n/**\n * @element cg-button\n * A button with variants, sizes, loading state, and press feedback.\n *\n * @example\n * ```html\n * <cg-button variant=\"primary\" size=\"md\">Click me</cg-button>\n * <cg-button variant=\"secondary\" loading>Saving...</cg-button>\n * <cg-button type=\"danger\"><span slot=\"prefix\">[trash icon]</span>Delete</cg-button>\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 * @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 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 var(--cg-border-width-100) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);\n      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       Themeable per-variant disabled colors (no opacity smudge on re-pointed brands).\n       Scoped with :host so these win over the variant/type/status background rules. */\n    button:disabled {\n      pointer-events: none;\n    }\n    :host([variant=\"primary\"]) button:disabled,\n    :host([type=\"danger\"][variant=\"primary\"]) button:disabled,\n    :host([status=\"error\"]) button:disabled,\n    :host([status=\"success\"]) button:disabled {\n      background: var(--cg-color-action-primary-background-disable);\n      color: var(--cg-color-action-primary-text-disable);\n      border-color: var(--cg-color-action-primary-border-disable);\n    }\n    :host([variant=\"secondary\"]) button:disabled {\n      background: var(--cg-color-action-secondary-background-disable);\n      color: var(--cg-color-action-secondary-text-disable);\n      border-color: var(--cg-color-action-secondary-border-disable);\n    }\n    :host([variant=\"tertiary\"]) button:disabled {\n      background: var(--cg-color-action-tertiary-background-disable);\n      color: var(--cg-color-action-tertiary-text-disable);\n      border-color: var(--cg-color-action-tertiary-border-disable);\n    }\n\n    /* ── Loading ── */\n    :host([loading]) button {\n      color: transparent;\n      pointer-events: none;\n    }\n    .spinner {\n      position: absolute;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      border: var(--cg-border-width-100) solid currentColor;\n      border-right-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\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    /* ── 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\"]) 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\"]) 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\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\n  override render() {\n    return html`\n      <button\n        part=\"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\"></span>` : nothing}\n        <slot name=\"prefix\"></slot>\n        <slot>${this.label}</slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-button': CgButton;\n  }\n}\n// touch Mon Apr 13 18:29:50 AEST 2026\n"],"names":["CgButton","LitElement","html","nothing","hostBase","reducedMotion","spinKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -15,6 +15,8 @@ export declare class CgButtonGroup extends LitElement {
     gap: 'none' | 'xs' | 'sm' | 'md';
     align: 'start' | 'center' | 'end' | 'stretch';
     attached: boolean;
+    /** Accessible name for the group landmark (e.g. "Text alignment"). */
+    label?: string;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -1 +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"}
+{"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,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;GASG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAgEnB;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;IAC7D,sEAAsE;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,iBAAiB,EAAE,aAAa,CAAC;KAAE;CACtE"}