@cognivo/components 0.8.0

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

@@ -0,0 +1,294 @@
+import { css as u, LitElement as g, html as i, nothing as h } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
+import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var v = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (r, t, c, n) => {
+  for (var s = n > 1 ? void 0 : n ? k(t, c) : t, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (s = (n ? d(t, c, s) : d(s)) || s);
+  return n && s && v(t, c, s), s;
+};
+let e = class extends g {
+  constructor() {
+    super(), this.label = "", this.description = "", this.name = "", this.value = "", this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.required = !1, this.rounded = "sm", typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(r) {
+    super.updated(r), (r.has("checked") || r.has("value")) && this._internals?.setFormValue(this.checked ? this.value || "on" : null), (r.has("required") || r.has("checked")) && (this.required && !this.checked ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
+  }
+  formResetCallback() {
+    this.checked = this.hasAttribute("checked");
+  }
+  formStateRestoreCallback(r) {
+    this.checked = r === (this.value || "on");
+  }
+  _toggle(r) {
+    if (r.preventDefault(), this.disabled || this.loading) return;
+    const t = r.target;
+    t && t !== this && t.closest(
+      'a, button, [role="button"], [role="link"], input:not([type="checkbox"]), select, textarea'
+    ) || (this.checked = !this.checked, this.indeterminate = !1, this.dispatchEvent(new CustomEvent("cg-change", {
+      detail: { checked: this.checked, value: this.value },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  render() {
+    const r = this.indeterminate ? "indeterminate" : this.checked ? "checked" : "";
+    return i`
+      <label
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="checkbox"
+        aria-checked=${this.indeterminate ? "mixed" : String(this.checked)}
+        aria-disabled=${String(this.disabled)}
+        aria-required=${this.required ? "true" : "false"}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-busy=${this.loading ? "true" : "false"}
+        @click=${this._toggle}
+        @keydown=${(t) => {
+      (t.key === " " || t.key === "Enter") && (t.preventDefault(), this._toggle(t));
+    }}
+      >
+        <input type="checkbox" .checked=${this.checked} .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled} name=${this.name} value=${this.value}
+          tabindex="-1" aria-hidden="true"
+          @click=${(t) => t.stopPropagation()} />
+
+        ${this.loading ? i`<span class="loading-spinner" aria-hidden="true"></span>` : i`<span class="box ${r}">
+          ${this.checked ? i`
+            <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <path class="tick" d="M4 12L9 17L20 6"></path>
+            </svg>
+          ` : h}
+          ${this.indeterminate ? i`
+            <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+              <path class="dash" d="M5 12h14"></path>
+            </svg>
+          ` : h}
+        </span>`}
+
+        <span class="text-group">
+          <span class="label-text"><slot>${this.label}</slot></span>
+          <span class="description"><slot name="description">${this.description}</slot></span>
+        </span>
+      </label>
+    `;
+  }
+};
+e.formAssociated = !0;
+e.styles = [p, f, u`
+    :host { display: inline-block; }
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      cursor: pointer;
+      padding: var(--cg-spacing-6) 0;
+      min-height: 44px;
+      -webkit-tap-highlight-color: transparent;
+      user-select: none;
+    }
+    :host([disabled]) label {
+      pointer-events: none;
+    }
+    :host([disabled]) .box {
+      background: var(--cg-color-checkbox-background-disabled);
+      border-color: var(--cg-color-checkbox-border-disabled);
+    }
+    :host([disabled]) .check-icon {
+      color: var(--cg-color-checkbox-checkmark-disabled);
+    }
+
+    /* ── Box ── */
+    .box {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      flex-shrink: 0;
+      border: var(--cg-border-width-100) solid var(--cg-color-checkbox-border-default);
+      border-radius: var(--cg-border-radius-50);
+      background: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .box { border-radius: 0; }
+    :host([rounded="sm"]) .box { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .box { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .box { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .box { border-radius: var(--cg-border-radius-full); }
+
+    /* Hover */
+    :host(:not([disabled])) label:hover .box {
+      border-color: var(--cg-color-checkbox-background-hover);
+    }
+
+    /* Pressed */
+    :host(:not([disabled])) label:active .box {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    /* Focus ring */
+    label:focus-visible .box {
+      border-color: var(--cg-color-checkbox-border-focus);
+      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    /* ── Checked state ── */
+    .box.checked {
+      background: var(--cg-color-checkbox-background-checked);
+      border-color: var(--cg-color-checkbox-border-checked);
+      animation: boxPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);
+    }
+
+    /* Indeterminate */
+    .box.indeterminate {
+      background: var(--cg-color-checkbox-background-checked);
+      border-color: var(--cg-color-checkbox-border-checked);
+    }
+
+    /* ── Animated tick — stroke reveal ── */
+    .check-icon {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      color: var(--cg-color-checkbox-checkmark-default);
+      overflow: visible;
+    }
+
+    .check-icon .tick {
+      stroke-dasharray: 24;
+      stroke-dashoffset: 24;
+      animation: drawTick var(--cg-transition-duration-slow) 60ms var(--cg-transition-easing-ease-out) forwards;
+    }
+
+    .check-icon .dash {
+      stroke-dasharray: 14;
+      stroke-dashoffset: 14;
+      animation: drawDash var(--cg-transition-duration-default) 40ms var(--cg-transition-easing-ease-out) forwards;
+    }
+
+    @keyframes drawTick {
+      to { stroke-dashoffset: 0; }
+    }
+
+    @keyframes drawDash {
+      to { stroke-dashoffset: 0; }
+    }
+
+    @keyframes boxPop {
+      0% { transform: scale(1); }
+      30% { transform: scale(0.85); }
+      60% { transform: scale(1.08); }
+      80% { transform: scale(0.97); }
+      100% { transform: scale(1); }
+    }
+
+    /* Hidden native input */
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    /* ── Error state ── */
+    :host([error]) .box {
+      border-color: var(--cg-color-status-error-text-default);
+    }
+    :host([error]) .box.checked,
+    :host([error]) .box.indeterminate {
+      background: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-text-default);
+    }
+    :host([error]) .label-text {
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    /* ── Success state ── */
+    :host([success]) .box {
+      border-color: var(--cg-color-status-success-text-default);
+    }
+    :host([success]) .box.checked,
+    :host([success]) .box.indeterminate {
+      background: var(--cg-color-status-success-text-default);
+      border-color: var(--cg-color-status-success-text-default);
+    }
+    :host([success]) .label-text {
+      color: var(--cg-color-status-success-text-default);
+    }
+
+    /* ── Loading state ── */
+    :host([loading]) label { pointer-events: none; opacity: 0.5; }
+    .loading-spinner {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      flex-shrink: 0;
+      margin-top: var(--cg-spacing-2);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: cg-checkbox-spin var(--cg-transition-duration-slow) linear infinite;
+    }
+    @keyframes cg-checkbox-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Text */
+    .text-group { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }
+    .label-text {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+    .description {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+  `];
+o([
+  a()
+], e.prototype, "label", 2);
+o([
+  a()
+], e.prototype, "description", 2);
+o([
+  a()
+], e.prototype, "name", 2);
+o([
+  a()
+], e.prototype, "value", 2);
+o([
+  a({ type: Boolean })
+], e.prototype, "checked", 2);
+o([
+  a({ type: Boolean })
+], e.prototype, "indeterminate", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "success", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+o([
+  a({ type: Boolean })
+], e.prototype, "required", 2);
+o([
+  a({ reflect: !0 })
+], e.prototype, "rounded", 2);
+e = o([
+  b("cg-checkbox")
+], e);
+export {
+  e as CgCheckbox
+};
+//# sourceMappingURL=cg-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-checkbox.js","sources":["../../../src/components/cg-checkbox/cg-checkbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-checkbox\n * Checkbox with animated tick draw, spring bounce, and indeterminate state.\n * Supports rich label content via the default slot — links and other\n * interactive elements inside the label do not toggle the checkbox.\n *\n * @example\n * ```html\n * <cg-checkbox label=\"Accept terms\" description=\"Required to continue\"></cg-checkbox>\n * <cg-checkbox checked label=\"Notifications\"></cg-checkbox>\n * <cg-checkbox indeterminate label=\"Select all\"></cg-checkbox>\n * <cg-checkbox rounded=\"full\" checked label=\"Round checkbox\"></cg-checkbox>\n * <cg-checkbox>I agree to the <a href=\"/terms\">terms</a></cg-checkbox>\n * ```\n *\n * @slot - Default slot for label content (overrides `label` prop)\n * @slot description - Description content (overrides `description` prop)\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} cg-change - When toggled\n */\n@customElement('cg-checkbox')\nexport class CgCheckbox extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: inline-block; }\n\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      cursor: pointer;\n      padding: var(--cg-spacing-6) 0;\n      min-height: 44px;\n      -webkit-tap-highlight-color: transparent;\n      user-select: none;\n    }\n    :host([disabled]) label {\n      pointer-events: none;\n    }\n    :host([disabled]) .box {\n      background: var(--cg-color-checkbox-background-disabled);\n      border-color: var(--cg-color-checkbox-border-disabled);\n    }\n    :host([disabled]) .check-icon {\n      color: var(--cg-color-checkbox-checkmark-disabled);\n    }\n\n    /* ── Box ── */\n    .box {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-checkbox-border-default);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .box { border-radius: 0; }\n    :host([rounded=\"sm\"]) .box { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .box { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .box { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .box { border-radius: var(--cg-border-radius-full); }\n\n    /* Hover */\n    :host(:not([disabled])) label:hover .box {\n      border-color: var(--cg-color-checkbox-background-hover);\n    }\n\n    /* Pressed */\n    :host(:not([disabled])) label:active .box {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring */\n    label:focus-visible .box {\n      border-color: var(--cg-color-checkbox-border-focus);\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    /* ── Checked state ── */\n    .box.checked {\n      background: var(--cg-color-checkbox-background-checked);\n      border-color: var(--cg-color-checkbox-border-checked);\n      animation: boxPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    /* Indeterminate */\n    .box.indeterminate {\n      background: var(--cg-color-checkbox-background-checked);\n      border-color: var(--cg-color-checkbox-border-checked);\n    }\n\n    /* ── Animated tick — stroke reveal ── */\n    .check-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-checkbox-checkmark-default);\n      overflow: visible;\n    }\n\n    .check-icon .tick {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: drawTick var(--cg-transition-duration-slow) 60ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    .check-icon .dash {\n      stroke-dasharray: 14;\n      stroke-dashoffset: 14;\n      animation: drawDash var(--cg-transition-duration-default) 40ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes drawTick {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes drawDash {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes boxPop {\n      0% { transform: scale(1); }\n      30% { transform: scale(0.85); }\n      60% { transform: scale(1.08); }\n      80% { transform: scale(0.97); }\n      100% { transform: scale(1); }\n    }\n\n    /* Hidden native input */\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      pointer-events: none;\n    }\n\n    /* ── Error state ── */\n    :host([error]) .box {\n      border-color: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .box.checked,\n    :host([error]) .box.indeterminate {\n      background: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .label-text {\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Success state ── */\n    :host([success]) .box {\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .box.checked,\n    :host([success]) .box.indeterminate {\n      background: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .label-text {\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    /* ── Loading state ── */\n    :host([loading]) label { pointer-events: none; opacity: 0.5; }\n    .loading-spinner {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-2);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-checkbox-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-checkbox-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Text */\n    .text-group { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n    .label-text {\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      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n  `];\n\n  @property() label = '';\n  @property() description = '';\n  @property() name = '';\n  @property() value = '';\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) indeterminate = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) required = false;\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'sm';\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('checked') || changed.has('value')) {\n      this._internals?.setFormValue(this.checked ? (this.value || 'on') : null);\n    }\n    if (changed.has('required') || changed.has('checked')) {\n      if (this.required && !this.checked) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked');\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === (this.value || 'on');\n  }\n\n  private _toggle(e: Event) {\n    e.preventDefault();\n    if (this.disabled || this.loading) return;\n    const target = e.target as HTMLElement | null;\n    if (target && target !== this) {\n      const interactive = target.closest(\n        'a, button, [role=\"button\"], [role=\"link\"], input:not([type=\"checkbox\"]), select, textarea'\n      );\n      if (interactive) return;\n    }\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { checked: this.checked, value: this.value },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const state = this.indeterminate ? 'indeterminate' : this.checked ? 'checked' : '';\n\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-required=${this.required ? 'true' : 'false'}\n        aria-invalid=${this.error ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        @click=${this._toggle}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._toggle(e); } }}\n      >\n        <input type=\"checkbox\" .checked=${this.checked} .indeterminate=${this.indeterminate}\n          ?disabled=${this.disabled} name=${this.name} value=${this.value}\n          tabindex=\"-1\" aria-hidden=\"true\"\n          @click=${(e: Event) => e.stopPropagation()} />\n\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`<span class=\"box ${state}\">\n          ${this.checked ? html`\n            <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path class=\"tick\" d=\"M4 12L9 17L20 6\"></path>\n            </svg>\n          ` : nothing}\n          ${this.indeterminate ? html`\n            <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\">\n              <path class=\"dash\" d=\"M5 12h14\"></path>\n            </svg>\n          ` : nothing}\n        </span>`}\n\n        <span class=\"text-group\">\n          <span class=\"label-text\"><slot>${this.label}</slot></span>\n          <span class=\"description\"><slot name=\"description\">${this.description}</slot></span>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-checkbox': CgCheckbox; }\n}\n"],"names":["CgCheckbox","LitElement","changed","state","e","target","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-chip
+ * Pill-shaped tag/chip with neutral default, color variants, optional icon,
+ * removable X button, and toggleable selected state.
+ *
+ * @example
+ * ```html
+ * <cg-chip label="TypeScript"></cg-chip>
+ * <cg-chip label="Bug" variant="error" removable></cg-chip>
+ * <cg-chip label="Active" selected></cg-chip>
+ * ```
+ *
+ * @fires {CustomEvent<{label: string, selected: boolean}>} cg-chip-click - When the chip is clicked
+ * @fires {CustomEvent<{label: string}>} cg-chip-remove - When the remove button is clicked
+ */
+export declare class CgChip extends LitElement {
+    static styles: import('lit').CSSResult[];
+    label: string;
+    variant: 'default' | 'success' | 'warning' | 'error' | 'info';
+    removable: boolean;
+    size: 'sm' | 'md';
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    icon: string;
+    disabled: boolean;
+    selected: boolean;
+    private _handleClick;
+    private _handleRemove;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-chip': CgChip;
+    }
+}
+//# sourceMappingURL=cg-chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-chip.d.ts","sourceRoot":"","sources":["../../../src/components/cg-chip/cg-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;GAcG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAsKnB;IAEyB,KAAK,SAAM;IACI,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IACxF,SAAS,UAAS;IACJ,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACvC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IACxD,IAAI,SAAM;IACT,QAAQ,UAAS;IACF,QAAQ,UAAS;IAE7D,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAUZ,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

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

@@ -0,0 +1,256 @@
+import { css as u, LitElement as h, nothing as g, html as d } from "lit";
+import { property as a, customElement as v } from "lit/decorators.js";
+import { a as p, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (r, i, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? m(i, n) : i, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (o = (s ? l(i, n, o) : l(o)) || o);
+  return s && o && f(i, n, o), o;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.label = "", this.variant = "default", this.removable = !1, this.size = "md", this.rounded = "full", this.icon = "", this.disabled = !1, this.selected = !1;
+  }
+  _handleClick() {
+    this.disabled || (this.selected = !this.selected, this.dispatchEvent(new CustomEvent("cg-chip-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { label: this.label, selected: this.selected }
+    })));
+  }
+  _handleRemove(r) {
+    r.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("cg-chip-remove", {
+      bubbles: !0,
+      composed: !0,
+      detail: { label: this.label }
+    }));
+  }
+  render() {
+    return d`
+      <span
+        class="chip ${this.disabled ? "disabled" : ""}"
+        role="button"
+        tabindex="${this.disabled ? "-1" : "0"}"
+        aria-disabled="${this.disabled}"
+        aria-pressed="${this.selected}"
+        aria-label="${this.label}"
+        @click="${this._handleClick}"
+        @keydown="${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleClick()), (r.key === "Delete" || r.key === "Backspace") && this.removable && (r.preventDefault(), this._handleRemove(r));
+    }}"
+      >
+        ${this.icon ? d`<span class="chip-icon">${this.icon}</span>` : g}
+        <span class="chip-label">${this.label}</span>
+        ${this.removable && !this.disabled ? d`
+          <button
+            class="remove-btn"
+            aria-label="Remove ${this.label}"
+            tabindex="-1"
+            @click="${this._handleRemove}"
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+              <path d="M7.5 2.5L2.5 7.5M2.5 2.5l5 5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+            </svg>
+          </button>
+        ` : g}
+      </span>
+    `;
+  }
+};
+e.styles = [p, b, u`
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      cursor: pointer;
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      line-height: 1;
+      white-space: nowrap;
+      user-select: none;
+      -webkit-font-smoothing: antialiased;
+      transition:
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) .chip {
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      height: var(--cg-spacing-24);
+    }
+    :host([size="md"]) .chip {
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-sm);
+      height: var(--cg-spacing-32);
+    }
+
+    /* ── Hover ── */
+    .chip:hover:not(.disabled) {
+      border-color: var(--cg-color-input-border-hover);
+      transform: scale(1.02);
+    }
+
+    /* ── Press ── */
+    .chip:active:not(.disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    /* ── Focus ring ── */
+    .chip:focus-visible {
+      box-shadow:
+        0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);
+      outline: none;
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    /* ── Disabled ── */
+    .chip.disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    /* ── Variant: success ── */
+    :host([variant="success"]) .chip {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      border-color: var(--cg-color-status-success-border-default);
+    }
+    :host([variant="success"]) .chip:hover:not(.disabled) {
+      background: var(--cg-color-status-success-background-hover);
+    }
+
+    /* ── Variant: warning ── */
+    :host([variant="warning"]) .chip {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
+      border-color: var(--cg-color-status-warning-border-default);
+    }
+    :host([variant="warning"]) .chip:hover:not(.disabled) {
+      background: var(--cg-color-status-warning-background-hover);
+    }
+
+    /* ── Variant: error ── */
+    :host([variant="error"]) .chip {
+      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([variant="error"]) .chip:hover:not(.disabled) {
+      background: var(--cg-color-status-error-background-hover);
+    }
+
+    /* ── Variant: info ── */
+    :host([variant="info"]) .chip {
+      background: var(--cg-color-status-info-background-default);
+      color: var(--cg-color-status-info-text-default);
+      border-color: var(--cg-color-status-info-border-default);
+    }
+    :host([variant="info"]) .chip:hover:not(.disabled) {
+      background: var(--cg-color-status-info-background-hover);
+    }
+
+    /* ── Selected state ── */
+    :host([selected]) .chip {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: var(--cg-color-action-primary-background-default);
+    }
+    :host([selected]) .chip:hover:not(.disabled) {
+      background: var(--cg-color-action-primary-background-hover);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .chip { border-radius: 0; }
+    :host([rounded="sm"]) .chip { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .chip { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .chip { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .chip { border-radius: var(--cg-border-radius-full); }
+
+    /* ── Icon ── */
+    .chip-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    /* ── Label ── */
+    .chip-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    /* ── Remove button ── */
+    .remove-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      margin-left: var(--cg-spacing-2);
+      margin-right: calc(-1 * var(--cg-spacing-4));
+      border: none;
+      border-radius: 50%;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      padding: 0;
+      flex-shrink: 0;
+      opacity: 0.6;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .remove-btn:hover { opacity: 1; }
+    .remove-btn:active { transform: scale(0.9); }
+    .remove-btn:focus-visible {
+      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);
+      outline: none;
+    }
+  `];
+t([
+  a({ type: String })
+], e.prototype, "label", 2);
+t([
+  a({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+t([
+  a({ type: Boolean })
+], e.prototype, "removable", 2);
+t([
+  a({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  a({ reflect: !0 })
+], e.prototype, "rounded", 2);
+t([
+  a({ type: String })
+], e.prototype, "icon", 2);
+t([
+  a({ type: Boolean })
+], e.prototype, "disabled", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "selected", 2);
+e = t([
+  v("cg-chip")
+], e);
+export {
+  e as CgChip
+};
+//# sourceMappingURL=cg-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-chip.js","sources":["../../../src/components/cg-chip/cg-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-chip\n * Pill-shaped tag/chip with neutral default, color variants, optional icon,\n * removable X button, and toggleable selected state.\n *\n * @example\n * ```html\n * <cg-chip label=\"TypeScript\"></cg-chip>\n * <cg-chip label=\"Bug\" variant=\"error\" removable></cg-chip>\n * <cg-chip label=\"Active\" selected></cg-chip>\n * ```\n *\n * @fires {CustomEvent<{label: string, selected: boolean}>} cg-chip-click - When the chip is clicked\n * @fires {CustomEvent<{label: string}>} cg-chip-remove - When the remove button is clicked\n */\n@customElement('cg-chip')\nexport class CgChip extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      user-select: none;\n      -webkit-font-smoothing: antialiased;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .chip {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      height: var(--cg-spacing-24);\n    }\n    :host([size=\"md\"]) .chip {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      height: var(--cg-spacing-32);\n    }\n\n    /* ── Hover ── */\n    .chip:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n      transform: scale(1.02);\n    }\n\n    /* ── Press ── */\n    .chip:active:not(.disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Focus ring ── */\n    .chip:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    /* ── Disabled ── */\n    .chip.disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    /* ── Variant: success ── */\n    :host([variant=\"success\"]) .chip {\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([variant=\"success\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-success-background-hover);\n    }\n\n    /* ── Variant: warning ── */\n    :host([variant=\"warning\"]) .chip {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-color: var(--cg-color-status-warning-border-default);\n    }\n    :host([variant=\"warning\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-warning-background-hover);\n    }\n\n    /* ── Variant: error ── */\n    :host([variant=\"error\"]) .chip {\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([variant=\"error\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-error-background-hover);\n    }\n\n    /* ── Variant: info ── */\n    :host([variant=\"info\"]) .chip {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n      border-color: var(--cg-color-status-info-border-default);\n    }\n    :host([variant=\"info\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-info-background-hover);\n    }\n\n    /* ── Selected state ── */\n    :host([selected]) .chip {\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-background-default);\n    }\n    :host([selected]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .chip { border-radius: 0; }\n    :host([rounded=\"sm\"]) .chip { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .chip { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .chip { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .chip { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Icon ── */\n    .chip-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Label ── */\n    .chip-label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 200px;\n    }\n\n    /* ── Remove button ── */\n    .remove-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      margin-left: var(--cg-spacing-2);\n      margin-right: calc(-1 * var(--cg-spacing-4));\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      opacity: 0.6;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .remove-btn:hover { opacity: 1; }\n    .remove-btn:active { transform: scale(0.9); }\n    .remove-btn:focus-visible {\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n  `];\n\n  @property({ type: String }) label = '';\n  @property({ type: String, reflect: true }) variant: 'default' | 'success' | 'warning' | 'error' | 'info' = 'default';\n  @property({ type: Boolean }) removable = false;\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'full';\n  @property({ type: String }) icon = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  private _handleClick() {\n    if (this.disabled) return;\n    this.selected = !this.selected;\n    this.dispatchEvent(new CustomEvent('cg-chip-click', {\n      bubbles: true,\n      composed: true,\n      detail: { label: this.label, selected: this.selected },\n    }));\n  }\n\n  private _handleRemove(e: Event) {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-chip-remove', {\n      bubbles: true,\n      composed: true,\n      detail: { label: this.label },\n    }));\n  }\n\n  override render() {\n    return html`\n      <span\n        class=\"chip ${this.disabled ? 'disabled' : ''}\"\n        role=\"button\"\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-pressed=\"${this.selected}\"\n        aria-label=\"${this.label}\"\n        @click=\"${this._handleClick}\"\n        @keydown=\"${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            this._handleClick();\n          }\n          if ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n            e.preventDefault();\n            this._handleRemove(e);\n          }\n        }}\"\n      >\n        ${this.icon ? html`<span class=\"chip-icon\">${this.icon}</span>` : nothing}\n        <span class=\"chip-label\">${this.label}</span>\n        ${this.removable && !this.disabled ? html`\n          <button\n            class=\"remove-btn\"\n            aria-label=\"Remove ${this.label}\"\n            tabindex=\"-1\"\n            @click=\"${this._handleRemove}\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M7.5 2.5L2.5 7.5M2.5 2.5l5 5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\"/>\n            </svg>\n          </button>\n        ` : nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-chip': CgChip;\n  }\n}\n"],"names":["CgChip","LitElement","e","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}