@cognivo/components 0.8.0

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

@@ -0,0 +1,277 @@
+import { css as p, LitElement as d, nothing as h, html as f } from "lit";
+import { property as s, state as g, customElement as u } from "lit/decorators.js";
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (r, e, n, a) => {
+  for (var t = a > 1 ? void 0 : a ? m(e, n) : e, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (t = (a ? l(e, n, t) : l(t)) || t);
+  return a && t && v(e, n, t), t;
+};
+let o = class extends d {
+  constructor() {
+    super(...arguments), this.content = "", this.rounded = "md", this.variant = "default", this.position = "top", this.delay = 300, this.disabled = !1, this._visible = !1, this._closing = !1, this._effectivePosition = "top", this._showTimeout = null, this._hideTimeout = null, this._tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`, this._escapeHandler = this._handleEscape.bind(this);
+  }
+  /** Check if the tooltip has rich slot content (named "content" slot). */
+  get _hasContent() {
+    return !!this.content || !!this.querySelector('[slot="content"]');
+  }
+  /**
+   * Adjusts the effective position based on viewport edge detection.
+   * Called after the tooltip becomes visible so we can measure its bounding rect.
+   */
+  _adjustPosition() {
+    const r = this.shadowRoot?.querySelector(".tooltip");
+    if (!r) return;
+    const e = r.getBoundingClientRect(), n = window.innerWidth, a = window.innerHeight;
+    let t = this.position;
+    this.position === "top" && e.top < 0 ? t = "bottom" : this.position === "bottom" && e.bottom > a ? t = "top" : this.position === "left" && e.left < 0 ? t = "right" : this.position === "right" && e.right > n && (t = "left"), t !== this._effectivePosition && (this._effectivePosition = t);
+  }
+  _show() {
+    this.disabled || !this._hasContent || (this._hideTimeout && (clearTimeout(this._hideTimeout), this._hideTimeout = null, this._closing = !1), this._effectivePosition = this.position, this._showTimeout = setTimeout(() => {
+      this._visible = !0, document.addEventListener("keydown", this._escapeHandler), requestAnimationFrame(() => {
+        this._adjustPosition();
+      });
+    }, this.delay));
+  }
+  _handleEscape(r) {
+    r.key === "Escape" && this._hide();
+  }
+  _hide() {
+    this._showTimeout && (clearTimeout(this._showTimeout), this._showTimeout = null), this._visible && (document.removeEventListener("keydown", this._escapeHandler), this._closing = !0, this._hideTimeout = setTimeout(() => {
+      this._closing = !1, this._visible = !1, this._effectivePosition = this.position;
+    }, 100));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._escapeHandler), this._showTimeout && clearTimeout(this._showTimeout), this._hideTimeout && clearTimeout(this._hideTimeout);
+  }
+  render() {
+    return f`
+      <div
+        class="trigger-wrap"
+        @mouseenter="${this._show}"
+        @mouseleave="${this._hide}"
+        @focusin="${this._show}"
+        @focusout="${this._hide}"
+        aria-describedby="${this._tooltipId}"
+      >
+        <slot></slot>
+      </div>
+      <div
+        class="tooltip ${this._closing ? "closing" : ""}"
+        id="${this._tooltipId}"
+        role="tooltip"
+        aria-hidden=${this._visible ? h : "true"}
+      >
+        <span class="arrow"></span>
+        <span class="tooltip-content">
+          <slot name="content">${this.content}</slot>
+        </span>
+      </div>
+    `;
+  }
+};
+o.styles = p`
+    :host {
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: inline-block;
+      position: relative;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    .trigger-wrap {
+      display: inline-flex;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: 10000;
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      background: var(--cg-color-tooltip-background);
+      color: var(--cg-color-tooltip-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      line-height: var(--cg-line-height-snug);
+      border-radius: var(--cg-component-tooltip-radius);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);
+      white-space: nowrap;
+      max-width: 280px;
+      pointer-events: none;
+
+      /* Animation — fade+scale with pop */
+      opacity: 0;
+      transform: scale(0.92);
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-slow) var(--cg-transition-easing-spring);
+    }
+
+    /* Rich content slot may contain block elements */
+    .tooltip-content ::slotted(*) {
+      white-space: normal;
+    }
+
+    :host([_visible]) .tooltip {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    /* ── Closing animation ── */
+    @keyframes tooltip-exit {
+      from { opacity: 1; transform: scale(1); }
+      to { opacity: 0; transform: scale(0.92); }
+    }
+    .tooltip.closing {
+      animation: tooltip-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tooltip {
+        transition: opacity var(--cg-transition-duration-fast) ease;
+        transform: scale(1) !important;
+      }
+    }
+
+    /* ── Arrow ── */
+    .arrow {
+      position: absolute;
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      background: var(--cg-color-tooltip-arrow);
+      transform: rotate(45deg);
+    }
+
+    /* ── Top position (default) ── */
+    :host([_effective-position="top"]) .tooltip {
+      bottom: 100%;
+      left: 50%;
+      transform-origin: bottom center;
+      margin-bottom: var(--cg-spacing-8);
+    }
+    :host([_effective-position="top"][_visible]) .tooltip {
+      transform: scale(1) translateX(-50%);
+    }
+    :host([_effective-position="top"]) .tooltip:not([style]) {
+      transform: scale(0.92) translateX(-50%);
+    }
+    :host([_effective-position="top"]) .arrow {
+      bottom: calc(var(--cg-spacing-4) * -1);
+      left: 50%;
+      margin-left: calc(var(--cg-spacing-4) * -1);
+    }
+
+    /* ── Bottom position ── */
+    :host([_effective-position="bottom"]) .tooltip {
+      top: 100%;
+      left: 50%;
+      transform-origin: top center;
+      margin-top: var(--cg-spacing-8);
+    }
+    :host([_effective-position="bottom"][_visible]) .tooltip {
+      transform: scale(1) translateX(-50%);
+    }
+    :host([_effective-position="bottom"]) .tooltip:not([style]) {
+      transform: scale(0.92) translateX(-50%);
+    }
+    :host([_effective-position="bottom"]) .arrow {
+      top: calc(var(--cg-spacing-4) * -1);
+      left: 50%;
+      margin-left: calc(var(--cg-spacing-4) * -1);
+    }
+
+    /* ── Left position ── */
+    :host([_effective-position="left"]) .tooltip {
+      right: 100%;
+      top: 50%;
+      transform-origin: right center;
+      margin-right: var(--cg-spacing-8);
+    }
+    :host([_effective-position="left"][_visible]) .tooltip {
+      transform: scale(1) translateY(-50%);
+    }
+    :host([_effective-position="left"]) .tooltip:not([style]) {
+      transform: scale(0.92) translateY(-50%);
+    }
+    :host([_effective-position="left"]) .arrow {
+      right: calc(var(--cg-spacing-4) * -1);
+      top: 50%;
+      margin-top: calc(var(--cg-spacing-4) * -1);
+    }
+
+    /* ── Right position ── */
+    :host([_effective-position="right"]) .tooltip {
+      left: 100%;
+      top: 50%;
+      transform-origin: left center;
+      margin-left: var(--cg-spacing-8);
+    }
+    :host([_effective-position="right"][_visible]) .tooltip {
+      transform: scale(1) translateY(-50%);
+    }
+    :host([_effective-position="right"]) .tooltip:not([style]) {
+      transform: scale(0.92) translateY(-50%);
+    }
+    :host([_effective-position="right"]) .arrow {
+      left: calc(var(--cg-spacing-4) * -1);
+      top: 50%;
+      margin-top: calc(var(--cg-spacing-4) * -1);
+    }
+
+    /* ── Variant: error ── */
+    :host([variant="error"]) .tooltip {
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    :host([variant="error"]) .arrow {
+      background: var(--cg-color-status-error-background-default);
+    }
+
+    /* ── Variant: success ── */
+    :host([variant="success"]) .tooltip {
+      background: var(--cg-color-status-success-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    :host([variant="success"]) .arrow {
+      background: var(--cg-color-status-success-background-default);
+    }
+
+    /* Rounded variants */
+    :host([rounded="none"]) .tooltip { border-radius: 0; }
+    :host([rounded="sm"]) .tooltip { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .tooltip { border-radius: var(--cg-component-tooltip-radius); }
+    :host([rounded="lg"]) .tooltip { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .tooltip { border-radius: var(--cg-border-radius-full); }
+  `;
+i([
+  s({ type: String })
+], o.prototype, "content", 2);
+i([
+  s({ reflect: !0 })
+], o.prototype, "rounded", 2);
+i([
+  s({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+i([
+  s({ type: String, reflect: !0 })
+], o.prototype, "position", 2);
+i([
+  s({ type: Number })
+], o.prototype, "delay", 2);
+i([
+  s({ type: Boolean })
+], o.prototype, "disabled", 2);
+i([
+  s({ type: Boolean, reflect: !0, attribute: "_visible" })
+], o.prototype, "_visible", 2);
+i([
+  g()
+], o.prototype, "_closing", 2);
+i([
+  s({ type: String, reflect: !0, attribute: "_effective-position" })
+], o.prototype, "_effectivePosition", 2);
+o = i([
+  u("cg-tooltip")
+], o);
+export {
+  o as CgTooltip
+};
+//# sourceMappingURL=cg-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tooltip.js","sources":["../../../src/components/cg-tooltip/cg-tooltip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @element cg-tooltip\n * Hover/focus tooltip with arrow, viewport-aware positioning, and fade+scale animation.\n *\n * @example\n * ```html\n * <cg-tooltip content=\"Save your work\" position=\"top\">\n *   <cg-button>Save</cg-button>\n * </cg-tooltip>\n * <cg-tooltip position=\"bottom\">\n *   <cg-button>Rich</cg-button>\n *   <div slot=\"content\"><strong>Bold</strong> tooltip</div>\n * </cg-tooltip>\n * ```\n *\n * @slot - Default slot for the trigger element\n * @slot content - Rich HTML tooltip content (alternative to `content` property)\n *\n * @cssprop --cg-color-tooltip-background - Tooltip background\n * @cssprop --cg-font-size-xs - Tooltip font size (12px)\n * @cssprop --cg-component-tooltip-radius - Tooltip border radius\n * @cssprop --cg-transition-duration-slow - Fade+scale animation duration (250ms)\n */\n@customElement('cg-tooltip')\nexport class CgTooltip extends LitElement {\n  static override styles = css`\n    :host {\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: inline-block;\n      position: relative;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    .trigger-wrap {\n      display: inline-flex;\n    }\n\n    .tooltip {\n      position: absolute;\n      z-index: 10000;\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-snug);\n      border-radius: var(--cg-component-tooltip-radius);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-tooltip-border);\n      white-space: nowrap;\n      max-width: 280px;\n      pointer-events: none;\n\n      /* Animation — fade+scale with pop */\n      opacity: 0;\n      transform: scale(0.92);\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-slow) var(--cg-transition-easing-spring);\n    }\n\n    /* Rich content slot may contain block elements */\n    .tooltip-content ::slotted(*) {\n      white-space: normal;\n    }\n\n    :host([_visible]) .tooltip {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    /* ── Closing animation ── */\n    @keyframes tooltip-exit {\n      from { opacity: 1; transform: scale(1); }\n      to { opacity: 0; transform: scale(0.92); }\n    }\n    .tooltip.closing {\n      animation: tooltip-exit var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .tooltip {\n        transition: opacity var(--cg-transition-duration-fast) ease;\n        transform: scale(1) !important;\n      }\n    }\n\n    /* ── Arrow ── */\n    .arrow {\n      position: absolute;\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      background: var(--cg-color-tooltip-arrow);\n      transform: rotate(45deg);\n    }\n\n    /* ── Top position (default) ── */\n    :host([_effective-position=\"top\"]) .tooltip {\n      bottom: 100%;\n      left: 50%;\n      transform-origin: bottom center;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    :host([_effective-position=\"top\"][_visible]) .tooltip {\n      transform: scale(1) translateX(-50%);\n    }\n    :host([_effective-position=\"top\"]) .tooltip:not([style]) {\n      transform: scale(0.92) translateX(-50%);\n    }\n    :host([_effective-position=\"top\"]) .arrow {\n      bottom: calc(var(--cg-spacing-4) * -1);\n      left: 50%;\n      margin-left: calc(var(--cg-spacing-4) * -1);\n    }\n\n    /* ── Bottom position ── */\n    :host([_effective-position=\"bottom\"]) .tooltip {\n      top: 100%;\n      left: 50%;\n      transform-origin: top center;\n      margin-top: var(--cg-spacing-8);\n    }\n    :host([_effective-position=\"bottom\"][_visible]) .tooltip {\n      transform: scale(1) translateX(-50%);\n    }\n    :host([_effective-position=\"bottom\"]) .tooltip:not([style]) {\n      transform: scale(0.92) translateX(-50%);\n    }\n    :host([_effective-position=\"bottom\"]) .arrow {\n      top: calc(var(--cg-spacing-4) * -1);\n      left: 50%;\n      margin-left: calc(var(--cg-spacing-4) * -1);\n    }\n\n    /* ── Left position ── */\n    :host([_effective-position=\"left\"]) .tooltip {\n      right: 100%;\n      top: 50%;\n      transform-origin: right center;\n      margin-right: var(--cg-spacing-8);\n    }\n    :host([_effective-position=\"left\"][_visible]) .tooltip {\n      transform: scale(1) translateY(-50%);\n    }\n    :host([_effective-position=\"left\"]) .tooltip:not([style]) {\n      transform: scale(0.92) translateY(-50%);\n    }\n    :host([_effective-position=\"left\"]) .arrow {\n      right: calc(var(--cg-spacing-4) * -1);\n      top: 50%;\n      margin-top: calc(var(--cg-spacing-4) * -1);\n    }\n\n    /* ── Right position ── */\n    :host([_effective-position=\"right\"]) .tooltip {\n      left: 100%;\n      top: 50%;\n      transform-origin: left center;\n      margin-left: var(--cg-spacing-8);\n    }\n    :host([_effective-position=\"right\"][_visible]) .tooltip {\n      transform: scale(1) translateY(-50%);\n    }\n    :host([_effective-position=\"right\"]) .tooltip:not([style]) {\n      transform: scale(0.92) translateY(-50%);\n    }\n    :host([_effective-position=\"right\"]) .arrow {\n      left: calc(var(--cg-spacing-4) * -1);\n      top: 50%;\n      margin-top: calc(var(--cg-spacing-4) * -1);\n    }\n\n    /* ── Variant: error ── */\n    :host([variant=\"error\"]) .tooltip {\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    :host([variant=\"error\"]) .arrow {\n      background: var(--cg-color-status-error-background-default);\n    }\n\n    /* ── Variant: success ── */\n    :host([variant=\"success\"]) .tooltip {\n      background: var(--cg-color-status-success-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    :host([variant=\"success\"]) .arrow {\n      background: var(--cg-color-status-success-background-default);\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .tooltip { border-radius: 0; }\n    :host([rounded=\"sm\"]) .tooltip { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .tooltip { border-radius: var(--cg-component-tooltip-radius); }\n    :host([rounded=\"lg\"]) .tooltip { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .tooltip { border-radius: var(--cg-border-radius-full); }\n  `;\n\n  @property({ type: String }) content = '';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'md';\n  @property({ type: String, reflect: true }) variant: 'default' | 'error' | 'success' = 'default';\n  @property({ type: String, reflect: true }) position: 'top' | 'bottom' | 'left' | 'right' = 'top';\n  @property({ type: Number }) delay = 300;\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Boolean, reflect: true, attribute: '_visible' })\n  private _visible = false;\n\n  @state() private _closing = false;\n\n  /** Effective position after viewport edge detection (may differ from `position` prop). */\n  @property({ type: String, reflect: true, attribute: '_effective-position' })\n  private _effectivePosition: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  private _showTimeout: ReturnType<typeof setTimeout> | null = null;\n  private _hideTimeout: ReturnType<typeof setTimeout> | null = null;\n  private _tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`;\n  private _escapeHandler = this._handleEscape.bind(this);\n\n  /** Check if the tooltip has rich slot content (named \"content\" slot). */\n  private get _hasContent(): boolean {\n    return !!this.content || !!this.querySelector('[slot=\"content\"]');\n  }\n\n  /**\n   * Adjusts the effective position based on viewport edge detection.\n   * Called after the tooltip becomes visible so we can measure its bounding rect.\n   */\n  private _adjustPosition() {\n    const tooltipEl = this.shadowRoot?.querySelector('.tooltip') as HTMLElement | null;\n    if (!tooltipEl) return;\n\n    const rect = tooltipEl.getBoundingClientRect();\n    const vw = window.innerWidth;\n    const vh = window.innerHeight;\n    let adjusted = this.position;\n\n    if (this.position === 'top' && rect.top < 0) {\n      adjusted = 'bottom';\n    } else if (this.position === 'bottom' && rect.bottom > vh) {\n      adjusted = 'top';\n    } else if (this.position === 'left' && rect.left < 0) {\n      adjusted = 'right';\n    } else if (this.position === 'right' && rect.right > vw) {\n      adjusted = 'left';\n    }\n\n    if (adjusted !== this._effectivePosition) {\n      this._effectivePosition = adjusted;\n    }\n  }\n\n  private _show() {\n    if (this.disabled || !this._hasContent) return;\n    if (this._hideTimeout) {\n      clearTimeout(this._hideTimeout);\n      this._hideTimeout = null;\n      this._closing = false;\n    }\n    // Reset effective position to the declared position before showing\n    this._effectivePosition = this.position;\n    this._showTimeout = setTimeout(() => {\n      this._visible = true;\n      document.addEventListener('keydown', this._escapeHandler);\n      // Adjust position after layout is calculated\n      requestAnimationFrame(() => {\n        this._adjustPosition();\n      });\n    }, this.delay);\n  }\n\n  private _handleEscape(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      this._hide();\n    }\n  }\n\n  private _hide() {\n    if (this._showTimeout) {\n      clearTimeout(this._showTimeout);\n      this._showTimeout = null;\n    }\n    if (!this._visible) return;\n    document.removeEventListener('keydown', this._escapeHandler);\n    this._closing = true;\n    this._hideTimeout = setTimeout(() => {\n      this._closing = false;\n      this._visible = false;\n      // Reset effective position when hidden\n      this._effectivePosition = this.position;\n    }, 100);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this._escapeHandler);\n    if (this._showTimeout) {\n      clearTimeout(this._showTimeout);\n    }\n    if (this._hideTimeout) {\n      clearTimeout(this._hideTimeout);\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrap\"\n        @mouseenter=\"${this._show}\"\n        @mouseleave=\"${this._hide}\"\n        @focusin=\"${this._show}\"\n        @focusout=\"${this._hide}\"\n        aria-describedby=\"${this._tooltipId}\"\n      >\n        <slot></slot>\n      </div>\n      <div\n        class=\"tooltip ${this._closing ? 'closing' : ''}\"\n        id=\"${this._tooltipId}\"\n        role=\"tooltip\"\n        aria-hidden=${!this._visible ? 'true' : nothing}\n      >\n        <span class=\"arrow\"></span>\n        <span class=\"tooltip-content\">\n          <slot name=\"content\">${this.content}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-tooltip': CgTooltip;\n  }\n}\n// Mon Apr 13 18:30:49 AEST 2026\n// Mon Apr 13 18:31:30 AEST 2026\n"],"names":["CgTooltip","LitElement","tooltipEl","rect","vw","vh","adjusted","e","html","nothing","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-tree-view/cg-tree-view.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+export interface TreeItem {
+    label: string;
+    value?: string;
+    icon?: string;
+    children?: TreeItem[];
+    expanded?: boolean;
+    disabled?: boolean;
+}
+/**
+ * @element cg-tree-view
+ * Hierarchical tree with keyboard navigation and multi-select.
+ *
+ * @fires {CustomEvent<{value:string|string[]}>} cg-tree-select
+ * @fires {CustomEvent<{path:string}>} cg-tree-expand
+ * @fires {CustomEvent<{path:string}>} cg-tree-collapse
+ */
+export declare class CgTreeView extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: TreeItem[];
+    multiple: boolean;
+    selected: string[];
+    private _expanded;
+    private _focusedPath;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _seedExpanded;
+    private _flatten;
+    private _toggle;
+    private _select;
+    private _onNodeClick;
+    private _onKeydown;
+    private _focusPath;
+    private _isSelected;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-tree-view': CgTreeView;
+    }
+}
+//# sourceMappingURL=cg-tree-view.d.ts.map

package/dist/components/cg-tree-view/cg-tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/cg-tree-view/cg-tree-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAWD;;;;;;;GAOG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAiGnB;IAEwB,KAAK,EAAE,QAAQ,EAAE,CAAM;IACrB,QAAQ,UAAS;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAM;IAE1C,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,YAAY,CAAuB;IAE3C,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOxD,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IA8ClB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,WAAW;IAKV,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/cg-tree-view/cg-tree-view.js

@@ -0,0 +1,244 @@
+import { css as v, LitElement as m, nothing as h, html as c } from "lit";
+import { property as p, state as f, customElement as b } from "lit/decorators.js";
+import { h as _, r as x } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (t, e, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? y(e, a) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (s = (r ? o(e, a, s) : o(s)) || s);
+  return r && s && w(e, a, s), s;
+};
+let n = class extends m {
+  constructor() {
+    super(...arguments), this.items = [], this.multiple = !1, this.selected = [], this._expanded = /* @__PURE__ */ new Set(), this._focusedPath = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._seedExpanded(this.items, "");
+  }
+  willUpdate(t) {
+    t.has("items") && (this._expanded.clear(), this._seedExpanded(this.items, ""));
+  }
+  _seedExpanded(t, e) {
+    t.forEach((a, r) => {
+      const s = e ? `${e}.${r}` : `${r}`;
+      a.expanded && this._expanded.add(s), a.children && this._seedExpanded(a.children, s);
+    });
+  }
+  _flatten() {
+    const t = [], e = (a, r, s) => {
+      a.forEach((i, o) => {
+        const d = s ? `${s}.${o}` : `${o}`, u = !!(i.children && i.children.length), g = this._expanded.has(d);
+        t.push({ item: i, level: r, path: d, hasChildren: u, expanded: g, parentPath: s }), u && g && e(i.children, r + 1, d);
+      });
+    };
+    return e(this.items, 0, null), t;
+  }
+  _toggle(t) {
+    t.hasChildren && (this._expanded.has(t.path) ? (this._expanded.delete(t.path), this.dispatchEvent(new CustomEvent("cg-tree-collapse", { bubbles: !0, composed: !0, detail: { path: t.path } }))) : (this._expanded.add(t.path), this.dispatchEvent(new CustomEvent("cg-tree-expand", { bubbles: !0, composed: !0, detail: { path: t.path } }))), this.requestUpdate());
+  }
+  _select(t) {
+    if (t.item.disabled) return;
+    const e = t.item.value ?? t.path;
+    let a;
+    this.multiple ? a = this.selected.includes(e) ? this.selected.filter((r) => r !== e) : [...this.selected, e] : a = [e], this.selected = a, this.dispatchEvent(new CustomEvent("cg-tree-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.multiple ? a : a[0] ?? "" }
+    }));
+  }
+  _onNodeClick(t) {
+    t.hasChildren && this._toggle(t), this._select(t), this._focusedPath = t.path;
+  }
+  _onKeydown(t, e) {
+    const a = this._flatten(), r = a.findIndex((s) => s.path === e.path);
+    switch (t.key) {
+      case "ArrowDown": {
+        t.preventDefault();
+        const s = a[r + 1];
+        s && this._focusPath(s.path);
+        break;
+      }
+      case "ArrowUp": {
+        t.preventDefault();
+        const s = a[r - 1];
+        s && this._focusPath(s.path);
+        break;
+      }
+      case "ArrowRight": {
+        t.preventDefault(), e.hasChildren && !e.expanded && this._toggle(e);
+        break;
+      }
+      case "ArrowLeft": {
+        t.preventDefault(), e.hasChildren && e.expanded ? this._toggle(e) : e.parentPath && this._focusPath(e.parentPath);
+        break;
+      }
+      case "Home":
+        t.preventDefault(), a[0] && this._focusPath(a[0].path);
+        break;
+      case "End":
+        t.preventDefault(), a[a.length - 1] && this._focusPath(a[a.length - 1].path);
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this._select(e);
+        break;
+    }
+  }
+  _focusPath(t) {
+    this._focusedPath = t, this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(`[data-path="${t}"]`)?.focus();
+    });
+  }
+  _isSelected(t) {
+    const e = t.item.value ?? t.path;
+    return this.selected.includes(e);
+  }
+  render() {
+    const t = this._flatten();
+    return c`
+      <ul role="tree" aria-multiselectable=${this.multiple ? "true" : "false"}>
+        ${t.map((e) => c`
+          <li role="none">
+            <div
+              class="node ${this._isSelected(e) ? "selected" : ""} ${e.item.disabled ? "disabled" : ""}"
+              role="treeitem"
+              data-path=${e.path}
+              tabindex=${this._focusedPath === e.path || this._focusedPath === null && e === t[0] ? "0" : "-1"}
+              style="--cg-tree-level: ${e.level};"
+              aria-level=${e.level + 1}
+              aria-expanded=${e.hasChildren ? e.expanded ? "true" : "false" : h}
+              aria-selected=${this._isSelected(e) ? "true" : "false"}
+              aria-disabled=${e.item.disabled ? "true" : "false"}
+              @click=${() => this._onNodeClick(e)}
+              @keydown=${(a) => this._onKeydown(a, e)}
+            >
+              <span class="toggle ${e.hasChildren ? "" : "placeholder"} ${e.expanded ? "expanded" : ""}" aria-hidden="true">
+                ${e.hasChildren ? c`<cg-icon name="alt-arrow-right-linear" size="sm"></cg-icon>` : h}
+              </span>
+              ${e.item.icon ? c`<cg-icon class="leading-icon" name=${e.item.icon} size="sm" aria-hidden="true"></cg-icon>` : h}
+              <span class="label">${e.item.label}</span>
+            </div>
+          </li>
+        `)}
+      </ul>
+    `;
+  }
+};
+n.styles = [_, x, v`
+    :host {
+      display: block;
+      color: var(--cg-color-surface-container-text);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .node {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      /* Indentation per nesting level — read from the inline custom property
+         set by the renderer. Keeps the calc out of the markup. */
+      padding-left: calc(var(--cg-spacing-8) + var(--cg-spacing-20) * var(--cg-tree-level));
+      min-height: var(--cg-spacing-32);
+      border: var(--cg-border-width-50) solid transparent;
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      user-select: none;
+      color: var(--cg-color-surface-container-text);
+      transition:
+        background-color 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);
+    }
+
+    /* Hover and selected share the same chrome for now — list-row bg shift
+       (theme-aware via surface-cards tokens) plus a 1px container outline.
+       The transparent border at rest prevents any layout shift. */
+    .node:hover:not(.disabled),
+    .node.selected {
+      background: var(--cg-color-surface-cards-active-background);
+      border-color: var(--cg-color-surface-container-border);
+    }
+
+    .node.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .node: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);
+    }
+
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      flex-shrink: 0;
+      color: var(--cg-color-surface-container-outlined);
+      opacity: 0.7;
+      transition:
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .toggle.expanded { transform: rotate(90deg); }
+    .node:hover .toggle,
+    .node.selected .toggle { opacity: 1; color: var(--cg-color-surface-base-text); }
+    .toggle.placeholder { visibility: hidden; }
+
+    /* Optional leading icon next to the label. Muted at rest, full color on
+       hover/selected so the row feels alive but doesn't compete with text. */
+    .leading-icon {
+      flex-shrink: 0;
+      color: var(--cg-color-surface-container-outlined);
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      opacity: 0.85;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .node:hover .leading-icon,
+    .node.selected .leading-icon {
+      color: var(--cg-color-action-primary-background-default);
+      opacity: 1;
+    }
+
+    .label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  `];
+l([
+  p({ type: Array })
+], n.prototype, "items", 2);
+l([
+  p({ type: Boolean })
+], n.prototype, "multiple", 2);
+l([
+  p({ type: Array })
+], n.prototype, "selected", 2);
+l([
+  f()
+], n.prototype, "_expanded", 2);
+l([
+  f()
+], n.prototype, "_focusedPath", 2);
+n = l([
+  b("cg-tree-view")
+], n);
+export {
+  n as CgTreeView
+};
+//# sourceMappingURL=cg-tree-view.js.map

package/dist/components/cg-tree-view/cg-tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-tree-view.js","sources":["../../../src/components/cg-tree-view/cg-tree-view.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface TreeItem {\n  label: string;\n  value?: string;\n  icon?: string;\n  children?: TreeItem[];\n  expanded?: boolean;\n  disabled?: boolean;\n}\n\ninterface FlatNode {\n  item: TreeItem;\n  level: number;\n  path: string;\n  hasChildren: boolean;\n  expanded: boolean;\n  parentPath: string | null;\n}\n\n/**\n * @element cg-tree-view\n * Hierarchical tree with keyboard navigation and multi-select.\n *\n * @fires {CustomEvent<{value:string|string[]}>} cg-tree-select\n * @fires {CustomEvent<{path:string}>} cg-tree-expand\n * @fires {CustomEvent<{path:string}>} cg-tree-collapse\n */\n@customElement('cg-tree-view')\nexport class CgTreeView extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      color: var(--cg-color-surface-container-text);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    ul {\n      list-style: none;\n      padding: 0;\n      margin: 0;\n    }\n\n    .node {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      /* Indentation per nesting level — read from the inline custom property\n         set by the renderer. Keeps the calc out of the markup. */\n      padding-left: calc(var(--cg-spacing-8) + var(--cg-spacing-20) * var(--cg-tree-level));\n      min-height: var(--cg-spacing-32);\n      border: var(--cg-border-width-50) solid transparent;\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      user-select: none;\n      color: var(--cg-color-surface-container-text);\n      transition:\n        background-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        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* Hover and selected share the same chrome for now — list-row bg shift\n       (theme-aware via surface-cards tokens) plus a 1px container outline.\n       The transparent border at rest prevents any layout shift. */\n    .node:hover:not(.disabled),\n    .node.selected {\n      background: var(--cg-color-surface-cards-active-background);\n      border-color: var(--cg-color-surface-container-border);\n    }\n\n    .node.disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    .node: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    .toggle {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.7;\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle.expanded { transform: rotate(90deg); }\n    .node:hover .toggle,\n    .node.selected .toggle { opacity: 1; color: var(--cg-color-surface-base-text); }\n    .toggle.placeholder { visibility: hidden; }\n\n    /* Optional leading icon next to the label. Muted at rest, full color on\n       hover/selected so the row feels alive but doesn't compete with text. */\n    .leading-icon {\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      opacity: 0.85;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .node:hover .leading-icon,\n    .node.selected .leading-icon {\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 1;\n    }\n\n    .label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  `];\n\n  @property({ type: Array }) items: TreeItem[] = [];\n  @property({ type: Boolean }) multiple = false;\n  @property({ type: Array }) selected: string[] = [];\n\n  @state() private _expanded = new Set<string>();\n  @state() private _focusedPath: string | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._seedExpanded(this.items, '');\n  }\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('items')) {\n      this._expanded.clear();\n      this._seedExpanded(this.items, '');\n    }\n  }\n\n  private _seedExpanded(items: TreeItem[], parentPath: string): void {\n    items.forEach((item, i) => {\n      const path = parentPath ? `${parentPath}.${i}` : `${i}`;\n      if (item.expanded) this._expanded.add(path);\n      if (item.children) this._seedExpanded(item.children, path);\n    });\n  }\n\n  private _flatten(): FlatNode[] {\n    const out: FlatNode[] = [];\n    const walk = (items: TreeItem[], level: number, parentPath: string | null) => {\n      items.forEach((item, i) => {\n        const path = parentPath ? `${parentPath}.${i}` : `${i}`;\n        const hasChildren = !!(item.children && item.children.length);\n        const expanded = this._expanded.has(path);\n        out.push({ item, level, path, hasChildren, expanded, parentPath });\n        if (hasChildren && expanded) walk(item.children!, level + 1, path);\n      });\n    };\n    walk(this.items, 0, null);\n    return out;\n  }\n\n  private _toggle(node: FlatNode): void {\n    if (!node.hasChildren) return;\n    if (this._expanded.has(node.path)) {\n      this._expanded.delete(node.path);\n      this.dispatchEvent(new CustomEvent('cg-tree-collapse', { bubbles: true, composed: true, detail: { path: node.path } }));\n    } else {\n      this._expanded.add(node.path);\n      this.dispatchEvent(new CustomEvent('cg-tree-expand', { bubbles: true, composed: true, detail: { path: node.path } }));\n    }\n    this.requestUpdate();\n  }\n\n  private _select(node: FlatNode): void {\n    if (node.item.disabled) return;\n    const v = node.item.value ?? node.path;\n    let next: string[];\n    if (this.multiple) {\n      next = this.selected.includes(v) ? this.selected.filter(x => x !== v) : [...this.selected, v];\n    } else {\n      next = [v];\n    }\n    this.selected = next;\n    this.dispatchEvent(new CustomEvent('cg-tree-select', {\n      bubbles: true, composed: true,\n      detail: { value: this.multiple ? next : next[0] ?? '' },\n    }));\n  }\n\n  private _onNodeClick(node: FlatNode): void {\n    if (node.hasChildren) this._toggle(node);\n    this._select(node);\n    this._focusedPath = node.path;\n  }\n\n  private _onKeydown(e: KeyboardEvent, node: FlatNode): void {\n    const flat = this._flatten();\n    const idx = flat.findIndex(n => n.path === node.path);\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = flat[idx + 1];\n        if (next) this._focusPath(next.path);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = flat[idx - 1];\n        if (prev) this._focusPath(prev.path);\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        if (node.hasChildren && !node.expanded) this._toggle(node);\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        if (node.hasChildren && node.expanded) {\n          this._toggle(node);\n        } else if (node.parentPath) {\n          this._focusPath(node.parentPath);\n        }\n        break;\n      }\n      case 'Home':\n        e.preventDefault();\n        if (flat[0]) this._focusPath(flat[0].path);\n        break;\n      case 'End':\n        e.preventDefault();\n        if (flat[flat.length - 1]) this._focusPath(flat[flat.length - 1]!.path);\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._select(node);\n        break;\n    }\n  }\n\n  private _focusPath(path: string): void {\n    this._focusedPath = path;\n    this.updateComplete.then(() => {\n      const el = this.shadowRoot?.querySelector<HTMLElement>(`[data-path=\"${path}\"]`);\n      el?.focus();\n    });\n  }\n\n  private _isSelected(node: FlatNode): boolean {\n    const v = node.item.value ?? node.path;\n    return this.selected.includes(v);\n  }\n\n  override render() {\n    const flat = this._flatten();\n    return html`\n      <ul role=\"tree\" aria-multiselectable=${this.multiple ? 'true' : 'false'}>\n        ${flat.map(node => html`\n          <li role=\"none\">\n            <div\n              class=\"node ${this._isSelected(node) ? 'selected' : ''} ${node.item.disabled ? 'disabled' : ''}\"\n              role=\"treeitem\"\n              data-path=${node.path}\n              tabindex=${this._focusedPath === node.path || (this._focusedPath === null && node === flat[0]) ? '0' : '-1'}\n              style=\"--cg-tree-level: ${node.level};\"\n              aria-level=${node.level + 1}\n              aria-expanded=${node.hasChildren ? (node.expanded ? 'true' : 'false') : nothing}\n              aria-selected=${this._isSelected(node) ? 'true' : 'false'}\n              aria-disabled=${node.item.disabled ? 'true' : 'false'}\n              @click=${() => this._onNodeClick(node)}\n              @keydown=${(e: KeyboardEvent) => this._onKeydown(e, node)}\n            >\n              <span class=\"toggle ${node.hasChildren ? '' : 'placeholder'} ${node.expanded ? 'expanded' : ''}\" aria-hidden=\"true\">\n                ${node.hasChildren ? html`<cg-icon name=\"alt-arrow-right-linear\" size=\"sm\"></cg-icon>` : nothing}\n              </span>\n              ${node.item.icon ? html`<cg-icon class=\"leading-icon\" name=${node.item.icon} size=\"sm\" aria-hidden=\"true\"></cg-icon>` : nothing}\n              <span class=\"label\">${node.item.label}</span>\n            </div>\n          </li>\n        `)}\n      </ul>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-tree-view': CgTreeView;\n  }\n}\n"],"names":["CgTreeView","LitElement","changed","items","parentPath","item","i","path","out","walk","level","hasChildren","expanded","node","v","next","x","e","flat","idx","n","prev","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}