@tessera-ui/core 0.4.0

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,242 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot - Default slot for the trigger element.
+ *
+ * @part base - The tooltip popup container.
+ * @part arrow - The tooltip arrow element.
+ */
+export class TsTooltip {
+    hostEl;
+    tooltipId = 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 (h(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 }, h("span", { key: '0b334f0e17a37431daa0f23652374a4f8f0de3b9', class: "tooltip__trigger", "aria-describedby": this.isVisible ? this.tooltipId : undefined }, h("slot", { key: 'e3f1e57562ee6c55f4c6343fc853a9ee1ef234fc' })), 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, h("div", { key: 'fa6a4ac47413853dfd1f4da984888e0de02d7493', class: "tooltip__arrow", part: "arrow" }))));
+    }
+    static get is() { return "ts-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The tooltip text content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content",
+                "defaultValue": "''"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsPlacement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "TsPlacement": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsPlacement",
+                            "referenceLocation": "TsPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placement of the tooltip relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placement",
+                "defaultValue": "'top'"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in ms before showing the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delay",
+                "defaultValue": "200"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in ms before hiding the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-delay",
+                "defaultValue": "0"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically show the tooltip.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hide the tooltip.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=tooltip.js.map

package/dist/collection/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -0,0 +1,186 @@
+// Hand-written stories for ts-tooltip
+export default {
+    title: 'Components/Tooltip',
+    tags: ['autodocs'],
+    argTypes: {
+        content: { control: 'text', description: 'The tooltip text content.' },
+        placement: {
+            control: 'select',
+            options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
+            description: 'Placement of the tooltip relative to the trigger.',
+        },
+        showDelay: { control: 'number', description: 'Delay in ms before showing the tooltip.' },
+        hideDelay: { control: 'number', description: 'Delay in ms before hiding the tooltip.' },
+        disabled: { control: 'boolean', description: 'Disables the tooltip.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.content !== undefined && args.content !== null)
+        attrs.push(`content="${args.content}"`);
+    if (args.placement !== undefined && args.placement !== null)
+        attrs.push(`placement="${args.placement}"`);
+    if (args.showDelay !== undefined && args.showDelay !== null)
+        attrs.push(`show-delay="${args.showDelay}"`);
+    if (args.hideDelay !== undefined && args.hideDelay !== null)
+        attrs.push(`hide-delay="${args.hideDelay}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    return `<div style="padding: 60px; display: flex; justify-content: center;">
+    <ts-tooltip ${attrs.join(' ')}>
+      <ts-button variant="primary">Hover Me</ts-button>
+    </ts-tooltip>
+  </div>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        content: 'Save your current changes',
+        placement: 'top',
+        showDelay: 200,
+        hideDelay: 0,
+        disabled: false,
+    },
+});
+export const Placements = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 80px 40px;">
+    <div style="display: flex; gap: 16px; justify-content: center;">
+      <ts-tooltip content="Top Start" placement="top-start">
+        <ts-button size="sm" appearance="outline" variant="neutral">Top Start</ts-button>
+      </ts-tooltip>
+      <ts-tooltip content="Top" placement="top">
+        <ts-button size="sm" appearance="outline" variant="neutral">Top</ts-button>
+      </ts-tooltip>
+      <ts-tooltip content="Top End" placement="top-end">
+        <ts-button size="sm" appearance="outline" variant="neutral">Top End</ts-button>
+      </ts-tooltip>
+    </div>
+
+    <div style="display: flex; gap: 200px; justify-content: center;">
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <ts-tooltip content="Left Start" placement="left-start">
+          <ts-button size="sm" appearance="outline" variant="neutral">Left Start</ts-button>
+        </ts-tooltip>
+        <ts-tooltip content="Left" placement="left">
+          <ts-button size="sm" appearance="outline" variant="neutral">Left</ts-button>
+        </ts-tooltip>
+        <ts-tooltip content="Left End" placement="left-end">
+          <ts-button size="sm" appearance="outline" variant="neutral">Left End</ts-button>
+        </ts-tooltip>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <ts-tooltip content="Right Start" placement="right-start">
+          <ts-button size="sm" appearance="outline" variant="neutral">Right Start</ts-button>
+        </ts-tooltip>
+        <ts-tooltip content="Right" placement="right">
+          <ts-button size="sm" appearance="outline" variant="neutral">Right</ts-button>
+        </ts-tooltip>
+        <ts-tooltip content="Right End" placement="right-end">
+          <ts-button size="sm" appearance="outline" variant="neutral">Right End</ts-button>
+        </ts-tooltip>
+      </div>
+    </div>
+
+    <div style="display: flex; gap: 16px; justify-content: center;">
+      <ts-tooltip content="Bottom Start" placement="bottom-start">
+        <ts-button size="sm" appearance="outline" variant="neutral">Bottom Start</ts-button>
+      </ts-tooltip>
+      <ts-tooltip content="Bottom" placement="bottom">
+        <ts-button size="sm" appearance="outline" variant="neutral">Bottom</ts-button>
+      </ts-tooltip>
+      <ts-tooltip content="Bottom End" placement="bottom-end">
+        <ts-button size="sm" appearance="outline" variant="neutral">Bottom End</ts-button>
+      </ts-tooltip>
+    </div>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 60px 40px;">
+    <ts-tooltip content="This tooltip is active" placement="top">
+      <ts-button variant="primary">Active Tooltip</ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="This tooltip is disabled" placement="top" disabled>
+      <ts-button appearance="outline" variant="neutral">Disabled Tooltip</ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="Shows after 500ms" placement="top" show-delay="500">
+      <ts-button appearance="outline" variant="neutral">Slow Show (500ms)</ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="Hides after 300ms" placement="top" hide-delay="300">
+      <ts-button appearance="outline" variant="neutral">Slow Hide (300ms)</ts-button>
+    </ts-tooltip>
+  </div>
+`;
+export const WithIcons = () => `
+  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 60px 40px;">
+    <ts-tooltip content="Create a new document" placement="top">
+      <ts-button appearance="ghost" variant="neutral">
+        <ts-icon slot="prefix" name="file-plus" size="sm"></ts-icon>
+      </ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="Edit this item" placement="top">
+      <ts-button appearance="ghost" variant="neutral">
+        <ts-icon slot="prefix" name="pencil" size="sm"></ts-icon>
+      </ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="Copy to clipboard" placement="top">
+      <ts-button appearance="ghost" variant="neutral">
+        <ts-icon slot="prefix" name="copy" size="sm"></ts-icon>
+      </ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="Delete permanently" placement="top">
+      <ts-button appearance="ghost" variant="danger">
+        <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
+      </ts-button>
+    </ts-tooltip>
+    <ts-tooltip content="Share with team" placement="top">
+      <ts-button appearance="ghost" variant="primary">
+        <ts-icon slot="prefix" name="share-2" size="sm"></ts-icon>
+      </ts-button>
+    </ts-tooltip>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px; padding: 40px;">
+    <ts-card bordered padding="lg">
+      <span slot="header">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <h3 style="margin: 0;">Quick Actions</h3>
+          <ts-tooltip content="Keyboard shortcuts available" placement="left">
+            <ts-icon name="keyboard" size="sm" color="var(--ts-color-text-secondary)"></ts-icon>
+          </ts-tooltip>
+        </div>
+      </span>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <ts-tooltip content="Create new project (Ctrl+N)" placement="bottom">
+          <ts-button size="sm" variant="primary">
+            <ts-icon slot="prefix" name="plus" size="sm"></ts-icon>
+            New Project
+          </ts-button>
+        </ts-tooltip>
+        <ts-tooltip content="Import from file (Ctrl+I)" placement="bottom">
+          <ts-button size="sm" appearance="outline" variant="neutral">
+            <ts-icon slot="prefix" name="upload" size="sm"></ts-icon>
+            Import
+          </ts-button>
+        </ts-tooltip>
+        <ts-tooltip content="Export as PDF (Ctrl+E)" placement="bottom">
+          <ts-button size="sm" appearance="outline" variant="neutral">
+            <ts-icon slot="prefix" name="download" size="sm"></ts-icon>
+            Export
+          </ts-button>
+        </ts-tooltip>
+      </div>
+    </ts-card>
+
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <ts-input placeholder="Enter your API key" label="API Key" style="flex: 1;">
+        <ts-icon slot="prefix" name="key" size="sm"></ts-icon>
+      </ts-input>
+      <div style="align-self: flex-end; padding-bottom: 2px;">
+        <ts-tooltip content="Your API key can be found in Settings > Developer" placement="right">
+          <ts-icon name="help-circle" size="sm" color="var(--ts-color-text-secondary)"></ts-icon>
+        </ts-tooltip>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=tooltip.stories.js.map

package/dist/collection/components/tooltip/tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE;QACtE,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,CAAC;YACvJ,WAAW,EAAE,mDAAmD;SACjE;QACD,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,yCAAyC,EAAE;QACxF,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,wCAAwC,EAAE;QACvF,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uBAAuB,EAAE;KACvE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjG,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACzG,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC1G,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC1G,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,OAAO;kBACS,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;SAGxB,CAAC;AACV,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,GAAG;QACd,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDvC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAenC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxC,CAAC","sourcesContent":["// Hand-written stories for ts-tooltip\n\nexport default {\n  title: 'Components/Tooltip',\n  tags: ['autodocs'],\n  argTypes: {\n    content: { control: 'text', description: 'The tooltip text content.' },\n    placement: {\n      control: 'select',\n      options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],\n      description: 'Placement of the tooltip relative to the trigger.',\n    },\n    showDelay: { control: 'number', description: 'Delay in ms before showing the tooltip.' },\n    hideDelay: { control: 'number', description: 'Delay in ms before hiding the tooltip.' },\n    disabled: { control: 'boolean', description: 'Disables the tooltip.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.content !== undefined && args.content !== null) attrs.push(`content=\"${args.content}\"`);\n  if (args.placement !== undefined && args.placement !== null) attrs.push(`placement=\"${args.placement}\"`);\n  if (args.showDelay !== undefined && args.showDelay !== null) attrs.push(`show-delay=\"${args.showDelay}\"`);\n  if (args.hideDelay !== undefined && args.hideDelay !== null) attrs.push(`hide-delay=\"${args.hideDelay}\"`);\n  if (args.disabled) attrs.push('disabled');\n  return `<div style=\"padding: 60px; display: flex; justify-content: center;\">\n    <ts-tooltip ${attrs.join(' ')}>\n      <ts-button variant=\"primary\">Hover Me</ts-button>\n    </ts-tooltip>\n  </div>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    content: 'Save your current changes',\n    placement: 'top',\n    showDelay: 200,\n    hideDelay: 0,\n    disabled: false,\n  },\n});\n\nexport const Placements = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 80px 40px;\">\n    <div style=\"display: flex; gap: 16px; justify-content: center;\">\n      <ts-tooltip content=\"Top Start\" placement=\"top-start\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Top Start</ts-button>\n      </ts-tooltip>\n      <ts-tooltip content=\"Top\" placement=\"top\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Top</ts-button>\n      </ts-tooltip>\n      <ts-tooltip content=\"Top End\" placement=\"top-end\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Top End</ts-button>\n      </ts-tooltip>\n    </div>\n\n    <div style=\"display: flex; gap: 200px; justify-content: center;\">\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-tooltip content=\"Left Start\" placement=\"left-start\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Left Start</ts-button>\n        </ts-tooltip>\n        <ts-tooltip content=\"Left\" placement=\"left\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Left</ts-button>\n        </ts-tooltip>\n        <ts-tooltip content=\"Left End\" placement=\"left-end\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Left End</ts-button>\n        </ts-tooltip>\n      </div>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-tooltip content=\"Right Start\" placement=\"right-start\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Right Start</ts-button>\n        </ts-tooltip>\n        <ts-tooltip content=\"Right\" placement=\"right\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Right</ts-button>\n        </ts-tooltip>\n        <ts-tooltip content=\"Right End\" placement=\"right-end\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Right End</ts-button>\n        </ts-tooltip>\n      </div>\n    </div>\n\n    <div style=\"display: flex; gap: 16px; justify-content: center;\">\n      <ts-tooltip content=\"Bottom Start\" placement=\"bottom-start\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Bottom Start</ts-button>\n      </ts-tooltip>\n      <ts-tooltip content=\"Bottom\" placement=\"bottom\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Bottom</ts-button>\n      </ts-tooltip>\n      <ts-tooltip content=\"Bottom End\" placement=\"bottom-end\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Bottom End</ts-button>\n      </ts-tooltip>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 60px 40px;\">\n    <ts-tooltip content=\"This tooltip is active\" placement=\"top\">\n      <ts-button variant=\"primary\">Active Tooltip</ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"This tooltip is disabled\" placement=\"top\" disabled>\n      <ts-button appearance=\"outline\" variant=\"neutral\">Disabled Tooltip</ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"Shows after 500ms\" placement=\"top\" show-delay=\"500\">\n      <ts-button appearance=\"outline\" variant=\"neutral\">Slow Show (500ms)</ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"Hides after 300ms\" placement=\"top\" hide-delay=\"300\">\n      <ts-button appearance=\"outline\" variant=\"neutral\">Slow Hide (300ms)</ts-button>\n    </ts-tooltip>\n  </div>\n`;\n\nexport const WithIcons = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 60px 40px;\">\n    <ts-tooltip content=\"Create a new document\" placement=\"top\">\n      <ts-button appearance=\"ghost\" variant=\"neutral\">\n        <ts-icon slot=\"prefix\" name=\"file-plus\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"Edit this item\" placement=\"top\">\n      <ts-button appearance=\"ghost\" variant=\"neutral\">\n        <ts-icon slot=\"prefix\" name=\"pencil\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"Copy to clipboard\" placement=\"top\">\n      <ts-button appearance=\"ghost\" variant=\"neutral\">\n        <ts-icon slot=\"prefix\" name=\"copy\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"Delete permanently\" placement=\"top\">\n      <ts-button appearance=\"ghost\" variant=\"danger\">\n        <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-tooltip>\n    <ts-tooltip content=\"Share with team\" placement=\"top\">\n      <ts-button appearance=\"ghost\" variant=\"primary\">\n        <ts-icon slot=\"prefix\" name=\"share-2\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-tooltip>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 500px; padding: 40px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <h3 style=\"margin: 0;\">Quick Actions</h3>\n          <ts-tooltip content=\"Keyboard shortcuts available\" placement=\"left\">\n            <ts-icon name=\"keyboard\" size=\"sm\" color=\"var(--ts-color-text-secondary)\"></ts-icon>\n          </ts-tooltip>\n        </div>\n      </span>\n      <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n        <ts-tooltip content=\"Create new project (Ctrl+N)\" placement=\"bottom\">\n          <ts-button size=\"sm\" variant=\"primary\">\n            <ts-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></ts-icon>\n            New Project\n          </ts-button>\n        </ts-tooltip>\n        <ts-tooltip content=\"Import from file (Ctrl+I)\" placement=\"bottom\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">\n            <ts-icon slot=\"prefix\" name=\"upload\" size=\"sm\"></ts-icon>\n            Import\n          </ts-button>\n        </ts-tooltip>\n        <ts-tooltip content=\"Export as PDF (Ctrl+E)\" placement=\"bottom\">\n          <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">\n            <ts-icon slot=\"prefix\" name=\"download\" size=\"sm\"></ts-icon>\n            Export\n          </ts-button>\n        </ts-tooltip>\n      </div>\n    </ts-card>\n\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-input placeholder=\"Enter your API key\" label=\"API Key\" style=\"flex: 1;\">\n        <ts-icon slot=\"prefix\" name=\"key\" size=\"sm\"></ts-icon>\n      </ts-input>\n      <div style=\"align-self: flex-end; padding-bottom: 2px;\">\n        <ts-tooltip content=\"Your API key can be found in Settings > Developer\" placement=\"right\">\n          <ts-icon name=\"help-circle\" size=\"sm\" color=\"var(--ts-color-text-secondary)\"></ts-icon>\n        </ts-tooltip>\n      </div>\n    </div>\n  </div>\n`;\n"]}

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

@@ -0,0 +1,97 @@
+/* ==========================================================================
+   ts-tree-item — Shadow DOM Scoped Styles
+   ========================================================================== */
+
+: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);
+}
+
+/* ---- Selected ---- */
+:host([selected]) .tree-item__base {
+  background-color: var(--ts-tree-active-bg, var(--ts-color-interactive-primary-subtle));
+  color: var(--ts-color-interactive-primary);
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) .tree-item__base {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Chevron ---- */
+.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;
+}
+
+/* ---- Icon ---- */
+.tree-item__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ---- Label ---- */
+.tree-item__label {
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- Children ---- */
+.tree-item__children {
+  padding-inline-start: var(--ts-tree-indent, var(--ts-spacing-5));
+}
+
+.tree-item__children--collapsed {
+  display: none;
+}