@tessera-ui/core 0.4.0

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,282 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot - Default slot for the checkbox label.
+ *
+ * @part base - The checkbox container.
+ * @part control - The visual checkbox box.
+ * @part label - The label wrapper.
+ */
+export class TsCheckbox {
+    hostEl;
+    inputId = generateId('ts-checkbox');
+    /** Whether the checkbox is checked. */
+    checked = false;
+    /** Whether the checkbox is in an indeterminate state. */
+    indeterminate = false;
+    /** Renders the checkbox as disabled. */
+    disabled = false;
+    /** The value associated with this checkbox. */
+    value = '';
+    /** Name attribute for form submission. */
+    name;
+    /** Label text. If omitted, use the default slot. */
+    label;
+    /** The checkbox size. */
+    size = 'md';
+    /** Renders the checkbox in an error state. */
+    error = false;
+    /** Emitted when the checked state changes. */
+    tsChange;
+    /** Programmatically toggle the checkbox. */
+    async toggle() {
+        if (!this.disabled) {
+            this.indeterminate = false;
+            this.checked = !this.checked;
+            this.tsChange.emit({ checked: this.checked, value: this.value });
+        }
+    }
+    handleClick = () => {
+        this.toggle();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        return (h(Host, { key: '9fc5e264e8b2491f0634f414ba8b1124e791bd32', class: {
+                'ts-checkbox': true,
+                [`ts-checkbox--${this.size}`]: true,
+                'ts-checkbox--checked': this.checked,
+                'ts-checkbox--indeterminate': this.indeterminate,
+                'ts-checkbox--disabled': this.disabled,
+                'ts-checkbox--error': this.error,
+            } }, h("div", { key: '9c5a2c9c28f00effd46caf892e0e91f8ca845bed', class: "checkbox__base", part: "base", role: "checkbox", "aria-checked": ariaChecked, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("div", { key: '5be7cabec162a5fdbbef10e63b649c81fbd97322', class: "checkbox__control", part: "control" }, this.checked && !this.indeterminate && (h("svg", { key: 'e4e4a9e04b8c7bfbbdfd60de8d570823984c7eb4', class: "checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '3f0e5fbb1fea51bf6b5b79a3909bc43cdee6d0f1', d: "M3.5 8L6.5 11L12.5 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '521bbf1e40987c631ccdafda69e7d8f683b7b994', class: "checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'd0d14bb0d20ef58997d4c567530f1c369d904b37', d: "M4 8H12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("label", { key: 'a939e2911282e988f110fd20c9c0f2fc71a892bd', class: "checkbox__label", part: "label", id: `${this.inputId}-label` }, this.label ? this.label : h("slot", null)))));
+    }
+    static get is() { return "ts-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is in an indeterminate state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the checkbox as disabled."
+                },
+                "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 checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text. If omitted, use the default slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The checkbox size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the checkbox in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes."
+                },
+                "complexType": {
+                    "original": "TsCheckboxChangeEventDetail",
+                    "resolved": "TsCheckboxChangeEventDetail",
+                    "references": {
+                        "TsCheckboxChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsCheckboxChangeEventDetail",
+                            "referenceLocation": "TsCheckboxChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically toggle the checkbox.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.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';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the checkbox label.\n *\n * @part base - The checkbox container.\n * @part control - The visual checkbox box.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class TsCheckbox {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-checkbox');\n\n  /** Whether the checkbox is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Whether the checkbox is in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Renders the checkbox as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this checkbox. */\n  @Prop() value = '';\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Label text. If omitted, use the default slot. */\n  @Prop() label?: string;\n\n  /** The checkbox size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Renders the checkbox in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Emitted when the checked state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n  /** Programmatically toggle the checkbox. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.indeterminate = false;\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked, value: this.value });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n\n    return (\n      <Host\n        class={{\n          'ts-checkbox': true,\n          [`ts-checkbox--${this.size}`]: true,\n          'ts-checkbox--checked': this.checked,\n          'ts-checkbox--indeterminate': this.indeterminate,\n          'ts-checkbox--disabled': this.disabled,\n          'ts-checkbox--error': this.error,\n        }}\n      >\n        <div\n          class=\"checkbox__base\"\n          part=\"base\"\n          role=\"checkbox\"\n          aria-checked={ariaChecked}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"checkbox__control\" part=\"control\">\n            {this.checked && !this.indeterminate && (\n              <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M3.5 8L6.5 11L12.5 5\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M4 8H12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </div>\n\n          <label class=\"checkbox__label\" part=\"label\" id={`${this.inputId}-label`}>\n            {this.label ? this.label : <slot />}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,90 @@
+// Hand-written stories for ts-checkbox
+export default {
+    title: 'Components/Checkbox',
+    tags: ['autodocs'],
+    argTypes: {
+        checked: { control: 'boolean', description: 'Whether the checkbox is checked.' },
+        indeterminate: { control: 'boolean', description: 'Whether the checkbox is in an indeterminate state.' },
+        disabled: { control: 'boolean', description: 'Renders the checkbox as disabled.' },
+        error: { control: 'boolean', description: 'Renders the checkbox in an error state.' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The checkbox size.',
+        },
+        label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },
+        value: { control: 'text', description: 'The value associated with this checkbox.' },
+        name: { control: 'text', description: 'Name attribute for form submission.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.checked)
+        attrs.push('checked');
+    if (args.indeterminate)
+        attrs.push('indeterminate');
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.error)
+        attrs.push('error');
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.label !== undefined && args.label !== null)
+        attrs.push(`label="${args.label}"`);
+    if (args.value !== undefined && args.value !== null)
+        attrs.push(`value="${args.value}"`);
+    if (args.name !== undefined && args.name !== null)
+        attrs.push(`name="${args.name}"`);
+    return `<ts-checkbox ${attrs.join(' ')}></ts-checkbox>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        checked: false,
+        indeterminate: false,
+        disabled: false,
+        error: false,
+        size: 'md',
+        label: 'I agree to the terms and conditions',
+        value: 'agree',
+        name: 'agreement',
+    },
+});
+export const Sizes = () => `
+  <ts-stack gap="2">
+    <ts-checkbox size="sm" label="Small checkbox"></ts-checkbox>
+    <ts-checkbox size="md" label="Medium checkbox"></ts-checkbox>
+    <ts-checkbox size="lg" label="Large checkbox"></ts-checkbox>
+  </ts-stack>
+`;
+export const States = () => `
+  <ts-stack gap="2">
+    <ts-checkbox label="Unchecked"></ts-checkbox>
+    <ts-checkbox checked label="Checked"></ts-checkbox>
+    <ts-checkbox indeterminate label="Indeterminate"></ts-checkbox>
+    <ts-checkbox disabled label="Disabled unchecked"></ts-checkbox>
+    <ts-checkbox disabled checked label="Disabled checked"></ts-checkbox>
+    <ts-checkbox error label="Error state"></ts-checkbox>
+    <ts-checkbox error checked label="Error checked"></ts-checkbox>
+  </ts-stack>
+`;
+export const FormExample = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <h3 style="margin: 0; font-family: sans-serif;">Newsletter Preferences</h3>
+    <ts-checkbox name="terms" value="terms" label="I agree to the terms and conditions"></ts-checkbox>
+    <ts-checkbox name="newsletter" value="newsletter" checked label="Subscribe to weekly newsletter"></ts-checkbox>
+    <ts-checkbox name="remember" value="remember" label="Remember me on this device"></ts-checkbox>
+    <ts-checkbox name="marketing" value="marketing" label="Receive marketing communications"></ts-checkbox>
+    <ts-checkbox name="beta" value="beta" disabled label="Join beta program (currently unavailable)"></ts-checkbox>
+  </ts-stack>
+`;
+export const WithSlotContent = () => `
+  <ts-stack gap="2">
+    <ts-checkbox value="custom">
+      Accept the <a href="#" style="color: #2563eb;">privacy policy</a>
+    </ts-checkbox>
+    <ts-checkbox value="styled">
+      <strong>Important:</strong> Enable two-factor authentication
+    </ts-checkbox>
+  </ts-stack>
+`;
+//# sourceMappingURL=checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-checkbox\n\nexport default {\n  title: 'Components/Checkbox',\n  tags: ['autodocs'],\n  argTypes: {\n    checked: { control: 'boolean', description: 'Whether the checkbox is checked.' },\n    indeterminate: { control: 'boolean', description: 'Whether the checkbox is in an indeterminate state.' },\n    disabled: { control: 'boolean', description: 'Renders the checkbox as disabled.' },\n    error: { control: 'boolean', description: 'Renders the checkbox in an error state.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The checkbox size.',\n    },\n    label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },\n    value: { control: 'text', description: 'The value associated with this checkbox.' },\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.checked) attrs.push('checked');\n  if (args.indeterminate) attrs.push('indeterminate');\n  if (args.disabled) attrs.push('disabled');\n  if (args.error) attrs.push('error');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  if (args.value !== undefined && args.value !== null) attrs.push(`value=\"${args.value}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  return `<ts-checkbox ${attrs.join(' ')}></ts-checkbox>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    checked: false,\n    indeterminate: false,\n    disabled: false,\n    error: false,\n    size: 'md',\n    label: 'I agree to the terms and conditions',\n    value: 'agree',\n    name: 'agreement',\n  },\n});\n\nexport const Sizes = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-checkbox size=\"sm\" label=\"Small checkbox\"></ts-checkbox>\n    <ts-checkbox size=\"md\" label=\"Medium checkbox\"></ts-checkbox>\n    <ts-checkbox size=\"lg\" label=\"Large checkbox\"></ts-checkbox>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-checkbox label=\"Unchecked\"></ts-checkbox>\n    <ts-checkbox checked label=\"Checked\"></ts-checkbox>\n    <ts-checkbox indeterminate label=\"Indeterminate\"></ts-checkbox>\n    <ts-checkbox disabled label=\"Disabled unchecked\"></ts-checkbox>\n    <ts-checkbox disabled checked label=\"Disabled checked\"></ts-checkbox>\n    <ts-checkbox error label=\"Error state\"></ts-checkbox>\n    <ts-checkbox error checked label=\"Error checked\"></ts-checkbox>\n  </ts-stack>\n`;\n\nexport const FormExample = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Newsletter Preferences</h3>\n    <ts-checkbox name=\"terms\" value=\"terms\" label=\"I agree to the terms and conditions\"></ts-checkbox>\n    <ts-checkbox name=\"newsletter\" value=\"newsletter\" checked label=\"Subscribe to weekly newsletter\"></ts-checkbox>\n    <ts-checkbox name=\"remember\" value=\"remember\" label=\"Remember me on this device\"></ts-checkbox>\n    <ts-checkbox name=\"marketing\" value=\"marketing\" label=\"Receive marketing communications\"></ts-checkbox>\n    <ts-checkbox name=\"beta\" value=\"beta\" disabled label=\"Join beta program (currently unavailable)\"></ts-checkbox>\n  </ts-stack>\n`;\n\nexport const WithSlotContent = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-checkbox value=\"custom\">\n      Accept the <a href=\"#\" style=\"color: #2563eb;\">privacy policy</a>\n    </ts-checkbox>\n    <ts-checkbox value=\"styled\">\n      <strong>Important:</strong> Enable two-factor authentication\n    </ts-checkbox>\n  </ts-stack>\n`;\n"]}

package/dist/collection/components/chip/chip.css

@@ -0,0 +1,210 @@
+/* ==========================================================================
+   ts-chip — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-chip-radius     Border radius (pill shape)
+     --ts-chip-height     Chip height per size
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  vertical-align: middle;
+  font-family: var(--ts-font-family-base);
+
+  --ts-chip-radius: var(--ts-radius-full, 9999px);
+  --ts-chip-height: 2rem;
+}
+
+/* ---- Base ---- */
+.chip__base {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ts-spacing-1);
+  block-size: var(--ts-chip-height);
+  padding-inline: var(--ts-spacing-3);
+  border-radius: var(--ts-chip-radius);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  outline: none;
+  transition:
+    background-color var(--ts-transition-fast),
+    border-color var(--ts-transition-fast),
+    color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+}
+
+.chip__base:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) {
+  --ts-chip-height: 1.5rem;
+}
+:host([size="sm"]) .chip__base {
+  padding-inline: var(--ts-spacing-2);
+  font-size: var(--ts-font-size-xs);
+}
+
+:host([size="lg"]) {
+  --ts-chip-height: 2.5rem;
+}
+:host([size="lg"]) .chip__base {
+  padding-inline: var(--ts-spacing-4);
+  font-size: var(--ts-font-size-md);
+}
+
+/* ---- Solid Variants ---- */
+:host([variant="neutral"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-neutral-200);
+  color: var(--ts-color-text-primary);
+}
+:host([variant="neutral"]:not([outline])) .chip__base:hover {
+  background-color: var(--ts-color-neutral-300);
+}
+
+:host([variant="primary"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-primary-100, var(--ts-color-primary-500));
+  color: var(--ts-color-primary-700, var(--ts-color-text-primary));
+}
+:host([variant="primary"]:not([outline])) .chip__base:hover {
+  background-color: var(--ts-color-primary-200, var(--ts-color-primary-600));
+}
+
+:host([variant="success"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-success-bg);
+  color: var(--ts-color-success-600);
+}
+
+:host([variant="warning"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-warning-bg);
+  color: var(--ts-color-warning-600);
+}
+
+:host([variant="danger"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-danger-bg);
+  color: var(--ts-color-danger-600);
+}
+
+:host([variant="info"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-info-bg);
+  color: var(--ts-color-info-600);
+}
+
+:host([variant="secondary"]:not([outline])) .chip__base {
+  background-color: var(--ts-color-neutral-100);
+  color: var(--ts-color-text-secondary);
+}
+
+/* ---- Outline Variants ---- */
+:host([outline]) .chip__base {
+  background-color: transparent;
+}
+
+:host([outline][variant="neutral"]) .chip__base {
+  border-color: var(--ts-color-border-strong);
+  color: var(--ts-color-text-secondary);
+}
+:host([outline][variant="neutral"]) .chip__base:hover {
+  background-color: var(--ts-color-bg-subtle);
+}
+
+:host([outline][variant="primary"]) .chip__base {
+  border-color: var(--ts-color-primary-500);
+  color: var(--ts-color-primary-600);
+}
+:host([outline][variant="primary"]) .chip__base:hover {
+  background-color: var(--ts-color-primary-100, var(--ts-color-interactive-primary-subtle));
+}
+
+:host([outline][variant="danger"]) .chip__base {
+  border-color: var(--ts-color-danger-500);
+  color: var(--ts-color-danger-600);
+}
+
+:host([outline][variant="success"]) .chip__base {
+  border-color: var(--ts-color-success-500, var(--ts-color-success-border));
+  color: var(--ts-color-success-600);
+}
+
+:host([outline][variant="warning"]) .chip__base {
+  border-color: var(--ts-color-warning-500, var(--ts-color-warning-border));
+  color: var(--ts-color-warning-600);
+}
+
+:host([outline][variant="info"]) .chip__base {
+  border-color: var(--ts-color-info-500, var(--ts-color-info-border));
+  color: var(--ts-color-info-600);
+}
+
+/* ---- Selected state ---- */
+:host([selected]) .chip__base {
+  background-color: var(--ts-color-interactive-primary);
+  color: var(--ts-color-text-on-primary);
+  border-color: var(--ts-color-interactive-primary);
+}
+:host([selected]) .chip__base:hover {
+  background-color: var(--ts-color-interactive-primary-hover);
+  border-color: var(--ts-color-interactive-primary-hover);
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) .chip__base {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Prefix ---- */
+.chip__prefix {
+  display: inline-flex;
+  align-items: center;
+}
+
+.chip__prefix:empty {
+  display: none;
+}
+
+/* ---- Label ---- */
+.chip__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ---- Remove button ---- */
+.chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.1em;
+  block-size: 1.1em;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 0.75em;
+  padding: 0;
+  margin-inline-start: var(--ts-spacing-1);
+  line-height: 1;
+  transition: opacity var(--ts-transition-fast);
+}
+
+.chip__remove:hover {
+  opacity: 1;
+}
+
+.chip__remove:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  opacity: 1;
+}
+
+.chip__remove:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}