@affinda/wc 0.0.14 → 0.0.16

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: '612e24d2b0cf678687c97799e870d17d2b74d236' });
-        return (h(Host, { key: '13e74f2a301c1ca178a806789f3df7d7413498ff' }, h("div", { key: '9968aa80b1fa0a44d4c86fc8612ca4fe59cf7112', 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: '7761c19f95afb1353ac33ec1a121ad763976c5bb' }, h("a", { key: 'daf55dfa75facd649cb920ed14f6b488a4bb5487', 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;
+  }
+}

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;
+}
+