@cognivo/components 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/cg-toggle/cg-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA2InB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASM,OAAO,UAAS;IAChB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAW;IACjD,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACX,IAAI,SAAM;IAEb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,OAAO;IAUN,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,204 @@
+import { css as l, LitElement as u, html as g } from "lit";
+import { property as e, customElement as h } from "lit/decorators.js";
+import { a as b, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var p = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (a, s, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? f(s, i) : s, c = a.length - 1, d; c >= 0; c--)
+    (d = a[c]) && (r = (n ? d(s, i, r) : d(r)) || r);
+  return n && r && p(s, i, r), r;
+};
+let t = class extends u {
+  constructor() {
+    super(), this.pressed = !1, this.disabled = !1, this.size = "md", this.variant = "ghost", this.rounded = "md", this.value = "", this.name = "", typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(a) {
+    (a.has("pressed") || a.has("value")) && this._internals?.setFormValue(this.pressed ? this.value : null);
+  }
+  _toggle() {
+    this.disabled || (this.pressed = !this.pressed, this.dispatchEvent(new CustomEvent("cg-toggle-change", {
+      detail: { pressed: this.pressed, value: this.value },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  render() {
+    return g`
+      <button
+        type="button"
+        aria-pressed=${this.pressed ? "true" : "false"}
+        ?disabled=${this.disabled}
+        @click=${this._toggle}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+t.styles = [b, v, l`
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-6);
+      height: var(--cg-component-toggle-height-md);
+      padding: 0 var(--cg-spacing-12);
+      border: var(--cg-border-width-50) solid transparent;
+      border-radius: var(--cg-component-toggle-radius);
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      font-family: inherit;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      user-select: none;
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    /* Force slotted content to inherit the button's color. !important is
+       required because page-level element rules on strong/em/u have higher
+       specificity than ::slotted(asterisk) and would otherwise win the
+       cascade, breaking pressed-state contrast. */
+    ::slotted(*) {
+      color: inherit !important;
+    }
+
+    /* Sizes */
+    :host([size="sm"]) button {
+      height: var(--cg-component-toggle-height-sm);
+      padding: 0 var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+    }
+    :host([size="lg"]) button {
+      height: var(--cg-component-toggle-height-lg);
+      padding: 0 var(--cg-spacing-16);
+      font-size: var(--cg-font-size-base);
+    }
+
+    /* Variants */
+    :host([variant="outline"]) button {
+      border-color: var(--cg-color-surface-cards-border);
+    }
+    :host([variant="solid"]) button {
+      background: var(--cg-color-action-secondary-background-default);
+    }
+
+    /* Hover — each variant hovers within its own surface family. */
+    :host([variant="ghost"]) button:hover:not(:disabled),
+    :host(:not([variant])) button:hover:not(:disabled) {
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    :host([variant="outline"]) button:hover:not(:disabled) {
+      background: var(--cg-color-action-tertiary-background-hover);
+      border-color: var(--cg-color-input-border-hover);
+    }
+    :host([variant="solid"]) button:hover:not(:disabled) {
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+
+    /* Pressed — each variant has a *visually distinct* signature so the
+       three press states aren't confusable:
+         ghost   = BG-only marker (soft accent tint, no border)
+         outline = BORDER-led marker (accent border + hairline tint)
+         solid   = FILL-led marker (full brand bg + elevation) */
+
+    /* Ghost pressed — BG TINT only. Text stays the normal body color so
+       the signal is the fill, not a color shift. Subtle indicator. */
+    :host([pressed]) button,
+    :host([variant="ghost"][pressed]) button {
+      background: var(--cg-overlay-accent-medium);
+      color: var(--cg-color-surface-base-text);
+      border-color: transparent;
+      box-shadow: none;
+    }
+    :host([pressed]) button:hover:not(:disabled),
+    :host([variant="ghost"][pressed]) button:hover:not(:disabled) {
+      background: var(--cg-overlay-accent-strong);
+    }
+
+    /* Outline pressed — ACCENT BORDER + ACCENT TEXT. Border is the signal,
+       text colour reinforces it. Visually distinct from ghost (which keeps
+       normal text color). Border-width stays stable via inset shadow to
+       avoid a 1px layout shift on press. */
+    :host([variant="outline"][pressed]) button {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-accent-text);
+      border-color: var(--cg-color-action-primary-background-default);
+      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-background-default);
+    }
+    :host([variant="outline"][pressed]) button:hover:not(:disabled) {
+      background: var(--cg-overlay-accent-medium);
+    }
+
+    /* Solid pressed — full brand fill with elevation. */
+    :host([variant="solid"][pressed]) button {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: var(--cg-color-action-primary-border-default);
+      box-shadow: var(--cg-shadow-elevation-sm);
+    }
+    :host([variant="solid"][pressed]) button:hover:not(:disabled) {
+      background: var(--cg-color-action-primary-background-hover);
+    }
+
+    /* Press feedback */
+    button:active:not(:disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    /* Focus */
+    button:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    /* Disabled */
+    :host([disabled]) button {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) button { border-radius: 0; }
+    :host([rounded="sm"]) button { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) button { border-radius: var(--cg-component-toggle-radius); }
+    :host([rounded="lg"]) button { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) button { border-radius: var(--cg-border-radius-full); }
+  `];
+t.formAssociated = !0;
+o([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "pressed", 2);
+o([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+o([
+  e({ reflect: !0 })
+], t.prototype, "size", 2);
+o([
+  e({ reflect: !0 })
+], t.prototype, "variant", 2);
+o([
+  e({ reflect: !0 })
+], t.prototype, "rounded", 2);
+o([
+  e()
+], t.prototype, "value", 2);
+o([
+  e()
+], t.prototype, "name", 2);
+t = o([
+  h("cg-toggle")
+], t);
+export {
+  t as CgToggle
+};
+//# sourceMappingURL=cg-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toggle.js","sources":["../../../src/components/cg-toggle/cg-toggle.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-toggle\n * Single press-state button. Uses aria-pressed for toggle semantics.\n * Different from cg-switch (on/off) and cg-button (action).\n *\n * @example\n * ```html\n * <cg-toggle pressed>Bold</cg-toggle>\n * <cg-toggle variant=\"outline\">Italic</cg-toggle>\n * ```\n *\n * @slot - Toggle content (text, icon)\n *\n * @fires {CustomEvent<{pressed: boolean, value: string}>} cg-toggle-change\n */\n@customElement('cg-toggle')\nexport class CgToggle extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n    }\n\n    button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-component-toggle-height-md);\n      padding: 0 var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid transparent;\n      border-radius: var(--cg-component-toggle-radius);\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      user-select: none;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        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\n    /* Force slotted content to inherit the button's color. !important is\n       required because page-level element rules on strong/em/u have higher\n       specificity than ::slotted(asterisk) and would otherwise win the\n       cascade, breaking pressed-state contrast. */\n    ::slotted(*) {\n      color: inherit !important;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) button {\n      height: var(--cg-component-toggle-height-sm);\n      padding: 0 var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"lg\"]) button {\n      height: var(--cg-component-toggle-height-lg);\n      padding: 0 var(--cg-spacing-16);\n      font-size: var(--cg-font-size-base);\n    }\n\n    /* Variants */\n    :host([variant=\"outline\"]) button {\n      border-color: var(--cg-color-surface-cards-border);\n    }\n    :host([variant=\"solid\"]) button {\n      background: var(--cg-color-action-secondary-background-default);\n    }\n\n    /* Hover — each variant hovers within its own surface family. */\n    :host([variant=\"ghost\"]) button:hover:not(:disabled),\n    :host(:not([variant])) button:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([variant=\"outline\"]) button:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-color: var(--cg-color-input-border-hover);\n    }\n    :host([variant=\"solid\"]) button:hover:not(:disabled) {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n\n    /* Pressed — each variant has a *visually distinct* signature so the\n       three press states aren't confusable:\n         ghost   = BG-only marker (soft accent tint, no border)\n         outline = BORDER-led marker (accent border + hairline tint)\n         solid   = FILL-led marker (full brand bg + elevation) */\n\n    /* Ghost pressed — BG TINT only. Text stays the normal body color so\n       the signal is the fill, not a color shift. Subtle indicator. */\n    :host([pressed]) button,\n    :host([variant=\"ghost\"][pressed]) button {\n      background: var(--cg-overlay-accent-medium);\n      color: var(--cg-color-surface-base-text);\n      border-color: transparent;\n      box-shadow: none;\n    }\n    :host([pressed]) button:hover:not(:disabled),\n    :host([variant=\"ghost\"][pressed]) button:hover:not(:disabled) {\n      background: var(--cg-overlay-accent-strong);\n    }\n\n    /* Outline pressed — ACCENT BORDER + ACCENT TEXT. Border is the signal,\n       text colour reinforces it. Visually distinct from ghost (which keeps\n       normal text color). Border-width stays stable via inset shadow to\n       avoid a 1px layout shift on press. */\n    :host([variant=\"outline\"][pressed]) button {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-accent-text);\n      border-color: var(--cg-color-action-primary-background-default);\n      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-background-default);\n    }\n    :host([variant=\"outline\"][pressed]) button:hover:not(:disabled) {\n      background: var(--cg-overlay-accent-medium);\n    }\n\n    /* Solid pressed — full brand fill with elevation. */\n    :host([variant=\"solid\"][pressed]) button {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-border-default);\n      box-shadow: var(--cg-shadow-elevation-sm);\n    }\n    :host([variant=\"solid\"][pressed]) button:hover:not(:disabled) {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* Press feedback */\n    button:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus */\n    button:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    /* Disabled */\n    :host([disabled]) button {\n      opacity: 0.45;\n      cursor: not-allowed;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) button { border-radius: 0; }\n    :host([rounded=\"sm\"]) button { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) button { border-radius: var(--cg-component-toggle-radius); }\n    :host([rounded=\"lg\"]) button { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) button { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property({ type: Boolean, reflect: true }) pressed = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'ghost' | 'outline' | 'solid' = 'ghost';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property() value = '';\n  @property() name = '';\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('pressed') || changed.has('value')) {\n      this._internals?.setFormValue(this.pressed ? this.value : null);\n    }\n  }\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.pressed = !this.pressed;\n    this.dispatchEvent(new CustomEvent('cg-toggle-change', {\n      detail: { pressed: this.pressed, value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        aria-pressed=${this.pressed ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @click=${this._toggle}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-toggle': CgToggle;\n  }\n}\n"],"names":["CgToggle","LitElement","changed","html","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAoBO,IAAMA,IAAN,cAAuBC,EAAW;AAAA,EAiJvC,cAAc;AACZ,UAAA,GAM0C,KAAA,UAAU,IACV,KAAA,WAAW,IAC1B,KAAA,OAA2B,MAC3B,KAAA,UAAyC,SACzC,KAAA,UAAgD,MACjE,KAAA,QAAQ,IACR,KAAA,OAAO,IAXb,OAAO,KAAK,mBAAoB,eAClC,KAAK,aAAa,KAAK,gBAAA;AAAA,EAE3B;AAAA,EAUS,QAAQC,GAAqC;AACpD,KAAIA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,OAAO,MAC/C,KAAK,YAAY,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAElE;AAAA,EAEQ,UAAgB;AACtB,IAAI,KAAK,aACT,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,cAAc,IAAI,YAAY,oBAAoB;AAAA,MACrD,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,MAAA;AAAA,MAC7C,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,uBAGY,KAAK,UAAU,SAAS,OAAO;AAAA,oBAClC,KAAK,QAAQ;AAAA,iBAChB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAK3B;AACF;AA5LaH,EACK,SAAS,CAACI,GAAUC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2IlD;AA5IUN,EA8IJ,iBAAiB;AAUoBO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxJ/BR,EAwJiC,WAAA,WAAA,CAAA;AACAO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzJ/BR,EAyJiC,WAAA,YAAA,CAAA;AACfO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1JhBR,EA0JkB,WAAA,QAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA3JhBR,EA2JkB,WAAA,WAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5JhBR,EA4JkB,WAAA,WAAA,CAAA;AACjBO,EAAA;AAAA,EAAXC,EAAA;AAAS,GA7JCR,EA6JC,WAAA,SAAA,CAAA;AACAO,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9JCR,EA8JC,WAAA,QAAA,CAAA;AA9JDA,IAANO,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbT,CAAA;"}

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-toggle-group
+ * Group of cg-toggle elements with single or multiple selection.
+ *
+ * @example
+ * ```html
+ * <cg-toggle-group type="single" value="left">
+ *   <cg-toggle value="left">Left</cg-toggle>
+ *   <cg-toggle value="center">Center</cg-toggle>
+ *   <cg-toggle value="right">Right</cg-toggle>
+ * </cg-toggle-group>
+ * ```
+ *
+ * @slot - cg-toggle elements
+ *
+ * @fires {CustomEvent<{value: string | string[]}>} cg-toggle-group-change
+ */
+export declare class CgToggleGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    type: 'single' | 'multiple';
+    value: string | string[];
+    disabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+    size: 'sm' | 'md' | 'lg';
+    variant: 'ghost' | 'outline' | 'solid';
+    private _toggles;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onToggleChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-toggle-group': CgToggleGroup;
+    }
+}
+//# sourceMappingURL=cg-toggle-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-toggle-group/cg-toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAoBnB;IAES,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IACvC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAM;IACE,QAAQ,UAAS;IAChC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACtD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAW;IAEpC,OAAO,CAAC,QAAQ,CAAc;IAE/D,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAmBrD,OAAO,CAAC,eAAe,CAgCrB;IAEO,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,112 @@
+import { css as u, LitElement as c, html as h } from "lit";
+import { property as a, queryAssignedElements as p, customElement as d } from "lit/decorators.js";
+import { a as v, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (s, t, e, r) => {
+  for (var l = r > 1 ? void 0 : r ? y(t, e) : t, n = s.length - 1, g; n >= 0; n--)
+    (g = s[n]) && (l = (r ? g(t, e, l) : g(l)) || l);
+  return r && l && m(t, e, l), l;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this.type = "single", this.value = "", this.disabled = !1, this.orientation = "horizontal", this.size = "md", this.variant = "ghost", this._onToggleChange = (s) => {
+      const t = s.target;
+      if (!(!t || !("pressed" in t))) {
+        if (this.type === "single")
+          if (t.pressed) {
+            this.value = t.value;
+            for (const e of this._toggles)
+              e !== t && (e.pressed = !1);
+          } else
+            this.value = "";
+        else {
+          const e = Array.isArray(this.value) ? [...this.value] : [];
+          if (t.pressed)
+            e.includes(t.value) || e.push(t.value);
+          else {
+            const r = e.indexOf(t.value);
+            r >= 0 && e.splice(r, 1);
+          }
+          this.value = e;
+        }
+        this.dispatchEvent(new CustomEvent("cg-toggle-group-change", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        }));
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("cg-toggle-change", this._onToggleChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("cg-toggle-change", this._onToggleChange);
+  }
+  updated(s) {
+    if (!s.has("value") && !s.has("size") && !s.has("variant") && !s.has("disabled") && !s.has("type")) return;
+    const t = this._toggles;
+    for (const e of t)
+      if (e.size = this.size, e.variant = this.variant, this.disabled && (e.disabled = !0), this.type === "single")
+        e.pressed = e.value === this.value;
+      else {
+        const r = Array.isArray(this.value) ? this.value : [this.value];
+        e.pressed = r.includes(e.value);
+      }
+  }
+  render() {
+    return h`
+      <div role=${this.type === "multiple" ? "toolbar" : "group"}>
+        <slot @slotchange=${() => this.requestUpdate()}></slot>
+      </div>
+    `;
+  }
+};
+i.styles = [v, f, u`
+    :host {
+      display: inline-flex;
+      gap: var(--cg-spacing-4);
+    }
+    :host([orientation="vertical"]) {
+      flex-direction: column;
+    }
+
+    /* Connected pill mode: when variant=outline, flush-join neighbors */
+    :host([variant="outline"]) {
+      gap: 0;
+    }
+    :host([variant="outline"]) ::slotted(cg-toggle:not(:first-child)) {
+      margin-left: calc(-1 * var(--cg-border-width-50));
+    }
+    :host([variant="outline"][orientation="vertical"]) ::slotted(cg-toggle:not(:first-child)) {
+      margin-left: 0;
+      margin-top: calc(-1 * var(--cg-border-width-50));
+    }
+  `];
+o([
+  a()
+], i.prototype, "type", 2);
+o([
+  a()
+], i.prototype, "value", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  a({ reflect: !0 })
+], i.prototype, "orientation", 2);
+o([
+  a({ reflect: !0 })
+], i.prototype, "size", 2);
+o([
+  a({ reflect: !0 })
+], i.prototype, "variant", 2);
+o([
+  p({ flatten: !0 })
+], i.prototype, "_toggles", 2);
+i = o([
+  d("cg-toggle-group")
+], i);
+export {
+  i as CgToggleGroup
+};
+//# sourceMappingURL=cg-toggle-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-toggle-group.js","sources":["../../../src/components/cg-toggle-group/cg-toggle-group.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\nimport type { CgToggle } from '../cg-toggle/cg-toggle.js';\n\n/**\n * @element cg-toggle-group\n * Group of cg-toggle elements with single or multiple selection.\n *\n * @example\n * ```html\n * <cg-toggle-group type=\"single\" value=\"left\">\n *   <cg-toggle value=\"left\">Left</cg-toggle>\n *   <cg-toggle value=\"center\">Center</cg-toggle>\n *   <cg-toggle value=\"right\">Right</cg-toggle>\n * </cg-toggle-group>\n * ```\n *\n * @slot - cg-toggle elements\n *\n * @fires {CustomEvent<{value: string | string[]}>} cg-toggle-group-change\n */\n@customElement('cg-toggle-group')\nexport class CgToggleGroup extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n      gap: var(--cg-spacing-4);\n    }\n    :host([orientation=\"vertical\"]) {\n      flex-direction: column;\n    }\n\n    /* Connected pill mode: when variant=outline, flush-join neighbors */\n    :host([variant=\"outline\"]) {\n      gap: 0;\n    }\n    :host([variant=\"outline\"]) ::slotted(cg-toggle:not(:first-child)) {\n      margin-left: calc(-1 * var(--cg-border-width-50));\n    }\n    :host([variant=\"outline\"][orientation=\"vertical\"]) ::slotted(cg-toggle:not(:first-child)) {\n      margin-left: 0;\n      margin-top: calc(-1 * var(--cg-border-width-50));\n    }\n  `];\n\n  @property() type: 'single' | 'multiple' = 'single';\n  @property() value: string | string[] = '';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'ghost' | 'outline' | 'solid' = 'ghost';\n\n  @queryAssignedElements({ flatten: true }) private _toggles!: CgToggle[];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('cg-toggle-change', this._onToggleChange as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('cg-toggle-change', this._onToggleChange as EventListener);\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    // Only sync when relevant props change (avoids infinite loops)\n    if (!changed.has('value') && !changed.has('size') && !changed.has('variant') && !changed.has('disabled') && !changed.has('type')) return;\n\n    const toggles = this._toggles;\n    for (const toggle of toggles) {\n      toggle.size = this.size;\n      toggle.variant = this.variant;\n      if (this.disabled) toggle.disabled = true;\n\n      if (this.type === 'single') {\n        toggle.pressed = toggle.value === this.value;\n      } else {\n        const values = Array.isArray(this.value) ? this.value : [this.value];\n        toggle.pressed = values.includes(toggle.value);\n      }\n    }\n  }\n\n  private _onToggleChange = (e: Event): void => {\n    const target = e.target as CgToggle;\n    if (!target || !('pressed' in target)) return;\n\n    if (this.type === 'single') {\n      // Only one can be pressed\n      if (target.pressed) {\n        this.value = target.value;\n        // Deselect siblings\n        for (const t of this._toggles) {\n          if (t !== target) t.pressed = false;\n        }\n      } else {\n        this.value = '';\n      }\n    } else {\n      // Multiple selection\n      const current = Array.isArray(this.value) ? [...this.value] : [];\n      if (target.pressed) {\n        if (!current.includes(target.value)) current.push(target.value);\n      } else {\n        const idx = current.indexOf(target.value);\n        if (idx >= 0) current.splice(idx, 1);\n      }\n      this.value = current;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-toggle-group-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render() {\n    return html`\n      <div role=${this.type === 'multiple' ? 'toolbar' : 'group'}>\n        <slot @slotchange=${() => this.requestUpdate()}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-toggle-group': CgToggleGroup;\n  }\n}\n"],"names":["CgToggleGroup","LitElement","e","target","t","current","idx","changed","toggles","toggle","values","html","hostBase","reducedMotion","css","__decorateClass","property","queryAssignedElements","customElement"],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-tooltip
+ * Hover/focus tooltip with arrow, viewport-aware positioning, and fade+scale animation.
+ *
+ * @example
+ * ```html
+ * <cg-tooltip content="Save your work" position="top">
+ *   <cg-button>Save</cg-button>
+ * </cg-tooltip>
+ * <cg-tooltip position="bottom">
+ *   <cg-button>Rich</cg-button>
+ *   <div slot="content"><strong>Bold</strong> tooltip</div>
+ * </cg-tooltip>
+ * ```
+ *
+ * @slot - Default slot for the trigger element
+ * @slot content - Rich HTML tooltip content (alternative to `content` property)
+ *
+ * @cssprop --cg-color-tooltip-background - Tooltip background
+ * @cssprop --cg-font-size-xs - Tooltip font size (12px)
+ * @cssprop --cg-component-tooltip-radius - Tooltip border radius
+ * @cssprop --cg-transition-duration-slow - Fade+scale animation duration (250ms)
+ */
+export declare class CgTooltip extends LitElement {
+    static styles: import('lit').CSSResult;
+    content: string;
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    variant: 'default' | 'error' | 'success';
+    position: 'top' | 'bottom' | 'left' | 'right';
+    delay: number;
+    disabled: boolean;
+    private _visible;
+    private _closing;
+    /** Effective position after viewport edge detection (may differ from `position` prop). */
+    private _effectivePosition;
+    private _showTimeout;
+    private _hideTimeout;
+    private _tooltipId;
+    private _escapeHandler;
+    /** Check if the tooltip has rich slot content (named "content" slot). */
+    private get _hasContent();
+    /**
+     * Adjusts the effective position based on viewport edge detection.
+     * Called after the tooltip becomes visible so we can measure its bounding rect.
+     */
+    private _adjustPosition;
+    private _show;
+    private _handleEscape;
+    private _hide;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-tooltip': CgTooltip;
+    }
+}
+//# sourceMappingURL=cg-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/cg-tooltip/cg-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BA4KpB;IAE0B,OAAO,SAAM;IACZ,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvC,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAa;IACrD,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAS;IACrE,KAAK,SAAO;IACX,QAAQ,UAAS;IAG9C,OAAO,CAAC,QAAQ,CAAS;IAEhB,OAAO,CAAC,QAAQ,CAAS;IAElC,0FAA0F;IAE1F,OAAO,CAAC,kBAAkB,CAA8C;IAExE,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,UAAU,CAAuD;IACzE,OAAO,CAAC,cAAc,CAAiC;IAEvD,yEAAyE;IACzE,OAAO,KAAK,WAAW,GAEtB;IAED;;;OAGG;IACH,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,KAAK;IAgBJ,oBAAoB;IAWpB,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}