@tessera-ui/core 0.4.0

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

@@ -0,0 +1,151 @@
+// Hand-written stories for ts-input
+export default {
+    title: 'Components/Input',
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: 'text', description: 'The input\'s value.' },
+        type: {
+            control: 'select',
+            options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search'],
+            description: 'The input type.',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The input\'s size.',
+        },
+        label: { control: 'text', description: 'Label text displayed above the input.' },
+        placeholder: { control: 'text', description: 'Placeholder text.' },
+        helpText: { control: 'text', description: 'Help text displayed below the input.' },
+        error: { control: 'text', description: 'Renders the input in an error state with an error message.' },
+        required: { control: 'boolean', description: 'Makes the input required.' },
+        disabled: { control: 'boolean', description: 'Renders the input as disabled.' },
+        readonly: { control: 'boolean', description: 'Renders the input as readonly.' },
+        maxlength: { control: 'number', description: 'Maximum character length.' },
+        name: { control: 'text', description: 'Name attribute for form submission.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.value !== undefined && args.value !== null && args.value !== '')
+        attrs.push(`value="${args.value}"`);
+    if (args.type !== undefined && args.type !== null)
+        attrs.push(`type="${args.type}"`);
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.label !== undefined && args.label !== null && args.label !== '')
+        attrs.push(`label="${args.label}"`);
+    if (args.placeholder !== undefined && args.placeholder !== null && args.placeholder !== '')
+        attrs.push(`placeholder="${args.placeholder}"`);
+    if (args.helpText !== undefined && args.helpText !== null && args.helpText !== '')
+        attrs.push(`help-text="${args.helpText}"`);
+    if (args.error !== undefined && args.error !== null && args.error !== '')
+        attrs.push(`error="${args.error}"`);
+    if (args.required)
+        attrs.push('required');
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.readonly)
+        attrs.push('readonly');
+    if (args.maxlength !== undefined && args.maxlength !== null)
+        attrs.push(`maxlength="${args.maxlength}"`);
+    if (args.name !== undefined && args.name !== null && args.name !== '')
+        attrs.push(`name="${args.name}"`);
+    return `<div style="max-width: 400px;"><ts-input ${attrs.join(' ')}></ts-input></div>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        value: '',
+        type: 'text',
+        size: 'md',
+        label: 'Full Name',
+        placeholder: 'Enter your full name',
+        helpText: 'As it appears on your government ID.',
+        disabled: false,
+        readonly: false,
+        required: false,
+    },
+});
+export const Sizes = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <ts-input size="xs" label="Extra Small" placeholder="xs input"></ts-input>
+    <ts-input size="sm" label="Small" placeholder="sm input"></ts-input>
+    <ts-input size="md" label="Medium" placeholder="md input"></ts-input>
+    <ts-input size="lg" label="Large" placeholder="lg input"></ts-input>
+    <ts-input size="xl" label="Extra Large" placeholder="xl input"></ts-input>
+  </ts-stack>
+`;
+export const Types = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <ts-input type="text" label="Username" placeholder="johndoe"></ts-input>
+    <ts-input type="email" label="Email Address" placeholder="john@example.com"></ts-input>
+    <ts-input type="password" label="Password" placeholder="Enter password"></ts-input>
+    <ts-input type="number" label="Quantity" placeholder="0"></ts-input>
+    <ts-input type="tel" label="Phone Number" placeholder="+1 (555) 000-0000"></ts-input>
+    <ts-input type="url" label="Website" placeholder="https://example.com"></ts-input>
+    <ts-input type="search" label="Search" placeholder="Search products..."></ts-input>
+  </ts-stack>
+`;
+export const States = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <ts-input label="Default" placeholder="Editable input"></ts-input>
+    <ts-input label="With Value" value="jane@example.com" placeholder="Email"></ts-input>
+    <ts-input label="Disabled" placeholder="Cannot edit" disabled></ts-input>
+    <ts-input label="Read Only" value="Read-only content" readonly></ts-input>
+    <ts-input label="Required" placeholder="This field is required" required></ts-input>
+    <ts-input label="With Help Text" placeholder="Choose a username" help-text="Must be 3-20 characters, letters and numbers only."></ts-input>
+    <ts-input label="Error State" value="invalid-email" error="Please enter a valid email address."></ts-input>
+  </ts-stack>
+`;
+export const WithIcons = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <ts-input label="Search" placeholder="Search files...">
+      <ts-icon slot="prefix" name="search" size="sm"></ts-icon>
+    </ts-input>
+    <ts-input label="Email" placeholder="you@company.com">
+      <ts-icon slot="prefix" name="mail" size="sm"></ts-icon>
+    </ts-input>
+    <ts-input label="Website" placeholder="https://example.com">
+      <ts-icon slot="prefix" name="globe" size="sm"></ts-icon>
+    </ts-input>
+    <ts-input label="Amount" placeholder="0.00">
+      <span slot="prefix" style="font-weight: 600; color: var(--ts-color-text-secondary); padding-left: 4px;">$</span>
+      <span slot="suffix" style="color: var(--ts-color-text-secondary); padding-right: 4px;">USD</span>
+    </ts-input>
+    <ts-input label="Password" type="password" placeholder="Enter password">
+      <ts-icon slot="prefix" name="lock" size="sm"></ts-icon>
+      <ts-icon slot="suffix" name="eye" size="sm"></ts-icon>
+    </ts-input>
+  </ts-stack>
+`;
+export const Composition = () => `
+  <ts-stack gap="4" style="max-width: 400px;">
+    <ts-card bordered padding="lg">
+      <span slot="header"><h3 style="margin: 0;">Sign In</h3></span>
+      <ts-stack gap="3">
+        <ts-input label="Email" type="email" placeholder="john@example.com" required>
+          <ts-icon slot="prefix" name="mail" size="sm"></ts-icon>
+        </ts-input>
+        <ts-input label="Password" type="password" placeholder="Enter your password" required>
+          <ts-icon slot="prefix" name="lock" size="sm"></ts-icon>
+        </ts-input>
+      </ts-stack>
+      <span slot="footer">
+        <ts-stack gap="2" style="padding-top: 8px;">
+          <ts-button block variant="primary">Sign In</ts-button>
+          <ts-button appearance="link" variant="primary">Forgot your password?</ts-button>
+        </ts-stack>
+      </span>
+    </ts-card>
+
+    <ts-row gap="2" align="end">
+      <div style="flex: 1;">
+        <ts-input placeholder="Enter invite code" label="Invite Code">
+          <ts-icon slot="prefix" name="ticket" size="sm"></ts-icon>
+        </ts-input>
+      </div>
+      <ts-button variant="primary">Redeem</ts-button>
+    </ts-row>
+  </ts-stack>
+`;
+//# sourceMappingURL=input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../../src/components/input/input.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-input\n\nexport default {\n  title: 'Components/Input',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The input\\'s value.' },\n    type: {\n      control: 'select',\n      options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search'],\n      description: 'The input type.',\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The input\\'s size.',\n    },\n    label: { control: 'text', description: 'Label text displayed above the input.' },\n    placeholder: { control: 'text', description: 'Placeholder text.' },\n    helpText: { control: 'text', description: 'Help text displayed below the input.' },\n    error: { control: 'text', description: 'Renders the input in an error state with an error message.' },\n    required: { control: 'boolean', description: 'Makes the input required.' },\n    disabled: { control: 'boolean', description: 'Renders the input as disabled.' },\n    readonly: { control: 'boolean', description: 'Renders the input as readonly.' },\n    maxlength: { control: 'number', description: 'Maximum character length.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  if (args.type !== undefined && args.type !== null) attrs.push(`type=\"${args.type}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null && args.label !== '') attrs.push(`label=\"${args.label}\"`);\n  if (args.placeholder !== undefined && args.placeholder !== null && args.placeholder !== '') attrs.push(`placeholder=\"${args.placeholder}\"`);\n  if (args.helpText !== undefined && args.helpText !== null && args.helpText !== '') attrs.push(`help-text=\"${args.helpText}\"`);\n  if (args.error !== undefined && args.error !== null && args.error !== '') attrs.push(`error=\"${args.error}\"`);\n  if (args.required) attrs.push('required');\n  if (args.disabled) attrs.push('disabled');\n  if (args.readonly) attrs.push('readonly');\n  if (args.maxlength !== undefined && args.maxlength !== null) attrs.push(`maxlength=\"${args.maxlength}\"`);\n  if (args.name !== undefined && args.name !== null && args.name !== '') attrs.push(`name=\"${args.name}\"`);\n  return `<div style=\"max-width: 400px;\"><ts-input ${attrs.join(' ')}></ts-input></div>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: '',\n    type: 'text',\n    size: 'md',\n    label: 'Full Name',\n    placeholder: 'Enter your full name',\n    helpText: 'As it appears on your government ID.',\n    disabled: false,\n    readonly: false,\n    required: false,\n  },\n});\n\nexport const Sizes = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-input size=\"xs\" label=\"Extra Small\" placeholder=\"xs input\"></ts-input>\n    <ts-input size=\"sm\" label=\"Small\" placeholder=\"sm input\"></ts-input>\n    <ts-input size=\"md\" label=\"Medium\" placeholder=\"md input\"></ts-input>\n    <ts-input size=\"lg\" label=\"Large\" placeholder=\"lg input\"></ts-input>\n    <ts-input size=\"xl\" label=\"Extra Large\" placeholder=\"xl input\"></ts-input>\n  </ts-stack>\n`;\n\nexport const Types = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-input type=\"text\" label=\"Username\" placeholder=\"johndoe\"></ts-input>\n    <ts-input type=\"email\" label=\"Email Address\" placeholder=\"john@example.com\"></ts-input>\n    <ts-input type=\"password\" label=\"Password\" placeholder=\"Enter password\"></ts-input>\n    <ts-input type=\"number\" label=\"Quantity\" placeholder=\"0\"></ts-input>\n    <ts-input type=\"tel\" label=\"Phone Number\" placeholder=\"+1 (555) 000-0000\"></ts-input>\n    <ts-input type=\"url\" label=\"Website\" placeholder=\"https://example.com\"></ts-input>\n    <ts-input type=\"search\" label=\"Search\" placeholder=\"Search products...\"></ts-input>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-input label=\"Default\" placeholder=\"Editable input\"></ts-input>\n    <ts-input label=\"With Value\" value=\"jane@example.com\" placeholder=\"Email\"></ts-input>\n    <ts-input label=\"Disabled\" placeholder=\"Cannot edit\" disabled></ts-input>\n    <ts-input label=\"Read Only\" value=\"Read-only content\" readonly></ts-input>\n    <ts-input label=\"Required\" placeholder=\"This field is required\" required></ts-input>\n    <ts-input label=\"With Help Text\" placeholder=\"Choose a username\" help-text=\"Must be 3-20 characters, letters and numbers only.\"></ts-input>\n    <ts-input label=\"Error State\" value=\"invalid-email\" error=\"Please enter a valid email address.\"></ts-input>\n  </ts-stack>\n`;\n\nexport const WithIcons = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-input label=\"Search\" placeholder=\"Search files...\">\n      <ts-icon slot=\"prefix\" name=\"search\" size=\"sm\"></ts-icon>\n    </ts-input>\n    <ts-input label=\"Email\" placeholder=\"you@company.com\">\n      <ts-icon slot=\"prefix\" name=\"mail\" size=\"sm\"></ts-icon>\n    </ts-input>\n    <ts-input label=\"Website\" placeholder=\"https://example.com\">\n      <ts-icon slot=\"prefix\" name=\"globe\" size=\"sm\"></ts-icon>\n    </ts-input>\n    <ts-input label=\"Amount\" placeholder=\"0.00\">\n      <span slot=\"prefix\" style=\"font-weight: 600; color: var(--ts-color-text-secondary); padding-left: 4px;\">$</span>\n      <span slot=\"suffix\" style=\"color: var(--ts-color-text-secondary); padding-right: 4px;\">USD</span>\n    </ts-input>\n    <ts-input label=\"Password\" type=\"password\" placeholder=\"Enter password\">\n      <ts-icon slot=\"prefix\" name=\"lock\" size=\"sm\"></ts-icon>\n      <ts-icon slot=\"suffix\" name=\"eye\" size=\"sm\"></ts-icon>\n    </ts-input>\n  </ts-stack>\n`;\n\nexport const Composition = (): string => `\n  <ts-stack gap=\"4\" style=\"max-width: 400px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Sign In</h3></span>\n      <ts-stack gap=\"3\">\n        <ts-input label=\"Email\" type=\"email\" placeholder=\"john@example.com\" required>\n          <ts-icon slot=\"prefix\" name=\"mail\" size=\"sm\"></ts-icon>\n        </ts-input>\n        <ts-input label=\"Password\" type=\"password\" placeholder=\"Enter your password\" required>\n          <ts-icon slot=\"prefix\" name=\"lock\" size=\"sm\"></ts-icon>\n        </ts-input>\n      </ts-stack>\n      <span slot=\"footer\">\n        <ts-stack gap=\"2\" style=\"padding-top: 8px;\">\n          <ts-button block variant=\"primary\">Sign In</ts-button>\n          <ts-button appearance=\"link\" variant=\"primary\">Forgot your password?</ts-button>\n        </ts-stack>\n      </span>\n    </ts-card>\n\n    <ts-row gap=\"2\" align=\"end\">\n      <div style=\"flex: 1;\">\n        <ts-input placeholder=\"Enter invite code\" label=\"Invite Code\">\n          <ts-icon slot=\"prefix\" name=\"ticket\" size=\"sm\"></ts-icon>\n        </ts-input>\n      </div>\n      <ts-button variant=\"primary\">Redeem</ts-button>\n    </ts-row>\n  </ts-stack>\n`;\n"]}

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

@@ -0,0 +1,77 @@
+/* ==========================================================================
+   ts-menu-item — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-menu-item-height   Item minimum height
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-menu-item-height: 2.25rem;
+}
+
+/* ---- Base ---- */
+.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);
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) .menu-item__base {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Slot wrappers ---- */
+.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);
+}

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

@@ -0,0 +1,176 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for menu item label content.
+ * @slot prefix - Content before the label (e.g., icon).
+ * @slot suffix - Content after the label (e.g., shortcut or badge).
+ *
+ * @part base - The menu item container element.
+ * @part prefix - The prefix slot wrapper.
+ * @part label - The label wrapper.
+ * @part suffix - The suffix slot wrapper.
+ */
+export class TsMenuItem {
+    hostEl;
+    /** 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 (h(Host, { key: '5b22feae43a6cf198651b55cc3285969dd6f796f', class: {
+                'ts-menu-item': true,
+                'ts-menu-item--disabled': this.disabled,
+            } }, 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 }, h("span", { key: '99cac763578eba7c95a9609bf3d50782b0efe0f6', class: "menu-item__prefix", part: "prefix" }, h("slot", { key: 'a58b57ff9d48a0a347417ebfd9a6ab82ac44486e', name: "prefix" })), h("span", { key: '6cd4e9d9b57ee7fa6404f0e6fd26f3fbde0f2bb3', class: "menu-item__label", part: "label" }, h("slot", { key: '9bfa5a772807c16aca216f806dff8f3165af9c4c' })), h("span", { key: '194b24cb2e5b5d41bedb1982ba2c370a1f8e2421', class: "menu-item__suffix", part: "suffix" }, h("slot", { key: 'a14e9e98baf2a3addcb9870012bcedf169a00f9e', name: "suffix" })))));
+    }
+    static get is() { return "ts-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the menu item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value associated with this menu item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If provided, renders the item as a link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsSelect",
+                "name": "tsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the menu item is selected."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focus the menu item.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=menu-item.js.map

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

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

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

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

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

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

package/dist/collection/components/menu/menu.css

@@ -0,0 +1,81 @@
+/* ==========================================================================
+   ts-menu — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-menu-bg        Menu panel background
+     --ts-menu-radius    Menu panel border radius
+     --ts-menu-shadow    Menu panel elevation shadow
+   ========================================================================== */
+
+: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);
+}
+
+/* ---- Trigger ---- */
+.menu__trigger {
+  display: inline-flex;
+}
+
+/* ---- Panel ---- */
+.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;
+}
+
+/* ---- Placement ---- */
+.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);
+}
+
+/* ---- Animation ---- */
+@keyframes ts-menu-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}