@tessera-ui/core 0.4.0

package/dist/collection/components/card/card.css

@@ -0,0 +1,108 @@
+/* ==========================================================================
+   ts-card — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-card-bg             Card background
+     --ts-card-radius         Border radius
+     --ts-card-border-color   Border color (when bordered)
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-card-bg: var(--ts-color-bg-elevated);
+  --ts-card-radius: var(--ts-shape-container);
+  --ts-card-border-color: var(--ts-color-border-subtle);
+}
+
+.card__base {
+  border-radius: var(--ts-card-radius);
+  background-color: var(--ts-card-bg);
+  border: 1px solid transparent;
+  overflow: hidden;
+  transition:
+    box-shadow var(--ts-transition-normal),
+    transform var(--ts-transition-normal),
+    border-color var(--ts-transition-normal);
+}
+
+/* ---- Elevation ---- */
+:host([elevation="none"]) .card__base { box-shadow: none; }
+:host([elevation="sm"]) .card__base   { box-shadow: var(--ts-shadow-sm); }
+:host([elevation="md"]) .card__base   { box-shadow: var(--ts-shadow-md); }
+:host([elevation="lg"]) .card__base   { box-shadow: var(--ts-shadow-lg); }
+:host([elevation="xl"]) .card__base   { box-shadow: var(--ts-shadow-xl); }
+
+/* ---- Bordered ---- */
+:host([bordered]) .card__base {
+  border: 1px solid var(--ts-card-border-color);
+}
+
+/* ---- Interactive ---- */
+:host([interactive]) {
+  cursor: pointer;
+}
+
+:host([interactive]) .card__base:hover {
+  box-shadow: var(--ts-shadow-lg);
+}
+
+:host([interactive]) .card__base:active {
+  box-shadow: var(--ts-shadow-md);
+}
+
+:host([interactive]:focus-visible) .card__base {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Sections ---- */
+.card__media {
+  overflow: hidden;
+}
+
+.card__media:empty {
+  display: none;
+}
+
+.card__media ::slotted(img) {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.card__header {
+  border-bottom: 1px solid var(--ts-card-border-color);
+}
+
+.card__header:empty {
+  display: none;
+  border-bottom: none;
+}
+
+.card__footer {
+  border-top: 1px solid var(--ts-card-border-color);
+}
+
+.card__footer:empty {
+  display: none;
+  border-top: none;
+}
+
+/* ---- Padding ---- */
+:host([padding="none"]) .card__header,
+:host([padding="none"]) .card__body,
+:host([padding="none"]) .card__footer { padding: 0; }
+
+:host([padding="sm"]) .card__header,
+:host([padding="sm"]) .card__body,
+:host([padding="sm"]) .card__footer { padding: var(--ts-spacing-3); }
+
+:host([padding="md"]) .card__header,
+:host([padding="md"]) .card__body,
+:host([padding="md"]) .card__footer { padding: var(--ts-spacing-4); }
+
+:host([padding="lg"]) .card__header,
+:host([padding="lg"]) .card__body,
+:host([padding="lg"]) .card__footer { padding: var(--ts-spacing-6); }

package/dist/collection/components/card/card.js

@@ -0,0 +1,130 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for card body content.
+ * @slot header - Card header content.
+ * @slot footer - Card footer content.
+ * @slot media - Media content (image, video) displayed at the top.
+ *
+ * @part base - The card container.
+ * @part header - The header wrapper.
+ * @part body - The body wrapper.
+ * @part footer - The footer wrapper.
+ * @part media - The media wrapper.
+ */
+export class TsCard {
+    /** Elevation level controlling the shadow depth. */
+    elevation = 'sm';
+    /** Makes the card interactive (hover effect, cursor pointer). */
+    interactive = false;
+    /** Border style variant. */
+    bordered = false;
+    /** Padding size for the card body. */
+    padding = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'df768436768c2a229b760dc2e1ec17eae2822231', class: {
+                'ts-card': true,
+                [`ts-card--elevation-${this.elevation}`]: true,
+                [`ts-card--padding-${this.padding}`]: true,
+                'ts-card--interactive': this.interactive,
+                'ts-card--bordered': this.bordered,
+            }, role: this.interactive ? 'button' : undefined, tabindex: this.interactive ? '0' : undefined }, h("div", { key: 'bbbaa65e8096402164f96625b2be3600e49fcdc1', class: "card__base", part: "base" }, h("div", { key: 'ad3c8630cdcdf5d4a7ab19c8c41a70f9d63c80fb', class: "card__media", part: "media" }, h("slot", { key: '2b7edddbfa16039b41c3ee0b689595a1de50a054', name: "media" })), h("div", { key: '6e606c675ba1320106106994e74044af137149ce', class: "card__header", part: "header" }, h("slot", { key: '979b30143ea98f5df47272753e0c3a56c17dadb6', name: "header" })), h("div", { key: '78edb38cedd9ea7546c8755b9901c03553daf361', class: "card__body", part: "body" }, h("slot", { key: '0675cffbc1a040606c071467d00021934ecff188' })), h("div", { key: 'f07414c17dc68315cf88e30e509f2736e274e3f2', class: "card__footer", part: "footer" }, h("slot", { key: '9a7eae045f925a2f0e4e21c857293ad7bc12ea0c', name: "footer" })))));
+    }
+    static get is() { return "ts-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "elevation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Elevation level controlling the shadow depth."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "elevation",
+                "defaultValue": "'sm'"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the card interactive (hover effect, cursor pointer)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border style variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding size for the card body."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "padding",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,MAAM;IACjB,oDAAoD;IAC3B,SAAS,GAAuC,IAAI,CAAC;IAE9E,iEAAiE;IACxC,WAAW,GAAG,KAAK,CAAC;IAE7C,4BAA4B;IACH,QAAQ,GAAG,KAAK,CAAC;IAE1C,sCAAsC;IACb,OAAO,GAAgC,IAAI,CAAC;IAErE,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,sBAAsB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;gBAC9C,CAAC,oBAAoB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBAC1C,sBAAsB,EAAE,IAAI,CAAC,WAAW;gBACxC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,EACD,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;YAE5C,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM;gBACjC,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO;oBACnC,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;oBACrC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBAEN,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM;oBACjC,8DAAQ,CACJ;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;oBACrC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for card body content.\n * @slot header - Card header content.\n * @slot footer - Card footer content.\n * @slot media - Media content (image, video) displayed at the top.\n *\n * @part base - The card container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part media - The media wrapper.\n */\n@Component({\n  tag: 'ts-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class TsCard {\n  /** Elevation level controlling the shadow depth. */\n  @Prop({ reflect: true }) elevation: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Makes the card interactive (hover effect, cursor pointer). */\n  @Prop({ reflect: true }) interactive = false;\n\n  /** Border style variant. */\n  @Prop({ reflect: true }) bordered = false;\n\n  /** Padding size for the card body. */\n  @Prop({ reflect: true }) padding: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-card': true,\n          [`ts-card--elevation-${this.elevation}`]: true,\n          [`ts-card--padding-${this.padding}`]: true,\n          'ts-card--interactive': this.interactive,\n          'ts-card--bordered': this.bordered,\n        }}\n        role={this.interactive ? 'button' : undefined}\n        tabindex={this.interactive ? '0' : undefined}\n      >\n        <div class=\"card__base\" part=\"base\">\n          <div class=\"card__media\" part=\"media\">\n            <slot name=\"media\" />\n          </div>\n\n          <div class=\"card__header\" part=\"header\">\n            <slot name=\"header\" />\n          </div>\n\n          <div class=\"card__body\" part=\"body\">\n            <slot />\n          </div>\n\n          <div class=\"card__footer\" part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,221 @@
+// Hand-written stories for ts-card
+export default {
+    title: 'Components/Card',
+    tags: ['autodocs'],
+    argTypes: {
+        elevation: {
+            control: 'select',
+            options: ['none', 'sm', 'md', 'lg', 'xl'],
+            description: 'Elevation level controlling the shadow depth.',
+        },
+        interactive: { control: 'boolean', description: 'Makes the card interactive (hover effect, cursor pointer).' },
+        bordered: { control: 'boolean', description: 'Border style variant.' },
+        padding: {
+            control: 'select',
+            options: ['none', 'sm', 'md', 'lg'],
+            description: 'Padding size for the card body.',
+        },
+        slotContent: { control: 'text', description: 'Default slot content' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.elevation !== undefined && args.elevation !== null)
+        attrs.push(`elevation="${args.elevation}"`);
+    if (args.interactive)
+        attrs.push('interactive');
+    if (args.bordered)
+        attrs.push('bordered');
+    if (args.padding !== undefined && args.padding !== null)
+        attrs.push(`padding="${args.padding}"`);
+    return `<div style="max-width: 400px;">
+    <ts-card ${attrs.join(' ')}>
+      ${args.slotContent || '<p style="margin: 0;">Card body content goes here.</p>'}
+    </ts-card>
+  </div>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        elevation: 'sm',
+        interactive: false,
+        bordered: false,
+        padding: 'md',
+        slotContent: '<p style="margin: 0;">This is a basic card with default settings. Cards are versatile containers for grouping related content.</p>',
+    },
+});
+export const Elevations = () => `
+  <ts-row gap="4" align="start">
+    <div style="text-align: center;">
+      <ts-card elevation="none" style="width: 160px;">
+        <p style="margin: 0; font-size: 14px;">None</p>
+      </ts-card>
+    </div>
+    <div style="text-align: center;">
+      <ts-card elevation="sm" style="width: 160px;">
+        <p style="margin: 0; font-size: 14px;">Small</p>
+      </ts-card>
+    </div>
+    <div style="text-align: center;">
+      <ts-card elevation="md" style="width: 160px;">
+        <p style="margin: 0; font-size: 14px;">Medium</p>
+      </ts-card>
+    </div>
+    <div style="text-align: center;">
+      <ts-card elevation="lg" style="width: 160px;">
+        <p style="margin: 0; font-size: 14px;">Large</p>
+      </ts-card>
+    </div>
+    <div style="text-align: center;">
+      <ts-card elevation="xl" style="width: 160px;">
+        <p style="margin: 0; font-size: 14px;">Extra Large</p>
+      </ts-card>
+    </div>
+  </ts-row>
+`;
+export const Padding = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <ts-card bordered padding="none">
+      <p style="margin: 0;">Padding: none</p>
+    </ts-card>
+    <ts-card bordered padding="sm">
+      <p style="margin: 0;">Padding: small</p>
+    </ts-card>
+    <ts-card bordered padding="md">
+      <p style="margin: 0;">Padding: medium</p>
+    </ts-card>
+    <ts-card bordered padding="lg">
+      <p style="margin: 0;">Padding: large</p>
+    </ts-card>
+  </ts-stack>
+`;
+export const States = () => `
+  <ts-row gap="4" align="start">
+    <ts-card bordered style="width: 240px;">
+      <p style="margin: 0;">Bordered card</p>
+    </ts-card>
+    <ts-card interactive style="width: 240px;">
+      <p style="margin: 0;">Interactive card (hover me)</p>
+    </ts-card>
+    <ts-card interactive bordered style="width: 240px;">
+      <p style="margin: 0;">Interactive + bordered</p>
+    </ts-card>
+  </ts-row>
+`;
+export const WithSlots = () => `
+  <div style="max-width: 400px;">
+    <ts-card bordered>
+      <span slot="header">
+        <ts-row gap="2" justify="between" align="center">
+          <h3 style="margin: 0;">Team Members</h3>
+          <ts-badge variant="primary" pill>3 online</ts-badge>
+        </ts-row>
+      </span>
+      <ts-stack gap="2">
+        <ts-row gap="2">
+          <ts-icon name="user" size="sm"></ts-icon>
+          <div>
+            <div style="font-weight: 600;">Sarah Chen</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Engineering Lead</div>
+          </div>
+          <ts-badge variant="success" pill size="sm" style="margin-left: auto;">Active</ts-badge>
+        </ts-row>
+        <ts-row gap="2">
+          <ts-icon name="user" size="sm"></ts-icon>
+          <div>
+            <div style="font-weight: 600;">Alex Rivera</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Product Designer</div>
+          </div>
+          <ts-badge variant="success" pill size="sm" style="margin-left: auto;">Active</ts-badge>
+        </ts-row>
+        <ts-row gap="2">
+          <ts-icon name="user" size="sm"></ts-icon>
+          <div>
+            <div style="font-weight: 600;">Jordan Lee</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Backend Developer</div>
+          </div>
+          <ts-badge variant="neutral" pill size="sm" style="margin-left: auto;">Away</ts-badge>
+        </ts-row>
+      </ts-stack>
+      <span slot="footer">
+        <ts-row gap="1" justify="end">
+          <ts-button size="sm" appearance="ghost" variant="primary">
+            <ts-icon slot="prefix" name="user-plus" size="sm"></ts-icon>
+            Invite Member
+          </ts-button>
+        </ts-row>
+      </span>
+    </ts-card>
+  </div>
+`;
+export const WithMedia = () => `
+  <ts-grid columns="auto" min-column-width="280px" gap="4">
+    <ts-card bordered style="width: 300px;" padding="none">
+      <span slot="media">
+        <div style="height: 160px; background: linear-gradient(135deg, var(--ts-color-primary-400), var(--ts-color-primary-700)); display: flex; align-items: center; justify-content: center;">
+          <ts-icon name="image" size="xl" color="white"></ts-icon>
+        </div>
+      </span>
+      <div style="padding: 16px;">
+        <h3 style="margin: 0 0 8px;">Project Aurora</h3>
+        <p style="margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);">A next-generation design system built for speed and accessibility.</p>
+      </div>
+      <span slot="footer">
+        <ts-row gap="2" justify="between" style="padding: 0 16px 16px;">
+          <ts-badge variant="info" pill size="sm">In Progress</ts-badge>
+          <ts-button size="sm" appearance="ghost" variant="primary">View Project</ts-button>
+        </ts-row>
+      </span>
+    </ts-card>
+
+    <ts-card bordered style="width: 300px;" padding="none">
+      <span slot="media">
+        <div style="height: 160px; background: linear-gradient(135deg, var(--ts-color-success-400), var(--ts-color-success-700)); display: flex; align-items: center; justify-content: center;">
+          <ts-icon name="check-circle" size="xl" color="white"></ts-icon>
+        </div>
+      </span>
+      <div style="padding: 16px;">
+        <h3 style="margin: 0 0 8px;">Project Nebula</h3>
+        <p style="margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);">Analytics dashboard with real-time data visualization and reporting.</p>
+      </div>
+      <span slot="footer">
+        <ts-row gap="2" justify="between" style="padding: 0 16px 16px;">
+          <ts-badge variant="success" pill size="sm">Completed</ts-badge>
+          <ts-button size="sm" appearance="ghost" variant="primary">View Project</ts-button>
+        </ts-row>
+      </span>
+    </ts-card>
+  </ts-grid>
+`;
+export const Composition = () => `
+  <ts-stack gap="3" style="max-width: 400px;">
+    <ts-card bordered padding="lg">
+      <span slot="header">
+        <ts-row gap="1">
+          <ts-icon name="credit-card" size="sm"></ts-icon>
+          <h3 style="margin: 0;">Payment Method</h3>
+        </ts-row>
+      </span>
+      <ts-stack gap="2">
+        <ts-input label="Card Number" placeholder="4242 4242 4242 4242">
+          <ts-icon slot="prefix" name="credit-card" size="sm"></ts-icon>
+        </ts-input>
+        <ts-row gap="2">
+          <ts-input label="Expiry" placeholder="MM/YY" style="flex: 1;"></ts-input>
+          <ts-input label="CVC" placeholder="123" style="flex: 1;">
+            <ts-icon slot="suffix" name="lock" size="sm"></ts-icon>
+          </ts-input>
+        </ts-row>
+      </ts-stack>
+      <span slot="footer">
+        <ts-row gap="2" justify="end" style="padding-top: 8px;">
+          <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+          <ts-button variant="primary">
+            <ts-icon slot="prefix" name="lock" size="sm"></ts-icon>
+            Pay $49.99
+          </ts-button>
+        </ts-row>
+      </span>
+    </ts-card>
+  </ts-stack>
+`;
+//# sourceMappingURL=card.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACzC,WAAW,EAAE,+CAA+C;SAC7D;QACD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4DAA4D,EAAE;QAC9G,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uBAAuB,EAAE;QACtE,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACnC,WAAW,EAAE,iCAAiC;SAC/C;QACD,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE;KACtE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACzG,IAAI,IAAI,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,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,OAAO;eACM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,WAAW,IAAI,wDAAwD;;SAE3E,CAAC;AACV,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,oIAAoI;KAClJ;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BvC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAepC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;CAYnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxC,CAAC","sourcesContent":["// Hand-written stories for ts-card\n\nexport default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    elevation: {\n      control: 'select',\n      options: ['none', 'sm', 'md', 'lg', 'xl'],\n      description: 'Elevation level controlling the shadow depth.',\n    },\n    interactive: { control: 'boolean', description: 'Makes the card interactive (hover effect, cursor pointer).' },\n    bordered: { control: 'boolean', description: 'Border style variant.' },\n    padding: {\n      control: 'select',\n      options: ['none', 'sm', 'md', 'lg'],\n      description: 'Padding size for the card body.',\n    },\n    slotContent: { control: 'text', description: 'Default slot content' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.elevation !== undefined && args.elevation !== null) attrs.push(`elevation=\"${args.elevation}\"`);\n  if (args.interactive) attrs.push('interactive');\n  if (args.bordered) attrs.push('bordered');\n  if (args.padding !== undefined && args.padding !== null) attrs.push(`padding=\"${args.padding}\"`);\n  return `<div style=\"max-width: 400px;\">\n    <ts-card ${attrs.join(' ')}>\n      ${args.slotContent || '<p style=\"margin: 0;\">Card body content goes here.</p>'}\n    </ts-card>\n  </div>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    elevation: 'sm',\n    interactive: false,\n    bordered: false,\n    padding: 'md',\n    slotContent: '<p style=\"margin: 0;\">This is a basic card with default settings. Cards are versatile containers for grouping related content.</p>',\n  },\n});\n\nexport const Elevations = (): string => `\n  <ts-row gap=\"4\" align=\"start\">\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"none\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">None</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"sm\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Small</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"md\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Medium</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"lg\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Large</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"xl\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Extra Large</p>\n      </ts-card>\n    </div>\n  </ts-row>\n`;\n\nexport const Padding = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-card bordered padding=\"none\">\n      <p style=\"margin: 0;\">Padding: none</p>\n    </ts-card>\n    <ts-card bordered padding=\"sm\">\n      <p style=\"margin: 0;\">Padding: small</p>\n    </ts-card>\n    <ts-card bordered padding=\"md\">\n      <p style=\"margin: 0;\">Padding: medium</p>\n    </ts-card>\n    <ts-card bordered padding=\"lg\">\n      <p style=\"margin: 0;\">Padding: large</p>\n    </ts-card>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-row gap=\"4\" align=\"start\">\n    <ts-card bordered style=\"width: 240px;\">\n      <p style=\"margin: 0;\">Bordered card</p>\n    </ts-card>\n    <ts-card interactive style=\"width: 240px;\">\n      <p style=\"margin: 0;\">Interactive card (hover me)</p>\n    </ts-card>\n    <ts-card interactive bordered style=\"width: 240px;\">\n      <p style=\"margin: 0;\">Interactive + bordered</p>\n    </ts-card>\n  </ts-row>\n`;\n\nexport const WithSlots = (): string => `\n  <div style=\"max-width: 400px;\">\n    <ts-card bordered>\n      <span slot=\"header\">\n        <ts-row gap=\"2\" justify=\"between\" align=\"center\">\n          <h3 style=\"margin: 0;\">Team Members</h3>\n          <ts-badge variant=\"primary\" pill>3 online</ts-badge>\n        </ts-row>\n      </span>\n      <ts-stack gap=\"2\">\n        <ts-row gap=\"2\">\n          <ts-icon name=\"user\" size=\"sm\"></ts-icon>\n          <div>\n            <div style=\"font-weight: 600;\">Sarah Chen</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Engineering Lead</div>\n          </div>\n          <ts-badge variant=\"success\" pill size=\"sm\" style=\"margin-left: auto;\">Active</ts-badge>\n        </ts-row>\n        <ts-row gap=\"2\">\n          <ts-icon name=\"user\" size=\"sm\"></ts-icon>\n          <div>\n            <div style=\"font-weight: 600;\">Alex Rivera</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Product Designer</div>\n          </div>\n          <ts-badge variant=\"success\" pill size=\"sm\" style=\"margin-left: auto;\">Active</ts-badge>\n        </ts-row>\n        <ts-row gap=\"2\">\n          <ts-icon name=\"user\" size=\"sm\"></ts-icon>\n          <div>\n            <div style=\"font-weight: 600;\">Jordan Lee</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Backend Developer</div>\n          </div>\n          <ts-badge variant=\"neutral\" pill size=\"sm\" style=\"margin-left: auto;\">Away</ts-badge>\n        </ts-row>\n      </ts-stack>\n      <span slot=\"footer\">\n        <ts-row gap=\"1\" justify=\"end\">\n          <ts-button size=\"sm\" appearance=\"ghost\" variant=\"primary\">\n            <ts-icon slot=\"prefix\" name=\"user-plus\" size=\"sm\"></ts-icon>\n            Invite Member\n          </ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </div>\n`;\n\nexport const WithMedia = (): string => `\n  <ts-grid columns=\"auto\" min-column-width=\"280px\" gap=\"4\">\n    <ts-card bordered style=\"width: 300px;\" padding=\"none\">\n      <span slot=\"media\">\n        <div style=\"height: 160px; background: linear-gradient(135deg, var(--ts-color-primary-400), var(--ts-color-primary-700)); display: flex; align-items: center; justify-content: center;\">\n          <ts-icon name=\"image\" size=\"xl\" color=\"white\"></ts-icon>\n        </div>\n      </span>\n      <div style=\"padding: 16px;\">\n        <h3 style=\"margin: 0 0 8px;\">Project Aurora</h3>\n        <p style=\"margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);\">A next-generation design system built for speed and accessibility.</p>\n      </div>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"between\" style=\"padding: 0 16px 16px;\">\n          <ts-badge variant=\"info\" pill size=\"sm\">In Progress</ts-badge>\n          <ts-button size=\"sm\" appearance=\"ghost\" variant=\"primary\">View Project</ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n\n    <ts-card bordered style=\"width: 300px;\" padding=\"none\">\n      <span slot=\"media\">\n        <div style=\"height: 160px; background: linear-gradient(135deg, var(--ts-color-success-400), var(--ts-color-success-700)); display: flex; align-items: center; justify-content: center;\">\n          <ts-icon name=\"check-circle\" size=\"xl\" color=\"white\"></ts-icon>\n        </div>\n      </span>\n      <div style=\"padding: 16px;\">\n        <h3 style=\"margin: 0 0 8px;\">Project Nebula</h3>\n        <p style=\"margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);\">Analytics dashboard with real-time data visualization and reporting.</p>\n      </div>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"between\" style=\"padding: 0 16px 16px;\">\n          <ts-badge variant=\"success\" pill size=\"sm\">Completed</ts-badge>\n          <ts-button size=\"sm\" appearance=\"ghost\" variant=\"primary\">View Project</ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </ts-grid>\n`;\n\nexport const Composition = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\">\n        <ts-row gap=\"1\">\n          <ts-icon name=\"credit-card\" size=\"sm\"></ts-icon>\n          <h3 style=\"margin: 0;\">Payment Method</h3>\n        </ts-row>\n      </span>\n      <ts-stack gap=\"2\">\n        <ts-input label=\"Card Number\" placeholder=\"4242 4242 4242 4242\">\n          <ts-icon slot=\"prefix\" name=\"credit-card\" size=\"sm\"></ts-icon>\n        </ts-input>\n        <ts-row gap=\"2\">\n          <ts-input label=\"Expiry\" placeholder=\"MM/YY\" style=\"flex: 1;\"></ts-input>\n          <ts-input label=\"CVC\" placeholder=\"123\" style=\"flex: 1;\">\n            <ts-icon slot=\"suffix\" name=\"lock\" size=\"sm\"></ts-icon>\n          </ts-input>\n        </ts-row>\n      </ts-stack>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\" style=\"padding-top: 8px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n          <ts-button variant=\"primary\">\n            <ts-icon slot=\"prefix\" name=\"lock\" size=\"sm\"></ts-icon>\n            Pay $49.99\n          </ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </ts-stack>\n`;\n"]}

package/dist/collection/components/checkbox/checkbox.css

@@ -0,0 +1,115 @@
+/* ==========================================================================
+   ts-checkbox — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-checkbox-size           Checkbox box size
+     --ts-checkbox-color          Checked background color
+     --ts-checkbox-radius         Border radius
+     --ts-checkbox-border-color   Default border color
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-checkbox-size: 1.25rem;
+  --ts-checkbox-color: var(--ts-color-interactive-primary);
+  --ts-checkbox-radius: 4px;
+  --ts-checkbox-border-color: var(--ts-color-border-default);
+}
+
+/* ---- Base container ---- */
+.checkbox__base {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+  cursor: pointer;
+  outline: none;
+}
+
+.checkbox__base:focus-visible .checkbox__control {
+  box-shadow: var(--ts-focus-ring);
+}
+
+/* ---- Control box ---- */
+.checkbox__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ts-checkbox-size);
+  height: var(--ts-checkbox-size);
+  box-sizing: border-box;
+  border: 2px solid var(--ts-checkbox-border-color);
+  border-radius: var(--ts-checkbox-radius);
+  background-color: var(--ts-color-bg-elevated);
+  transition:
+    background-color var(--ts-transition-fast),
+    border-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+  flex-shrink: 0;
+}
+
+/* ---- Checked & indeterminate states ---- */
+:host([checked]) .checkbox__control,
+:host([indeterminate]) .checkbox__control {
+  background-color: var(--ts-checkbox-color);
+  border-color: var(--ts-checkbox-color);
+  color: var(--ts-color-text-on-primary);
+}
+
+/* ---- Hover ---- */
+.checkbox__base:hover:not([aria-disabled="true"]) .checkbox__control {
+  border-color: var(--ts-color-primary-500);
+}
+
+/* ---- Error state ---- */
+:host([error]) .checkbox__control {
+  border-color: var(--ts-color-danger-500);
+}
+
+/* ---- Disabled state ---- */
+:host([disabled]) .checkbox__base {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Checkmark icon ---- */
+.checkbox__icon {
+  width: 100%;
+  height: 100%;
+  transform: scale(1);
+  transition: transform var(--ts-transition-fast);
+}
+
+:host([checked]) .checkbox__icon {
+  animation: none;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) {
+  --ts-checkbox-size: 1rem;
+}
+
+:host([size="sm"]) .checkbox__label {
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .checkbox__label {
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) {
+  --ts-checkbox-size: 1.5rem;
+}
+
+:host([size="lg"]) .checkbox__label {
+  font-size: var(--ts-font-size-lg);
+}
+
+/* ---- Label ---- */
+.checkbox__label {
+  color: var(--ts-color-text-primary);
+  line-height: var(--ts-line-height-normal);
+  user-select: none;
+}