@cognivo/components 0.8.0

package/dist/components/cg-kanban-column/cg-kanban-column.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-kanban-column
+ * One column in a `<cg-kanban>` board. Composes `<cg-droppable>` (accepts
+ * cards from peer columns) with `<cg-sortable>` (reorder within the
+ * column). Header carries the column label and an automatic count badge.
+ *
+ * Each column has a stable `column-id` that's emitted with the
+ * `cg-kanban-card-move` event so the parent `<cg-kanban>` can identify
+ * the source and target columns. The cards live in the default slot;
+ * each must be wrapped in `<cg-draggable type="card">`.
+ *
+ * @example
+ * ```html
+ * <cg-kanban-column column-id="todo" label="Todo" accepts="card">
+ *   <cg-draggable type="card" .payload=${task1}>
+ *     <cg-card>Task 1</cg-card>
+ *   </cg-draggable>
+ *   <cg-draggable type="card" .payload=${task2}>
+ *     <cg-card>Task 2</cg-card>
+ *   </cg-draggable>
+ *   <cg-button slot="footer" variant="tertiary">+ Add task</cg-button>
+ * </cg-kanban-column>
+ * ```
+ *
+ * @slot - cg-draggable elements wrapping each card.
+ * @slot header - Custom header content (overrides label + count).
+ * @slot footer - Footer content (typically an "Add" button).
+ *
+ * @fires {CustomEvent<{from: number, to: number}>} cg-sort - Card reordered within the column
+ *
+ * @cssprop --cg-component-kanban-column-width - Min/preferred column width (default 280px)
+ * @cssprop --cg-component-kanban-column-max-height - Max body height before scrolling (default 70vh)
+ */
+export declare class CgKanbanColumn extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Stable identifier emitted in `cg-kanban-card-move`. */
+    columnId: string;
+    /** Display label in the header. Ignored when the `header` slot has content. */
+    label: string;
+    /** Drag types this column accepts. Space-separated. Default: "card". */
+    accepts: string;
+    /** Hide the auto count badge. */
+    hideCount: boolean;
+    /** Disable drops + sorting on this column. */
+    disabled: boolean;
+    private _cardCount;
+    private _hasFooter;
+    private _onCardSlotChange;
+    private _onFooterSlotChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-kanban-column': CgKanbanColumn;
+    }
+}
+//# sourceMappingURL=cg-kanban-column.d.ts.map

package/dist/components/cg-kanban-column/cg-kanban-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-kanban-column.d.ts","sourceRoot":"","sources":["../../../src/components/cg-kanban-column/cg-kanban-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAyEnB;IAEH,0DAA0D;IACL,QAAQ,SAAM;IAEnE,+EAA+E;IACnE,KAAK,SAAM;IAEvB,wEAAwE;IAC5D,OAAO,SAAU;IAE7B,iCAAiC;IACoC,SAAS,UAAS;IAEvF,8CAA8C;IACF,QAAQ,UAAS;IAEpD,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,mBAAmB,CAGzB;IAEO,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/cg-kanban-column/cg-kanban-column.js

@@ -0,0 +1,144 @@
+import { css as p, LitElement as u, nothing as g, html as d } from "lit";
+import { property as n, state as h, customElement as f } from "lit/decorators.js";
+import { h as b, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-droppable/cg-droppable.js";
+import "../cg-sortable/cg-sortable.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (o, r, s, c) => {
+  for (var a = c > 1 ? void 0 : c ? y(r, s) : r, i = o.length - 1, l; i >= 0; i--)
+    (l = o[i]) && (a = (c ? l(r, s, a) : l(a)) || a);
+  return c && a && m(r, s, a), a;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.columnId = "", this.label = "", this.accepts = "card", this.hideCount = !1, this.disabled = !1, this._cardCount = 0, this._hasFooter = !1, this._onCardSlotChange = (o) => {
+      const s = o.target.assignedElements({ flatten: !0 });
+      this._cardCount = s.length;
+    }, this._onFooterSlotChange = (o) => {
+      const r = o.target;
+      this._hasFooter = r.assignedNodes({ flatten: !0 }).length > 0;
+    };
+  }
+  render() {
+    const o = !this.hideCount && this._cardCount > 0;
+    return d`
+      <header class="header">
+        <slot name="header">
+          ${this.label ? d`<span class="label">${this.label}</span>` : g}
+          ${o ? d`<span class="count">${this._cardCount}</span>` : g}
+        </slot>
+      </header>
+      <div class="body">
+        <cg-droppable accepts=${this.accepts} ?disabled=${this.disabled}>
+          <cg-sortable ?disabled=${this.disabled}>
+            <slot @slotchange=${this._onCardSlotChange}></slot>
+          </cg-sortable>
+        </cg-droppable>
+      </div>
+      <div class="footer ${this._hasFooter ? "has-footer" : ""}">
+        <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+e.styles = [b, v, p`
+    :host {
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 auto;
+      width: var(--cg-component-kanban-column-width, 280px);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius, var(--cg-border-radius-150));
+      overflow: hidden;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      flex-shrink: 0;
+    }
+
+    .label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      flex: 1 1 auto;
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      padding: 0 var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+    }
+
+    .body {
+      flex: 1 1 auto;
+      min-height: var(--cg-spacing-48);
+      max-height: var(--cg-component-kanban-column-max-height, 70vh);
+      overflow-y: auto;
+      padding: var(--cg-spacing-8);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    .body cg-droppable {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      min-height: var(--cg-spacing-48);
+    }
+
+    .footer {
+      padding: var(--cg-spacing-8);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      flex-shrink: 0;
+    }
+    .footer:not(.has-footer) { display: none; }
+
+    :host([disabled]) .body { opacity: 0.5; pointer-events: none; }
+  `];
+t([
+  n({ attribute: "column-id", reflect: !0 })
+], e.prototype, "columnId", 2);
+t([
+  n()
+], e.prototype, "label", 2);
+t([
+  n()
+], e.prototype, "accepts", 2);
+t([
+  n({ type: Boolean, attribute: "hide-count", reflect: !0 })
+], e.prototype, "hideCount", 2);
+t([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  h()
+], e.prototype, "_cardCount", 2);
+t([
+  h()
+], e.prototype, "_hasFooter", 2);
+e = t([
+  f("cg-kanban-column")
+], e);
+export {
+  e as CgKanbanColumn
+};
+//# sourceMappingURL=cg-kanban-column.js.map

package/dist/components/cg-kanban-column/cg-kanban-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-kanban-column.js","sources":["../../../src/components/cg-kanban-column/cg-kanban-column.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport '../cg-droppable/cg-droppable.js';\nimport '../cg-sortable/cg-sortable.js';\n\n/**\n * @element cg-kanban-column\n * One column in a `<cg-kanban>` board. Composes `<cg-droppable>` (accepts\n * cards from peer columns) with `<cg-sortable>` (reorder within the\n * column). Header carries the column label and an automatic count badge.\n *\n * Each column has a stable `column-id` that's emitted with the\n * `cg-kanban-card-move` event so the parent `<cg-kanban>` can identify\n * the source and target columns. The cards live in the default slot;\n * each must be wrapped in `<cg-draggable type=\"card\">`.\n *\n * @example\n * ```html\n * <cg-kanban-column column-id=\"todo\" label=\"Todo\" accepts=\"card\">\n *   <cg-draggable type=\"card\" .payload=${task1}>\n *     <cg-card>Task 1</cg-card>\n *   </cg-draggable>\n *   <cg-draggable type=\"card\" .payload=${task2}>\n *     <cg-card>Task 2</cg-card>\n *   </cg-draggable>\n *   <cg-button slot=\"footer\" variant=\"tertiary\">+ Add task</cg-button>\n * </cg-kanban-column>\n * ```\n *\n * @slot - cg-draggable elements wrapping each card.\n * @slot header - Custom header content (overrides label + count).\n * @slot footer - Footer content (typically an \"Add\" button).\n *\n * @fires {CustomEvent<{from: number, to: number}>} cg-sort - Card reordered within the column\n *\n * @cssprop --cg-component-kanban-column-width - Min/preferred column width (default 280px)\n * @cssprop --cg-component-kanban-column-max-height - Max body height before scrolling (default 70vh)\n */\n@customElement('cg-kanban-column')\nexport class CgKanbanColumn extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      flex: 0 0 auto;\n      width: var(--cg-component-kanban-column-width, 280px);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius, var(--cg-border-radius-150));\n      overflow: hidden;\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      flex-shrink: 0;\n    }\n\n    .label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      flex: 1 1 auto;\n      min-width: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .count {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      padding: 0 var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n    }\n\n    .body {\n      flex: 1 1 auto;\n      min-height: var(--cg-spacing-48);\n      max-height: var(--cg-component-kanban-column-max-height, 70vh);\n      overflow-y: auto;\n      padding: var(--cg-spacing-8);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .body cg-droppable {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      min-height: var(--cg-spacing-48);\n    }\n\n    .footer {\n      padding: var(--cg-spacing-8);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      flex-shrink: 0;\n    }\n    .footer:not(.has-footer) { display: none; }\n\n    :host([disabled]) .body { opacity: 0.5; pointer-events: none; }\n  `];\n\n  /** Stable identifier emitted in `cg-kanban-card-move`. */\n  @property({ attribute: 'column-id', reflect: true }) columnId = '';\n\n  /** Display label in the header. Ignored when the `header` slot has content. */\n  @property() label = '';\n\n  /** Drag types this column accepts. Space-separated. Default: \"card\". */\n  @property() accepts = 'card';\n\n  /** Hide the auto count badge. */\n  @property({ type: Boolean, attribute: 'hide-count', reflect: true }) hideCount = false;\n\n  /** Disable drops + sorting on this column. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _cardCount = 0;\n  @state() private _hasFooter = false;\n\n  private _onCardSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    const cards = slot.assignedElements({ flatten: true });\n    this._cardCount = cards.length;\n  };\n\n  private _onFooterSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  override render() {\n    const showCount = !this.hideCount && this._cardCount > 0;\n    return html`\n      <header class=\"header\">\n        <slot name=\"header\">\n          ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n          ${showCount ? html`<span class=\"count\">${this._cardCount}</span>` : nothing}\n        </slot>\n      </header>\n      <div class=\"body\">\n        <cg-droppable accepts=${this.accepts} ?disabled=${this.disabled}>\n          <cg-sortable ?disabled=${this.disabled}>\n            <slot @slotchange=${this._onCardSlotChange}></slot>\n          </cg-sortable>\n        </cg-droppable>\n      </div>\n      <div class=\"footer ${this._hasFooter ? 'has-footer' : ''}\">\n        <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-kanban-column': CgKanbanColumn;\n  }\n}\n"],"names":["CgKanbanColumn","LitElement","e","cards","slot","showCount","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;AAwCO,IAAMA,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GA6EgD,KAAA,WAAW,IAGpD,KAAA,QAAQ,IAGR,KAAA,UAAU,QAG+C,KAAA,YAAY,IAGrC,KAAA,WAAW,IAE9C,KAAQ,aAAa,GACrB,KAAQ,aAAa,IAE9B,KAAQ,oBAAoB,CAACC,MAAmB;AAE9C,YAAMC,IADOD,EAAE,OACI,iBAAiB,EAAE,SAAS,IAAM;AACrD,WAAK,aAAaC,EAAM;AAAA,IAC1B,GAEA,KAAQ,sBAAsB,CAACD,MAAmB;AAChD,YAAME,IAAOF,EAAE;AACf,WAAK,aAAaE,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,IACnE;AAAA,EAAA;AAAA,EAES,SAAS;AAChB,UAAMC,IAAY,CAAC,KAAK,aAAa,KAAK,aAAa;AACvD,WAAOC;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQA,wBAA2B,KAAK,KAAK,YAAYC,CAAO;AAAA,YACrEF,IAAYC,wBAA2B,KAAK,UAAU,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA,gCAIrD,KAAK,OAAO,cAAc,KAAK,QAAQ;AAAA,mCACpC,KAAK,QAAQ;AAAA,gCAChB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,2BAI3B,KAAK,aAAa,eAAe,EAAE;AAAA,0CACpB,KAAK,mBAAmB;AAAA;AAAA;AAAA,EAGhE;AACF;AA9HaP,EACK,SAAS,CAACQ,GAAWC,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,GAyEnD;AAGoDC,EAAA;AAAA,EAApDC,EAAS,EAAE,WAAW,aAAa,SAAS,IAAM;AAAA,GA7ExCZ,EA6E0C,WAAA,YAAA,CAAA;AAGzCW,EAAA;AAAA,EAAXC,EAAA;AAAS,GAhFCZ,EAgFC,WAAA,SAAA,CAAA;AAGAW,EAAA;AAAA,EAAXC,EAAA;AAAS,GAnFCZ,EAmFC,WAAA,WAAA,CAAA;AAGyDW,EAAA;AAAA,EAApEC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc,SAAS,IAAM;AAAA,GAtFxDZ,EAsF0D,WAAA,aAAA,CAAA;AAGzBW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzF/BZ,EAyFiC,WAAA,YAAA,CAAA;AAE3BW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA3FIb,EA2FM,WAAA,cAAA,CAAA;AACAW,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5FIb,EA4FM,WAAA,cAAA,CAAA;AA5FNA,IAANW,EAAA;AAAA,EADNG,EAAc,kBAAkB;AAAA,GACpBd,CAAA;"}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-kbd
+ * Keyboard shortcut display chip. Use for showing keyboard combinations like ⌘K.
+ *
+ * @example
+ * ```html
+ * <cg-kbd keys="⌘K"></cg-kbd>
+ * <cg-kbd keys="Shift,⌘,P"></cg-kbd>
+ * <cg-kbd>Esc</cg-kbd>
+ * ```
+ *
+ * @slot - Key content (alternative to keys property)
+ */
+export declare class CgKbd extends LitElement {
+    static styles: import('lit').CSSResult[];
+    keys: string;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'default' | 'outline';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-kbd': CgKbd;
+    }
+}
+//# sourceMappingURL=cg-kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-kbd.d.ts","sourceRoot":"","sources":["../../../src/components/cg-kbd/cg-kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;GAYG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,4BAiDnB;IAES,IAAI,EAAE,MAAM,CAAM;IACD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAa;IAE/D,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

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

@@ -0,0 +1,91 @@
+import { css as m, LitElement as p, nothing as l, html as s } from "lit";
+import { property as g, customElement as b } from "lit/decorators.js";
+import { a as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (n, e, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? h(e, o) : e, d = n.length - 1, c; d >= 0; d--)
+    (c = n[d]) && (t = (i ? c(e, o, t) : c(t)) || t);
+  return i && t && f(e, o, t), t;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.keys = "", this.size = "md", this.variant = "default";
+  }
+  render() {
+    if (this.keys) {
+      const n = this.keys.split(",").map((e) => e.trim()).filter(Boolean);
+      return s`
+        ${n.map((e, o) => s`
+          ${o > 0 ? s`<span class="plus">+</span>` : l}
+          <kbd>${e}</kbd>
+        `)}
+      `;
+    }
+    return s`<kbd><slot></slot></kbd>`;
+  }
+};
+r.styles = [v, m`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+
+    kbd {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--cg-color-action-tertiary-background-hover);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-bottom-width: var(--cg-border-width-100);
+      border-radius: var(--cg-component-kbd-radius);
+      color: var(--cg-color-surface-base-text);
+      font-family: var(--cg-font-family-mono);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: var(--cg-line-height-tight);
+      box-shadow:
+        inset 0 var(--cg-border-width-50) 0 var(--cg-overlay-accent-subtle),
+        0 var(--cg-border-width-50) 0 var(--cg-color-surface-cards-border);
+    }
+
+    /* Sizes — driven entirely by Tier-3 tokens for system-wide consistency. */
+    :host([size="sm"]) kbd {
+      min-width: var(--cg-component-kbd-min-width-sm);
+      padding: var(--cg-component-kbd-padding-y-sm) var(--cg-component-kbd-padding-x-sm);
+      font-size: var(--cg-component-kbd-font-size-sm);
+    }
+    :host([size="md"]) kbd {
+      min-width: var(--cg-component-kbd-min-width-md);
+      padding: var(--cg-component-kbd-padding-y-md) var(--cg-component-kbd-padding-x-md);
+      font-size: var(--cg-component-kbd-font-size-md);
+    }
+    :host([size="lg"]) kbd {
+      min-width: var(--cg-component-kbd-min-width-lg);
+      padding: var(--cg-component-kbd-padding-y-lg) var(--cg-component-kbd-padding-x-lg);
+      font-size: var(--cg-component-kbd-font-size-lg);
+    }
+
+    :host([variant="outline"]) kbd {
+      background: transparent;
+    }
+
+    .plus {
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+    }
+  `];
+a([
+  g()
+], r.prototype, "keys", 2);
+a([
+  g({ reflect: !0 })
+], r.prototype, "size", 2);
+a([
+  g({ reflect: !0 })
+], r.prototype, "variant", 2);
+r = a([
+  b("cg-kbd")
+], r);
+export {
+  r as CgKbd
+};
+//# sourceMappingURL=cg-kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-kbd.js","sources":["../../../src/components/cg-kbd/cg-kbd.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase } from '../../styles/index.js';\n\n/**\n * @element cg-kbd\n * Keyboard shortcut display chip. Use for showing keyboard combinations like ⌘K.\n *\n * @example\n * ```html\n * <cg-kbd keys=\"⌘K\"></cg-kbd>\n * <cg-kbd keys=\"Shift,⌘,P\"></cg-kbd>\n * <cg-kbd>Esc</cg-kbd>\n * ```\n *\n * @slot - Key content (alternative to keys property)\n */\n@customElement('cg-kbd')\nexport class CgKbd extends LitElement {\n  static override styles = [hostBase, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n\n    kbd {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--cg-color-action-tertiary-background-hover);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-bottom-width: var(--cg-border-width-100);\n      border-radius: var(--cg-component-kbd-radius);\n      color: var(--cg-color-surface-base-text);\n      font-family: var(--cg-font-family-mono);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-tight);\n      box-shadow:\n        inset 0 var(--cg-border-width-50) 0 var(--cg-overlay-accent-subtle),\n        0 var(--cg-border-width-50) 0 var(--cg-color-surface-cards-border);\n    }\n\n    /* Sizes — driven entirely by Tier-3 tokens for system-wide consistency. */\n    :host([size=\"sm\"]) kbd {\n      min-width: var(--cg-component-kbd-min-width-sm);\n      padding: var(--cg-component-kbd-padding-y-sm) var(--cg-component-kbd-padding-x-sm);\n      font-size: var(--cg-component-kbd-font-size-sm);\n    }\n    :host([size=\"md\"]) kbd {\n      min-width: var(--cg-component-kbd-min-width-md);\n      padding: var(--cg-component-kbd-padding-y-md) var(--cg-component-kbd-padding-x-md);\n      font-size: var(--cg-component-kbd-font-size-md);\n    }\n    :host([size=\"lg\"]) kbd {\n      min-width: var(--cg-component-kbd-min-width-lg);\n      padding: var(--cg-component-kbd-padding-y-lg) var(--cg-component-kbd-padding-x-lg);\n      font-size: var(--cg-component-kbd-font-size-lg);\n    }\n\n    :host([variant=\"outline\"]) kbd {\n      background: transparent;\n    }\n\n    .plus {\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n  `];\n\n  @property() keys: string = '';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'default' | 'outline' = 'default';\n\n  override render() {\n    if (this.keys) {\n      const keyArr = this.keys.split(',').map(k => k.trim()).filter(Boolean);\n      return html`\n        ${keyArr.map((key, i) => html`\n          ${i > 0 ? html`<span class=\"plus\">+</span>` : nothing}\n          <kbd>${key}</kbd>\n        `)}\n      `;\n    }\n    return html`<kbd><slot></slot></kbd>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-kbd': CgKbd;\n  }\n}\n"],"names":["CgKbd","LitElement","keyArr","k","html","key","i","nothing","hostBase","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAAoBC,EAAW;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAoDO,KAAA,OAAe,IACE,KAAA,OAA2B,MAC3B,KAAA,UAAiC;AAAA,EAAA;AAAA,EAErD,SAAS;AAChB,QAAI,KAAK,MAAM;AACb,YAAMC,IAAS,KAAK,KAAK,MAAM,GAAG,EAAE,IAAI,CAAAC,MAAKA,EAAE,KAAA,CAAM,EAAE,OAAO,OAAO;AACrE,aAAOC;AAAA,UACHF,EAAO,IAAI,CAACG,GAAKC,MAAMF;AAAA,YACrBE,IAAI,IAAIF,iCAAoCG,CAAO;AAAA,iBAC9CF,CAAG;AAAA,SACX,CAAC;AAAA;AAAA,IAEN;AACA,WAAOD;AAAA,EACT;AACF;AApEaJ,EACK,SAAS,CAACQ,GAAUC;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,GAiDnC;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GApDCX,EAoDC,WAAA,QAAA,CAAA;AACiBU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GArDhBX,EAqDkB,WAAA,QAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtDhBX,EAsDkB,WAAA,WAAA,CAAA;AAtDlBA,IAANU,EAAA;AAAA,EADNE,EAAc,QAAQ;AAAA,GACVZ,CAAA;"}

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

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-label> — Form label with required indicator, hint, and error text.
+ *
+ * Better than OpenUI's Label:
+ * - Required asterisk
+ * - Hint text (description below label)
+ * - Error text (replaces hint when in error state)
+ * - htmlFor association
+ */
+export declare class CgLabel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    text: string;
+    hint: string;
+    error: string;
+    htmlFor: string;
+    required: boolean;
+    disabled: boolean;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-label': CgLabel;
+    }
+}
+//# sourceMappingURL=cg-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-label.d.ts","sourceRoot":"","sources":["../../../src/components/cg-label/cg-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAyCnB;IAES,IAAI,SAAM;IACV,IAAI,SAAM;IACV,KAAK,SAAM;IACS,OAAO,SAAM;IAChB,QAAQ,UAAS;IACF,QAAQ,UAAS;IAEpD,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,89 @@
+import { css as p, LitElement as u, nothing as h, html as a } from "lit";
+import { property as o, customElement as f } from "lit/decorators.js";
+import { h as d, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (g, i, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? b(i, n) : i, l = g.length - 1, c; l >= 0; l--)
+    (c = g[l]) && (r = (s ? c(i, n, r) : c(r)) || r);
+  return s && r && m(i, n, r), r;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.text = "", this.hint = "", this.error = "", this.htmlFor = "", this.required = !1, this.disabled = !1;
+  }
+  render() {
+    return a`
+      <label for=${this.htmlFor || h}>
+        ${this.text}<slot></slot>
+        ${this.required ? a`<span class="required" aria-hidden="true"> *</span>` : h}
+      </label>
+      ${this.error ? a`<div class="error-text" role="alert">${this.error}</div>` : this.hint ? a`<div class="hint">${this.hint}</div>` : h}
+    `;
+  }
+};
+t.styles = [d, v, p`
+    :host {
+      margin-bottom: var(--cg-spacing-6);
+    }
+
+    label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      cursor: default;
+    }
+
+    :host([for]) label {
+      cursor: pointer;
+    }
+
+    :host([disabled]) label {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .required {
+      color: var(--cg-color-status-error-text-default);
+      font-weight: var(--cg-font-weight-bold);
+    }
+
+    .hint {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      margin-top: var(--cg-spacing-2);
+      line-height: var(--cg-line-height-snug);
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .error-text {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-status-error-text-default);
+      margin-top: var(--cg-spacing-2);
+      line-height: var(--cg-line-height-snug);
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+  `];
+e([
+  o()
+], t.prototype, "text", 2);
+e([
+  o()
+], t.prototype, "hint", 2);
+e([
+  o()
+], t.prototype, "error", 2);
+e([
+  o({ attribute: "for" })
+], t.prototype, "htmlFor", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "required", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = e([
+  f("cg-label")
+], t);
+export {
+  t as CgLabel
+};
+//# sourceMappingURL=cg-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-label.js","sources":["../../../src/components/cg-label/cg-label.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-label> — Form label with required indicator, hint, and error text.\n *\n * Better than OpenUI's Label:\n * - Required asterisk\n * - Hint text (description below label)\n * - Error text (replaces hint when in error state)\n * - htmlFor association\n */\n@customElement('cg-label')\nexport class CgLabel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      cursor: default;\n    }\n\n    :host([for]) label {\n      cursor: pointer;\n    }\n\n    :host([disabled]) label {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .required {\n      color: var(--cg-color-status-error-text-default);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    .hint {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-2);\n      line-height: var(--cg-line-height-snug);\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .error-text {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-error-text-default);\n      margin-top: var(--cg-spacing-2);\n      line-height: var(--cg-line-height-snug);\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n  `];\n\n  @property() text = '';\n  @property() hint = '';\n  @property() error = '';\n  @property({ attribute: 'for' }) htmlFor = '';\n  @property({ type: Boolean }) required = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  override render() {\n    return html`\n      <label for=${this.htmlFor || nothing}>\n        ${this.text}<slot></slot>\n        ${this.required ? html`<span class=\"required\" aria-hidden=\"true\"> *</span>` : nothing}\n      </label>\n      ${this.error\n        ? html`<div class=\"error-text\" role=\"alert\">${this.error}</div>`\n        : this.hint\n          ? html`<div class=\"hint\">${this.hint}</div>`\n          : nothing\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-label': CgLabel;\n  }\n}\n"],"names":["CgLabel","LitElement","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAcO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA4CO,KAAA,OAAO,IACP,KAAA,OAAO,IACP,KAAA,QAAQ,IACY,KAAA,UAAU,IACb,KAAA,WAAW,IACI,KAAA,WAAW;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,WAAOC;AAAA,mBACQ,KAAK,WAAWC,CAAO;AAAA,UAChC,KAAK,IAAI;AAAA,UACT,KAAK,WAAWD,yDAA4DC,CAAO;AAAA;AAAA,QAErF,KAAK,QACHD,yCAA4C,KAAK,KAAK,WACtD,KAAK,OACHA,sBAAyB,KAAK,IAAI,WAClCC,CACN;AAAA;AAAA,EAEJ;AACF;AAjEaH,EACK,SAAS,CAACI,GAAWC,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,GAyCnD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA5CCR,EA4CC,WAAA,QAAA,CAAA;AACAO,EAAA;AAAA,EAAXC,EAAA;AAAS,GA7CCR,EA6CC,WAAA,QAAA,CAAA;AACAO,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9CCR,EA8CC,WAAA,SAAA,CAAA;AACoBO,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GA/CnBR,EA+CqB,WAAA,WAAA,CAAA;AACHO,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhDhBR,EAgDkB,WAAA,YAAA,CAAA;AACeO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjD/BR,EAiDiC,WAAA,YAAA,CAAA;AAjDjCA,IAANO,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZT,CAAA;"}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-link> — Styled anchor element with variants.
+ *
+ * Features:
+ * - Hover underline animation (width grows from center)
+ * - External link icon with target=_blank
+ * - Color variants: default, accent, muted, underline
+ * - Disabled state, size variants
+ * - Focus-visible ring, proper ARIA
+ */
+export declare class CgLink extends LitElement {
+    static styles: import('lit').CSSResult[];
+    href: string;
+    variant: 'default' | 'accent' | 'muted' | 'underline';
+    external: boolean;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    private _onClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-link': CgLink;
+    }
+}
+//# sourceMappingURL=cg-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-link.d.ts","sourceRoot":"","sources":["../../../src/components/cg-link/cg-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;GASG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAsFnB;IAES,IAAI,SAAM;IACO,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAa;IAClE,QAAQ,UAAS;IACF,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,OAAO,CAAC,QAAQ;IAQP,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}