@affinda/wc 0.0.15 → 0.0.16

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

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Radio component for selecting a single option from a group.
+ *
+ * @slot - Radio label text
+ */
+export class AfRadio {
+    constructor() {
+        /**
+         * Whether the radio is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the radio is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled || this.checked)
+                return;
+            this.checked = true;
+            this.afChange.emit({ checked: this.checked, value: this.value });
+        };
+    }
+    render() {
+        const radioClasses = {
+            'radio': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        const controlClasses = {
+            'control': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '6adcdfda7127638527a30f9289f9cd240ec1e11d' }, h("label", { key: '9366569dd10eeeca7f3c3a616b0f523efd3208ec', class: radioClasses }, h("input", { key: '4b63b4285d65e42fc04c9f1f2e02e82abcf71018', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '2e9fa65ff49c95948e6ac3e791f31a8f51f4b0ba', class: controlClasses }, this.checked && (h("span", { key: 'efda09c196af4b1a33bba4da56d3036ee8545905', class: "dot" }))), h("span", { key: 'faf8a3d424418f987d9561d9d903068ce865a494', class: "label" }, h("slot", { key: '9b7d84b6eab1f908708bca461cd49eda3737435b' })))));
+    }
+    static get is() { return "af-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-radio.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-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": "Whether the radio 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 radio for form submission (radios with same name are grouped)"
+                },
+                "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 radio 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 radio checked state changes"
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value?: string }",
+                    "resolved": "{ checked: boolean; value?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-radio.js","sourceRoot":"","sources":["../../../src/components/af-radio/af-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IALpB;QAME;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC1C,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,CAAC;KAuCH;IArCC,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,YAAY;gBACxB,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,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,cAAc,IACxB,IAAI,CAAC,OAAO,IAAI,CACf,6DAAM,KAAK,EAAC,KAAK,GAAQ,CAC1B,CACI;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 * Radio component for selecting a single option from a group.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string }>;\n\n  private handleChange = () => {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && (\n              <span class=\"dot\"></span>\n            )}\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-section/af-section.css

@@ -1,3 +1,10 @@
+/**
+ * Section Component Styles
+ * 
+ * Provides themed containers with proper spacing.
+ * Theme classes set CSS custom properties that child components consume.
+ */
+
 :host {
   display: block;
   width: 100%;
@@ -21,39 +28,239 @@
   padding: 120px 0 96px;
 }
 
-/* Background variants */
-.bg-white {
-  background-color: var(--colour-background-white, #FFFFFF);
-}
+/* ==========================================================================
+   WHITE THEME
+   ========================================================================== */
 
-.bg-level1 {
-  background-color: var(--colour-background-level-1, #E8EEED);
+.theme-white {
+  background-color: var(--colour-brand-white, #FFFFFF);
+  
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-white, #FFFFFF);
+  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);
+  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);
+  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);
+  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);
+  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);
+  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);
+  --af-background-border-active: var(--colour-softclay-800, #8a7049);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
 }
 
-.bg-dark,
-.bg-inkwell {
+/* ==========================================================================
+   INKWELL THEME (Dark)
+   ========================================================================== */
+
+.theme-inkwell {
   background-color: var(--colour-brand-inkwell, #14343B);
-  --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);
-  --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);
+  
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-inkwell, #14343b);
+  --af-background-base-hover: var(--colour-inkwell-600, #102a2f);
+  --af-background-contrast: var(--colour-inkwell-700, #102a2f);
+  --af-background-level-1: var(--colour-inkwell-450, #203e45);
+  --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);
+  --af-background-border-subtle: var(--colour-inkwell-450, #203e45);
+  --af-background-border-default: var(--colour-inkwell-400, #2b484f);
+  --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);
+  --af-background-border-active: var(--colour-brand-ice, #a6fffb);
+  --af-background-icon-default: var(--colour-brand-white, #ffffff);
+  --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);
+  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);
+  --af-typography-body-dark: var(--colour-brand-white, #ffffff);
+  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);
+  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);
 }
 
-/* Automatic contrast overrides for dark sections */
-.bg-dark af-heading::part(base),
-.bg-inkwell af-heading::part(base) {
-  color: var(--colour-brand-mist-green, #C6D5D1);
+/* ==========================================================================
+   MIST-GREEN THEME
+   ========================================================================== */
+
+.theme-mist-green {
+  background-color: var(--colour-brand-mist-green, #C6D5D1);
+  
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);
+  --af-background-contrast: var(--colour-brand-soft-clay, #b09670);
+  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);
+  --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);
+  --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);
+  --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);
+  --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);
+  --af-background-border-active: var(--colour-softclay-800, #8a7049);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
 }
 
-.bg-dark af-text::part(base),
-.bg-inkwell af-text::part(base) {
-  color: var(--colour-brand-mist-green, #C6D5D1);
-  opacity: 0.92;
+/* ==========================================================================
+   SOFT-CLAY THEME
+   ========================================================================== */
+
+.theme-soft-clay {
+  background-color: var(--colour-softclay-400, #c0ab8d);
+  
+  /* Background tokens */
+  --af-background-base: var(--colour-softclay-400, #c0ab8d);
+  --af-background-base-hover: var(--colour-softclay-500, #b09670);
+  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-level-1: var(--colour-softclay-500, #b09670);
+  --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);
+  --af-background-border-subtle: var(--colour-softclay-600, #9e8765);
+  --af-background-border-default: var(--colour-softclay-700, #8d785a);
+  --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);
+  --af-background-border-active: var(--colour-brand-ice, #a6fffb);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);
 }
 
-.bg-dark af-typography-lockup::part(heading),
-.bg-inkwell af-typography-lockup::part(heading),
-.bg-dark af-typography-lockup::part(body),
-.bg-inkwell af-typography-lockup::part(body) {
-  color: var(--colour-brand-mist-green, #C6D5D1);
+/* ==========================================================================
+   WHITE-IVORY THEME
+   ========================================================================== */
+
+.theme-white-ivory {
+  background-color: var(--colour-brand-ivory-paper, #fff9ee);
+  
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);
+  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);
+  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-level-1: var(--colour-ivory-200, #ffefcc);
+  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);
+  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);
+  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);
+  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);
+  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);
 }
 
 /* Mobile adjustments */
@@ -70,4 +277,3 @@
     padding: 80px 0 64px;
   }
 }
-

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

@@ -1,19 +1,20 @@
 import { h, Host } from "@stencil/core";
 /**
- * Section layout component for consistent spacing and backgrounds
+ * Section layout component for consistent spacing and backgrounds.
+ * Sets theme context for all child components via CSS custom properties.
  */
 export class AfSection {
     constructor() {
         /** Padding variant */
         this.padding = 'default';
-        /** Background color */
-        this.background = 'white';
+        /** Theme - sets background color and provides theme context to children */
+        this.theme = 'white';
         /** Whether to include a Container wrapper */
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'cf70bb3d8d31bc3f68c49c40f1d3c415de57d8b1' });
-        return (h(Host, { key: '5b93e97c455ca8a50b598b0f3299e9884afc61ea' }, h("div", { key: '75f9cfbc62fd40dfd669c841f0b8490dcabb0c6f', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: 'bd82dbdc2f1a42d75ad23aace4155b46d813dace' });
+        return (h(Host, { key: '6a81a4ed99312b5ecaee80d6ceac79cd5bf58b8c' }, h("div", { key: '44002052c7a2cbbe7e60bd3bcafb9794a79ba11a', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }
@@ -49,24 +50,24 @@ export class AfSection {
                 "attribute": "padding",
                 "defaultValue": "'default'"
             },
-            "background": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'white' | 'level1' | 'dark' | 'inkwell'",
-                    "resolved": "\"dark\" | \"inkwell\" | \"level1\" | \"white\"",
+                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color"
+                    "text": "Theme - sets background color and provides theme context to children"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "background",
+                "attribute": "theme",
                 "defaultValue": "'white'"
             },
             "container": {

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

@@ -1 +1 @@
-{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,uBAAuB;QACf,eAAU,GAA4C,OAAO,CAAC;QAEtE,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,UAAU,EAAE,IAChE,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\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Background color */\n  @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} bg-${this.background}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,2EAA2E;QACnE,UAAK,GAAqE,OAAO,CAAC;QAE1F,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,IAC9D,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\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-social-link/af-social-link.js

@@ -29,7 +29,7 @@ export class AfSocialLink {
         }
     }
     render() {
-        return (h(Host, { key: 'a3ee0c643448f2c83f37559334be40a00a041465' }, h("a", { key: '162b7812f93c5226272220edd9ba3153651c01df', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: '57af022b19d623dfb9c39b7a75e5ceefe2ef866b' }, h("a", { key: '7fd283969d02fbce9b4a7a585a1b88dae1fd5fbe', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
     static get is() { return "af-social-link"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,46 @@
+/* Theme CSS custom properties are loaded globally from @affinda/css */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.split-section {
+  position: relative;
+  width: 100%;
+  /* Background is set via inline style with linear-gradient */
+}
+
+/* ==========================================================================
+   Padding Variants
+   ========================================================================== */
+
+.padding-tight {
+  padding: 48px 0;
+}
+
+.padding-default {
+  padding: 96px 0;
+}
+
+.padding-loose {
+  padding: 120px 0 96px;
+}
+
+/* ==========================================================================
+   Mobile Adjustments
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .padding-tight {
+    padding: 32px 0;
+  }
+  
+  .padding-default {
+    padding: 64px 0;
+  }
+  
+  .padding-loose {
+    padding: 80px 0 64px;
+  }
+}