@tessera-ui/core 0.4.0

package/dist/collection/components/radio/radio.js

@@ -0,0 +1,234 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot - Default slot for the radio label.
+ *
+ * @part base - The radio container.
+ * @part control - The visual radio circle.
+ * @part label - The label wrapper.
+ */
+export class TsRadio {
+    hostEl;
+    inputId = generateId('ts-radio');
+    /** Whether the radio is checked. */
+    checked = false;
+    /** Renders the radio as disabled. */
+    disabled = false;
+    /** The value associated with this radio. */
+    value = '';
+    /** Name attribute for form submission. */
+    name;
+    /** Label text. If omitted, use the default slot. */
+    label;
+    /** The radio size. */
+    size = 'md';
+    /** Emitted when the radio is selected. */
+    tsChange;
+    /** Programmatically select the radio. */
+    async select() {
+        if (!this.disabled && !this.checked) {
+            this.checked = true;
+            this.tsChange.emit({ checked: this.checked, value: this.value });
+        }
+    }
+    handleClick = () => {
+        this.select();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.select();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '83a85914dbe352dbb58101fb0ec5a2eefea1b069', class: {
+                'ts-radio': true,
+                [`ts-radio--${this.size}`]: true,
+                'ts-radio--checked': this.checked,
+                'ts-radio--disabled': this.disabled,
+            } }, h("div", { key: 'e78da4f35aaa992df0e4a1b411f63714adad01da', class: "radio__base", part: "base", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("div", { key: 'd434933511980c1b1ae62727694f718b782eafb1', class: "radio__control", part: "control" }, h("div", { key: '240fc60b023fc0e3084d6f1504273b9ba6cc82b3', class: "radio__dot" })), h("label", { key: '21539dae9031f841f3095091225ac534902e4e15', class: "radio__label", part: "label", id: `${this.inputId}-label` }, this.label ? this.label : h("slot", null)))));
+    }
+    static get is() { return "ts-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the radio as disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value associated with this radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text. If omitted, use the default slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The radio size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio is selected."
+                },
+                "complexType": {
+                    "original": "TsCheckboxChangeEventDetail",
+                    "resolved": "TsCheckboxChangeEventDetail",
+                    "references": {
+                        "TsCheckboxChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsCheckboxChangeEventDetail",
+                            "referenceLocation": "TsCheckboxChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically select the radio.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;GAMG;AAMH,MAAM,OAAO,OAAO;IACP,MAAM,CAAe;IAExB,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEzC,oCAAoC;IACI,OAAO,GAAG,KAAK,CAAC;IAExD,qCAAqC;IACZ,QAAQ,GAAG,KAAK,CAAC;IAE1C,4CAA4C;IACpC,KAAK,GAAG,EAAE,CAAC;IAEnB,0CAA0C;IAClC,IAAI,CAAU;IAEtB,oDAAoD;IAC5C,KAAK,CAAU;IAEvB,sBAAsB;IACG,IAAI,GAAuB,IAAI,CAAC;IAEzD,0CAA0C;IACR,QAAQ,CAA6C;IAEvF,yCAAyC;IAEzC,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACtB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAChC,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;aACpC;YAED,4DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS;oBACxC,4DAAK,KAAK,EAAC,YAAY,GAAG,CACtB;gBAEN,8DAAO,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,QAAQ,IACjE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAQ,CAC7B,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the radio label.\n *\n * @part base - The radio container.\n * @part control - The visual radio circle.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class TsRadio {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-radio');\n\n  /** Whether the radio is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Renders the radio as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this radio. */\n  @Prop() value = '';\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Label text. If omitted, use the default slot. */\n  @Prop() label?: string;\n\n  /** The radio size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Emitted when the radio is selected. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n  /** Programmatically select the radio. */\n  @Method()\n  async select(): Promise<void> {\n    if (!this.disabled && !this.checked) {\n      this.checked = true;\n      this.tsChange.emit({ checked: this.checked, value: this.value });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.select();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-radio': true,\n          [`ts-radio--${this.size}`]: true,\n          'ts-radio--checked': this.checked,\n          'ts-radio--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"radio__base\"\n          part=\"base\"\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"radio__control\" part=\"control\">\n            <div class=\"radio__dot\" />\n          </div>\n\n          <label class=\"radio__label\" part=\"label\" id={`${this.inputId}-label`}>\n            {this.label ? this.label : <slot />}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,77 @@
+// Hand-written stories for ts-radio
+export default {
+    title: 'Components/Radio',
+    tags: ['autodocs'],
+    argTypes: {
+        checked: { control: 'boolean', description: 'Whether the radio is checked.' },
+        disabled: { control: 'boolean', description: 'Renders the radio as disabled.' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The radio size.',
+        },
+        label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },
+        value: { control: 'text', description: 'The value associated with this radio.' },
+        name: { control: 'text', description: 'Name attribute for form submission.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.checked)
+        attrs.push('checked');
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.label !== undefined && args.label !== null)
+        attrs.push(`label="${args.label}"`);
+    if (args.value !== undefined && args.value !== null)
+        attrs.push(`value="${args.value}"`);
+    if (args.name !== undefined && args.name !== null)
+        attrs.push(`name="${args.name}"`);
+    return `<ts-radio ${attrs.join(' ')}></ts-radio>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        checked: false,
+        disabled: false,
+        size: 'md',
+        label: 'Standard shipping',
+        value: 'standard',
+        name: 'shipping',
+    },
+});
+export const Sizes = () => `
+  <ts-stack gap="2">
+    <ts-radio size="sm" label="Small radio" name="size-demo" value="sm"></ts-radio>
+    <ts-radio size="md" label="Medium radio" name="size-demo" value="md"></ts-radio>
+    <ts-radio size="lg" label="Large radio" name="size-demo" value="lg"></ts-radio>
+  </ts-stack>
+`;
+export const States = () => `
+  <ts-stack gap="2">
+    <ts-radio label="Unchecked" name="states-demo" value="unchecked"></ts-radio>
+    <ts-radio checked label="Checked" name="states-checked" value="checked"></ts-radio>
+    <ts-radio disabled label="Disabled" name="states-disabled" value="disabled"></ts-radio>
+    <ts-radio disabled checked label="Disabled checked" name="states-disabled-checked" value="disabled-checked"></ts-radio>
+  </ts-stack>
+`;
+export const ShippingOptions = () => `
+  <ts-stack gap="2" style="max-width: 400px;">
+    <h3 style="margin: 0; font-family: sans-serif;">Select Shipping Method</h3>
+    <ts-radio name="shipping" value="standard" checked label="Standard shipping (5-7 business days)"></ts-radio>
+    <ts-radio name="shipping" value="express" label="Express shipping (2-3 business days)"></ts-radio>
+    <ts-radio name="shipping" value="overnight" label="Overnight shipping (next business day)"></ts-radio>
+    <ts-radio name="shipping" value="pickup" disabled label="In-store pickup (unavailable in your area)"></ts-radio>
+  </ts-stack>
+`;
+export const PaymentMethod = () => `
+  <ts-stack gap="2" style="max-width: 400px;">
+    <h3 style="margin: 0; font-family: sans-serif;">Payment Method</h3>
+    <ts-radio name="payment" value="credit" checked label="Credit card"></ts-radio>
+    <ts-radio name="payment" value="debit" label="Debit card"></ts-radio>
+    <ts-radio name="payment" value="paypal" label="PayPal"></ts-radio>
+    <ts-radio name="payment" value="bank" label="Bank transfer"></ts-radio>
+  </ts-stack>
+`;
+//# sourceMappingURL=radio.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/components/radio/radio.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,+BAA+B,EAAE;QAC7E,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gCAAgC,EAAE;QAC/E,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,iBAAiB;SAC/B;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,+CAA+C,EAAE;QACxF,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,uCAAuC,EAAE;QAChF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,qCAAqC,EAAE;KAC9E;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,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,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACzF,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACzF,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,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC;AACpD,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,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,mBAAmB;QAC1B,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQ5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQ1C,CAAC","sourcesContent":["// Hand-written stories for ts-radio\n\nexport default {\n  title: 'Components/Radio',\n  tags: ['autodocs'],\n  argTypes: {\n    checked: { control: 'boolean', description: 'Whether the radio is checked.' },\n    disabled: { control: 'boolean', description: 'Renders the radio as disabled.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The radio size.',\n    },\n    label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },\n    value: { control: 'text', description: 'The value associated with this radio.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.checked) attrs.push('checked');\n  if (args.disabled) attrs.push('disabled');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  if (args.value !== undefined && args.value !== null) attrs.push(`value=\"${args.value}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  return `<ts-radio ${attrs.join(' ')}></ts-radio>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    checked: false,\n    disabled: false,\n    size: 'md',\n    label: 'Standard shipping',\n    value: 'standard',\n    name: 'shipping',\n  },\n});\n\nexport const Sizes = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-radio size=\"sm\" label=\"Small radio\" name=\"size-demo\" value=\"sm\"></ts-radio>\n    <ts-radio size=\"md\" label=\"Medium radio\" name=\"size-demo\" value=\"md\"></ts-radio>\n    <ts-radio size=\"lg\" label=\"Large radio\" name=\"size-demo\" value=\"lg\"></ts-radio>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-radio label=\"Unchecked\" name=\"states-demo\" value=\"unchecked\"></ts-radio>\n    <ts-radio checked label=\"Checked\" name=\"states-checked\" value=\"checked\"></ts-radio>\n    <ts-radio disabled label=\"Disabled\" name=\"states-disabled\" value=\"disabled\"></ts-radio>\n    <ts-radio disabled checked label=\"Disabled checked\" name=\"states-disabled-checked\" value=\"disabled-checked\"></ts-radio>\n  </ts-stack>\n`;\n\nexport const ShippingOptions = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 400px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Select Shipping Method</h3>\n    <ts-radio name=\"shipping\" value=\"standard\" checked label=\"Standard shipping (5-7 business days)\"></ts-radio>\n    <ts-radio name=\"shipping\" value=\"express\" label=\"Express shipping (2-3 business days)\"></ts-radio>\n    <ts-radio name=\"shipping\" value=\"overnight\" label=\"Overnight shipping (next business day)\"></ts-radio>\n    <ts-radio name=\"shipping\" value=\"pickup\" disabled label=\"In-store pickup (unavailable in your area)\"></ts-radio>\n  </ts-stack>\n`;\n\nexport const PaymentMethod = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 400px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Payment Method</h3>\n    <ts-radio name=\"payment\" value=\"credit\" checked label=\"Credit card\"></ts-radio>\n    <ts-radio name=\"payment\" value=\"debit\" label=\"Debit card\"></ts-radio>\n    <ts-radio name=\"payment\" value=\"paypal\" label=\"PayPal\"></ts-radio>\n    <ts-radio name=\"payment\" value=\"bank\" label=\"Bank transfer\"></ts-radio>\n  </ts-stack>\n`;\n"]}

package/dist/collection/components/row/row.css

@@ -0,0 +1,42 @@
+/* ==========================================================================
+   ts-row — Shadow DOM Scoped Styles
+
+   A horizontal flex row layout primitive with wrap and responsive stacking.
+   ========================================================================== */
+
+:host {
+  display: flex;
+  flex-direction: row;
+}
+
+:host([reverse]) {
+  flex-direction: row-reverse;
+}
+
+/* ---- Responsive stacking ---- */
+@media (max-width: 639px) {
+  :host([stack-at="sm"]) {
+    flex-direction: column;
+  }
+  :host([stack-at="sm"][reverse]) {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (max-width: 767px) {
+  :host([stack-at="md"]) {
+    flex-direction: column;
+  }
+  :host([stack-at="md"][reverse]) {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (max-width: 1023px) {
+  :host([stack-at="lg"]) {
+    flex-direction: column;
+  }
+  :host([stack-at="lg"][reverse]) {
+    flex-direction: column-reverse;
+  }
+}

package/dist/collection/components/row/row.js

@@ -0,0 +1,179 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for row content.
+ */
+export class TsRow {
+    /** Spacing token number controlling the gap between items. */
+    gap = '2';
+    /** Cross-axis alignment of items. */
+    align = 'center';
+    /** Main-axis alignment of items. */
+    justify = 'start';
+    /** Whether items should wrap to the next line. */
+    wrap = true;
+    /** Reverse the row direction. */
+    reverse = false;
+    /** Breakpoint at which the row stacks vertically. */
+    stackAt = 'never';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            between: 'space-between',
+            around: 'space-around',
+            evenly: 'space-evenly',
+        };
+        return (h(Host, { key: 'd66b197cc25e95aef4de4b9b71672cfcfb31ae4d', style: {
+                gap: `var(--ts-spacing-${this.gap})`,
+                alignItems: alignMap[this.align] || 'center',
+                justifyContent: justifyMap[this.justify] || 'flex-start',
+                flexWrap: this.wrap ? 'wrap' : 'nowrap',
+            } }, h("slot", { key: '3d515733c0c1fa827d5c2b0d63bb6fc1ccdb60ba' })));
+    }
+    static get is() { return "ts-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token number controlling the gap between items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "gap",
+                "defaultValue": "'2'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cross-axis alignment of items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'",
+                    "resolved": "\"around\" | \"between\" | \"center\" | \"end\" | \"evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main-axis alignment of items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "justify",
+                "defaultValue": "'start'"
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether items should wrap to the next line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "wrap",
+                "defaultValue": "true"
+            },
+            "reverse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reverse the row direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "reverse",
+                "defaultValue": "false"
+            },
+            "stackAt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'never'",
+                    "resolved": "\"lg\" | \"md\" | \"never\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint at which the row stacks vertically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stack-at",
+                "defaultValue": "'never'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/components/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,KAAK;IAChB,8DAA8D;IACrC,GAAG,GAAW,GAAG,CAAC;IAE3C,qCAAqC;IACZ,KAAK,GAAwD,QAAQ,CAAC;IAE/F,oCAAoC;IACX,OAAO,GAAiE,OAAO,CAAC;IAEzG,kDAAkD;IACzB,IAAI,GAAY,IAAI,CAAC;IAE9C,iCAAiC;IACR,OAAO,GAAY,KAAK,CAAC;IAElD,qDAAqD;IACL,OAAO,GAAiC,OAAO,CAAC;IAEhG,4EAA4E;IAC5E,MAAM;QACJ,MAAM,QAAQ,GAA2B;YACvC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA2B;YACzC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,GAAG,EAAE,oBAAoB,IAAI,CAAC,GAAG,GAAG;gBACpC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ;gBAC5C,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,YAAY;gBACxD,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aACxC;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for row content.\n */\n@Component({\n  tag: 'ts-row',\n  styleUrl: 'row.css',\n  shadow: true,\n})\nexport class TsRow {\n  /** Spacing token number controlling the gap between items. */\n  @Prop({ reflect: true }) gap: string = '2';\n\n  /** Cross-axis alignment of items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'center';\n\n  /** Main-axis alignment of items. */\n  @Prop({ reflect: true }) justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n  /** Whether items should wrap to the next line. */\n  @Prop({ reflect: true }) wrap: boolean = true;\n\n  /** Reverse the row direction. */\n  @Prop({ reflect: true }) reverse: boolean = false;\n\n  /** Breakpoint at which the row stacks vertically. */\n  @Prop({ reflect: true, attribute: 'stack-at' }) stackAt: 'sm' | 'md' | 'lg' | 'never' = 'never';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    return (\n      <Host\n        style={{\n          gap: `var(--ts-spacing-${this.gap})`,\n          alignItems: alignMap[this.align] || 'center',\n          justifyContent: justifyMap[this.justify] || 'flex-start',\n          flexWrap: this.wrap ? 'wrap' : 'nowrap',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}