@tessera-ui/core 0.4.0

package/dist/esm/ts-toast.entry.js

@@ -0,0 +1,105 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-V8-ENixA.js';
+
+const toastCss = () => `:host{display:block;position:fixed;z-index:var(--ts-z-toast, 9000);font-family:var(--ts-font-family-base);pointer-events:none;--ts-toast-radius:var(--ts-radius-xl);--ts-toast-shadow:var(--ts-shadow-lg);--ts-toast-max-width:420px}:host([position="top-right"]){inset-block-start:var(--ts-spacing-4);inset-inline-end:var(--ts-spacing-4)}:host([position="top-left"]){inset-block-start:var(--ts-spacing-4);inset-inline-start:var(--ts-spacing-4)}:host([position="bottom-right"]){inset-block-end:var(--ts-spacing-4);inset-inline-end:var(--ts-spacing-4)}:host([position="bottom-left"]){inset-block-end:var(--ts-spacing-4);inset-inline-start:var(--ts-spacing-4)}:host([position="top-center"]){inset-block-start:var(--ts-spacing-4);inset-inline-start:50%;transform:translateX(-50%)}:host([position="bottom-center"]){inset-block-end:var(--ts-spacing-4);inset-inline-start:50%;transform:translateX(-50%)}.toast__base{display:flex;align-items:flex-start;gap:var(--ts-spacing-3);padding:var(--ts-spacing-3) var(--ts-spacing-4);border-radius:var(--ts-toast-radius);box-shadow:var(--ts-toast-shadow);max-inline-size:var(--ts-toast-max-width);pointer-events:auto;border:1px solid transparent;font-size:var(--ts-font-size-sm);line-height:var(--ts-line-height-normal);animation:ts-toast-slide-in 0.3s ease-out}@keyframes ts-toast-slide-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([variant="info"]) .toast__base{background-color:var(--ts-color-info-bg);border-color:var(--ts-color-info-border);color:var(--ts-color-info-600)}:host([variant="success"]) .toast__base{background-color:var(--ts-color-success-bg);border-color:var(--ts-color-success-border);color:var(--ts-color-success-600)}:host([variant="warning"]) .toast__base{background-color:var(--ts-color-warning-bg);border-color:var(--ts-color-warning-border);color:var(--ts-color-warning-600)}:host([variant="danger"]) .toast__base{background-color:var(--ts-color-danger-bg);border-color:var(--ts-color-danger-border);color:var(--ts-color-danger-600)}:host([variant="neutral"]) .toast__base{background-color:var(--ts-color-bg-subtle);border-color:var(--ts-color-border-subtle);color:var(--ts-color-text-secondary)}.toast__icon{display:flex;align-items:center;font-size:1.15em;flex-shrink:0;margin-block-start:1px}.toast__message{flex:1;min-inline-size:0}.toast__action{display:flex;align-items:center;flex-shrink:0}.toast__action:empty{display:none}.toast__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;border:none;border-radius:var(--ts-radius-sm);background:transparent;color:currentColor;opacity:0.6;cursor:pointer;font-size:0.8em;transition:opacity var(--ts-transition-fast);padding:0;line-height:1}.toast__close:hover{opacity:1}.toast__close:focus-visible{box-shadow:var(--ts-focus-ring);opacity:1}`;
+
+const TsToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsClose = createEvent(this, "tsClose");
+    }
+    autoCloseTimer;
+    /** The toast's visual variant. */
+    variant = 'info';
+    /** Auto-dismiss duration in ms. Set 0 to disable. */
+    duration = 5000;
+    /** Whether the toast shows a close button. */
+    dismissible = true;
+    /** Whether the toast is visible. */
+    open = false;
+    /** Position of the toast on screen. */
+    position = 'top-right';
+    /** Emitted when the toast is dismissed. */
+    tsClose;
+    isVisible = false;
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.isVisible = true;
+            this.startAutoClose();
+        }
+        else {
+            this.isVisible = false;
+            this.clearAutoClose();
+        }
+    }
+    connectedCallback() {
+        if (this.open) {
+            this.isVisible = true;
+            this.startAutoClose();
+        }
+    }
+    disconnectedCallback() {
+        this.clearAutoClose();
+    }
+    /** Programmatically close the toast. */
+    async close() {
+        this.open = false;
+        this.isVisible = false;
+        this.clearAutoClose();
+        this.tsClose.emit();
+    }
+    /** Programmatically show the toast. */
+    async show() {
+        this.open = true;
+    }
+    startAutoClose() {
+        this.clearAutoClose();
+        if (this.duration > 0) {
+            this.autoCloseTimer = setTimeout(() => {
+                this.close();
+            }, this.duration);
+        }
+    }
+    clearAutoClose() {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderIcon() {
+        const icons = {
+            info: '\u2139',
+            success: '\u2713',
+            warning: '\u26A0',
+            danger: '\u2715',
+            neutral: '\u2139',
+        };
+        return h("span", { class: "toast__icon-symbol", "aria-hidden": "true" }, icons[this.variant] || '\u2139');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';
+        return (h(Host, { class: {
+                'ts-toast': true,
+                [`ts-toast--${this.variant}`]: true,
+                [`ts-toast--${this.position}`]: true,
+                'ts-toast--open': this.isVisible,
+            }, role: "status", "aria-live": ariaLive }, h("div", { class: "toast__base", part: "base" }, h("div", { class: "toast__icon", part: "icon" }, this.renderIcon()), h("div", { class: "toast__message", part: "message" }, h("slot", null)), h("div", { class: "toast__action", part: "action" }, h("slot", { name: "action" })), this.dismissible && (h("button", { class: "toast__close", part: "close", type: "button", "aria-label": "Dismiss notification", onClick: this.handleClose }, "\\u2715")))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsToast.style = toastCss();
+
+export { TsToast as ts_toast };
+//# sourceMappingURL=ts-toast.entry.js.map
+
+//# sourceMappingURL=ts-toast.entry.js.map

package/dist/esm/ts-toast.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-toast.entry.js","sources":["src/components/toast/toast.css?tag=ts-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-toast — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-toast-radius      Border radius\n     --ts-toast-shadow      Box shadow\n     --ts-toast-max-width   Maximum width\n   ========================================================================== */\n\n:host {\n  display: block;\n  position: fixed;\n  z-index: var(--ts-z-toast, 9000);\n  font-family: var(--ts-font-family-base);\n  pointer-events: none;\n\n  --ts-toast-radius: var(--ts-radius-xl);\n  --ts-toast-shadow: var(--ts-shadow-lg);\n  --ts-toast-max-width: 420px;\n}\n\n/* ---- Positions ---- */\n:host([position=\"top-right\"]) {\n  inset-block-start: var(--ts-spacing-4);\n  inset-inline-end: var(--ts-spacing-4);\n}\n\n:host([position=\"top-left\"]) {\n  inset-block-start: var(--ts-spacing-4);\n  inset-inline-start: var(--ts-spacing-4);\n}\n\n:host([position=\"bottom-right\"]) {\n  inset-block-end: var(--ts-spacing-4);\n  inset-inline-end: var(--ts-spacing-4);\n}\n\n:host([position=\"bottom-left\"]) {\n  inset-block-end: var(--ts-spacing-4);\n  inset-inline-start: var(--ts-spacing-4);\n}\n\n:host([position=\"top-center\"]) {\n  inset-block-start: var(--ts-spacing-4);\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n}\n\n:host([position=\"bottom-center\"]) {\n  inset-block-end: var(--ts-spacing-4);\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n}\n\n/* ---- Base ---- */\n.toast__base {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ts-spacing-3);\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  border-radius: var(--ts-toast-radius);\n  box-shadow: var(--ts-toast-shadow);\n  max-inline-size: var(--ts-toast-max-width);\n  pointer-events: auto;\n  border: 1px solid transparent;\n  font-size: var(--ts-font-size-sm);\n  line-height: var(--ts-line-height-normal);\n  animation: ts-toast-slide-in 0.3s ease-out;\n}\n\n@keyframes ts-toast-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* ---- Variants ---- */\n:host([variant=\"info\"]) .toast__base {\n  background-color: var(--ts-color-info-bg);\n  border-color: var(--ts-color-info-border);\n  color: var(--ts-color-info-600);\n}\n\n:host([variant=\"success\"]) .toast__base {\n  background-color: var(--ts-color-success-bg);\n  border-color: var(--ts-color-success-border);\n  color: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]) .toast__base {\n  background-color: var(--ts-color-warning-bg);\n  border-color: var(--ts-color-warning-border);\n  color: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]) .toast__base {\n  background-color: var(--ts-color-danger-bg);\n  border-color: var(--ts-color-danger-border);\n  color: var(--ts-color-danger-600);\n}\n\n:host([variant=\"neutral\"]) .toast__base {\n  background-color: var(--ts-color-bg-subtle);\n  border-color: var(--ts-color-border-subtle);\n  color: var(--ts-color-text-secondary);\n}\n\n/* ---- Icon ---- */\n.toast__icon {\n  display: flex;\n  align-items: center;\n  font-size: 1.15em;\n  flex-shrink: 0;\n  margin-block-start: 1px;\n}\n\n/* ---- Message ---- */\n.toast__message {\n  flex: 1;\n  min-inline-size: 0;\n}\n\n/* ---- Action ---- */\n.toast__action {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.toast__action:empty {\n  display: none;\n}\n\n/* ---- Close button ---- */\n.toast__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  inline-size: 1.5rem;\n  block-size: 1.5rem;\n  border: none;\n  border-radius: var(--ts-radius-sm);\n  background: transparent;\n  color: currentColor;\n  opacity: 0.6;\n  cursor: pointer;\n  font-size: 0.8em;\n  transition: opacity var(--ts-transition-fast);\n  padding: 0;\n  line-height: 1;\n}\n\n.toast__close:hover {\n  opacity: 1;\n}\n\n.toast__close:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  opacity: 1;\n}\n","import { Component, Prop, Event, State, h, Host, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\ntype TsToastVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\ntype TsToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - Optional action button.\n *\n * @part base - The toast container.\n * @part icon - The variant icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class TsToast {\n  private autoCloseTimer?: ReturnType<typeof setTimeout>;\n\n  /** The toast's visual variant. */\n  @Prop({ reflect: true }) variant: TsToastVariant = 'info';\n\n  /** Auto-dismiss duration in ms. Set 0 to disable. */\n  @Prop() duration = 5000;\n\n  /** Whether the toast shows a close button. */\n  @Prop() dismissible = true;\n\n  /** Whether the toast is visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Position of the toast on screen. */\n  @Prop({ reflect: true }) position: TsToastPosition = 'top-right';\n\n  /** Emitted when the toast is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  @State() isVisible = false;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean): void {\n    if (newValue) {\n      this.isVisible = true;\n      this.startAutoClose();\n    } else {\n      this.isVisible = false;\n      this.clearAutoClose();\n    }\n  }\n\n  connectedCallback(): void {\n    if (this.open) {\n      this.isVisible = true;\n      this.startAutoClose();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.clearAutoClose();\n  }\n\n  /** Programmatically close the toast. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n    this.isVisible = false;\n    this.clearAutoClose();\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the toast. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  private startAutoClose(): void {\n    this.clearAutoClose();\n    if (this.duration > 0) {\n      this.autoCloseTimer = setTimeout(() => {\n        this.close();\n      }, this.duration);\n    }\n  }\n\n  private clearAutoClose(): void {\n    if (this.autoCloseTimer) {\n      clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = undefined;\n    }\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      neutral: '\\u2139',\n    };\n    return <span class=\"toast__icon-symbol\" aria-hidden=\"true\">{icons[this.variant] || '\\u2139'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-toast': true,\n          [`ts-toast--${this.variant}`]: true,\n          [`ts-toast--${this.position}`]: true,\n          'ts-toast--open': this.isVisible,\n        }}\n        role=\"status\"\n        aria-live={ariaLive}\n      >\n        <div class=\"toast__base\" part=\"base\">\n          <div class=\"toast__icon\" part=\"icon\">\n            {this.renderIcon()}\n          </div>\n\n          <div class=\"toast__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"toast__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"toast__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ts-toggle.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.js';
+
+const toggleCss = () => `:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-toggle-track-bg:var(--ts-color-neutral-200);--ts-toggle-track-bg-checked:var(--ts-color-primary-600);--ts-toggle-thumb-bg:var(--ts-color-bg-elevated);--ts-toggle-focus-ring:var(--ts-focus-ring)}.toggle__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.toggle__base:focus-visible .toggle__track{box-shadow:var(--ts-toggle-focus-ring)}:host(.ts-toggle--disabled) .toggle__base{opacity:0.5;cursor:not-allowed}.toggle__track{position:relative;background-color:var(--ts-toggle-track-bg);border-radius:var(--ts-radius-full);border:2px solid var(--ts-color-border-default);box-shadow:none;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast);flex-shrink:0}:host(.ts-toggle--checked) .toggle__track{background-color:var(--ts-toggle-track-bg-checked);border-color:var(--ts-toggle-track-bg-checked);box-shadow:none}.toggle__thumb{position:absolute;top:50%;transform:translateY(-50%) scale(1);background-color:var(--ts-toggle-thumb-bg);border-radius:var(--ts-radius-full);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06);transition:inset-inline-start var(--ts-transition-fast),     transform var(--ts-transition-fast),     box-shadow var(--ts-transition-fast)}:host(.ts-toggle--checked) .toggle__thumb{box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06)}:host([size="sm"]) .toggle__track{width:32px;height:18px}:host([size="sm"]) .toggle__thumb{width:14px;height:14px;inset-inline-start:2px}:host(.ts-toggle--checked[size="sm"]) .toggle__thumb{inset-inline-start:16px}:host([size="md"]) .toggle__track{width:40px;height:22px}:host([size="md"]) .toggle__thumb{width:18px;height:18px;inset-inline-start:2px}:host(.ts-toggle--checked[size="md"]) .toggle__thumb{inset-inline-start:20px}:host([size="lg"]) .toggle__track{width:50px;height:28px}:host([size="lg"]) .toggle__thumb{width:24px;height:24px;inset-inline-start:2px}:host(.ts-toggle--checked[size="lg"]) .toggle__thumb{inset-inline-start:24px}.toggle__label{font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary);cursor:inherit;user-select:none}:host([size="lg"]) .toggle__label{font-size:var(--ts-font-size-md)}`;
+
+const TsToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsChange = createEvent(this, "tsChange");
+    }
+    get hostEl() { return getElement(this); }
+    inputId = generateId('ts-toggle');
+    /** Whether the toggle is checked. */
+    checked = false;
+    /** The toggle's size. */
+    size = 'md';
+    /** Renders the toggle as disabled. */
+    disabled = false;
+    /** Name for form submission. */
+    name;
+    /** Value for form submission. */
+    value;
+    /** Emitted when the toggle state changes. */
+    tsChange;
+    /** Programmatically toggle the checked state. */
+    async toggle() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            this.tsChange.emit({ checked: this.checked });
+        }
+    }
+    handleClick = () => {
+        this.toggle();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.toggle();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '37d1c8601478c83ad4be39acedfd4bb84ca9024c', class: {
+                'ts-toggle': true,
+                [`ts-toggle--${this.size}`]: true,
+                'ts-toggle--checked': this.checked,
+                'ts-toggle--disabled': this.disabled,
+            } }, h("div", { key: 'cc01df27c45a311485395e58d06b57cbaddace77', class: "toggle__base", part: "base", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("div", { key: '4e275c1ff9564119b2f3e7e8e2407f285fc0c27a', class: "toggle__track", part: "track" }, h("div", { key: 'e4213d681cef167a7e9db7ef001f83d12c618df4', class: "toggle__thumb", part: "thumb" })), h("label", { key: 'dcd922600a2af35a59ef59822f40a86db0dd94d8', class: "toggle__label", part: "label", id: `${this.inputId}-label` }, h("slot", { key: '7f15cc140376af0b8b9337a0517a9559dbf7d5b8' })))));
+    }
+};
+TsToggle.style = toggleCss();
+
+export { TsToggle as ts_toggle };
+//# sourceMappingURL=ts-toggle.entry.js.map
+
+//# sourceMappingURL=ts-toggle.entry.js.map

package/dist/esm/ts-toggle.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-toggle.entry.js","sources":["src/components/toggle/toggle.css?tag=ts-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-toggle — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-toggle-track-bg          Unchecked track background\n     --ts-toggle-track-bg-checked  Checked track background\n     --ts-toggle-thumb-bg          Thumb background\n     --ts-toggle-focus-ring        Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-toggle-track-bg: var(--ts-color-neutral-200);\n  --ts-toggle-track-bg-checked: var(--ts-color-primary-600);\n  --ts-toggle-thumb-bg: var(--ts-color-bg-elevated);\n  --ts-toggle-focus-ring: var(--ts-focus-ring);\n}\n\n.toggle__base {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  cursor: pointer;\n  outline: none;\n}\n\n.toggle__base:focus-visible .toggle__track {\n  box-shadow: var(--ts-toggle-focus-ring);\n}\n\n:host(.ts-toggle--disabled) .toggle__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Track (M3 — outlined when unchecked) ---- */\n.toggle__track {\n  position: relative;\n  background-color: var(--ts-toggle-track-bg);\n  border-radius: var(--ts-radius-full);\n  border: 2px solid var(--ts-color-border-default);\n  box-shadow: none;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n  flex-shrink: 0;\n}\n\n:host(.ts-toggle--checked) .toggle__track {\n  background-color: var(--ts-toggle-track-bg-checked);\n  border-color: var(--ts-toggle-track-bg-checked);\n  box-shadow: none;\n}\n\n/* ---- Thumb ---- */\n.toggle__thumb {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%) scale(1);\n  background-color: var(--ts-toggle-thumb-bg);\n  border-radius: var(--ts-radius-full);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  transition:\n    inset-inline-start var(--ts-transition-fast),\n    transform var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n}\n\n:host(.ts-toggle--checked) .toggle__thumb {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .toggle__track { width: 32px; height: 18px; }\n:host([size=\"sm\"]) .toggle__thumb { width: 14px; height: 14px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"sm\"]) .toggle__thumb { inset-inline-start: 16px; }\n\n:host([size=\"md\"]) .toggle__track { width: 40px; height: 22px; }\n:host([size=\"md\"]) .toggle__thumb { width: 18px; height: 18px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"md\"]) .toggle__thumb { inset-inline-start: 20px; }\n\n:host([size=\"lg\"]) .toggle__track { width: 50px; height: 28px; }\n:host([size=\"lg\"]) .toggle__thumb { width: 24px; height: 24px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"lg\"]) .toggle__thumb { inset-inline-start: 24px; }\n\n/* ---- Label ---- */\n.toggle__label {\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-text-secondary);\n  cursor: inherit;\n  user-select: none;\n}\n\n:host([size=\"lg\"]) .toggle__label {\n  font-size: var(--ts-font-size-md);\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsToggleEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the toggle label.\n *\n * @part base - The toggle container.\n * @part track - The toggle track.\n * @part thumb - The toggle thumb/knob.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-toggle',\n  styleUrl: 'toggle.css',\n  shadow: true,\n})\nexport class TsToggle {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-toggle');\n\n  /** Whether the toggle is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The toggle's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the toggle as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Name for form submission. */\n  @Prop() name?: string;\n\n  /** Value for form submission. */\n  @Prop() value?: string;\n\n  /** Emitted when the toggle state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsToggleEventDetail>;\n\n  /** Programmatically toggle the checked state. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toggle': true,\n          [`ts-toggle--${this.size}`]: true,\n          'ts-toggle--checked': this.checked,\n          'ts-toggle--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"toggle__base\"\n          part=\"base\"\n          role=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"toggle__track\" part=\"track\">\n            <div class=\"toggle__thumb\" part=\"thumb\" />\n          </div>\n\n          <label class=\"toggle__label\" part=\"label\" id={`${this.inputId}-label`}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,otEAAotE,CAAC;;MCkBjuE,QAAQ,GAAA,MAAA;;;;;;AAGX,IAAA,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC;;IAGD,OAAO,GAAG,KAAK;;IAG9B,IAAI,GAAW,IAAI;;IAGnB,QAAQ,GAAG,KAAK;;AAGjC,IAAA,IAAI;;AAGJ,IAAA,KAAK;;AAGqB,IAAA,QAAQ;;AAI1C,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC5B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;;IAIzC,WAAW,GAAG,MAAW;QAC/B,IAAI,CAAC,MAAM,EAAE;AACf,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE;;AAEjB,KAAC;;IAGD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBACjC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EAE7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAA,EACrC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,GAAG,CACtC,EAEN,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA,MAAA,CAAQ,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACF,CACJ,CACD;;;;;;;"}

package/dist/esm/ts-toolbar.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const toolbarCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-toolbar-bg:var(--ts-color-bg-surface);--ts-toolbar-border-color:var(--ts-color-border-subtle);--ts-toolbar-padding:var(--ts-spacing-3);--ts-toolbar-gap:var(--ts-spacing-2)}.toolbar__base{display:flex;align-items:center;gap:var(--ts-toolbar-gap);padding-inline:var(--ts-toolbar-padding);padding-block:var(--ts-toolbar-padding);background-color:var(--ts-toolbar-bg)}:host([variant="bordered"]) .toolbar__base{border-block-end:1px solid var(--ts-toolbar-border-color)}:host([variant="elevated"]) .toolbar__base{box-shadow:var(--ts-shadow-sm);border-radius:var(--ts-radius-md)}:host([size="sm"]) .toolbar__base{padding-inline:var(--ts-spacing-2);padding-block:var(--ts-spacing-1);gap:var(--ts-spacing-1);font-size:var(--ts-font-size-sm)}:host([size="md"]) .toolbar__base{padding-inline:var(--ts-spacing-3);padding-block:var(--ts-spacing-2);gap:var(--ts-spacing-2);font-size:var(--ts-font-size-md)}:host([size="lg"]) .toolbar__base{padding-inline:var(--ts-spacing-4);padding-block:var(--ts-spacing-3);gap:var(--ts-spacing-3);font-size:var(--ts-font-size-lg)}.toolbar__start{display:flex;align-items:center;gap:var(--ts-toolbar-gap);flex-shrink:0}.toolbar__center{display:flex;align-items:center;gap:var(--ts-toolbar-gap);flex:1;min-inline-size:0}.toolbar__end{display:flex;align-items:center;gap:var(--ts-toolbar-gap);flex-shrink:0;margin-inline-start:auto}.toolbar__start:empty,.toolbar__end:empty{display:none}`;
+
+const TsToolbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The toolbar variant style. */
+    variant = 'default';
+    /** The toolbar size. */
+    size = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '83f2c4baba0daca4e9ce04179c0a135ce7c015b9', class: {
+                'ts-toolbar': true,
+                [`ts-toolbar--${this.variant}`]: true,
+                [`ts-toolbar--${this.size}`]: true,
+            }, role: "toolbar", "aria-orientation": "horizontal" }, h("div", { key: '5c2b6c4b0050c0ca000aa475fedff456efee66c3', class: "toolbar__base", part: "base" }, h("div", { key: '2e1e1f97c6ba0481cc039aee8c5407c2eb4b55b5', class: "toolbar__start", part: "start" }, h("slot", { key: 'e147cb24308e4bc2de5bcd2d6bd0dbbed48bb029', name: "start" })), h("div", { key: '727603e4bfed0642feeba89288c64315cc0b1dbf', class: "toolbar__center", part: "center" }, h("slot", { key: 'b323e21f9290c0b07e2dae640287aabb739b71b6' })), h("div", { key: '33040658c7a58b1df7b16c2c01bf8a8460307efe', class: "toolbar__end", part: "end" }, h("slot", { key: '05209ec0a17ec31a4de2193d84456cdcb3207608', name: "end" })))));
+    }
+};
+TsToolbar.style = toolbarCss();
+
+export { TsToolbar as ts_toolbar };
+//# sourceMappingURL=ts-toolbar.entry.js.map
+
+//# sourceMappingURL=ts-toolbar.entry.js.map

package/dist/esm/ts-toolbar.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-toolbar.entry.js","sources":["src/components/toolbar/toolbar.css?tag=ts-toolbar&encapsulation=shadow","src/components/toolbar/toolbar.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-toolbar — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-toolbar-bg            Background color\n     --ts-toolbar-border-color  Border color\n     --ts-toolbar-padding       Padding\n     --ts-toolbar-gap           Gap between items\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-toolbar-bg: var(--ts-color-bg-surface);\n  --ts-toolbar-border-color: var(--ts-color-border-subtle);\n  --ts-toolbar-padding: var(--ts-spacing-3);\n  --ts-toolbar-gap: var(--ts-spacing-2);\n}\n\n.toolbar__base {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  padding-inline: var(--ts-toolbar-padding);\n  padding-block: var(--ts-toolbar-padding);\n  background-color: var(--ts-toolbar-bg);\n}\n\n/* ---- Variants ---- */\n:host([variant=\"bordered\"]) .toolbar__base {\n  border-block-end: 1px solid var(--ts-toolbar-border-color);\n}\n\n:host([variant=\"elevated\"]) .toolbar__base {\n  box-shadow: var(--ts-shadow-sm);\n  border-radius: var(--ts-radius-md);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .toolbar__base {\n  padding-inline: var(--ts-spacing-2);\n  padding-block: var(--ts-spacing-1);\n  gap: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .toolbar__base {\n  padding-inline: var(--ts-spacing-3);\n  padding-block: var(--ts-spacing-2);\n  gap: var(--ts-spacing-2);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .toolbar__base {\n  padding-inline: var(--ts-spacing-4);\n  padding-block: var(--ts-spacing-3);\n  gap: var(--ts-spacing-3);\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Layout sections ---- */\n.toolbar__start {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  flex-shrink: 0;\n}\n\n.toolbar__center {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.toolbar__end {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  flex-shrink: 0;\n  margin-inline-start: auto;\n}\n\n.toolbar__start:empty,\n.toolbar__end:empty {\n  display: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Default slot for toolbar items (center).\n * @slot start - Left/start-aligned items.\n * @slot end - Right/end-aligned items.\n *\n * @part base - The toolbar container.\n * @part start - The start slot wrapper.\n * @part center - The center/default slot wrapper.\n * @part end - The end slot wrapper.\n */\n@Component({\n  tag: 'ts-toolbar',\n  styleUrl: 'toolbar.css',\n  shadow: true,\n})\nexport class TsToolbar {\n  /** The toolbar variant style. */\n  @Prop({ reflect: true }) variant: 'default' | 'bordered' | 'elevated' = 'default';\n\n  /** The toolbar size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toolbar': true,\n          [`ts-toolbar--${this.variant}`]: true,\n          [`ts-toolbar--${this.size}`]: true,\n        }}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        <div class=\"toolbar__base\" part=\"base\">\n          <div class=\"toolbar__start\" part=\"start\">\n            <slot name=\"start\" />\n          </div>\n\n          <div class=\"toolbar__center\" part=\"center\">\n            <slot />\n          </div>\n\n          <div class=\"toolbar__end\" part=\"end\">\n            <slot name=\"end\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,+7CAA+7C,CAAC;;MCkB78C,SAAS,GAAA,MAAA;;;;;IAEK,OAAO,GAAwC,SAAS;;IAGxD,IAAI,GAAW,IAAI;;IAG5C,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACrC,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AACnC,aAAA,EACD,IAAI,EAAC,SAAS,EAAA,kBAAA,EACG,YAAY,EAAA,EAE7B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CACf,CACF,CACD;;;;;;;"}

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

@@ -0,0 +1,80 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.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) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    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" }))));
+    }
+};
+TsTooltip.style = tooltipCss();
+
+export { TsTooltip as ts_tooltip };
+//# sourceMappingURL=ts-tooltip.entry.js.map
+
+//# sourceMappingURL=ts-tooltip.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-tooltip.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.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) {
+        registerInstance(this, hostRef);
+        this.tsToggle = createEvent(this, "tsToggle");
+        this.tsSelect = createEvent(this, "tsSelect");
+    }
+    get hostEl() { return 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 (h(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 }, h("div", { key: 'd0d625e277d4ea706e97f03b4adb6a48780915e0', class: "tree-item__base", part: "base", onClick: this.handleSelect }, h("span", { key: '1b44e6fb9de206da990d62a67802e2b68be312f2', class: {
+                'tree-item__chevron': true,
+                'tree-item__chevron--hidden': !this.hasChildren,
+            }, part: "chevron", onClick: this.handleToggle, "aria-hidden": "true" }, h("svg", { key: '1c106e6ee2ad03442df967a8c17a0037b082ea07', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '6ba0bd24fc2ddd001dbdf9a4bb7469759e00087d', points: "9 18 15 12 9 6" }))), this.icon && (h("span", { key: '012d65b356f0ebce7fce3b88a8697588264b6e51', class: "tree-item__icon", part: "icon", "aria-hidden": "true" }, h("ts-icon", { key: '2f6573c6315eca6e8317a45e96586aa51998a4b6', name: this.icon, size: "sm" }))), h("span", { key: 'c3ffb683523d7517a1a97b033e8262660438c667', class: "tree-item__label", part: "label" }, h("slot", { key: '4ff256ccc6c0869785e272667146761066381386', name: "label" }, this.label))), h("div", { key: '236fd4afd3078b5fb8e19b7cf89f12a7fd97f683', class: {
+                'tree-item__children': true,
+                'tree-item__children--collapsed': !this.expanded,
+            }, role: "group" }, h("slot", { key: '23beab65b06e3006a007d4f0965726a7297470a0', onSlotchange: this.handleSlotChange }))));
+    }
+    static get watchers() { return {
+        "expanded": [{
+                "onExpandedChange": 0
+            }]
+    }; }
+};
+TsTreeItem.style = treeItemCss();
+
+export { TsTreeItem as ts_tree_item };
+//# sourceMappingURL=ts-tree-item.entry.js.map
+
+//# sourceMappingURL=ts-tree-item.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-tree-item.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,79 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.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) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return 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 (h(Host, { key: 'f19d8e0e243df40456f96dd89eb81fd4b1c68e8e', class: { 'ts-tree': true }, role: "tree" }, h("div", { key: '2cfd542f7681b88563f5ad92f14a807cbb33b590', class: "tree__base", part: "base" }, h("slot", { key: 'b08eef0089c0e9b5c1d84def2fc17be9be57e3ba' }))));
+    }
+};
+TsTree.style = treeCss();
+
+export { TsTree as ts_tree };
+//# sourceMappingURL=ts-tree.entry.js.map
+
+//# sourceMappingURL=ts-tree.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-tree.entry.js","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"],"names":[],"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,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,EAC1B,IAAI,EAAC,MAAM,EAAA,EAEX,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/tessera-ui/index.esm.js

@@ -0,0 +1,2 @@
+export{a as announce,g as generateId,p as prefersReducedMotion,t as trapFocus}from"./p-lpqZSiIf.js";export{T as TsIcon,g as getIcon,b as getRegisteredIconNames,a as registerIcon,r as registerIcons}from"./p-StBQmS8h.js";export{ts_tabs as TsTabs}from"./ts-tabs.entry.esm.js";export{ts_tab_panel as TsTabPanel}from"./ts-tab-panel.entry.esm.js";export{ts_spinner as TsSpinner}from"./ts-spinner.entry.esm.js";export{ts_avatar as TsAvatar}from"./ts-avatar.entry.esm.js";export{ts_dialog as TsDialog}from"./ts-dialog.entry.esm.js";export{ts_menu as TsMenu}from"./ts-menu.entry.esm.js";export{ts_menu_item as TsMenuItem}from"./ts-menu-item.entry.esm.js";export{ts_table as TsTable}from"./ts-table.entry.esm.js";export{ts_accordion as TsAccordion}from"./ts-accordion.entry.esm.js";export{ts_accordion_item as TsAccordionItem}from"./ts-accordion-item.entry.esm.js";export{ts_breadcrumb as TsBreadcrumb}from"./ts-breadcrumb.entry.esm.js";export{ts_breadcrumb_item as TsBreadcrumbItem}from"./ts-breadcrumb-item.entry.esm.js";export{ts_pagination as TsPagination}from"./ts-pagination.entry.esm.js";export{ts_progress as TsProgress}from"./ts-progress.entry.esm.js";export{ts_slider as TsSlider}from"./ts-slider.entry.esm.js";export{ts_skeleton as TsSkeleton}from"./ts-skeleton.entry.esm.js";export{ts_toast as TsToast}from"./ts-toast.entry.esm.js";export{ts_chip as TsChip}from"./ts-chip.entry.esm.js";export{ts_divider as TsDivider}from"./ts-divider.entry.esm.js";export{ts_popover as TsPopover}from"./ts-popover.entry.esm.js";export{ts_tree as TsTree}from"./ts-tree.entry.esm.js";export{ts_tree_item as TsTreeItem}from"./ts-tree-item.entry.esm.js";export{ts_switch_group as TsSwitchGroup}from"./ts-switch-group.entry.esm.js";export{ts_switch_option as TsSwitchOption}from"./ts-switch-option.entry.esm.js";export{ts_toolbar as TsToolbar}from"./ts-toolbar.entry.esm.js";export{ts_empty_state as TsEmptyState}from"./ts-empty-state.entry.esm.js";export{ts_banner as TsBanner}from"./ts-banner.entry.esm.js";export{ts_drawer as TsDrawer}from"./ts-drawer.entry.esm.js";export{ts_nav as TsNav}from"./ts-nav.entry.esm.js";export{ts_nav_item as TsNavItem}from"./ts-nav-item.entry.esm.js";export{ts_date_picker as TsDatePicker}from"./ts-date-picker.entry.esm.js";export{ts_file_upload as TsFileUpload}from"./ts-file-upload.entry.esm.js";export{ts_stepper as TsStepper}from"./ts-stepper.entry.esm.js";export{ts_step as TsStep}from"./ts-step.entry.esm.js";export{ts_grid as TsGrid}from"./ts-grid.entry.esm.js";export{ts_container as TsContainer}from"./ts-container.entry.esm.js";export{ts_stack as TsStack}from"./ts-stack.entry.esm.js";export{ts_row as TsRow}from"./ts-row.entry.esm.js";export{ts_spacer as TsSpacer}from"./ts-spacer.entry.esm.js";import"./p-V8-ENixA.js";function s(s,t){const e=t?`slot[name="${t}"]`:"slot:not([name])";const r=s.shadowRoot?.querySelector(e);if(!r)return false;const o=r.assignedNodes({flatten:true});return o.some((s=>s.nodeType===Node.ELEMENT_NODE||s.nodeType===Node.TEXT_NODE&&s.textContent?.trim()!==""))}function e(s,t){let e;return(...r)=>{clearTimeout(e);e=setTimeout((()=>s(...r)),t)}}function o(s,t,e){return Math.min(Math.max(s,t),e)}function n(s,t,e){const r=new CustomEvent(t,{detail:e.detail,bubbles:e.bubbles??true,composed:e.composed??true,cancelable:e.cancelable??false});return s.dispatchEvent(r)}export{o as clamp,e as debounce,n as emitEvent,s as hasSlotContent};
+//# sourceMappingURL=index.esm.js.map

package/dist/tessera-ui/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["src/utils/dom.ts","src/utils/events.ts"],"sourcesContent":["/**\n * Tessera UI — DOM Utilities\n */\n\n/**\n * Get the closest Tessera UI host element from within a shadow tree.\n */\nexport function getHostElement(el: Element): HTMLElement | null {\n  const root = el.getRootNode();\n  if (root instanceof ShadowRoot) {\n    return root.host as HTMLElement;\n  }\n  return null;\n}\n\n/**\n * Check if a slot has assigned content.\n */\nexport function hasSlotContent(el: HTMLElement, slotName?: string): boolean {\n  const selector = slotName ? `slot[name=\"${slotName}\"]` : 'slot:not([name])';\n  const slot = el.shadowRoot?.querySelector<HTMLSlotElement>(selector);\n  if (!slot) return false;\n  const nodes = slot.assignedNodes({ flatten: true });\n  return nodes.some(\n    (node) =>\n      node.nodeType === Node.ELEMENT_NODE ||\n      (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '')\n  );\n}\n\n/**\n * Debounce a function call.\n */\nexport function debounce<T extends (...args: unknown[]) => void>(\n  fn: T,\n  delay: number\n): (...args: Parameters<T>) => void {\n  let timer: ReturnType<typeof setTimeout>;\n  return (...args: Parameters<T>) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), delay);\n  };\n}\n\n/**\n * Clamp a number between min and max.\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n","/**\n * Tessera UI — Event Utilities\n *\n * Helpers for consistent custom event dispatch across components.\n * All Tessera UI events bubble and are composed (cross shadow boundaries).\n */\n\nexport interface TsEventOptions<T> {\n  detail: T;\n  bubbles?: boolean;\n  composed?: boolean;\n  cancelable?: boolean;\n}\n\n/**\n * Create and dispatch a custom event from an element.\n * Returns true if the event was NOT cancelled.\n */\nexport function emitEvent<T>(\n  el: HTMLElement,\n  eventName: string,\n  options: TsEventOptions<T>\n): boolean {\n  const event = new CustomEvent<T>(eventName, {\n    detail: options.detail,\n    bubbles: options.bubbles ?? true,\n    composed: options.composed ?? true,\n    cancelable: options.cancelable ?? false,\n  });\n\n  return el.dispatchEvent(event);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;AAEH;;AAEG;AASH;;AAEG;AACG,SAAU,cAAc,CAAC,EAAe,EAAE,QAAiB,EAAA;AAC/D,IAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAA,WAAA,EAAc,QAAQ,CAAA,EAAA,CAAI,GAAG,kBAAkB;IAC3E,MAAM,IAAI,GAAG,EAAE,CAAC,UAAU,EAAE,aAAa,CAAkB,QAAQ,CAAC;AACpE,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,KAAK;AACvB,IAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnD,IAAA,OAAO,KAAK,CAAC,IAAI,CACf,CAAC,IAAI,KACH,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AACnC,SAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CACxE;AACH;AAEA;;AAEG;AACG,SAAU,QAAQ,CACtB,EAAK,EACL,KAAa,EAAA;AAEb,IAAA,IAAI,KAAoC;AACxC,IAAA,OAAO,CAAC,GAAG,IAAmB,KAAI;QAChC,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,KAAK,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,CAAC;AAC9C,KAAC;AACH;AAEA;;AAEG;SACa,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAA;AAC3D,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC;AAC5C;;ACjDA;;;;;AAKG;AASH;;;AAGG;SACa,SAAS,CACvB,EAAe,EACf,SAAiB,EACjB,OAA0B,EAAA;AAE1B,IAAA,MAAM,KAAK,GAAG,IAAI,WAAW,CAAI,SAAS,EAAE;QAC1C,MAAM,EAAE,OAAO,CAAC,MAAM;AACtB,QAAA,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,IAAI;AAChC,QAAA,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,IAAI;AAClC,QAAA,UAAU,EAAE,OAAO,CAAC,UAAU,IAAI,KAAK;AACxC,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;AAChC;;;;"}