@tessera-ui/core 0.4.0

package/dist/cjs/ts-tooltip.cjs.entry.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const tooltipCss = () => `:host{display:inline-block;position:relative;font-family:var(--ts-font-family-base);--ts-tooltip-bg:var(--ts-ref-neutral-900);--ts-tooltip-color:#ffffff;--ts-tooltip-radius:var(--ts-shape-badge)}.tooltip__trigger{display:inline-block}.tooltip__popup{position:absolute;z-index:var(--ts-z-tooltip);padding:var(--ts-spacing-1) var(--ts-spacing-2);background-color:var(--ts-tooltip-bg);color:var(--ts-tooltip-color);font-size:var(--ts-font-size-xs);font-weight:var(--ts-font-weight-medium);line-height:var(--ts-line-height-normal);border-radius:var(--ts-tooltip-radius);white-space:nowrap;pointer-events:none;opacity:0;transform:scale(0.95);transition:opacity var(--ts-transition-fast),     transform var(--ts-transition-fast)}.tooltip__popup--visible{opacity:1;transform:scale(1)}.tooltip__popup--top{bottom:calc(100% + 8px);left:50%;transform-origin:bottom center}.tooltip__popup--top,.tooltip__popup--top-start,.tooltip__popup--top-end{bottom:calc(100% + 8px)}.tooltip__popup--top{left:50%;margin-left:-50%}.tooltip__popup--top-start{inset-inline-start:0}.tooltip__popup--top-end{inset-inline-end:0}.tooltip__popup--bottom,.tooltip__popup--bottom-start,.tooltip__popup--bottom-end{top:calc(100% + 8px)}.tooltip__popup--bottom{left:50%;margin-left:-50%}.tooltip__popup--bottom-start{inset-inline-start:0}.tooltip__popup--bottom-end{inset-inline-end:0}.tooltip__popup--left,.tooltip__popup--left-start,.tooltip__popup--left-end{inset-inline-end:calc(100% + 8px)}.tooltip__popup--left{top:50%;transform:translateY(-50%) scale(0.95)}.tooltip__popup--left.tooltip__popup--visible{transform:translateY(-50%) scale(1)}.tooltip__popup--right,.tooltip__popup--right-start,.tooltip__popup--right-end{inset-inline-start:calc(100% + 8px)}.tooltip__popup--right{top:50%;transform:translateY(-50%) scale(0.95)}.tooltip__popup--right.tooltip__popup--visible{transform:translateY(-50%) scale(1)}.tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--ts-tooltip-bg);transform:rotate(45deg)}.tooltip__popup--top .tooltip__arrow,.tooltip__popup--top-start .tooltip__arrow,.tooltip__popup--top-end .tooltip__arrow{bottom:-4px;left:50%;margin-left:-4px}.tooltip__popup--bottom .tooltip__arrow,.tooltip__popup--bottom-start .tooltip__arrow,.tooltip__popup--bottom-end .tooltip__arrow{top:-4px;left:50%;margin-left:-4px}.tooltip__popup--left .tooltip__arrow{inset-inline-end:-4px;top:50%;margin-top:-4px}.tooltip__popup--right .tooltip__arrow{inset-inline-start:-4px;top:50%;margin-top:-4px}`;
+
+const TsTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.getElement(this); }
+    tooltipId = aria.generateId('ts-tooltip');
+    /** The tooltip text content. */
+    content = '';
+    /** Placement of the tooltip relative to the trigger. */
+    placement = 'top';
+    /** Delay in ms before showing the tooltip. */
+    showDelay = 200;
+    /** Delay in ms before hiding the tooltip. */
+    hideDelay = 0;
+    /** Disables the tooltip. */
+    disabled = false;
+    /** Whether the tooltip is currently visible. */
+    isVisible = false;
+    showTimeout;
+    hideTimeout;
+    /** Programmatically show the tooltip. */
+    async show() {
+        if (this.disabled)
+            return;
+        clearTimeout(this.hideTimeout);
+        this.showTimeout = setTimeout(() => {
+            this.isVisible = true;
+        }, this.showDelay);
+    }
+    /** Programmatically hide the tooltip. */
+    async hide() {
+        clearTimeout(this.showTimeout);
+        this.hideTimeout = setTimeout(() => {
+            this.isVisible = false;
+        }, this.hideDelay);
+    }
+    disconnectedCallback() {
+        clearTimeout(this.showTimeout);
+        clearTimeout(this.hideTimeout);
+    }
+    handleMouseEnter = () => {
+        this.show();
+    };
+    handleMouseLeave = () => {
+        this.hide();
+    };
+    handleFocusIn = () => {
+        this.show();
+    };
+    handleFocusOut = () => {
+        this.hide();
+    };
+    handleKeydown = (event) => {
+        if (event.key === 'Escape' && this.isVisible) {
+            this.hide();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '51c5ec887b0a5b01b558e94673f4546cd5c1bfad', class: {
+                'ts-tooltip': true,
+                'ts-tooltip--visible': this.isVisible,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeydown }, index.h("span", { key: '0b334f0e17a37431daa0f23652374a4f8f0de3b9', class: "tooltip__trigger", "aria-describedby": this.isVisible ? this.tooltipId : undefined }, index.h("slot", { key: 'e3f1e57562ee6c55f4c6343fc853a9ee1ef234fc' })), index.h("div", { key: 'ebc401eb3735582782e2a13457c9591a250455c9', class: {
+                'tooltip__popup': true,
+                [`tooltip__popup--${this.placement}`]: true,
+                'tooltip__popup--visible': this.isVisible,
+            }, part: "base", id: this.tooltipId, role: "tooltip", "aria-hidden": !this.isVisible ? 'true' : undefined }, this.content, index.h("div", { key: 'fa6a4ac47413853dfd1f4da984888e0de02d7493', class: "tooltip__arrow", part: "arrow" }))));
+    }
+};
+TsTooltip.style = tooltipCss();
+
+exports.ts_tooltip = TsTooltip;
+//# sourceMappingURL=ts-tooltip.entry.cjs.js.map
+
+//# sourceMappingURL=ts-tooltip.cjs.entry.js.map

package/dist/cjs/ts-tooltip.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-tooltip.cjs.entry.js","mappings":"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","names":["generateId","h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=ts-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-tooltip — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-tooltip-bg       Popup background\n     --ts-tooltip-color    Popup text color\n     --ts-tooltip-radius   Popup border radius\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--ts-font-family-base);\n\n  --ts-tooltip-bg: var(--ts-ref-neutral-900);\n  --ts-tooltip-color: #ffffff;\n  --ts-tooltip-radius: var(--ts-shape-badge);\n}\n\n.tooltip__trigger {\n  display: inline-block;\n}\n\n/* ---- Popup ---- */\n.tooltip__popup {\n  position: absolute;\n  z-index: var(--ts-z-tooltip);\n  padding: var(--ts-spacing-1) var(--ts-spacing-2);\n  background-color: var(--ts-tooltip-bg);\n  color: var(--ts-tooltip-color);\n  font-size: var(--ts-font-size-xs);\n  font-weight: var(--ts-font-weight-medium);\n  line-height: var(--ts-line-height-normal);\n  border-radius: var(--ts-tooltip-radius);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity var(--ts-transition-fast),\n    transform var(--ts-transition-fast);\n}\n\n.tooltip__popup--visible {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* ---- Placements ---- */\n.tooltip__popup--top {\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform-origin: bottom center;\n}\n.tooltip__popup--top,\n.tooltip__popup--top-start,\n.tooltip__popup--top-end {\n  bottom: calc(100% + 8px);\n}\n.tooltip__popup--top { left: 50%; margin-left: -50%; }\n.tooltip__popup--top-start { inset-inline-start: 0; }\n.tooltip__popup--top-end { inset-inline-end: 0; }\n\n.tooltip__popup--bottom,\n.tooltip__popup--bottom-start,\n.tooltip__popup--bottom-end {\n  top: calc(100% + 8px);\n}\n.tooltip__popup--bottom { left: 50%; margin-left: -50%; }\n.tooltip__popup--bottom-start { inset-inline-start: 0; }\n.tooltip__popup--bottom-end { inset-inline-end: 0; }\n\n.tooltip__popup--left,\n.tooltip__popup--left-start,\n.tooltip__popup--left-end {\n  inset-inline-end: calc(100% + 8px);\n}\n.tooltip__popup--left { top: 50%; transform: translateY(-50%) scale(0.95); }\n.tooltip__popup--left.tooltip__popup--visible { transform: translateY(-50%) scale(1); }\n\n.tooltip__popup--right,\n.tooltip__popup--right-start,\n.tooltip__popup--right-end {\n  inset-inline-start: calc(100% + 8px);\n}\n.tooltip__popup--right { top: 50%; transform: translateY(-50%) scale(0.95); }\n.tooltip__popup--right.tooltip__popup--visible { transform: translateY(-50%) scale(1); }\n\n/* ---- Arrow ---- */\n.tooltip__arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background: var(--ts-tooltip-bg);\n  transform: rotate(45deg);\n}\n\n.tooltip__popup--top .tooltip__arrow,\n.tooltip__popup--top-start .tooltip__arrow,\n.tooltip__popup--top-end .tooltip__arrow {\n  bottom: -4px;\n  left: 50%;\n  margin-left: -4px;\n}\n\n.tooltip__popup--bottom .tooltip__arrow,\n.tooltip__popup--bottom-start .tooltip__arrow,\n.tooltip__popup--bottom-end .tooltip__arrow {\n  top: -4px;\n  left: 50%;\n  margin-left: -4px;\n}\n\n.tooltip__popup--left .tooltip__arrow {\n  inset-inline-end: -4px;\n  top: 50%;\n  margin-top: -4px;\n}\n\n.tooltip__popup--right .tooltip__arrow {\n  inset-inline-start: -4px;\n  top: 50%;\n  margin-top: -4px;\n}\n","import { Component, Prop, State, h, Host, Element, Method } from '@stencil/core';\nimport type { TsPlacement } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the trigger element.\n *\n * @part base - The tooltip popup container.\n * @part arrow - The tooltip arrow element.\n */\n@Component({\n  tag: 'ts-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class TsTooltip {\n  @Element() hostEl!: HTMLElement;\n\n  private tooltipId = generateId('ts-tooltip');\n\n  /** The tooltip text content. */\n  @Prop() content = '';\n\n  /** Placement of the tooltip relative to the trigger. */\n  @Prop({ reflect: true }) placement: TsPlacement = 'top';\n\n  /** Delay in ms before showing the tooltip. */\n  @Prop() showDelay = 200;\n\n  /** Delay in ms before hiding the tooltip. */\n  @Prop() hideDelay = 0;\n\n  /** Disables the tooltip. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Whether the tooltip is currently visible. */\n  @State() isVisible = false;\n\n  private showTimeout?: ReturnType<typeof setTimeout>;\n  private hideTimeout?: ReturnType<typeof setTimeout>;\n\n  /** Programmatically show the tooltip. */\n  @Method()\n  async show(): Promise<void> {\n    if (this.disabled) return;\n    clearTimeout(this.hideTimeout);\n    this.showTimeout = setTimeout(() => {\n      this.isVisible = true;\n    }, this.showDelay);\n  }\n\n  /** Programmatically hide the tooltip. */\n  @Method()\n  async hide(): Promise<void> {\n    clearTimeout(this.showTimeout);\n    this.hideTimeout = setTimeout(() => {\n      this.isVisible = false;\n    }, this.hideDelay);\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.showTimeout);\n    clearTimeout(this.hideTimeout);\n  }\n\n  private handleMouseEnter = (): void => {\n    this.show();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.hide();\n  };\n\n  private handleFocusIn = (): void => {\n    this.show();\n  };\n\n  private handleFocusOut = (): void => {\n    this.hide();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.isVisible) {\n      this.hide();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-tooltip': true,\n          'ts-tooltip--visible': this.isVisible,\n        }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onFocusin={this.handleFocusIn}\n        onFocusout={this.handleFocusOut}\n        onKeyDown={this.handleKeydown}\n      >\n        <span class=\"tooltip__trigger\" aria-describedby={this.isVisible ? this.tooltipId : undefined}>\n          <slot />\n        </span>\n\n        <div\n          class={{\n            'tooltip__popup': true,\n            [`tooltip__popup--${this.placement}`]: true,\n            'tooltip__popup--visible': this.isVisible,\n          }}\n          part=\"base\"\n          id={this.tooltipId}\n          role=\"tooltip\"\n          aria-hidden={!this.isVisible ? 'true' : undefined}\n        >\n          {this.content}\n          <div class=\"tooltip__arrow\" part=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-tree-item.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const treeItemCss = () => `:host{display:block;font-family:var(--ts-font-family-base);outline:none}.tree-item__base{display:flex;align-items:center;gap:var(--ts-spacing-1);min-block-size:var(--ts-tree-item-height, 2rem);padding-inline:var(--ts-spacing-2);padding-block:var(--ts-spacing-1);border-radius:var(--ts-radius-sm);cursor:pointer;user-select:none;font-size:var(--ts-font-size-sm);line-height:var(--ts-line-height-tight);color:var(--ts-color-text-primary);transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.tree-item__base:hover{background-color:var(--ts-color-bg-subtle)}:host(:focus-visible) .tree-item__base{box-shadow:var(--ts-focus-ring)}:host([selected]) .tree-item__base{background-color:var(--ts-tree-active-bg, var(--ts-color-interactive-primary-subtle));color:var(--ts-color-interactive-primary)}:host([disabled]) .tree-item__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.tree-item__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.25rem;block-size:1.25rem;transition:transform var(--ts-transition-fast)}.tree-item__chevron svg{inline-size:0.875rem;block-size:0.875rem}:host(.ts-tree-item--expanded) .tree-item__chevron{transform:rotate(90deg)}.tree-item__chevron--hidden{visibility:hidden}.tree-item__icon{display:inline-flex;align-items:center;flex-shrink:0}.tree-item__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-item__children{padding-inline-start:var(--ts-tree-indent, var(--ts-spacing-5))}.tree-item__children--collapsed{display:none}`;
+
+const TsTreeItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsToggle = index.createEvent(this, "tsToggle");
+        this.tsSelect = index.createEvent(this, "tsSelect");
+    }
+    get hostEl() { return index.getElement(this); }
+    /** The item label. */
+    label;
+    /** Whether the item is expanded (has children). */
+    expanded = false;
+    /** Whether the item is selected. */
+    selected = false;
+    /** Whether the item is disabled. */
+    disabled = false;
+    /** Optional Lucide icon name. */
+    icon;
+    /** Whether this item has slotted children (expandable). */
+    hasChildren = false;
+    /** Emitted when expand/collapse is toggled. */
+    tsToggle;
+    /** Emitted when the item is selected. */
+    tsSelect;
+    onExpandedChange() {
+        this.tsToggle.emit({ expanded: this.expanded });
+    }
+    componentDidLoad() {
+        this.checkForChildren();
+    }
+    checkForChildren() {
+        const slot = this.hostEl.shadowRoot?.querySelector('slot:not([name])');
+        if (slot) {
+            const assigned = slot.assignedElements();
+            this.hasChildren = assigned.some(el => el.tagName === 'TS-TREE-ITEM');
+        }
+    }
+    handleToggle = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+    };
+    handleSelect = () => {
+        if (this.disabled)
+            return;
+        const tree = this.hostEl.closest('ts-tree');
+        if (tree && tree.selectable) {
+            this.selected = !this.selected;
+            this.tsSelect.emit({ selected: this.selected, value: this.label || '' });
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelect();
+        }
+    };
+    handleSlotChange = () => {
+        this.checkForChildren();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '7e7f3dd3e7507cc1d3d6d44f5bbb99b3946c7c09', class: {
+                'ts-tree-item': true,
+                'ts-tree-item--expanded': this.expanded,
+                'ts-tree-item--selected': this.selected,
+                'ts-tree-item--disabled': this.disabled,
+                'ts-tree-item--has-children': this.hasChildren,
+            }, role: "treeitem", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.hasChildren ? String(this.expanded) : undefined, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'd0d625e277d4ea706e97f03b4adb6a48780915e0', class: "tree-item__base", part: "base", onClick: this.handleSelect }, index.h("span", { key: '1b44e6fb9de206da990d62a67802e2b68be312f2', class: {
+                'tree-item__chevron': true,
+                'tree-item__chevron--hidden': !this.hasChildren,
+            }, part: "chevron", onClick: this.handleToggle, "aria-hidden": "true" }, index.h("svg", { key: '1c106e6ee2ad03442df967a8c17a0037b082ea07', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '6ba0bd24fc2ddd001dbdf9a4bb7469759e00087d', points: "9 18 15 12 9 6" }))), this.icon && (index.h("span", { key: '012d65b356f0ebce7fce3b88a8697588264b6e51', class: "tree-item__icon", part: "icon", "aria-hidden": "true" }, index.h("ts-icon", { key: '2f6573c6315eca6e8317a45e96586aa51998a4b6', name: this.icon, size: "sm" }))), index.h("span", { key: 'c3ffb683523d7517a1a97b033e8262660438c667', class: "tree-item__label", part: "label" }, index.h("slot", { key: '4ff256ccc6c0869785e272667146761066381386', name: "label" }, this.label))), index.h("div", { key: '236fd4afd3078b5fb8e19b7cf89f12a7fd97f683', class: {
+                'tree-item__children': true,
+                'tree-item__children--collapsed': !this.expanded,
+            }, role: "group" }, index.h("slot", { key: '23beab65b06e3006a007d4f0965726a7297470a0', onSlotchange: this.handleSlotChange }))));
+    }
+    static get watchers() { return {
+        "expanded": [{
+                "onExpandedChange": 0
+            }]
+    }; }
+};
+TsTreeItem.style = treeItemCss();
+
+exports.ts_tree_item = TsTreeItem;
+//# sourceMappingURL=ts-tree-item.entry.cjs.js.map
+
+//# sourceMappingURL=ts-tree-item.cjs.entry.js.map

package/dist/cjs/ts-tree-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-tree-item.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/tree/tree-item.css?tag=ts-tree-item&encapsulation=shadow","src/components/tree/tree-item.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-tree-item — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n  outline: none;\n}\n\n.tree-item__base {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n  min-block-size: var(--ts-tree-item-height, 2rem);\n  padding-inline: var(--ts-spacing-2);\n  padding-block: var(--ts-spacing-1);\n  border-radius: var(--ts-radius-sm);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--ts-font-size-sm);\n  line-height: var(--ts-line-height-tight);\n  color: var(--ts-color-text-primary);\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n}\n\n.tree-item__base:hover {\n  background-color: var(--ts-color-bg-subtle);\n}\n\n:host(:focus-visible) .tree-item__base {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Selected ---- */\n:host([selected]) .tree-item__base {\n  background-color: var(--ts-tree-active-bg, var(--ts-color-interactive-primary-subtle));\n  color: var(--ts-color-interactive-primary);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .tree-item__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Chevron ---- */\n.tree-item__chevron {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  inline-size: 1.25rem;\n  block-size: 1.25rem;\n  transition: transform var(--ts-transition-fast);\n}\n\n.tree-item__chevron svg {\n  inline-size: 0.875rem;\n  block-size: 0.875rem;\n}\n\n:host(.ts-tree-item--expanded) .tree-item__chevron {\n  transform: rotate(90deg);\n}\n\n.tree-item__chevron--hidden {\n  visibility: hidden;\n}\n\n/* ---- Icon ---- */\n.tree-item__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ---- Label ---- */\n.tree-item__label {\n  flex: 1;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ---- Children ---- */\n.tree-item__children {\n  padding-inline-start: var(--ts-tree-indent, var(--ts-spacing-5));\n}\n\n.tree-item__children--collapsed {\n  display: none;\n}\n","import { Component, Prop, Event, State, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for nested ts-tree-item children.\n * @slot label - Custom label content.\n *\n * @part base - The tree item container.\n * @part label - The label wrapper.\n * @part chevron - The expand/collapse chevron.\n * @part icon - The icon wrapper.\n */\n@Component({\n  tag: 'ts-tree-item',\n  styleUrl: 'tree-item.css',\n  shadow: true,\n})\nexport class TsTreeItem {\n  @Element() hostEl!: HTMLElement;\n\n  /** The item label. */\n  @Prop() label?: string;\n\n  /** Whether the item is expanded (has children). */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  /** Whether the item is selected. */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** Whether the item is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional Lucide icon name. */\n  @Prop() icon?: string;\n\n  /** Whether this item has slotted children (expandable). */\n  @State() hasChildren = false;\n\n  /** Emitted when expand/collapse is toggled. */\n  @Event({ eventName: 'tsToggle' }) tsToggle!: EventEmitter<{ expanded: boolean }>;\n\n  /** Emitted when the item is selected. */\n  @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<{ selected: boolean; value: string }>;\n\n  @Watch('expanded')\n  onExpandedChange(): void {\n    this.tsToggle.emit({ expanded: this.expanded });\n  }\n\n  componentDidLoad(): void {\n    this.checkForChildren();\n  }\n\n  private checkForChildren(): void {\n    const slot = this.hostEl.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement;\n    if (slot) {\n      const assigned = slot.assignedElements();\n      this.hasChildren = assigned.some(el => el.tagName === 'TS-TREE-ITEM');\n    }\n  }\n\n  private handleToggle = (event: MouseEvent): void => {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  };\n\n  private handleSelect = (): void => {\n    if (this.disabled) return;\n    const tree = this.hostEl.closest('ts-tree');\n    if (tree && (tree as unknown as { selectable: boolean }).selectable) {\n      this.selected = !this.selected;\n      this.tsSelect.emit({ selected: this.selected, value: this.label || '' });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleSelect();\n    }\n  };\n\n  private handleSlotChange = (): void => {\n    this.checkForChildren();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-tree-item': true,\n          'ts-tree-item--expanded': this.expanded,\n          'ts-tree-item--selected': this.selected,\n          'ts-tree-item--disabled': this.disabled,\n          'ts-tree-item--has-children': this.hasChildren,\n        }}\n        role=\"treeitem\"\n        tabindex={this.disabled ? -1 : 0}\n        aria-expanded={this.hasChildren ? String(this.expanded) : undefined}\n        aria-selected={String(this.selected)}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onKeyDown={this.handleKeyDown}\n      >\n        <div class=\"tree-item__base\" part=\"base\" onClick={this.handleSelect}>\n          <span\n            class={{\n              'tree-item__chevron': true,\n              'tree-item__chevron--hidden': !this.hasChildren,\n            }}\n            part=\"chevron\"\n            onClick={this.handleToggle}\n            aria-hidden=\"true\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </span>\n\n          {this.icon && (\n            <span class=\"tree-item__icon\" part=\"icon\" aria-hidden=\"true\">\n              <ts-icon name={this.icon} size=\"sm\" />\n            </span>\n          )}\n\n          <span class=\"tree-item__label\" part=\"label\">\n            <slot name=\"label\">{this.label}</slot>\n          </span>\n        </div>\n\n        <div\n          class={{\n            'tree-item__children': true,\n            'tree-item__children--collapsed': !this.expanded,\n          }}\n          role=\"group\"\n        >\n          <slot onSlotchange={this.handleSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-tree.cjs.entry.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const treeCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-tree-indent:var(--ts-spacing-5);--ts-tree-item-height:2rem;--ts-tree-active-bg:var(--ts-color-interactive-primary-subtle)}.tree__base{list-style:none;margin:0;padding:0}`;
+
+const TsTree = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.getElement(this); }
+    /** Enable item selection mode. */
+    selectable = false;
+    handleKeyDown(event) {
+        const items = this.getVisibleItems();
+        if (items.length === 0)
+            return;
+        const focused = document.activeElement;
+        const currentIndex = items.indexOf(focused);
+        if (currentIndex === -1)
+            return;
+        const currentItem = items[currentIndex];
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (currentIndex < items.length - 1) {
+                    items[currentIndex + 1].focus();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (currentIndex > 0) {
+                    items[currentIndex - 1].focus();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (currentItem && !currentItem.expanded) {
+                    currentItem.expanded = true;
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (currentItem && currentItem.expanded) {
+                    currentItem.expanded = false;
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                items[0].focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                items[items.length - 1].focus();
+                break;
+        }
+    }
+    getVisibleItems() {
+        const allItems = Array.from(this.hostEl.querySelectorAll('ts-tree-item'));
+        return allItems.filter(item => {
+            let parent = item.parentElement;
+            while (parent && parent !== this.hostEl) {
+                if (parent.tagName === 'TS-TREE-ITEM' && !parent.expanded) {
+                    return false;
+                }
+                parent = parent.parentElement;
+            }
+            return true;
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: 'f19d8e0e243df40456f96dd89eb81fd4b1c68e8e', class: { 'ts-tree': true }, role: "tree" }, index.h("div", { key: '2cfd542f7681b88563f5ad92f14a807cbb33b590', class: "tree__base", part: "base" }, index.h("slot", { key: 'b08eef0089c0e9b5c1d84def2fc17be9be57e3ba' }))));
+    }
+};
+TsTree.style = treeCss();
+
+exports.ts_tree = TsTree;
+//# sourceMappingURL=ts-tree.entry.cjs.js.map
+
+//# sourceMappingURL=ts-tree.cjs.entry.js.map

package/dist/cjs/ts-tree.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-tree.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,yOAAyO,CAAC;;MCYpP,MAAM,GAAA,MAAA;;;;;;IAIQ,UAAU,GAAG,KAAK;AAG3C,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE;AACpC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAExB,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,aAA4B;QACrD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAC3C,IAAI,YAAY,KAAK,EAAE;YAAE;AAEzB,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,CAA0B;AAEhE,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBACnC,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;gBAEjC;AACF,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,YAAY,GAAG,CAAC,EAAE;oBACpB,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;;gBAEjC;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;AACxC,oBAAA,WAAW,CAAC,QAAQ,GAAG,IAAI;;gBAE7B;AACF,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,WAAW,IAAI,WAAW,CAAC,QAAQ,EAAE;AACvC,oBAAA,WAAW,CAAC,QAAQ,GAAG,KAAK;;gBAE9B;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;gBAChB;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE;gBAC/B;;;IAIE,eAAe,GAAA;AACrB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;AACzE,QAAA,OAAO,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAG;AAC5B,YAAA,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa;YAC/B,OAAO,MAAM,IAAI,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE;gBACvC,IAAI,MAAM,CAAC,OAAO,KAAK,cAAc,IAAI,CAAE,MAAgC,CAAC,QAAQ,EAAE;AACpF,oBAAA,OAAO,KAAK;;AAEd,gBAAA,MAAM,GAAG,MAAM,CAAC,aAAa;;AAE/B,YAAA,OAAO,IAAI;AACb,SAAC,CAAkB;;;IAIrB,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,EAC1B,IAAI,EAAC,MAAM,EAAA,EAEXD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/tree/tree.css?tag=ts-tree&encapsulation=shadow","src/components/tree/tree.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-tree — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-tree-indent         Indentation per level\n     --ts-tree-item-height    Item height\n     --ts-tree-active-bg      Active item background\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-tree-indent: var(--ts-spacing-5);\n  --ts-tree-item-height: 2rem;\n  --ts-tree-active-bg: var(--ts-color-interactive-primary-subtle);\n}\n\n.tree__base {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-tree-item children.\n *\n * @part base - The tree container.\n */\n@Component({\n  tag: 'ts-tree',\n  styleUrl: 'tree.css',\n  shadow: true,\n})\nexport class TsTree {\n  @Element() hostEl!: HTMLElement;\n\n  /** Enable item selection mode. */\n  @Prop({ reflect: true }) selectable = false;\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent): void {\n    const items = this.getVisibleItems();\n    if (items.length === 0) return;\n\n    const focused = document.activeElement as HTMLElement;\n    const currentIndex = items.indexOf(focused);\n    if (currentIndex === -1) return;\n\n    const currentItem = items[currentIndex] as HTMLTsTreeItemElement;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (currentIndex < items.length - 1) {\n          items[currentIndex + 1].focus();\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (currentIndex > 0) {\n          items[currentIndex - 1].focus();\n        }\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (currentItem && !currentItem.expanded) {\n          currentItem.expanded = true;\n        }\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (currentItem && currentItem.expanded) {\n          currentItem.expanded = false;\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        items[0].focus();\n        break;\n      case 'End':\n        event.preventDefault();\n        items[items.length - 1].focus();\n        break;\n    }\n  }\n\n  private getVisibleItems(): HTMLElement[] {\n    const allItems = Array.from(this.hostEl.querySelectorAll('ts-tree-item'));\n    return allItems.filter(item => {\n      let parent = item.parentElement;\n      while (parent && parent !== this.hostEl) {\n        if (parent.tagName === 'TS-TREE-ITEM' && !(parent as HTMLTsTreeItemElement).expanded) {\n          return false;\n        }\n        parent = parent.parentElement;\n      }\n      return true;\n    }) as HTMLElement[];\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{ 'ts-tree': true }}\n        role=\"tree\"\n      >\n        <div class=\"tree__base\" part=\"base\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface HTMLTsTreeItemElement extends HTMLElement {\n  expanded: boolean;\n}\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,64 @@
+{
+  "entries": [
+    "components/icon/icon.js",
+    "components/tabs/tabs.js",
+    "components/tabs/tab-panel.js",
+    "components/spinner/spinner.js",
+    "components/avatar/avatar.js",
+    "components/dialog/dialog.js",
+    "components/menu/menu.js",
+    "components/menu/menu-item.js",
+    "components/table/table.js",
+    "components/accordion/accordion.js",
+    "components/accordion/accordion-item.js",
+    "components/breadcrumb/breadcrumb.js",
+    "components/breadcrumb/breadcrumb-item.js",
+    "components/pagination/pagination.js",
+    "components/progress/progress.js",
+    "components/slider/slider.js",
+    "components/skeleton/skeleton.js",
+    "components/toast/toast.js",
+    "components/chip/chip.js",
+    "components/divider/divider.js",
+    "components/popover/popover.js",
+    "components/tree/tree.js",
+    "components/tree/tree-item.js",
+    "components/switch-group/switch-group.js",
+    "components/switch-group/switch-option.js",
+    "components/toolbar/toolbar.js",
+    "components/empty-state/empty-state.js",
+    "components/banner/banner.js",
+    "components/drawer/drawer.js",
+    "components/nav/nav.js",
+    "components/nav/nav-item.js",
+    "components/date-picker/date-picker.js",
+    "components/file-upload/file-upload.js",
+    "components/stepper/stepper.js",
+    "components/stepper/step.js",
+    "components/grid/grid.js",
+    "components/container/container.js",
+    "components/stack/stack.js",
+    "components/row/row.js",
+    "components/spacer/spacer.js",
+    "components/alert/alert.js",
+    "components/badge/badge.js",
+    "components/button/button.js",
+    "components/card/card.js",
+    "components/checkbox/checkbox.js",
+    "components/input/input.js",
+    "components/modal/modal.js",
+    "components/radio/radio.js",
+    "components/select/select.js",
+    "components/textarea/textarea.js",
+    "components/toggle/toggle.js",
+    "components/tooltip/tooltip.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/accordion/accordion-item.css

@@ -0,0 +1,75 @@
+/* ==========================================================================
+   ts-accordion-item — Shadow DOM Scoped Styles
+   ========================================================================== */
+
+:host {
+  display: block;
+}
+
+/* ---- Header ---- */
+.accordion-item__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ts-spacing-2);
+  padding-block: var(--ts-spacing-3);
+  padding-inline: var(--ts-spacing-4);
+  background: var(--ts-accordion-header-bg, transparent);
+  border: none;
+  cursor: pointer;
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-md);
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-primary);
+  outline: none;
+  transition: background-color var(--ts-transition-fast);
+  user-select: none;
+}
+
+.accordion-item__header:hover:not([aria-disabled="true"]) {
+  background-color: var(--ts-color-bg-subtle);
+}
+
+.accordion-item__header:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) .accordion-item__header {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Chevron icon ---- */
+.accordion-item__icon {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--ts-transition-fast);
+}
+
+.accordion-item__icon svg {
+  inline-size: 1.25em;
+  block-size: 1.25em;
+}
+
+:host(.ts-accordion-item--open) .accordion-item__icon {
+  transform: rotate(180deg);
+}
+
+/* ---- Panel ---- */
+.accordion-item__panel {
+  overflow: hidden;
+  transition: max-block-size var(--ts-transition-normal);
+}
+
+.accordion-item__panel[hidden] {
+  display: none;
+}
+
+.accordion-item__content {
+  padding-block: var(--ts-spacing-2);
+  padding-inline: var(--ts-spacing-4);
+  padding-block-end: var(--ts-spacing-4);
+  font-size: var(--ts-font-size-md);
+  color: var(--ts-color-text-secondary);
+}

package/dist/collection/components/accordion/accordion-item.js

@@ -0,0 +1,157 @@
+import { h, Host } from "@stencil/core";
+let accordionItemId = 0;
+/**
+ * @slot - Default slot for panel content.
+ * @slot header - Custom header content (replaces heading text).
+ *
+ * @part header - The header button.
+ * @part panel - The content panel.
+ */
+export class TsAccordionItem {
+    headerId;
+    panelId;
+    /** Whether the item is expanded. */
+    open = false;
+    /** Disables toggling. */
+    disabled = false;
+    /** Header text for the item. */
+    heading;
+    /** Emitted when the item is toggled. */
+    tsToggle;
+    internalOpen = false;
+    onOpenChange(newVal) {
+        this.internalOpen = newVal;
+    }
+    connectedCallback() {
+        const id = accordionItemId++;
+        this.headerId = `ts-accordion-header-${id}`;
+        this.panelId = `ts-accordion-panel-${id}`;
+        this.internalOpen = this.open;
+    }
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        this.internalOpen = this.open;
+        this.tsToggle.emit({ open: this.open });
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'aa3316d5e46a7c4e7c055497e52db820e2eb2804', class: {
+                'ts-accordion-item': true,
+                'ts-accordion-item--open': this.internalOpen,
+                'ts-accordion-item--disabled': this.disabled,
+            } }, h("div", { key: '27e63690847de4d816057891141402f51375a179', class: "accordion-item__header", part: "header", id: this.headerId, role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.internalOpen ? 'true' : 'false', "aria-controls": this.panelId, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'fd3c289960510c7953c1853a10dd4b544e361d0c', name: "header" }, h("span", { key: '8cd789055352fb8f0773511985e2a27cfb92551b', class: "accordion-item__heading" }, this.heading)), h("span", { key: '2f33c59115a23e86e92fb0e3dcbc6098718e16e1', class: "accordion-item__icon", "aria-hidden": "true" }, h("svg", { key: '632affef71463346f8ff771cfd58db096675d532', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'ee66ca775b9f9081cd9a6c265aee0e075e12f2cb', points: "6 9 12 15 18 9" })))), h("div", { key: 'aa58f91f91dba2000579597767d33fdd10c52547', class: "accordion-item__panel", part: "panel", id: this.panelId, role: "region", "aria-labelledby": this.headerId, hidden: !this.internalOpen }, h("div", { key: '980de82df6259725bf743a22734cb9be96f0a01b', class: "accordion-item__content" }, h("slot", { key: 'ae98ce52f3686885e61b7fdf4a8b6c60f0cebd72' })))));
+    }
+    static get is() { return "ts-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is expanded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables toggling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Header text for the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsToggle",
+                "name": "tsToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the item is toggled."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=accordion-item.js.map

package/dist/collection/components/accordion/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG9E,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB;;;;;;GAMG;AAMH,MAAM,OAAO,eAAe;IAClB,QAAQ,CAAU;IAClB,OAAO,CAAU;IAEzB,oCAAoC;IACI,IAAI,GAAG,KAAK,CAAC;IAErD,yBAAyB;IACA,QAAQ,GAAG,KAAK,CAAC;IAE1C,gCAAgC;IACxB,OAAO,CAAU;IAEzB,wCAAwC;IACN,QAAQ,CAAmC;IAEpE,YAAY,GAAG,KAAK,CAAC;IAG9B,YAAY,CAAC,MAAe;QAC1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,uBAAuB,EAAE,EAAE,CAAC;QAC5C,IAAI,CAAC,OAAO,GAAG,sBAAsB,EAAE,EAAE,CAAC;QAC1C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;IAChC,CAAC;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,yBAAyB,EAAE,IAAI,CAAC,YAAY;gBAC5C,6BAA6B,EAAE,IAAI,CAAC,QAAQ;aAC7C;YAED,4DACE,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACjB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBACpC,IAAI,CAAC,OAAO,mBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,6DAAM,IAAI,EAAC,QAAQ;oBACjB,6DAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACtD;gBACP,6DAAM,KAAK,EAAC,sBAAsB,iBAAa,MAAM;oBACnD,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO;wBACxH,iEAAU,MAAM,EAAC,gBAAgB,GAAG,CAChC,CACD,CACH;YACN,4DACE,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,QAAQ,EAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY;gBAE1B,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,8DAAQ,CACJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nlet accordionItemId = 0;\n\n/**\n * @slot - Default slot for panel content.\n * @slot header - Custom header content (replaces heading text).\n *\n * @part header - The header button.\n * @part panel - The content panel.\n */\n@Component({\n  tag: 'ts-accordion-item',\n  styleUrl: 'accordion-item.css',\n  shadow: true,\n})\nexport class TsAccordionItem {\n  private headerId!: string;\n  private panelId!: string;\n\n  /** Whether the item is expanded. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Disables toggling. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Header text for the item. */\n  @Prop() heading?: string;\n\n  /** Emitted when the item is toggled. */\n  @Event({ eventName: 'tsToggle' }) tsToggle!: EventEmitter<{ open: boolean }>;\n\n  @State() internalOpen = false;\n\n  @Watch('open')\n  onOpenChange(newVal: boolean): void {\n    this.internalOpen = newVal;\n  }\n\n  connectedCallback(): void {\n    const id = accordionItemId++;\n    this.headerId = `ts-accordion-header-${id}`;\n    this.panelId = `ts-accordion-panel-${id}`;\n    this.internalOpen = this.open;\n  }\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.internalOpen = this.open;\n    this.tsToggle.emit({ open: this.open });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-accordion-item': true,\n          'ts-accordion-item--open': this.internalOpen,\n          'ts-accordion-item--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"accordion-item__header\"\n          part=\"header\"\n          id={this.headerId}\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-expanded={this.internalOpen ? 'true' : 'false'}\n          aria-controls={this.panelId}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <slot name=\"header\">\n            <span class=\"accordion-item__heading\">{this.heading}</span>\n          </slot>\n          <span class=\"accordion-item__icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <polyline points=\"6 9 12 15 18 9\" />\n            </svg>\n          </span>\n        </div>\n        <div\n          class=\"accordion-item__panel\"\n          part=\"panel\"\n          id={this.panelId}\n          role=\"region\"\n          aria-labelledby={this.headerId}\n          hidden={!this.internalOpen}\n        >\n          <div class=\"accordion-item__content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/accordion/accordion-item.stories.js

@@ -0,0 +1,4 @@
+// Stories for ts-accordion-item are in the parent component's stories file
+// This file exists only to prevent auto-generation
+export default { title: 'Internal/accordion-item', tags: ['!autodocs'] };
+//# sourceMappingURL=accordion-item.stories.js.map

package/dist/collection/components/accordion/accordion-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion-item.stories.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,mDAAmD;AAEnD,eAAe,EAAE,KAAK,EAAE,yBAAyB,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC","sourcesContent":["// Stories for ts-accordion-item are in the parent component's stories file\n// This file exists only to prevent auto-generation\n\nexport default { title: 'Internal/accordion-item', tags: ['!autodocs'] };\n"]}