@tessera-ui/core 0.4.0

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

@@ -0,0 +1 @@
+{"file":"ts-input.cjs.entry.js","mappings":"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","names":["generateId","h","Host"],"sources":["src/components/input/input.css?tag=ts-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-input — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-input-bg               Input background\n     --ts-input-color            Input text color\n     --ts-input-border-color     Default border color\n     --ts-input-radius           Border radius\n     --ts-input-focus-ring       Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-input-bg: var(--ts-color-neutral-50);\n  --ts-input-color: var(--ts-color-text-primary);\n  --ts-input-border-color: var(--ts-color-border-default);\n  --ts-input-radius: var(--ts-radius-md);\n  --ts-input-focus-ring: var(--ts-focus-ring);\n}\n\n/* ---- Label ---- */\n.input__label {\n  display: block;\n  margin-bottom: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n}\n\n.input__required {\n  color: var(--ts-color-danger-500);\n}\n\n/* ---- Wrapper ---- */\n.input__wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  border: 1px solid var(--ts-input-border-color);\n  border-radius: var(--ts-input-radius);\n  background-color: var(--ts-input-bg);\n  box-shadow: none;\n  transition:\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast),\n    background-color var(--ts-transition-fast);\n  overflow: hidden;\n}\n\n.input__wrapper--focused {\n  border-color: var(--ts-color-primary-500);\n  box-shadow: var(--ts-input-focus-ring);\n}\n\n.input__wrapper--error {\n  border-color: var(--ts-color-danger-500);\n}\n\n.input__wrapper--error.input__wrapper--focused {\n  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);\n}\n\n.input__wrapper--disabled {\n  background-color: var(--ts-color-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* ---- Native Input ---- */\n.input__native {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  color: var(--ts-input-color);\n  width: 100%;\n  min-width: 0;\n}\n\n.input__native::placeholder {\n  color: var(--ts-color-text-tertiary);\n}\n\n.input__native:disabled {\n  cursor: not-allowed;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .input__wrapper {\n  border-radius: var(--ts-radius-sm);\n}\n:host([size=\"sm\"]) .input__native {\n  padding: var(--ts-spacing-1) var(--ts-spacing-2);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .input__native {\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .input__native {\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-lg);\n}\n\n:host([size=\"xl\"]) .input__wrapper {\n  border-radius: var(--ts-radius-lg);\n}\n:host([size=\"xl\"]) .input__native {\n  padding: var(--ts-spacing-4) var(--ts-spacing-5);\n  font-size: var(--ts-font-size-xl);\n}\n\n/* ---- Prefix / Suffix ---- */\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ts-color-text-tertiary);\n}\n\n.input__prefix {\n  padding-inline-start: var(--ts-spacing-3);\n}\n\n.input__suffix {\n  padding-inline-end: var(--ts-spacing-3);\n}\n\n.input__prefix:empty,\n.input__suffix:empty {\n  display: none;\n}\n\n/* ---- Help & Error Text ---- */\n.input__help,\n.input__error {\n  margin-top: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-xs);\n  line-height: var(--ts-line-height-normal);\n}\n\n.input__help {\n  color: var(--ts-color-text-tertiary);\n}\n\n.input__error {\n  color: var(--ts-color-danger-600);\n  font-weight: var(--ts-font-weight-medium);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  Watch,\n  h,\n  Host,\n  Element,\n  Method,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail, TsValidationEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot prefix - Content before the input (e.g., icon or currency symbol).\n * @slot suffix - Content after the input (e.g., icon or clear button).\n * @slot help-text - Help text displayed below the input.\n *\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part input - The native input element.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class TsInput {\n  @Element() hostEl!: HTMLElement;\n\n  private inputEl?: HTMLInputElement;\n  private inputId = generateId('ts-input');\n\n  /** The input's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The input type. */\n  @Prop({ reflect: true }) type:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'tel'\n    | 'url'\n    | 'search' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the input. */\n  @Prop() label?: string;\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Help text displayed below the input. */\n  @Prop() helpText?: string;\n\n  /** Renders the input in an error state with an error message. */\n  @Prop() error?: string;\n\n  /** Makes the input required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Renders the input as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the input as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Minimum character length. */\n  @Prop() minlength?: number;\n\n  /** Pattern for validation (regex string). */\n  @Prop() pattern?: string;\n\n  /** Autocomplete attribute. */\n  @Prop() autocomplete?: string;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Whether the input is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted when the value changes (on input). */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the input gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the input loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  /** Emitted on validation. */\n  @Event({ eventName: 'tsValidate' }) tsValidate!: EventEmitter<TsValidationEventDetail>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.inputEl) {\n      this.inputEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.inputEl?.focus();\n  }\n\n  /** Programmatically select the input text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.inputEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n\n    // Run native validation\n    if (this.inputEl) {\n      const valid = this.inputEl.checkValidity();\n      this.tsValidate.emit({\n        valid,\n        message: this.inputEl.validationMessage,\n      });\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = !!this.error;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n\n    return (\n      <Host\n        class={{\n          'ts-input': true,\n          [`ts-input--${this.size}`]: true,\n          'ts-input--focused': this.hasFocus,\n          'ts-input--disabled': this.disabled,\n          'ts-input--error': hasError,\n        }}\n      >\n        {this.label && (\n          <label class=\"input__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"input__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'input__wrapper': true,\n            'input__wrapper--focused': this.hasFocus,\n            'input__wrapper--error': hasError,\n            'input__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <span class=\"input__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            ref={(el) => (this.inputEl = el)}\n            id={this.inputId}\n            class=\"input__native\"\n            part=\"input\"\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            minlength={this.minlength}\n            pattern={this.pattern}\n            autoComplete={this.autocomplete}\n            name={this.name}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={hasError ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n\n          <span class=\"input__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n\n        {hasError && (\n          <div class=\"input__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.error}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"input__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,65 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const menuItemCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-menu-item-height:2.25rem}.menu-item__base{display:flex;align-items:center;gap:var(--ts-spacing-2);min-block-size:var(--ts-menu-item-height);padding-inline:var(--ts-spacing-3);padding-block:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);color:var(--ts-color-text-primary);text-decoration:none;cursor:pointer;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast);outline:none;border:none;background:none;width:100%;white-space:nowrap}.menu-item__base:hover:not([aria-disabled="true"]){background-color:var(--ts-color-bg-hover)}.menu-item__base:focus-visible{background-color:var(--ts-color-bg-hover);box-shadow:inset 0 0 0 2px var(--ts-color-interactive-primary)}:host([disabled]) .menu-item__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item__prefix,.menu-item__suffix{display:inline-flex;align-items:center;flex-shrink:0}.menu-item__prefix:empty,.menu-item__suffix:empty{display:none}.menu-item__label{display:inline-flex;align-items:center;flex-grow:1}.menu-item__suffix{margin-inline-start:auto;padding-inline-start:var(--ts-spacing-3);color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-xs)}`;
+
+const TsMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsSelect = index.createEvent(this, "tsSelect");
+    }
+    get hostEl() { return index.getElement(this); }
+    /** Disables the menu item. */
+    disabled = false;
+    /** The value associated with this menu item. */
+    value = '';
+    /** If provided, renders the item as a link. */
+    href;
+    /** Emitted when the menu item is selected. */
+    tsSelect;
+    baseEl;
+    /** Focus the menu item. */
+    async setFocus() {
+        this.baseEl?.focus();
+    }
+    connectedCallback() {
+        // Allow the host element to delegate focus to the inner element
+        this.hostEl.addEventListener('focus', () => {
+            this.baseEl?.focus();
+        });
+    }
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.tsSelect.emit({ value: this.value });
+    };
+    handleKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.tsSelect.emit({ value: this.value });
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isLink = !!this.href;
+        const Tag = isLink ? 'a' : 'div';
+        const linkAttrs = isLink
+            ? {
+                href: this.disabled ? undefined : this.href,
+            }
+            : {};
+        return (index.h(index.Host, { key: '5b22feae43a6cf198651b55cc3285969dd6f796f', class: {
+                'ts-menu-item': true,
+                'ts-menu-item--disabled': this.disabled,
+            } }, index.h(Tag, { key: '80c5f0748d110708eeb8c5278b3473352ab51280', ...linkAttrs, ref: (el) => (this.baseEl = el), class: "menu-item__base", part: "base", role: "menuitem", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, index.h("span", { key: '99cac763578eba7c95a9609bf3d50782b0efe0f6', class: "menu-item__prefix", part: "prefix" }, index.h("slot", { key: 'a58b57ff9d48a0a347417ebfd9a6ab82ac44486e', name: "prefix" })), index.h("span", { key: '6cd4e9d9b57ee7fa6404f0e6fd26f3fbde0f2bb3', class: "menu-item__label", part: "label" }, index.h("slot", { key: '9bfa5a772807c16aca216f806dff8f3165af9c4c' })), index.h("span", { key: '194b24cb2e5b5d41bedb1982ba2c370a1f8e2421', class: "menu-item__suffix", part: "suffix" }, index.h("slot", { key: 'a14e9e98baf2a3addcb9870012bcedf169a00f9e', name: "suffix" })))));
+    }
+};
+TsMenuItem.style = menuItemCss();
+
+exports.ts_menu_item = TsMenuItem;
+//# sourceMappingURL=ts-menu-item.entry.cjs.js.map
+
+//# sourceMappingURL=ts-menu-item.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-menu-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,+sCAA+sC,CAAC;;MCkB9tC,UAAU,GAAA,MAAA;;;;;;;IAII,QAAQ,GAAG,KAAK;;IAGhB,KAAK,GAAG,EAAE;;AAG3B,IAAA,IAAI;;AAGsB,IAAA,QAAQ;AAElC,IAAA,MAAM;;AAId,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE;;IAGtB,iBAAiB,GAAA;;QAEf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;AACzC,YAAA,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE;AACtB,SAAC,CAAC;;IAGI,WAAW,GAAG,MAAW;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC3C,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;QACrD,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE7C,KAAC;;IAGD,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;QAC1B,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK;QAEhC,MAAM,SAAS,GAAG;AAChB,cAAE;AACE,gBAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI;AAC5C;cACD,EAAE;QAEN,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;AACxC,aAAA,EAAA,EAEDD,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GACE,SAAS,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAiB,CAAC,EAC9C,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,eAAA,EACjB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EAE7BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,EAEPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO,EAAA,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACH,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/menu/menu-item.css?tag=ts-menu-item&encapsulation=shadow","src/components/menu/menu-item.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-menu-item — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-menu-item-height   Item minimum height\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-menu-item-height: 2.25rem;\n}\n\n/* ---- Base ---- */\n.menu-item__base {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  min-block-size: var(--ts-menu-item-height);\n  padding-inline: var(--ts-spacing-3);\n  padding-block: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-text-primary);\n  text-decoration: none;\n  cursor: pointer;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n  outline: none;\n  border: none;\n  background: none;\n  width: 100%;\n  white-space: nowrap;\n}\n\n.menu-item__base:hover:not([aria-disabled=\"true\"]) {\n  background-color: var(--ts-color-bg-hover);\n}\n\n.menu-item__base:focus-visible {\n  background-color: var(--ts-color-bg-hover);\n  box-shadow: inset 0 0 0 2px var(--ts-color-interactive-primary);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .menu-item__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Slot wrappers ---- */\n.menu-item__prefix,\n.menu-item__suffix {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menu-item__prefix:empty,\n.menu-item__suffix:empty {\n  display: none;\n}\n\n.menu-item__label {\n  display: inline-flex;\n  align-items: center;\n  flex-grow: 1;\n}\n\n.menu-item__suffix {\n  margin-inline-start: auto;\n  padding-inline-start: var(--ts-spacing-3);\n  color: var(--ts-color-text-tertiary);\n  font-size: var(--ts-font-size-xs);\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for menu item label content.\n * @slot prefix - Content before the label (e.g., icon).\n * @slot suffix - Content after the label (e.g., shortcut or badge).\n *\n * @part base - The menu item container element.\n * @part prefix - The prefix slot wrapper.\n * @part label - The label wrapper.\n * @part suffix - The suffix slot wrapper.\n */\n@Component({\n  tag: 'ts-menu-item',\n  styleUrl: 'menu-item.css',\n  shadow: true,\n})\nexport class TsMenuItem {\n  @Element() hostEl!: HTMLElement;\n\n  /** Disables the menu item. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this menu item. */\n  @Prop({ reflect: true }) value = '';\n\n  /** If provided, renders the item as a link. */\n  @Prop() href?: string;\n\n  /** Emitted when the menu item is selected. */\n  @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<{ value: string }>;\n\n  private baseEl?: HTMLElement;\n\n  /** Focus the menu item. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.baseEl?.focus();\n  }\n\n  connectedCallback(): void {\n    // Allow the host element to delegate focus to the inner element\n    this.hostEl.addEventListener('focus', () => {\n      this.baseEl?.focus();\n    });\n  }\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.tsSelect.emit({ value: this.value });\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.tsSelect.emit({ value: this.value });\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href;\n    const Tag = isLink ? 'a' : 'div';\n\n    const linkAttrs = isLink\n      ? {\n          href: this.disabled ? undefined : this.href,\n        }\n      : {};\n\n    return (\n      <Host\n        class={{\n          'ts-menu-item': true,\n          'ts-menu-item--disabled': this.disabled,\n        }}\n      >\n        <Tag\n          {...linkAttrs}\n          ref={(el) => (this.baseEl = el as HTMLElement)}\n          class=\"menu-item__base\"\n          part=\"base\"\n          role=\"menuitem\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <span class=\"menu-item__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"menu-item__label\" part=\"label\">\n            <slot />\n          </span>\n\n          <span class=\"menu-item__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,155 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const menuCss = () => `:host{display:inline-block;position:relative;font-family:var(--ts-font-family-base);--ts-menu-bg:var(--ts-color-bg-elevated);--ts-menu-radius:var(--ts-shape-overlay);--ts-menu-shadow:var(--ts-shadow-lg)}.menu__trigger{display:inline-flex}.menu__panel{position:absolute;z-index:var(--ts-z-tooltip);display:none;flex-direction:column;min-inline-size:10rem;padding-block:var(--ts-spacing-1);background-color:var(--ts-menu-bg);border-radius:var(--ts-menu-radius);box-shadow:var(--ts-menu-shadow);border:1px solid var(--ts-color-border-default);overflow-y:auto;max-block-size:20rem;animation:ts-menu-fade-in 150ms ease-out}.menu__panel--open{display:flex}.menu__panel--bottom-start{inset-block-start:100%;inset-inline-start:0;margin-block-start:var(--ts-spacing-1)}.menu__panel--bottom-end{inset-block-start:100%;inset-inline-end:0;margin-block-start:var(--ts-spacing-1)}.menu__panel--top-start{inset-block-end:100%;inset-inline-start:0;margin-block-end:var(--ts-spacing-1)}.menu__panel--top-end{inset-block-end:100%;inset-inline-end:0;margin-block-end:var(--ts-spacing-1)}@keyframes ts-menu-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`;
+
+const TsMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsOpen = index.createEvent(this, "tsOpen");
+        this.tsClose = index.createEvent(this, "tsClose");
+    }
+    get hostEl() { return index.getElement(this); }
+    menuId = aria.generateId('ts-menu');
+    triggerEl;
+    /** Whether the menu dropdown is open. */
+    open = false;
+    /** How the menu is triggered. */
+    trigger = 'click';
+    /** Placement of the dropdown relative to the trigger. */
+    placement = 'bottom-start';
+    /** Emitted when the menu opens. */
+    tsOpen;
+    /** Emitted when the menu closes. */
+    tsClose;
+    /** Tracks the currently focused item index for keyboard navigation. */
+    focusedIndex = -1;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.tsOpen.emit();
+            requestAnimationFrame(() => {
+                this.focusFirstItem();
+            });
+        }
+        else {
+            this.focusedIndex = -1;
+            this.tsClose.emit();
+        }
+    }
+    handleDocumentClick(event) {
+        if (this.open && !this.hostEl.contains(event.target)) {
+            this.open = false;
+        }
+    }
+    handleItemSelect() {
+        this.open = false;
+        this.triggerEl?.focus();
+    }
+    handleKeydown(event) {
+        if (!this.open)
+            return;
+        const items = this.getMenuItems();
+        if (items.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                this.focusedIndex = (this.focusedIndex + 1) % items.length;
+                this.focusItem(items[this.focusedIndex]);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;
+                this.focusItem(items[this.focusedIndex]);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.focusItem(items[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                this.focusedIndex = items.length - 1;
+                this.focusItem(items[this.focusedIndex]);
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                this.open = false;
+                this.triggerEl?.focus();
+                break;
+            }
+            case 'Tab': {
+                this.open = false;
+                break;
+            }
+        }
+    }
+    getMenuItems() {
+        return Array.from(this.hostEl.querySelectorAll('ts-menu-item:not([disabled])'));
+    }
+    focusItem(el) {
+        const item = el;
+        if (typeof item.setFocus === 'function') {
+            item.setFocus();
+        }
+        else {
+            el.focus();
+        }
+    }
+    focusFirstItem() {
+        const items = this.getMenuItems();
+        if (items.length > 0) {
+            this.focusedIndex = 0;
+            this.focusItem(items[0]);
+        }
+    }
+    handleTriggerClick = () => {
+        if (this.trigger === 'click') {
+            this.open = !this.open;
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open = true;
+        }
+    };
+    handleMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.open = true;
+        }
+    };
+    handleMouseLeave = () => {
+        if (this.trigger === 'hover') {
+            this.open = false;
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '779dbf74095a42f69a4e9c044423cb04ec19cd41', class: {
+                'ts-menu': true,
+                'ts-menu--open': this.open,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '6116720d4806a302576a65a88877f70c7be6d6a0', class: "menu__trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, "aria-haspopup": "true", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.menuId }, index.h("slot", { key: 'e0dbd29ac0e2eec75047ff0c6c48c1f8d1df0b22', name: "trigger" })), index.h("div", { key: '8f137fbe94c1793bd670cc473c062b7e60e60f8b', class: {
+                'menu__panel': true,
+                'menu__panel--open': this.open,
+                [`menu__panel--${this.placement}`]: true,
+            }, part: "panel", id: this.menuId, role: "menu", "aria-hidden": !this.open ? 'true' : undefined }, index.h("slot", { key: '4d9d31af73853300a50781b82b31764f6d6529b5' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsMenu.style = menuCss();
+
+exports.ts_menu = TsMenu;
+//# sourceMappingURL=ts-menu.entry.cjs.js.map
+
+//# sourceMappingURL=ts-menu.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-menu.cjs.entry.js","mappings":";;;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,spCAAspC,CAAC;;MCmBjqC,MAAM,GAAA,MAAA;;;;;;;AAGT,IAAA,MAAM,GAAGA,eAAU,CAAC,SAAS,CAAC;AAC9B,IAAA,SAAS;;IAGuB,IAAI,GAAG,KAAK;;IAG3B,OAAO,GAAkB,OAAO;;IAGhC,SAAS,GAAoB,cAAc;;AAGpC,IAAA,MAAM;;AAGL,IAAA,OAAO;;IAG/B,YAAY,GAAG,EAAE;AAG1B,IAAA,gBAAgB,CAAC,MAAe,EAAA;QAC9B,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAClB,qBAAqB,CAAC,MAAK;gBACzB,IAAI,CAAC,cAAc,EAAE;AACvB,aAAC,CAAC;;aACG;AACL,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;AAKvB,IAAA,mBAAmB,CAAC,KAAiB,EAAA;AACnC,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;AAC5D,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;;IAKrB,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;;AAIzB,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAEhB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE;AACjC,QAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE;AAExB,QAAA,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,WAAW,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;gBAC1D,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACxC;;YAEF,KAAK,SAAS,EAAE;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC;gBACrF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACxC;;YAEF,KAAK,MAAM,EAAE;gBACX,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,YAAY,GAAG,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACxB;;YAEF,KAAK,KAAK,EAAE;gBACV,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;gBACpC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBACxC;;YAEF,KAAK,QAAQ,EAAE;gBACb,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,gBAAA,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;gBACvB;;YAEF,KAAK,KAAK,EAAE;AACV,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;gBACjB;;;;IAKE,YAAY,GAAA;AAClB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAc,8BAA8B,CAAC,CAAC;;AAGtF,IAAA,SAAS,CAAC,EAAe,EAAA;QAC/B,MAAM,IAAI,GAAG,EAAsD;AACnE,QAAA,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;YACvC,IAAI,CAAC,QAAQ,EAAE;;aACV;YACL,EAAE,CAAC,KAAK,EAAE;;;IAIN,cAAc,GAAA;AACpB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE;AACjC,QAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACpB,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;IAIpB,kBAAkB,GAAG,MAAW;AACtC,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;;AAE1B,KAAC;AAEO,IAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAU;AAC5D,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC3E,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;AAEpB,KAAC;IAEO,gBAAgB,GAAG,MAAW;AACpC,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;AAEpB,KAAC;IAEO,gBAAgB,GAAG,MAAW;AACpC,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;;AAErB,KAAC;;IAGD,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;gBACf,eAAe,EAAE,IAAI,CAAC,IAAI;aAC3B,EACD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnCD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAClC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAA,eAAA,EACtB,MAAM,EAAA,eAAA,EACL,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC5B,IAAI,CAAC,MAAM,EAAA,EAE1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,mBAAmB,EAAE,IAAI,CAAC,IAAI;AAC9B,gBAAA,CAAC,gBAAgB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,IAAI;AACzC,aAAA,EACD,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,MAAM,EAAA,aAAA,EACE,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS,EAAA,EAE5CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;;;;;;","names":["generateId","h","Host"],"sources":["src/components/menu/menu.css?tag=ts-menu&encapsulation=shadow","src/components/menu/menu.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-menu — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-menu-bg        Menu panel background\n     --ts-menu-radius    Menu panel border radius\n     --ts-menu-shadow    Menu panel elevation shadow\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n  font-family: var(--ts-font-family-base);\n\n  --ts-menu-bg: var(--ts-color-bg-elevated);\n  --ts-menu-radius: var(--ts-shape-overlay);\n  --ts-menu-shadow: var(--ts-shadow-lg);\n}\n\n/* ---- Trigger ---- */\n.menu__trigger {\n  display: inline-flex;\n}\n\n/* ---- Panel ---- */\n.menu__panel {\n  position: absolute;\n  z-index: var(--ts-z-tooltip);\n  display: none;\n  flex-direction: column;\n  min-inline-size: 10rem;\n  padding-block: var(--ts-spacing-1);\n  background-color: var(--ts-menu-bg);\n  border-radius: var(--ts-menu-radius);\n  box-shadow: var(--ts-menu-shadow);\n  border: 1px solid var(--ts-color-border-default);\n  overflow-y: auto;\n  max-block-size: 20rem;\n  animation: ts-menu-fade-in 150ms ease-out;\n}\n\n.menu__panel--open {\n  display: flex;\n}\n\n/* ---- Placement ---- */\n.menu__panel--bottom-start {\n  inset-block-start: 100%;\n  inset-inline-start: 0;\n  margin-block-start: var(--ts-spacing-1);\n}\n\n.menu__panel--bottom-end {\n  inset-block-start: 100%;\n  inset-inline-end: 0;\n  margin-block-start: var(--ts-spacing-1);\n}\n\n.menu__panel--top-start {\n  inset-block-end: 100%;\n  inset-inline-start: 0;\n  margin-block-end: var(--ts-spacing-1);\n}\n\n.menu__panel--top-end {\n  inset-block-end: 100%;\n  inset-inline-end: 0;\n  margin-block-end: var(--ts-spacing-1);\n}\n\n/* ---- Animation ---- */\n@keyframes ts-menu-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n","import { Component, Prop, State, Event, h, Host, Element, Watch, Listen } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\nexport type TsMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';\n\nexport type TsMenuTrigger = 'click' | 'hover';\n\n/**\n * @slot trigger - The element that opens the menu (e.g., a button).\n * @slot - Default slot for ts-menu-item children.\n *\n * @part panel - The dropdown panel container.\n */\n@Component({\n  tag: 'ts-menu',\n  styleUrl: 'menu.css',\n  shadow: true,\n})\nexport class TsMenu {\n  @Element() hostEl!: HTMLElement;\n\n  private menuId = generateId('ts-menu');\n  private triggerEl?: HTMLElement;\n\n  /** Whether the menu dropdown is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** How the menu is triggered. */\n  @Prop({ reflect: true }) trigger: TsMenuTrigger = 'click';\n\n  /** Placement of the dropdown relative to the trigger. */\n  @Prop({ reflect: true }) placement: TsMenuPlacement = 'bottom-start';\n\n  /** Emitted when the menu opens. */\n  @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n  /** Emitted when the menu closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Tracks the currently focused item index for keyboard navigation. */\n  @State() focusedIndex = -1;\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean): void {\n    if (isOpen) {\n      this.tsOpen.emit();\n      requestAnimationFrame(() => {\n        this.focusFirstItem();\n      });\n    } else {\n      this.focusedIndex = -1;\n      this.tsClose.emit();\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent): void {\n    if (this.open && !this.hostEl.contains(event.target as Node)) {\n      this.open = false;\n    }\n  }\n\n  @Listen('tsSelect')\n  handleItemSelect(): void {\n    this.open = false;\n    this.triggerEl?.focus();\n  }\n\n  @Listen('keydown')\n  handleKeydown(event: KeyboardEvent): void {\n    if (!this.open) return;\n\n    const items = this.getMenuItems();\n    if (items.length === 0) return;\n\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.preventDefault();\n        this.focusedIndex = (this.focusedIndex + 1) % items.length;\n        this.focusItem(items[this.focusedIndex]);\n        break;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1;\n        this.focusItem(items[this.focusedIndex]);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        this.focusedIndex = 0;\n        this.focusItem(items[0]);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        this.focusedIndex = items.length - 1;\n        this.focusItem(items[this.focusedIndex]);\n        break;\n      }\n      case 'Escape': {\n        event.preventDefault();\n        this.open = false;\n        this.triggerEl?.focus();\n        break;\n      }\n      case 'Tab': {\n        this.open = false;\n        break;\n      }\n    }\n  }\n\n  private getMenuItems(): HTMLElement[] {\n    return Array.from(this.hostEl.querySelectorAll<HTMLElement>('ts-menu-item:not([disabled])'));\n  }\n\n  private focusItem(el: HTMLElement): void {\n    const item = el as HTMLElement & { setFocus?: () => Promise<void> };\n    if (typeof item.setFocus === 'function') {\n      item.setFocus();\n    } else {\n      el.focus();\n    }\n  }\n\n  private focusFirstItem(): void {\n    const items = this.getMenuItems();\n    if (items.length > 0) {\n      this.focusedIndex = 0;\n      this.focusItem(items[0]);\n    }\n  }\n\n  private handleTriggerClick = (): void => {\n    if (this.trigger === 'click') {\n      this.open = !this.open;\n    }\n  };\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open = true;\n    }\n  };\n\n  private handleMouseEnter = (): void => {\n    if (this.trigger === 'hover') {\n      this.open = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    if (this.trigger === 'hover') {\n      this.open = false;\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-menu': true,\n          'ts-menu--open': this.open,\n        }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div\n          class=\"menu__trigger\"\n          ref={(el) => (this.triggerEl = el)}\n          onClick={this.handleTriggerClick}\n          onKeyDown={this.handleTriggerKeydown}\n          aria-haspopup=\"true\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={this.menuId}\n        >\n          <slot name=\"trigger\" />\n        </div>\n\n        <div\n          class={{\n            'menu__panel': true,\n            'menu__panel--open': this.open,\n            [`menu__panel--${this.placement}`]: true,\n          }}\n          part=\"panel\"\n          id={this.menuId}\n          role=\"menu\"\n          aria-hidden={!this.open ? 'true' : undefined}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,122 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const modalCss = () => `:host{font-family:var(--ts-font-family-base);--ts-modal-bg:var(--ts-color-bg-elevated);--ts-modal-overlay-bg:var(--ts-color-bg-overlay);--ts-modal-radius:var(--ts-shape-overlay);--ts-modal-shadow:var(--ts-shadow-xl)}.modal__overlay{position:fixed;inset:0;z-index:var(--ts-z-modal);display:flex;align-items:center;justify-content:center;padding:var(--ts-spacing-4);background-color:var(--ts-modal-overlay-bg);animation:ts-fade-in 240ms cubic-bezier(0.25, 0.1, 0.25, 1)}.modal__dialog{position:relative;background-color:var(--ts-modal-bg);border-radius:var(--ts-modal-radius);box-shadow:var(--ts-modal-shadow);max-height:calc(100vh - var(--ts-spacing-16));overflow-y:auto;animation:ts-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1);outline:none}.modal__dialog--xs{width:100%;max-width:320px}.modal__dialog--sm{width:100%;max-width:440px}.modal__dialog--md{width:100%;max-width:560px}.modal__dialog--lg{width:100%;max-width:720px}.modal__dialog--xl{width:100%;max-width:960px}.modal__close{position:absolute;top:var(--ts-spacing-3);inset-inline-end:var(--ts-spacing-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--ts-radius-md);background:transparent;color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-md);cursor:pointer;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast);z-index:1;padding:0;line-height:1}.modal__close:hover{background-color:var(--ts-color-bg-hover);color:var(--ts-color-text-secondary)}.modal__close:focus-visible{box-shadow:var(--ts-focus-ring)}.modal__header{padding:var(--ts-spacing-5) var(--ts-spacing-6) var(--ts-spacing-3);font-size:var(--ts-font-size-lg);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary)}.modal__header:empty{display:none}.modal__body{padding:var(--ts-spacing-3) var(--ts-spacing-6);font-size:var(--ts-font-size-md);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal)}.modal__footer{padding:var(--ts-spacing-3) var(--ts-spacing-6) var(--ts-spacing-5);display:flex;align-items:center;justify-content:flex-end;gap:var(--ts-spacing-2)}.modal__footer:empty{display:none}@keyframes ts-fade-in{from{opacity:0}to{opacity:1}}@keyframes ts-scale-in{from{opacity:0;transform:scale(0.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}`;
+
+const TsModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsOpen = index.createEvent(this, "tsOpen");
+        this.tsClose = index.createEvent(this, "tsClose");
+    }
+    get hostEl() { return index.getElement(this); }
+    dialogEl;
+    removeFocusTrap;
+    previouslyFocused;
+    modalId = aria.generateId('ts-modal');
+    /** Whether the modal is open. */
+    open = false;
+    /** The modal's width size preset. */
+    size = 'md';
+    /** Label for accessibility (used as aria-label). */
+    label;
+    /** Whether clicking the overlay closes the modal. */
+    closeOnOverlay = true;
+    /** Whether pressing Escape closes the modal. */
+    closeOnEscape = true;
+    /** Whether to show the close button. */
+    showClose = true;
+    /** Emitted when the modal opens. */
+    tsOpen;
+    /** Emitted when the modal closes. */
+    tsClose;
+    /** Internal animation state. */
+    isAnimating = false;
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.openModal();
+        }
+        else {
+            this.closeModal();
+        }
+    }
+    /** Programmatically open the modal. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close the modal. */
+    async close() {
+        this.open = false;
+    }
+    openModal() {
+        this.previouslyFocused = document.activeElement;
+        this.isAnimating = true;
+        this.tsOpen.emit();
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            if (this.dialogEl) {
+                this.removeFocusTrap = aria.trapFocus(this.dialogEl);
+                // Focus the dialog itself
+                this.dialogEl.focus();
+            }
+        });
+    }
+    closeModal() {
+        this.isAnimating = false;
+        this.tsClose.emit();
+        // Restore body scroll
+        document.body.style.overflow = '';
+        // Clean up focus trap
+        this.removeFocusTrap?.();
+        // Restore focus
+        this.previouslyFocused?.focus();
+    }
+    disconnectedCallback() {
+        this.removeFocusTrap?.();
+        document.body.style.overflow = '';
+    }
+    handleOverlayClick = () => {
+        if (this.closeOnOverlay) {
+            this.close();
+        }
+    };
+    handleDialogClick = (event) => {
+        // Prevent overlay click from firing when clicking inside the dialog
+        event.stopPropagation();
+    };
+    handleKeydown = (event) => {
+        if (event.key === 'Escape' && this.closeOnEscape) {
+            event.stopPropagation();
+            this.close();
+        }
+    };
+    handleCloseClick = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.open)
+            return null;
+        return (index.h(index.Host, { class: {
+                'ts-modal': true,
+                'ts-modal--open': this.open,
+            }, onKeyDown: this.handleKeydown }, index.h("div", { class: "modal__overlay", part: "overlay", onClick: this.handleOverlayClick }, index.h("div", { ref: (el) => (this.dialogEl = el), class: {
+                'modal__dialog': true,
+                [`modal__dialog--${this.size}`]: true,
+            }, part: "dialog", role: "dialog", "aria-modal": "true", "aria-label": this.label, "aria-labelledby": !this.label ? `${this.modalId}-header` : undefined, tabindex: -1, onClick: this.handleDialogClick }, this.showClose && (index.h("button", { class: "modal__close", part: "close", type: "button", "aria-label": "Close modal", onClick: this.handleCloseClick }, "\u2715")), index.h("div", { class: "modal__header", part: "header", id: `${this.modalId}-header` }, index.h("slot", { name: "header" })), index.h("div", { class: "modal__body", part: "body" }, index.h("slot", null)), index.h("div", { class: "modal__footer", part: "footer" }, index.h("slot", { name: "footer" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsModal.style = modalCss();
+
+exports.ts_modal = TsModal;
+//# sourceMappingURL=ts-modal.entry.cjs.js.map
+
+//# sourceMappingURL=ts-modal.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-modal.cjs.entry.js","mappings":"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","names":["generateId","trapFocus","h","Host"],"sources":["src/components/modal/modal.css?tag=ts-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-modal — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-modal-bg          Dialog background\n     --ts-modal-overlay-bg  Overlay background\n     --ts-modal-radius      Dialog border radius\n     --ts-modal-shadow      Dialog box-shadow\n   ========================================================================== */\n\n:host {\n  font-family: var(--ts-font-family-base);\n\n  --ts-modal-bg: var(--ts-color-bg-elevated);\n  --ts-modal-overlay-bg: var(--ts-color-bg-overlay);\n  --ts-modal-radius: var(--ts-shape-overlay);\n  --ts-modal-shadow: var(--ts-shadow-xl);\n}\n\n/* ---- Overlay ---- */\n.modal__overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--ts-z-modal);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--ts-spacing-4);\n  background-color: var(--ts-modal-overlay-bg);\n  animation: ts-fade-in 240ms cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n/* ---- Dialog ---- */\n.modal__dialog {\n  position: relative;\n  background-color: var(--ts-modal-bg);\n  border-radius: var(--ts-modal-radius);\n  box-shadow: var(--ts-modal-shadow);\n  max-height: calc(100vh - var(--ts-spacing-16));\n  overflow-y: auto;\n  animation: ts-scale-in 280ms cubic-bezier(0.16, 1, 0.3, 1);\n  outline: none;\n}\n\n/* ---- Sizes ---- */\n.modal__dialog--xs  { width: 100%; max-width: 320px; }\n.modal__dialog--sm  { width: 100%; max-width: 440px; }\n.modal__dialog--md  { width: 100%; max-width: 560px; }\n.modal__dialog--lg  { width: 100%; max-width: 720px; }\n.modal__dialog--xl  { width: 100%; max-width: 960px; }\n\n/* ---- Close Button ---- */\n.modal__close {\n  position: absolute;\n  top: var(--ts-spacing-3);\n  inset-inline-end: var(--ts-spacing-3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  border-radius: var(--ts-radius-md);\n  background: transparent;\n  color: var(--ts-color-text-tertiary);\n  font-size: var(--ts-font-size-md);\n  cursor: pointer;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n  z-index: 1;\n  padding: 0;\n  line-height: 1;\n}\n\n.modal__close:hover {\n  background-color: var(--ts-color-bg-hover);\n  color: var(--ts-color-text-secondary);\n}\n\n.modal__close:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Sections ---- */\n.modal__header {\n  padding: var(--ts-spacing-5) var(--ts-spacing-6) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-lg);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n}\n\n.modal__header:empty {\n  display: none;\n}\n\n.modal__body {\n  padding: var(--ts-spacing-3) var(--ts-spacing-6);\n  font-size: var(--ts-font-size-md);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n}\n\n.modal__footer {\n  padding: var(--ts-spacing-3) var(--ts-spacing-6) var(--ts-spacing-5);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--ts-spacing-2);\n}\n\n.modal__footer:empty {\n  display: none;\n}\n\n/* ---- Animations ---- */\n@keyframes ts-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes ts-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  h,\n  Host,\n  Element,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for modal body content.\n * @slot header - Modal header content.\n * @slot footer - Modal footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part dialog - The dialog container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-modal',\n  styleUrl: 'modal.css',\n  shadow: true,\n})\nexport class TsModal {\n  @Element() hostEl!: HTMLElement;\n\n  private dialogEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private modalId = generateId('ts-modal');\n\n  /** Whether the modal is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The modal's width size preset. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label for accessibility (used as aria-label). */\n  @Prop() label?: string;\n\n  /** Whether clicking the overlay closes the modal. */\n  @Prop() closeOnOverlay = true;\n\n  /** Whether pressing Escape closes the modal. */\n  @Prop() closeOnEscape = true;\n\n  /** Whether to show the close button. */\n  @Prop() showClose = true;\n\n  /** Emitted when the modal opens. */\n  @Event({ eventName: 'tsOpen' }) tsOpen!: EventEmitter<void>;\n\n  /** Emitted when the modal closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Internal animation state. */\n  @State() isAnimating = false;\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean): void {\n    if (isOpen) {\n      this.openModal();\n    } else {\n      this.closeModal();\n    }\n  }\n\n  /** Programmatically open the modal. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the modal. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openModal(): void {\n    this.previouslyFocused = document.activeElement as HTMLElement;\n    this.isAnimating = true;\n    this.tsOpen.emit();\n\n    // Prevent body scroll\n    document.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      if (this.dialogEl) {\n        this.removeFocusTrap = trapFocus(this.dialogEl);\n        // Focus the dialog itself\n        this.dialogEl.focus();\n      }\n    });\n  }\n\n  private closeModal(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    // Restore body scroll\n    document.body.style.overflow = '';\n\n    // Clean up focus trap\n    this.removeFocusTrap?.();\n\n    // Restore focus\n    this.previouslyFocused?.focus();\n  }\n\n  disconnectedCallback(): void {\n    this.removeFocusTrap?.();\n    document.body.style.overflow = '';\n  }\n\n  private handleOverlayClick = (): void => {\n    if (this.closeOnOverlay) {\n      this.close();\n    }\n  };\n\n  private handleDialogClick = (event: MouseEvent): void => {\n    // Prevent overlay click from firing when clicking inside the dialog\n    event.stopPropagation();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.closeOnEscape) {\n      event.stopPropagation();\n      this.close();\n    }\n  };\n\n  private handleCloseClick = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.open) return null;\n\n    return (\n      <Host\n        class={{\n          'ts-modal': true,\n          'ts-modal--open': this.open,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"modal__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.dialogEl = el)}\n            class={{\n              'modal__dialog': true,\n              [`modal__dialog--${this.size}`]: true,\n            }}\n            part=\"dialog\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.label}\n            aria-labelledby={!this.label ? `${this.modalId}-header` : undefined}\n            tabindex={-1}\n            onClick={this.handleDialogClick}\n          >\n            {this.showClose && (\n              <button\n                class=\"modal__close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close modal\"\n                onClick={this.handleCloseClick}\n              >\n                ✕\n              </button>\n            )}\n\n            <div class=\"modal__header\" part=\"header\" id={`${this.modalId}-header`}>\n              <slot name=\"header\" />\n            </div>\n\n            <div class=\"modal__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"modal__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const navItemCss = () => `:host{display:block;font-family:var(--ts-font-family-base)}.nav-item__wrapper{list-style:none;margin:0;padding:0}.nav-item__link{display:flex;align-items:center;gap:var(--ts-spacing-2);padding:var(--ts-spacing-2) var(--ts-spacing-3);border:none;border-radius:var(--ts-radius-md);background:transparent;color:var(--ts-color-text-secondary);font-family:var(--ts-font-family-base);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);text-decoration:none;cursor:pointer;width:100%;text-align:start;transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.nav-item__link:hover:not([disabled]):not([aria-disabled="true"]){background-color:var(--ts-color-bg-hover);color:var(--ts-color-text-primary)}.nav-item__link:focus-visible{box-shadow:var(--ts-focus-ring);outline:none}:host([active]) .nav-item__link{background-color:var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));color:var(--ts-color-interactive-primary);font-weight:var(--ts-font-weight-semi)}:host([disabled]) .nav-item__link{opacity:0.5;cursor:not-allowed;pointer-events:none}.nav-item__icon{display:inline-flex;align-items:center;flex-shrink:0}.nav-item__label{display:inline-flex;align-items:center;white-space:nowrap}`;
+
+const TsNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsSelect = index.createEvent(this, "tsSelect");
+    }
+    /** The URL to navigate to. */
+    href;
+    /** Whether this item is currently active. */
+    active = false;
+    /** Whether this item is disabled. */
+    disabled = false;
+    /** Lucide icon name to display. */
+    icon;
+    /** Emitted when the nav item is selected. */
+    tsSelect;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.tsSelect.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const Tag = this.href ? 'a' : 'button';
+        const attrs = this.href
+            ? { href: this.disabled ? undefined : this.href }
+            : { type: 'button', disabled: this.disabled };
+        return (index.h(index.Host, { key: 'edc70c61d701ba9765e37d18e49f1f9d198dde85', class: {
+                'ts-nav-item': true,
+                'ts-nav-item--active': this.active,
+                'ts-nav-item--disabled': this.disabled,
+            } }, index.h("li", { key: 'fa4090e6dd631e6caaf89c84b7735c64f25d46d0', class: "nav-item__wrapper", part: "item", role: "listitem" }, index.h(Tag, { key: 'eb44e83812a47b281719155a49633de0e960a19e', ...attrs, class: "nav-item__link", part: "link", "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick }, this.icon && (index.h("span", { key: 'a12ec79c7dc7d7a1bf53c4d0c25fc7ed8c4d1fcc', class: "nav-item__icon", part: "icon", "aria-hidden": "true" }, index.h("ts-icon", { key: '5268366fada499e81d589b4b21c08065b6d83dd4', name: this.icon, size: "sm" }))), index.h("span", { key: 'bef8a388eab007fa739025fbb242f490204cad1f', class: "nav-item__label", part: "label" }, index.h("slot", { key: '9154d4a5f1075ecaa077998198bf6cd0258449d3' }))))));
+    }
+};
+TsNavItem.style = navItemCss();
+
+exports.ts_nav_item = TsNavItem;
+//# sourceMappingURL=ts-nav-item.entry.cjs.js.map
+
+//# sourceMappingURL=ts-nav-item.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-nav-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,ouCAAouC,CAAC;;MCgBlvC,SAAS,GAAA,MAAA;;;;;;AAEZ,IAAA,IAAI;;IAGa,MAAM,GAAG,KAAK;;IAGd,QAAQ,GAAG,KAAK;;AAGjC,IAAA,IAAI;;AAGsB,IAAA,QAAQ;AAElC,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;AAChD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;YACvB;;AAEF,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACtB,KAAC;;IAGD,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AACtC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC;AACjB,cAAE,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI;AAC/C,cAAE,EAAE,IAAI,EAAE,QAAiB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;QAExD,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,qBAAqB,EAAE,IAAI,CAAC,MAAM;gBAClC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACvC,aAAA,EAAA,EAEDD,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,EAAA,EACvDA,OAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GACE,KAAK,EACT,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAExB,IAAI,CAAC,IAAI,KACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAA,EACzDA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACjC,CACR,EACDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,EAAA,EACxCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACH,CACH,CACA;;;;;;;","names":["h","Host"],"sources":["src/components/nav/nav-item.css?tag=ts-nav-item&encapsulation=shadow","src/components/nav/nav-item.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-nav-item — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n}\n\n.nav-item__wrapper {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.nav-item__link {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  border: none;\n  border-radius: var(--ts-radius-md);\n  background: transparent;\n  color: var(--ts-color-text-secondary);\n  font-family: var(--ts-font-family-base);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  text-decoration: none;\n  cursor: pointer;\n  width: 100%;\n  text-align: start;\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n}\n\n.nav-item__link:hover:not([disabled]):not([aria-disabled=\"true\"]) {\n  background-color: var(--ts-color-bg-hover);\n  color: var(--ts-color-text-primary);\n}\n\n.nav-item__link:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  outline: none;\n}\n\n/* ---- Active state ---- */\n:host([active]) .nav-item__link {\n  background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));\n  color: var(--ts-color-interactive-primary);\n  font-weight: var(--ts-font-weight-semi);\n}\n\n/* ---- Disabled state ---- */\n:host([disabled]) .nav-item__link {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Icon ---- */\n.nav-item__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ---- Label ---- */\n.nav-item__label {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n}\n","import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part item - The list item wrapper.\n * @part link - The anchor or button element.\n * @part icon - The icon wrapper.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-nav-item',\n  styleUrl: 'nav-item.css',\n  shadow: true,\n})\nexport class TsNavItem {\n  /** The URL to navigate to. */\n  @Prop() href?: string;\n\n  /** Whether this item is currently active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Whether this item is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Lucide icon name to display. */\n  @Prop() icon?: string;\n\n  /** Emitted when the nav item is selected. */\n  @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<void>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.tsSelect.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.disabled ? undefined : this.href }\n      : { type: 'button' as const, disabled: this.disabled };\n\n    return (\n      <Host\n        class={{\n          'ts-nav-item': true,\n          'ts-nav-item--active': this.active,\n          'ts-nav-item--disabled': this.disabled,\n        }}\n      >\n        <li class=\"nav-item__wrapper\" part=\"item\" role=\"listitem\">\n          <Tag\n            {...attrs}\n            class=\"nav-item__link\"\n            part=\"link\"\n            aria-current={this.active ? 'page' : undefined}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.handleClick}\n          >\n            {this.icon && (\n              <span class=\"nav-item__icon\" part=\"icon\" aria-hidden=\"true\">\n                <ts-icon name={this.icon} size=\"sm\" />\n              </span>\n            )}\n            <span class=\"nav-item__label\" part=\"label\">\n              <slot />\n            </span>\n          </Tag>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const navCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-nav-bg:transparent;--ts-nav-active-bg:var(--ts-color-interactive-primary-subtle);--ts-nav-active-color:var(--ts-color-interactive-primary);--ts-nav-width:240px}.nav__native{background-color:var(--ts-nav-bg)}.nav__list{list-style:none;margin:0;padding:0;display:flex}:host([variant="sidebar"]) .nav__list{flex-direction:column;gap:var(--ts-spacing-1);inline-size:var(--ts-nav-width)}:host([variant="sidebar"][collapsed]) .nav__list{inline-size:auto}:host([variant="horizontal"]) .nav__list{flex-direction:row;gap:var(--ts-spacing-1);align-items:center}`;
+
+const TsNav = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The navigation layout variant. */
+    variant = 'sidebar';
+    /** Whether the sidebar nav is collapsed (icons only). */
+    collapsed = false;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: 'dcfbdce63e36faf81a1e4967837da40c9059530a', class: {
+                'ts-nav': true,
+                [`ts-nav--${this.variant}`]: true,
+                'ts-nav--collapsed': this.collapsed,
+            } }, index.h("nav", { key: 'f8c05146a0c6435b7382e12ce8c0b2c5a27a962a', class: "nav__native", part: "nav", "aria-label": "Navigation" }, index.h("ul", { key: 'dbd02ae09363b4c03832e5a8d5f60cc465626c55', class: "nav__list", part: "list", role: "list" }, index.h("slot", { key: '2b1aa23209f60b7bc382a630d910e4bada9c6adc' })))));
+    }
+};
+TsNav.style = navCss();
+
+exports.ts_nav = TsNav;
+//# sourceMappingURL=ts-nav.entry.cjs.js.map
+
+//# sourceMappingURL=ts-nav.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-nav.cjs.entry.js","mappings":";;;;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,umBAAumB,CAAC;;MCajnB,KAAK,GAAA,MAAA;;;;;IAES,OAAO,GAA6B,SAAS;;IAG7C,SAAS,GAAG,KAAK;;IAG1C,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;gBACjC,mBAAmB,EAAE,IAAI,CAAC,SAAS;aACpC,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,KAAK,gBAAY,YAAY,EAAA,EACzDA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,CACD,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/nav/nav.css?tag=ts-nav&encapsulation=shadow","src/components/nav/nav.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-nav — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-nav-bg            Navigation background\n     --ts-nav-active-bg     Active item background\n     --ts-nav-active-color  Active item text color\n     --ts-nav-width         Sidebar width\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-nav-bg: transparent;\n  --ts-nav-active-bg: var(--ts-color-interactive-primary-subtle);\n  --ts-nav-active-color: var(--ts-color-interactive-primary);\n  --ts-nav-width: 240px;\n}\n\n.nav__native {\n  background-color: var(--ts-nav-bg);\n}\n\n.nav__list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n}\n\n/* ---- Sidebar variant ---- */\n:host([variant=\"sidebar\"]) .nav__list {\n  flex-direction: column;\n  gap: var(--ts-spacing-1);\n  inline-size: var(--ts-nav-width);\n}\n\n:host([variant=\"sidebar\"][collapsed]) .nav__list {\n  inline-size: auto;\n}\n\n/* ---- Horizontal variant ---- */\n:host([variant=\"horizontal\"]) .nav__list {\n  flex-direction: row;\n  gap: var(--ts-spacing-1);\n  align-items: center;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-nav-item children.\n *\n * @part nav - The native nav element.\n * @part list - The list container.\n */\n@Component({\n  tag: 'ts-nav',\n  styleUrl: 'nav.css',\n  shadow: true,\n})\nexport class TsNav {\n  /** The navigation layout variant. */\n  @Prop({ reflect: true }) variant: 'sidebar' | 'horizontal' = 'sidebar';\n\n  /** Whether the sidebar nav is collapsed (icons only). */\n  @Prop({ reflect: true }) collapsed = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-nav': true,\n          [`ts-nav--${this.variant}`]: true,\n          'ts-nav--collapsed': this.collapsed,\n        }}\n      >\n        <nav class=\"nav__native\" part=\"nav\" aria-label=\"Navigation\">\n          <ul class=\"nav__list\" part=\"list\" role=\"list\">\n            <slot />\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}