@affinda/wc 0.0.15 → 0.0.17

package/dist/collection/components/af-split-section/af-split-section.js

@@ -0,0 +1,145 @@
+import { h, Host } from "@stencil/core";
+// Map theme names to CSS color values
+const themeColors = {
+    'white': 'var(--colour-brand-white, #FFFFFF)',
+    'inkwell': 'var(--colour-brand-inkwell, #14343B)',
+    'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',
+    'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',
+    'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',
+};
+/**
+ * Split Section component for layouts with two-tone backgrounds.
+ * Creates a vertical split with different themes for top and bottom halves.
+ * Useful for content that visually spans across two themed areas.
+ *
+ * Uses a CSS linear-gradient for the split background effect.
+ */
+export class AfSplitSection {
+    constructor() {
+        /** Theme for the top half of the section */
+        this.topTheme = 'mist-green';
+        /** Theme for the bottom half of the section */
+        this.bottomTheme = 'white';
+        /** Padding variant */
+        this.padding = 'default';
+        /** Whether to include a Container wrapper */
+        this.container = true;
+    }
+    render() {
+        const content = h("slot", { key: '6883d2b8d85fc848e03978e163655d8672f8bac6' });
+        // Create the split background using CSS gradient
+        const topColor = themeColors[this.topTheme];
+        const bottomColor = themeColors[this.bottomTheme];
+        const backgroundStyle = {
+            background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
+        };
+        return (h(Host, { key: '583008c903c5883fb1b2254eb235cc3db440be38' }, h("div", { key: 'c8b2f2d0527c60cb2df6a321fe55a640a8f46a8c', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+    }
+    static get is() { return "af-split-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-split-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-split-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "topTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "global",
+                            "id": "global::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for the top half of the section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "top-theme",
+                "defaultValue": "'mist-green'"
+            },
+            "bottomTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "global",
+                            "id": "global::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for the bottom half of the section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bottom-theme",
+                "defaultValue": "'white'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tight' | 'default' | 'loose'",
+                    "resolved": "\"default\" | \"loose\" | \"tight\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'default'"
+            },
+            "container": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to include a Container wrapper"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-split-section.js.map

package/dist/collection/components/af-split-section/af-split-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-split-section.js","sourceRoot":"","sources":["../../../src/components/af-split-section/af-split-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD,sCAAsC;AACtC,MAAM,WAAW,GAA0B;IACzC,OAAO,EAAE,oCAAoC;IAC7C,SAAS,EAAE,sCAAsC;IACjD,YAAY,EAAE,yCAAyC;IACvD,WAAW,EAAE,qCAAqC;IAClD,aAAa,EAAE,0CAA0C;CAC1D,CAAC;AAEF;;;;;;GAMG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,4CAA4C;QACpC,aAAQ,GAAU,YAAY,CAAC;QAEvC,+CAA+C;QACvC,gBAAW,GAAU,OAAO,CAAC;QAErC,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAyBnC;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,iDAAiD;QACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,QAAQ,QAAQ,SAAS,WAAW,SAAS,WAAW,QAAQ;SACnH,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,yBAAyB,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ,EAAE,EACzE,KAAK,EAAE,eAAe,IAErB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n// Map theme names to CSS color values\nconst themeColors: Record<Theme, string> = {\n  'white': 'var(--colour-brand-white, #FFFFFF)',\n  'inkwell': 'var(--colour-brand-inkwell, #14343B)',\n  'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',\n  'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',\n  'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',\n};\n\n/**\n * Split Section component for layouts with two-tone backgrounds.\n * Creates a vertical split with different themes for top and bottom halves.\n * Useful for content that visually spans across two themed areas.\n * \n * Uses a CSS linear-gradient for the split background effect.\n */\n@Component({\n  tag: 'af-split-section',\n  styleUrl: 'af-split-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSplitSection {\n  /** Theme for the top half of the section */\n  @Prop() topTheme: Theme = 'mist-green';\n\n  /** Theme for the bottom half of the section */\n  @Prop() bottomTheme: Theme = 'white';\n\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n\n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    // Create the split background using CSS gradient\n    const topColor = themeColors[this.topTheme];\n    const bottomColor = themeColors[this.bottomTheme];\n    const backgroundStyle = {\n      background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`\n    };\n\n    return (\n      <Host>\n        <div\n          class={`split-section padding-${this.padding} top-theme-${this.topTheme}`}\n          style={backgroundStyle}\n        >\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-switch/af-switch.css

@@ -0,0 +1,104 @@
+:host {
+  display: inline-block;
+}
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));
+  user-select: none;
+}
+
+.switch.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Hidden native input */
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Switch track */
+.track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 52px;
+  height: 30px;
+  border-radius: var(--radii-switch, 9999px);
+  background: var(--forms-control-bg-default-disabled, #e8ebeb);
+  transition: background 0.2s ease;
+  box-sizing: border-box;
+}
+
+/* Track active state */
+.track.active {
+  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Track disabled state */
+.track.disabled {
+  background: var(--forms-control-bg-default-disabled, #e8ebeb);
+}
+
+/* Hover state */
+.switch:not(.disabled):hover .track:not(.active) {
+  background: #d0d6d8;
+}
+
+/* Focus state */
+.input:focus-visible + .track {
+  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);
+  outline: none;
+}
+
+/* Switch knob */
+.knob {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  transition: transform 0.2s ease, background 0.2s ease;
+  transform: translateX(2px);
+}
+
+/* Knob active position */
+.knob.active {
+  transform: translateX(24px);
+}
+
+/* Knob disabled state */
+.knob.disabled {
+  background: var(--forms-control-stroke-disabled, #a1aeb1);
+  box-shadow: none;
+}
+
+/* Label styling */
+.label {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+/* Empty label - hide if no content */
+.label:empty {
+  display: none;
+}
+

package/dist/collection/components/af-switch/af-switch.js

@@ -0,0 +1,155 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Switch component for toggling between on and off states.
+ *
+ * @slot - Switch label text
+ */
+export class AfSwitch {
+    constructor() {
+        /**
+         * Whether the switch is active (on)
+         */
+        this.active = false;
+        /**
+         * Whether the switch is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.active = !this.active;
+            this.afChange.emit({ active: this.active });
+        };
+    }
+    render() {
+        const switchClasses = {
+            'switch': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const trackClasses = {
+            'track': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const knobClasses = {
+            'knob': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '21c42503d55acd6e642e303fbb94ae46f061ae4a' }, h("label", { key: 'a01f3dc6b3bde4070afd1289115dd45c699baead', class: switchClasses }, h("input", { key: 'fc19c909701239fb40204eefa9b2754871db5e1b', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'b09ab35a5157959712e11b1fe336e9d2b3ede0d7', class: trackClasses }, h("span", { key: '51681ef5a21b06777a2dcd3f29ccaadcb8f6a0c6', class: knobClasses })), h("span", { key: 'f17194f5988bce168aa499413ecbe05f7c238b05', class: "label" }, h("slot", { key: 'a659c4750a0ccb3413290a461de82e5714e498a4' })))));
+    }
+    static get is() { return "af-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the switch is active (on)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the switch is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the switch for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the switch for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afChange",
+                "name": "afChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the switch state changes"
+                },
+                "complexType": {
+                    "original": "{ active: boolean }",
+                    "resolved": "{ active: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-switch.js.map

package/dist/collection/components/af-switch/af-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-switch.js","sourceRoot":"","sources":["../../../src/components/af-switch/af-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACqC,WAAM,GAAY,KAAK,CAAC;QAEhE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,aAAa;gBACzB,8DACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;gBACF,6DAAM,KAAK,EAAE,YAAY;oBACvB,6DAAM,KAAK,EAAE,WAAW,GAAS,CAC5B;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-tab/af-tab.css

@@ -0,0 +1,182 @@
+/* Tab component styles */
+:host {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: var(--font-size-label-button, 17px);
+  line-height: var(--line-height-label-button, 20px);
+  text-align: center;
+  transition: 
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.tab:focus {
+  outline: none;
+}
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: 
+    0 0 0 4px var(--af-background-base, #ffffff),
+    0 0 0 5px var(--af-background-border-active, #8a7049);
+}
+
+/* ==========================================================================
+   SLOTS
+   ========================================================================== */
+
+.icon-slot,
+.number-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.icon-slot {
+  width: 24px;
+  height: 24px;
+}
+
+.number-slot {
+  width: 24px;
+  height: 24px;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 var(--space-3, 12px);
+}
+
+/* ==========================================================================
+   SHAPE: SQUARE
+   ========================================================================== */
+
+.tab.shape-square {
+  padding: var(--space-3, 12px);
+  border-radius: 0;
+  overflow: hidden;
+  border-bottom: 3px solid transparent;
+}
+
+/* Square - Default state */
+.tab.shape-square:not(.active):not(.disabled) {
+  color: var(--af-typography-body-default, #2b484f);
+  border-bottom-color: var(--af-background-border-subtle, #e8eeed);
+}
+
+/* Square - Hover state */
+.tab.shape-square:not(.active):not(.disabled):hover {
+  color: var(--af-typography-body-dark, #14343b);
+  border-bottom-color: var(--af-background-border-default, #d1ddda);
+}
+
+/* Square - Active state */
+.tab.shape-square.active {
+  color: var(--af-typography-body-dark, #14343b);
+  border-bottom-color: var(--af-background-border-active, #8a7049);
+}
+
+/* Square - Disabled state */
+.tab.shape-square.disabled {
+  color: var(--af-typography-body-subtle, #60767b);
+  border-bottom-color: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Square - Icon colors */
+.tab.shape-square:not(.active):not(.disabled) .icon-slot {
+  color: var(--af-typography-body-default, #2b484f);
+}
+
+.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+.tab.shape-square.active .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+/* ==========================================================================
+   SHAPE: PILL
+   ========================================================================== */
+
+.tab.shape-pill {
+  padding: var(--space-3, 12px) var(--space-4, 16px);
+  border-radius: var(--radius-pill, 999px);
+  overflow: hidden;
+}
+
+/* Pill - Default state */
+.tab.shape-pill:not(.active):not(.disabled) {
+  color: var(--af-typography-body-default, #2b484f);
+  background-color: transparent;
+}
+
+/* Pill - Hover state */
+.tab.shape-pill:not(.active):not(.disabled):hover {
+  color: var(--af-typography-body-dark, #14343b);
+  background-color: var(--af-background-level-1-hover, #dde6e3);
+}
+
+/* Pill - Active state */
+.tab.shape-pill.active {
+  color: var(--af-typography-body-dark, #14343b);
+  background-color: var(--af-background-base, #ffffff);
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
+}
+
+/* Pill - Disabled state */
+.tab.shape-pill.disabled {
+  color: var(--af-typography-body-subtle, #60767b);
+  background-color: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Pill - Icon colors */
+.tab.shape-pill:not(.active):not(.disabled) .icon-slot {
+  color: var(--af-typography-body-default, #2b484f);
+}
+
+.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+.tab.shape-pill.active .icon-slot {
+  color: var(--af-typography-body-dark, #14343b);
+}
+
+/* ==========================================================================
+   DESKTOP BREAKPOINT ADJUSTMENTS
+   Tabs in desktop mode get larger padding via the tab-bar parent
+   These are applied via CSS custom properties set by af-tab-bar
+   ========================================================================== */
+
+:host([data-breakpoint="desktop"]) .tab.shape-square {
+  padding: var(--space-6, 24px) var(--space-5, 20px);
+  border-bottom-width: 4px;
+}
+
+:host([data-breakpoint="desktop"]) .tab.shape-pill {
+  padding: var(--space-3, 12px) var(--space-4, 16px);
+}
+