@tessera-ui/core 0.4.0

package/dist/collection/components/chip/chip.js

@@ -0,0 +1,253 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for chip label.
+ * @slot prefix - Icon or content before the label.
+ *
+ * @part base - The chip container.
+ * @part label - The label wrapper.
+ * @part prefix - The prefix slot wrapper.
+ * @part remove - The remove button.
+ */
+export class TsChip {
+    /** The chip's semantic variant. */
+    variant = 'neutral';
+    /** The chip's size. */
+    size = 'md';
+    /** Whether the chip shows a remove button. */
+    removable = false;
+    /** Whether the chip is disabled. */
+    disabled = false;
+    /** Whether the chip is selected. */
+    selected = false;
+    /** Whether to render as outline style. */
+    outline = false;
+    /** Emitted when the remove button is clicked. */
+    tsRemove;
+    /** Emitted when the chip body is clicked. */
+    tsClick;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.tsClick.emit();
+    };
+    handleRemove = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.tsRemove.emit();
+    };
+    handleKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.tsClick.emit();
+        }
+    };
+    handleRemoveKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.tsRemove.emit();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isInteractive = !this.disabled;
+        return (h(Host, { key: 'cf6fed27509592a4105f794976e8995ca03ddecd', class: {
+                'ts-chip': true,
+                [`ts-chip--${this.variant}`]: true,
+                [`ts-chip--${this.size}`]: true,
+                'ts-chip--selected': this.selected,
+                'ts-chip--outline': this.outline,
+                'ts-chip--disabled': this.disabled,
+                'ts-chip--removable': this.removable,
+            } }, h("span", { key: '355bf33f71eb0761f766a5363bc317066dfc1b5c', class: "chip__base", part: "base", role: "button", tabindex: isInteractive ? '0' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-pressed": this.selected ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("span", { key: '8476fe8599f535022b2afc7c6229bd92ea3549ff', class: "chip__prefix", part: "prefix" }, h("slot", { key: '2379133e14d192afd474e06ce3a2140a6a7dcfa7', name: "prefix" })), h("span", { key: '8a1053c6315f717a12fc61f0dc3ffeb458a6fbb2', class: "chip__label", part: "label" }, h("slot", { key: '3d46aefd8fd7a03d6bd3d21d5679a6b90361b1ed' })), this.removable && (h("button", { key: '41de0966096540a5f9f29168a181a353661ee934', class: "chip__remove", part: "remove", type: "button", "aria-label": "Remove", disabled: this.disabled, onClick: this.handleRemove, onKeyDown: this.handleRemoveKeydown }, "\\u2715")))));
+    }
+    static get is() { return "ts-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsVariant",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TsVariant": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsVariant",
+                            "referenceLocation": "TsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The chip's semantic variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The chip's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "removable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the chip shows a remove button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "removable",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the chip is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the chip is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render as outline style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "outline",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsRemove",
+                "name": "tsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the remove button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsClick",
+                "name": "tsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the chip body is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIhE;;;;;;;;GAQG;AAMH,MAAM,OAAO,MAAM;IACjB,mCAAmC;IACV,OAAO,GAAc,SAAS,CAAC;IAExD,uBAAuB;IACE,IAAI,GAAW,IAAI,CAAC;IAE7C,8CAA8C;IACrB,SAAS,GAAG,KAAK,CAAC;IAE3C,oCAAoC;IACX,QAAQ,GAAG,KAAK,CAAC;IAE1C,oCAAoC;IACX,QAAQ,GAAG,KAAK,CAAC;IAE1C,0CAA0C;IACjB,OAAO,GAAG,KAAK,CAAC;IAEzC,iDAAiD;IACf,QAAQ,CAAsB;IAEhE,6CAA6C;IACZ,OAAO,CAAsB;IAEtD,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,KAAiB,EAAQ,EAAE;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEM,mBAAmB,GAAG,CAAC,KAAoB,EAAQ,EAAE;QAC3D,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAErC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBAClC,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAC/B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,kBAAkB,EAAE,IAAI,CAAC,OAAO;gBAChC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,oBAAoB,EAAE,IAAI,CAAC,SAAS;aACrC;YAED,6DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,mBAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;oBACtC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACjB;gBAEP,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO;oBACpC,8DAAQ,CACH;gBAEN,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,mBAAmB,cAG5B,CACV,CACI,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant, TsSize } from '../../types';\n\n/**\n * @slot - Default slot for chip label.\n * @slot prefix - Icon or content before the label.\n *\n * @part base - The chip container.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part remove - The remove button.\n */\n@Component({\n  tag: 'ts-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class TsChip {\n  /** The chip's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'neutral';\n\n  /** The chip's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Whether the chip shows a remove button. */\n  @Prop({ reflect: true }) removable = false;\n\n  /** Whether the chip is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Whether the chip is selected. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Whether to render as outline style. */\n  @Prop({ reflect: true }) outline = false;\n\n  /** Emitted when the remove button is clicked. */\n  @Event({ eventName: 'tsRemove' }) tsRemove!: EventEmitter<void>;\n\n  /** Emitted when the chip body is clicked. */\n  @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.tsClick.emit();\n  };\n\n  private handleRemove = (event: MouseEvent): void => {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.tsRemove.emit();\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.tsClick.emit();\n    }\n  };\n\n  private handleRemoveKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tsRemove.emit();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isInteractive = !this.disabled;\n\n    return (\n      <Host\n        class={{\n          'ts-chip': true,\n          [`ts-chip--${this.variant}`]: true,\n          [`ts-chip--${this.size}`]: true,\n          'ts-chip--selected': this.selected,\n          'ts-chip--outline': this.outline,\n          'ts-chip--disabled': this.disabled,\n          'ts-chip--removable': this.removable,\n        }}\n      >\n        <span\n          class=\"chip__base\"\n          part=\"base\"\n          role=\"button\"\n          tabindex={isInteractive ? '0' : undefined}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          aria-pressed={this.selected ? 'true' : undefined}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <span class=\"chip__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"chip__label\" part=\"label\">\n            <slot />\n          </span>\n\n          {this.removable && (\n            <button\n              class=\"chip__remove\"\n              part=\"remove\"\n              type=\"button\"\n              aria-label=\"Remove\"\n              disabled={this.disabled}\n              onClick={this.handleRemove}\n              onKeyDown={this.handleRemoveKeydown}\n            >\n              \\u2715\n            </button>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,139 @@
+// Hand-written stories for ts-chip
+export default {
+    title: 'Components/Chip',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
+            description: 'The chip\'s semantic variant.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The chip\'s size.',
+        },
+        removable: {
+            control: 'boolean',
+            description: 'Whether the chip shows a remove button.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the chip is disabled.',
+        },
+        selected: {
+            control: 'boolean',
+            description: 'Whether the chip is selected.',
+        },
+        outline: {
+            control: 'boolean',
+            description: 'Whether to render as outline style.',
+        },
+        slotContent: {
+            control: 'text',
+            description: 'Default slot content',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    if (args.removable)
+        attrs.push('removable');
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.selected)
+        attrs.push('selected');
+    if (args.outline)
+        attrs.push('outline');
+    return `<ts-chip ${attrs.join(' ')}>${args.slotContent || ''}</ts-chip>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'primary',
+        size: 'md',
+        removable: false,
+        disabled: false,
+        selected: false,
+        outline: false,
+        slotContent: 'React',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+    <ts-chip variant="primary">Primary</ts-chip>
+    <ts-chip variant="secondary">Secondary</ts-chip>
+    <ts-chip variant="success">Success</ts-chip>
+    <ts-chip variant="warning">Warning</ts-chip>
+    <ts-chip variant="danger">Danger</ts-chip>
+    <ts-chip variant="info">Info</ts-chip>
+    <ts-chip variant="neutral">Neutral</ts-chip>
+  </div>
+`;
+export const Sizes = () => `
+  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+    <ts-chip size="sm">Small</ts-chip>
+    <ts-chip size="md">Medium</ts-chip>
+    <ts-chip size="lg">Large</ts-chip>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Default</p>
+      <ts-chip>React</ts-chip>
+      <ts-chip>Vue</ts-chip>
+      <ts-chip>Angular</ts-chip>
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Selected</p>
+      <ts-chip selected>React</ts-chip>
+      <ts-chip selected>Vue</ts-chip>
+      <ts-chip>Angular</ts-chip>
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Disabled</p>
+      <ts-chip disabled>React</ts-chip>
+      <ts-chip disabled>Vue</ts-chip>
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Outline</p>
+      <ts-chip outline>React</ts-chip>
+      <ts-chip outline variant="success">Vue</ts-chip>
+      <ts-chip outline variant="danger">Angular</ts-chip>
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
+      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Removable</p>
+      <ts-chip removable>React</ts-chip>
+      <ts-chip removable>Vue</ts-chip>
+      <ts-chip removable>Angular</ts-chip>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="font-family: sans-serif;">
+    <div style="margin-bottom: 24px;">
+      <p style="margin: 0 0 8px; font-weight: 600;">Tech Stack</p>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <ts-chip variant="primary" removable>React</ts-chip>
+        <ts-chip variant="success" removable>Node.js</ts-chip>
+        <ts-chip variant="info" removable>TypeScript</ts-chip>
+        <ts-chip variant="warning" removable>PostgreSQL</ts-chip>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600;">Filter by category</p>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <ts-chip selected outline>All</ts-chip>
+        <ts-chip outline>Frontend</ts-chip>
+        <ts-chip outline>Backend</ts-chip>
+        <ts-chip outline>DevOps</ts-chip>
+        <ts-chip outline>Design</ts-chip>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=chip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC;YACpF,WAAW,EAAE,+BAA+B;SAC7C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,mBAAmB;SACjC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC7C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC7C;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qCAAqC;SACnD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACpC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,OAAO,YAAY,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,YAAY,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,OAAO;KACrB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBxC,CAAC","sourcesContent":["// Hand-written stories for ts-chip\n\nexport default {\n  title: 'Components/Chip',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The chip\\'s semantic variant.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The chip\\'s size.',\n    },\n    removable: {\n      control: 'boolean',\n      description: 'Whether the chip shows a remove button.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Whether the chip is disabled.',\n    },\n    selected: {\n      control: 'boolean',\n      description: 'Whether the chip is selected.',\n    },\n    outline: {\n      control: 'boolean',\n      description: 'Whether to render as outline style.',\n    },\n    slotContent: {\n      control: 'text',\n      description: 'Default slot content',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.removable) attrs.push('removable');\n  if (args.disabled) attrs.push('disabled');\n  if (args.selected) attrs.push('selected');\n  if (args.outline) attrs.push('outline');\n  return `<ts-chip ${attrs.join(' ')}>${args.slotContent || ''}</ts-chip>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'primary',\n    size: 'md',\n    removable: false,\n    disabled: false,\n    selected: false,\n    outline: false,\n    slotContent: 'React',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n    <ts-chip variant=\"primary\">Primary</ts-chip>\n    <ts-chip variant=\"secondary\">Secondary</ts-chip>\n    <ts-chip variant=\"success\">Success</ts-chip>\n    <ts-chip variant=\"warning\">Warning</ts-chip>\n    <ts-chip variant=\"danger\">Danger</ts-chip>\n    <ts-chip variant=\"info\">Info</ts-chip>\n    <ts-chip variant=\"neutral\">Neutral</ts-chip>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n    <ts-chip size=\"sm\">Small</ts-chip>\n    <ts-chip size=\"md\">Medium</ts-chip>\n    <ts-chip size=\"lg\">Large</ts-chip>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Default</p>\n      <ts-chip>React</ts-chip>\n      <ts-chip>Vue</ts-chip>\n      <ts-chip>Angular</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Selected</p>\n      <ts-chip selected>React</ts-chip>\n      <ts-chip selected>Vue</ts-chip>\n      <ts-chip>Angular</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Disabled</p>\n      <ts-chip disabled>React</ts-chip>\n      <ts-chip disabled>Vue</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Outline</p>\n      <ts-chip outline>React</ts-chip>\n      <ts-chip outline variant=\"success\">Vue</ts-chip>\n      <ts-chip outline variant=\"danger\">Angular</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Removable</p>\n      <ts-chip removable>React</ts-chip>\n      <ts-chip removable>Vue</ts-chip>\n      <ts-chip removable>Angular</ts-chip>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <div style=\"margin-bottom: 24px;\">\n      <p style=\"margin: 0 0 8px; font-weight: 600;\">Tech Stack</p>\n      <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n        <ts-chip variant=\"primary\" removable>React</ts-chip>\n        <ts-chip variant=\"success\" removable>Node.js</ts-chip>\n        <ts-chip variant=\"info\" removable>TypeScript</ts-chip>\n        <ts-chip variant=\"warning\" removable>PostgreSQL</ts-chip>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600;\">Filter by category</p>\n      <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n        <ts-chip selected outline>All</ts-chip>\n        <ts-chip outline>Frontend</ts-chip>\n        <ts-chip outline>Backend</ts-chip>\n        <ts-chip outline>DevOps</ts-chip>\n        <ts-chip outline>Design</ts-chip>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/container/container.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+   ts-container — Shadow DOM Scoped Styles
+
+   Centered max-width container with responsive padding.
+
+   Component tokens (Tier 3):
+     --ts-container-padding   Horizontal padding
+   ========================================================================== */
+
+:host {
+  display: block;
+  margin-inline: auto;
+  width: 100%;
+  box-sizing: border-box;
+
+  --ts-container-padding: var(--ts-grid-margin);
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) {
+  max-width: 640px;
+}
+
+:host([size="md"]) {
+  max-width: 768px;
+}
+
+:host([size="lg"]) {
+  max-width: 1024px;
+}
+
+:host([size="xl"]) {
+  max-width: 1280px;
+}
+
+:host([size="full"]) {
+  max-width: 100%;
+}
+
+/* ---- Padding ---- */
+:host(:not(.ts-container--no-padding)) {
+  padding-inline: var(--ts-container-padding);
+}
+
+:host(.ts-container--no-padding) {
+  padding-inline: 0;
+}

package/dist/collection/components/container/container.js

@@ -0,0 +1,76 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for container content.
+ *
+ * @part base - The container element.
+ */
+export class TsContainer {
+    /** The maximum width of the container. */
+    size = 'lg';
+    /** Whether to apply horizontal padding. */
+    padding = true;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '45f43cf6088754adc81c04a59249361ee1484d73', class: {
+                'ts-container': true,
+                'ts-container--no-padding': !this.padding,
+            } }, h("slot", { key: '1b302d969a21f7c35bfa8e54523df064171fdaa5' })));
+    }
+    static get is() { return "ts-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum width of the container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "padding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to apply horizontal padding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "padding",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IACtB,0CAA0C;IACjB,IAAI,GAAuC,IAAI,CAAC;IAEzE,2CAA2C;IAClB,OAAO,GAAY,IAAI,CAAC;IAEjD,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,CAAC,IAAI,CAAC,OAAO;aAC1C;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for container content.\n *\n * @part base - The container element.\n */\n@Component({\n  tag: 'ts-container',\n  styleUrl: 'container.css',\n  shadow: true,\n})\nexport class TsContainer {\n  /** The maximum width of the container. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';\n\n  /** Whether to apply horizontal padding. */\n  @Prop({ reflect: true }) padding: boolean = true;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-container': true,\n          'ts-container--no-padding': !this.padding,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}