@cognivo/components 0.8.0

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

@@ -0,0 +1,286 @@
+import { css as m, LitElement as b, nothing as c, html as t } from "lit";
+import { property as d, state as f, customElement as v } from "lit/decorators.js";
+import { h as x, r as z } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (e, i, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? y(i, a) : i, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (r = (s ? l(i, a, r) : l(r)) || r);
+  return s && r && w(i, a, r), r;
+};
+let o = class extends b {
+  constructor() {
+    super(...arguments), this.size = "md", this.items = [], this.separator = "/", this.maxVisible = 0, this._expanded = !1;
+  }
+  _handleClick(e, i) {
+    this.dispatchEvent(new CustomEvent("cg-breadcrumb-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { label: e.label, href: e.href, index: i }
+    }));
+  }
+  _expandCollapsed() {
+    this._expanded = !0;
+  }
+  _renderCrumb(e, i, a) {
+    return a ? t`
+        <span class="crumb-current" aria-current="page">
+          ${e.icon ? t`<span class="crumb-icon">${e.icon}</span>` : c}
+          ${e.label}
+        </span>
+      ` : e.href ? t`
+        <a
+          class="crumb-link"
+          href="${e.href}"
+          @click="${(s) => {
+      s.preventDefault(), this._handleClick(e, i);
+    }}"
+        >
+          ${e.icon ? t`<span class="crumb-icon">${e.icon}</span>` : c}
+          ${e.label}
+        </a>
+      ` : t`
+      <button
+        class="crumb-link"
+        @click="${() => this._handleClick(e, i)}"
+      >
+        ${e.icon ? t`<span class="crumb-icon">${e.icon}</span>` : c}
+        ${e.label}
+      </button>
+    `;
+  }
+  _renderItem(e, i, a, s = "") {
+    return t`
+      <li class="breadcrumb-item ${s}">
+        ${this._renderCrumb(e, i, a)}
+        ${a ? c : t`
+          <span class="separator" aria-hidden="true">${this.separator}</span>
+        `}
+      </li>
+    `;
+  }
+  _renderEllipsis(e = "") {
+    return t`
+      <li class="breadcrumb-item ${e}">
+        <button
+          class="ellipsis"
+          @click="${this._expandCollapsed}"
+          aria-label="Show all breadcrumb items"
+        >&hellip;</button>
+        <span class="separator" aria-hidden="true">${this.separator}</span>
+      </li>
+    `;
+  }
+  render() {
+    if (!this.items.length) return c;
+    const e = this.items;
+    if (this.maxVisible > 0 && e.length > this.maxVisible && !this._expanded) {
+      const s = Math.max(1, this.maxVisible - 1), r = e[0], n = e.slice(e.length - s);
+      return t`
+        <nav aria-label="Breadcrumb">
+          <ol class="breadcrumb-list">
+            ${this._renderItem(r, 0, !1)}
+            ${this._renderEllipsis()}
+            ${n.map((l, u) => {
+        const g = e.length - s + u, h = g === e.length - 1;
+        return this._renderItem(l, g, h);
+      })}
+          </ol>
+        </nav>
+      `;
+    }
+    const a = e.length > 3;
+    return t`
+      <nav aria-label="Breadcrumb">
+        <ol class="breadcrumb-list">
+          ${e.map((s, r) => {
+      const n = r === e.length - 1, l = r === 0, u = !l && !n && a;
+      return t`
+              ${this._renderItem(s, r, n, u ? "collapsible-middle" : "")}
+              ${l && a ? this._renderEllipsis("ellipsis-item-auto") : c}
+            `;
+    })}
+        </ol>
+      </nav>
+    `;
+  }
+};
+o.styles = [x, z, m`
+    nav {
+      display: flex;
+      align-items: center;
+    }
+
+    .breadcrumb-list {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+    }
+
+    .breadcrumb-item {
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .separator {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--cg-spacing-8);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      user-select: none;
+      flex-shrink: 0;
+    }
+
+    .crumb-link {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-2) 0;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-container-text);
+      text-decoration: none;
+      text-underline-offset: var(--cg-spacing-4);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      line-height: var(--cg-line-height-snug);
+      border-radius: var(--cg-border-radius-50);
+      -webkit-font-smoothing: antialiased;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .crumb-link:hover {
+      color: var(--cg-color-surface-base-text);
+      text-decoration: underline;
+    }
+
+    .crumb-link:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    .crumb-link:focus-visible {
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 4px var(--cg-color-focus-ring);
+      outline: none;
+    }
+
+    /* Current (last) item */
+    .crumb-current {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+      line-height: var(--cg-line-height-snug);
+    }
+
+    .crumb-icon {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      font-size: var(--cg-font-size-sm);
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      justify-content: center;
+    }
+
+    /* ── Ellipsis button ── */
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      padding: var(--cg-spacing-2) var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-50);
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-snug);
+      letter-spacing: var(--cg-letter-spacing-widest);
+    }
+
+    .ellipsis:hover {
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .ellipsis:focus-visible {
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 4px var(--cg-color-focus-ring);
+      outline: none;
+    }
+
+    /* Size variants */
+    :host([size="sm"]) .crumb-link,
+    :host([size="sm"]) .crumb-current { font-size: var(--cg-font-size-xs); }
+    :host([size="sm"]) .separator { padding: 0 var(--cg-spacing-4); font-size: var(--cg-font-size-xs); }
+    :host([size="sm"]) .ellipsis { font-size: var(--cg-font-size-xs); }
+
+    :host([size="lg"]) .crumb-link,
+    :host([size="lg"]) .crumb-current { font-size: var(--cg-font-size-base); }
+    :host([size="lg"]) .separator { padding: 0 var(--cg-spacing-8); font-size: var(--cg-font-size-sm); }
+    :host([size="lg"]) .ellipsis { font-size: var(--cg-font-size-base); }
+
+    /* ── Responsive collapse on small screens ── */
+    @media (max-width: 640px) {
+      .breadcrumb-item.collapsible-middle {
+        display: none;
+      }
+
+      .breadcrumb-item.ellipsis-item-auto {
+        display: inline-flex;
+      }
+
+      .crumb-link,
+      .crumb-current {
+        max-width: 120px;
+      }
+    }
+
+    /* When not on small screen, hide the auto-collapse ellipsis */
+    @media (min-width: 641px) {
+      .breadcrumb-item.ellipsis-item-auto {
+        display: none;
+      }
+    }
+  `];
+p([
+  d({ reflect: !0 })
+], o.prototype, "size", 2);
+p([
+  d({ type: Array })
+], o.prototype, "items", 2);
+p([
+  d({ type: String })
+], o.prototype, "separator", 2);
+p([
+  d({ type: Number })
+], o.prototype, "maxVisible", 2);
+p([
+  f()
+], o.prototype, "_expanded", 2);
+o = p([
+  v("cg-breadcrumbs")
+], o);
+export {
+  o as CgBreadcrumbs
+};
+//# sourceMappingURL=cg-breadcrumbs.js.map

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

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

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

@@ -0,0 +1,106 @@
+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().
+ *
+ * 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
+ * ```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
+ * ```
+ *
+ * @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';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    type: 'normal' | 'danger';
+    disabled: boolean;
+    loading: boolean;
+    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 {
+    interface HTMLElementTagNameMap {
+        'cg-button': CgButton;
+    }
+}
+//# sourceMappingURL=cg-button.d.ts.map

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

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