@tessera-ui/core 0.4.0

package/dist/collection/components/badge/badge.js

@@ -0,0 +1,160 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for badge content.
+ *
+ * @part base - The badge element.
+ */
+export class TsBadge {
+    /** The badge's color variant. */
+    variant = 'primary';
+    /** The badge's size. */
+    size = 'md';
+    /** Renders the badge with rounded-pill shape. */
+    pill = false;
+    /** Renders the badge as a small dot indicator (content is hidden). */
+    dot = false;
+    /** Renders an outlined style instead of solid. */
+    outline = false;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '57fde8ab4ea72562b647c9278ed22e1167c21084', class: {
+                'ts-badge': true,
+                [`ts-badge--${this.variant}`]: true,
+                [`ts-badge--${this.size}`]: true,
+                'ts-badge--pill': this.pill,
+                'ts-badge--dot': this.dot,
+                'ts-badge--outline': this.outline,
+            } }, h("span", { key: '926775a060f709af0771e7f6ba6d0c8fee9bf451', class: "badge__base", part: "base" }, !this.dot && h("slot", { key: '48aaec48b5454d7f4c76092e28357ea588b0904e' }))));
+    }
+    static get is() { return "ts-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["badge.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 badge's color variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "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 badge's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "pill": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the badge with rounded-pill shape."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pill",
+                "defaultValue": "false"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the badge as a small dot indicator (content is hidden)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders an outlined style instead of solid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "outline",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IAClB,iCAAiC;IACR,OAAO,GAAc,SAAS,CAAC;IAExD,wBAAwB;IACC,IAAI,GAAW,IAAI,CAAC;IAE7C,iDAAiD;IACxB,IAAI,GAAG,KAAK,CAAC;IAEtC,sEAAsE;IAC7C,GAAG,GAAG,KAAK,CAAC;IAErC,kDAAkD;IACzB,OAAO,GAAG,KAAK,CAAC;IAEzC,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAChC,gBAAgB,EAAE,IAAI,CAAC,IAAI;gBAC3B,eAAe,EAAE,IAAI,CAAC,GAAG;gBACzB,mBAAmB,EAAE,IAAI,CAAC,OAAO;aAClC;YAED,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,IAClC,CAAC,IAAI,CAAC,GAAG,IAAI,8DAAQ,CACjB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize, TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for badge content.\n *\n * @part base - The badge element.\n */\n@Component({\n  tag: 'ts-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class TsBadge {\n  /** The badge's color variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'primary';\n\n  /** The badge's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the badge with rounded-pill shape. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Renders the badge as a small dot indicator (content is hidden). */\n  @Prop({ reflect: true }) dot = false;\n\n  /** Renders an outlined style instead of solid. */\n  @Prop({ reflect: true }) outline = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-badge': true,\n          [`ts-badge--${this.variant}`]: true,\n          [`ts-badge--${this.size}`]: true,\n          'ts-badge--pill': this.pill,\n          'ts-badge--dot': this.dot,\n          'ts-badge--outline': this.outline,\n        }}\n      >\n        <span class=\"badge__base\" part=\"base\">\n          {!this.dot && <slot />}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,193 @@
+// Hand-written stories for ts-badge
+export default {
+    title: 'Components/Badge',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
+            description: 'The badge\'s color variant.',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The badge\'s size.',
+        },
+        pill: { control: 'boolean', description: 'Renders the badge with rounded-pill shape.' },
+        dot: { control: 'boolean', description: 'Renders the badge as a small dot indicator (content is hidden).' },
+        outline: { control: 'boolean', description: 'Renders an outlined style instead of solid.' },
+        slotContent: { control: 'text', description: 'Badge label text' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined && args.variant !== null)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.pill)
+        attrs.push('pill');
+    if (args.dot)
+        attrs.push('dot');
+    if (args.outline)
+        attrs.push('outline');
+    return `<ts-badge ${attrs.join(' ')}>${args.slotContent || 'Badge'}</ts-badge>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'primary',
+        size: 'md',
+        pill: false,
+        dot: false,
+        outline: false,
+        slotContent: 'New',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+    <ts-badge variant="primary">Primary</ts-badge>
+    <ts-badge variant="secondary">Secondary</ts-badge>
+    <ts-badge variant="success">Success</ts-badge>
+    <ts-badge variant="warning">Warning</ts-badge>
+    <ts-badge variant="danger">Danger</ts-badge>
+    <ts-badge variant="info">Info</ts-badge>
+    <ts-badge variant="neutral">Neutral</ts-badge>
+  </div>
+`;
+export const Sizes = () => `
+  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+    <ts-badge size="xs">Extra Small</ts-badge>
+    <ts-badge size="sm">Small</ts-badge>
+    <ts-badge size="md">Medium</ts-badge>
+    <ts-badge size="lg">Large</ts-badge>
+    <ts-badge size="xl">Extra Large</ts-badge>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px;">
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Solid (default)</p>
+      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+        <ts-badge variant="primary">Active</ts-badge>
+        <ts-badge variant="success">Completed</ts-badge>
+        <ts-badge variant="warning">Pending</ts-badge>
+        <ts-badge variant="danger">Failed</ts-badge>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Outline</p>
+      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+        <ts-badge variant="primary" outline>Active</ts-badge>
+        <ts-badge variant="success" outline>Completed</ts-badge>
+        <ts-badge variant="warning" outline>Pending</ts-badge>
+        <ts-badge variant="danger" outline>Failed</ts-badge>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Pill</p>
+      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+        <ts-badge variant="primary" pill>12</ts-badge>
+        <ts-badge variant="danger" pill>99+</ts-badge>
+        <ts-badge variant="success" pill>Online</ts-badge>
+        <ts-badge variant="neutral" pill>Draft</ts-badge>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Dot Indicator</p>
+      <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
+        <span style="display: inline-flex; align-items: center; gap: 8px;">
+          <ts-badge variant="success" dot></ts-badge> Online
+        </span>
+        <span style="display: inline-flex; align-items: center; gap: 8px;">
+          <ts-badge variant="warning" dot></ts-badge> Away
+        </span>
+        <span style="display: inline-flex; align-items: center; gap: 8px;">
+          <ts-badge variant="danger" dot></ts-badge> Busy
+        </span>
+        <span style="display: inline-flex; align-items: center; gap: 8px;">
+          <ts-badge variant="neutral" dot></ts-badge> Offline
+        </span>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Outline + Pill</p>
+      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
+        <ts-badge variant="primary" outline pill>v2.1.0</ts-badge>
+        <ts-badge variant="info" outline pill>Beta</ts-badge>
+        <ts-badge variant="warning" outline pill>Experimental</ts-badge>
+        <ts-badge variant="neutral" outline pill>Archived</ts-badge>
+      </div>
+    </div>
+  </div>
+`;
+export const WithIcons = () => `
+  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
+    <span style="display: inline-flex; align-items: center; gap: 6px;">
+      <ts-icon name="bell" size="sm"></ts-icon>
+      Notifications
+      <ts-badge variant="danger" pill size="sm">5</ts-badge>
+    </span>
+    <span style="display: inline-flex; align-items: center; gap: 6px;">
+      <ts-icon name="mail" size="sm"></ts-icon>
+      Messages
+      <ts-badge variant="primary" pill size="sm">23</ts-badge>
+    </span>
+    <span style="display: inline-flex; align-items: center; gap: 6px;">
+      <ts-icon name="git-pull-request" size="sm"></ts-icon>
+      Pull Requests
+      <ts-badge variant="success" pill size="sm">2</ts-badge>
+    </span>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 500px;">
+    <ts-card bordered>
+      <span slot="header">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <h3 style="margin: 0;">Deployments</h3>
+          <ts-badge variant="success" pill size="sm">3 active</ts-badge>
+        </div>
+      </span>
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Production</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">main @ a1b2c3d</div>
+          </div>
+          <ts-badge variant="success" pill size="sm">Live</ts-badge>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Staging</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">develop @ e4f5g6h</div>
+          </div>
+          <ts-badge variant="info" pill size="sm">Building</ts-badge>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Preview</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">feature/auth @ i7j8k9l</div>
+          </div>
+          <ts-badge variant="warning" pill size="sm">Queued</ts-badge>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Canary</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">release/v3 @ m0n1o2p</div>
+          </div>
+          <ts-badge variant="danger" pill size="sm">Failed</ts-badge>
+        </div>
+      </div>
+    </ts-card>
+
+    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+      <ts-badge variant="primary" outline pill>React</ts-badge>
+      <ts-badge variant="success" outline pill>Node.js</ts-badge>
+      <ts-badge variant="info" outline pill>TypeScript</ts-badge>
+      <ts-badge variant="warning" outline pill>GraphQL</ts-badge>
+      <ts-badge variant="danger" outline pill>Redis</ts-badge>
+      <ts-badge variant="neutral" outline pill>Docker</ts-badge>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=badge.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,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,6BAA6B;SAC3C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,oBAAoB;SAClC;QACD,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4CAA4C,EAAE;QACvF,GAAG,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,iEAAiE,EAAE;QAC3G,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,6CAA6C,EAAE;QAC3F,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE;KAClE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjG,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,GAAG;QAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,OAAO,aAAa,CAAC;AAClF,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,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,KAAK;KACnB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkBtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxC,CAAC","sourcesContent":["// Hand-written stories for ts-badge\n\nexport default {\n  title: 'Components/Badge',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The badge\\'s color variant.',\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The badge\\'s size.',\n    },\n    pill: { control: 'boolean', description: 'Renders the badge with rounded-pill shape.' },\n    dot: { control: 'boolean', description: 'Renders the badge as a small dot indicator (content is hidden).' },\n    outline: { control: 'boolean', description: 'Renders an outlined style instead of solid.' },\n    slotContent: { control: 'text', description: 'Badge label text' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.pill) attrs.push('pill');\n  if (args.dot) attrs.push('dot');\n  if (args.outline) attrs.push('outline');\n  return `<ts-badge ${attrs.join(' ')}>${args.slotContent || 'Badge'}</ts-badge>`;\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    pill: false,\n    dot: false,\n    outline: false,\n    slotContent: 'New',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-badge variant=\"primary\">Primary</ts-badge>\n    <ts-badge variant=\"secondary\">Secondary</ts-badge>\n    <ts-badge variant=\"success\">Success</ts-badge>\n    <ts-badge variant=\"warning\">Warning</ts-badge>\n    <ts-badge variant=\"danger\">Danger</ts-badge>\n    <ts-badge variant=\"info\">Info</ts-badge>\n    <ts-badge variant=\"neutral\">Neutral</ts-badge>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-badge size=\"xs\">Extra Small</ts-badge>\n    <ts-badge size=\"sm\">Small</ts-badge>\n    <ts-badge size=\"md\">Medium</ts-badge>\n    <ts-badge size=\"lg\">Large</ts-badge>\n    <ts-badge size=\"xl\">Extra Large</ts-badge>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Solid (default)</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\">Active</ts-badge>\n        <ts-badge variant=\"success\">Completed</ts-badge>\n        <ts-badge variant=\"warning\">Pending</ts-badge>\n        <ts-badge variant=\"danger\">Failed</ts-badge>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Outline</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\" outline>Active</ts-badge>\n        <ts-badge variant=\"success\" outline>Completed</ts-badge>\n        <ts-badge variant=\"warning\" outline>Pending</ts-badge>\n        <ts-badge variant=\"danger\" outline>Failed</ts-badge>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Pill</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\" pill>12</ts-badge>\n        <ts-badge variant=\"danger\" pill>99+</ts-badge>\n        <ts-badge variant=\"success\" pill>Online</ts-badge>\n        <ts-badge variant=\"neutral\" pill>Draft</ts-badge>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Dot Indicator</p>\n      <div style=\"display: flex; gap: 24px; align-items: center; flex-wrap: wrap;\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"success\" dot></ts-badge> Online\n        </span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"warning\" dot></ts-badge> Away\n        </span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"danger\" dot></ts-badge> Busy\n        </span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"neutral\" dot></ts-badge> Offline\n        </span>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Outline + Pill</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\" outline pill>v2.1.0</ts-badge>\n        <ts-badge variant=\"info\" outline pill>Beta</ts-badge>\n        <ts-badge variant=\"warning\" outline pill>Experimental</ts-badge>\n        <ts-badge variant=\"neutral\" outline pill>Archived</ts-badge>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const WithIcons = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n      <ts-icon name=\"bell\" size=\"sm\"></ts-icon>\n      Notifications\n      <ts-badge variant=\"danger\" pill size=\"sm\">5</ts-badge>\n    </span>\n    <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n      <ts-icon name=\"mail\" size=\"sm\"></ts-icon>\n      Messages\n      <ts-badge variant=\"primary\" pill size=\"sm\">23</ts-badge>\n    </span>\n    <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n      <ts-icon name=\"git-pull-request\" size=\"sm\"></ts-icon>\n      Pull Requests\n      <ts-badge variant=\"success\" pill size=\"sm\">2</ts-badge>\n    </span>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 500px;\">\n    <ts-card bordered>\n      <span slot=\"header\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <h3 style=\"margin: 0;\">Deployments</h3>\n          <ts-badge variant=\"success\" pill size=\"sm\">3 active</ts-badge>\n        </div>\n      </span>\n      <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Production</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">main @ a1b2c3d</div>\n          </div>\n          <ts-badge variant=\"success\" pill size=\"sm\">Live</ts-badge>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Staging</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">develop @ e4f5g6h</div>\n          </div>\n          <ts-badge variant=\"info\" pill size=\"sm\">Building</ts-badge>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Preview</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">feature/auth @ i7j8k9l</div>\n          </div>\n          <ts-badge variant=\"warning\" pill size=\"sm\">Queued</ts-badge>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Canary</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">release/v3 @ m0n1o2p</div>\n          </div>\n          <ts-badge variant=\"danger\" pill size=\"sm\">Failed</ts-badge>\n        </div>\n      </div>\n    </ts-card>\n\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n      <ts-badge variant=\"primary\" outline pill>React</ts-badge>\n      <ts-badge variant=\"success\" outline pill>Node.js</ts-badge>\n      <ts-badge variant=\"info\" outline pill>TypeScript</ts-badge>\n      <ts-badge variant=\"warning\" outline pill>GraphQL</ts-badge>\n      <ts-badge variant=\"danger\" outline pill>Redis</ts-badge>\n      <ts-badge variant=\"neutral\" outline pill>Docker</ts-badge>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/banner/banner.css

@@ -0,0 +1,129 @@
+/* ==========================================================================
+   ts-banner — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-banner-bg             Background color
+     --ts-banner-border-color   Border color
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-banner-bg: var(--ts-color-info-bg);
+  --ts-banner-border-color: var(--ts-color-info-border);
+}
+
+:host([sticky]) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--ts-z-sticky, 100);
+}
+
+.banner__base {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-spacing-3);
+  padding-inline: var(--ts-spacing-4);
+  padding-block: var(--ts-spacing-3);
+  background-color: var(--ts-banner-bg);
+  border-block-end: 1px solid var(--ts-banner-border-color);
+  font-size: var(--ts-font-size-sm);
+  line-height: var(--ts-line-height-normal);
+  inline-size: 100%;
+}
+
+/* ---- Variants ---- */
+:host([variant="info"]) {
+  --ts-banner-bg: var(--ts-color-info-bg);
+  --ts-banner-border-color: var(--ts-color-info-border);
+}
+:host([variant="info"]) .banner__base {
+  color: var(--ts-color-info-600);
+}
+
+:host([variant="success"]) {
+  --ts-banner-bg: var(--ts-color-success-bg);
+  --ts-banner-border-color: var(--ts-color-success-border);
+}
+:host([variant="success"]) .banner__base {
+  color: var(--ts-color-success-600);
+}
+
+:host([variant="warning"]) {
+  --ts-banner-bg: var(--ts-color-warning-bg);
+  --ts-banner-border-color: var(--ts-color-warning-border);
+}
+:host([variant="warning"]) .banner__base {
+  color: var(--ts-color-warning-600);
+}
+
+:host([variant="danger"]) {
+  --ts-banner-bg: var(--ts-color-danger-bg);
+  --ts-banner-border-color: var(--ts-color-danger-border);
+}
+:host([variant="danger"]) .banner__base {
+  color: var(--ts-color-danger-600);
+}
+
+:host([variant="neutral"]) {
+  --ts-banner-bg: var(--ts-color-bg-subtle);
+  --ts-banner-border-color: var(--ts-color-border-subtle);
+}
+:host([variant="neutral"]) .banner__base {
+  color: var(--ts-color-text-secondary);
+}
+
+/* ---- Icon ---- */
+.banner__icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.15em;
+  flex-shrink: 0;
+}
+
+/* ---- Message ---- */
+.banner__message {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/* ---- Action ---- */
+.banner__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.banner__action:empty {
+  display: none;
+}
+
+/* ---- Close Button ---- */
+.banner__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  border: none;
+  border-radius: var(--ts-radius-sm);
+  background: transparent;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  font-size: 0.8em;
+  transition: opacity var(--ts-transition-fast);
+  padding: 0;
+  line-height: 1;
+}
+
+.banner__close:hover {
+  opacity: 1;
+}
+
+.banner__close:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  opacity: 1;
+}