@affinda/wc 0.0.17 → 0.0.19

package/dist/collection/components/af-accordion-item/af-accordion-item.js

@@ -0,0 +1,224 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A single collapsible accordion item with header and content.
+ * Can be used standalone or within an af-accordion container.
+ *
+ * @slot trigger - The clickable header content
+ * @slot - The collapsible content (default slot)
+ */
+export class AfAccordionItem {
+    constructor() {
+        /**
+         * Whether this item is currently expanded
+         */
+        this.open = false;
+        /**
+         * Whether this item is disabled (cannot be toggled)
+         */
+        this.disabled = false;
+        this.contentHeight = 0;
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.toggle();
+            }
+        };
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.measureContent();
+        }
+    }
+    componentDidLoad() {
+        // #region agent log
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad', message: 'Component loaded', data: { itemId: this.itemId, hasShadowRoot: !!this.el.shadowRoot }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'E' }) }).catch(() => { });
+        // #endregion
+        // #region agent log
+        const shadowRoot = this.el.shadowRoot;
+        const triggerSlot = shadowRoot?.querySelector('slot[name="trigger"]');
+        const assignedNodes = triggerSlot?.assignedNodes() || [];
+        const assignedElements = triggerSlot?.assignedElements() || [];
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad:slotCheck', message: 'Checking trigger slot content', data: { hasTriggerSlot: !!triggerSlot, assignedNodesCount: assignedNodes.length, assignedElementsCount: assignedElements.length, assignedContent: assignedElements.map(el => ({ tagName: el.tagName, textContent: el.textContent })) }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'A' }) }).catch(() => { });
+        // #endregion
+        // #region agent log
+        const triggerContent = shadowRoot?.querySelector('.trigger-content');
+        const triggerContentStyles = triggerContent ? getComputedStyle(triggerContent) : null;
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad:styleCheck', message: 'Checking trigger-content styles', data: { hasTriggerContent: !!triggerContent, width: triggerContent?.offsetWidth, height: triggerContent?.offsetHeight, color: triggerContentStyles?.color, display: triggerContentStyles?.display, visibility: triggerContentStyles?.visibility }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'B,C' }) }).catch(() => { });
+        // #endregion
+        // #region agent log
+        const lightDomChildren = Array.from(this.el.children);
+        const slottedTrigger = this.el.querySelector('[slot="trigger"]');
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:componentDidLoad:lightDomCheck', message: 'Checking light DOM for slotted content', data: { lightDomChildCount: lightDomChildren.length, lightDomTags: lightDomChildren.map(c => c.tagName), hasSlottedTrigger: !!slottedTrigger, slottedTriggerText: slottedTrigger?.textContent }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'D' }) }).catch(() => { });
+        // #endregion
+        if (this.open) {
+            this.measureContent();
+        }
+        // Set up ResizeObserver to handle dynamic content changes
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.open && this.contentRef) {
+                this.contentHeight = this.contentRef.scrollHeight;
+            }
+        });
+        if (this.contentRef) {
+            this.resizeObserver.observe(this.contentRef);
+        }
+    }
+    disconnectedCallback() {
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    /**
+     * Programmatically toggle the accordion item
+     */
+    async toggle() {
+        if (!this.disabled) {
+            this.open = !this.open;
+            this.accordionToggle.emit({ itemId: this.itemId, open: this.open });
+        }
+    }
+    measureContent() {
+        // Use requestAnimationFrame to ensure DOM has updated before measuring
+        requestAnimationFrame(() => {
+            if (this.contentRef) {
+                this.contentHeight = this.contentRef.scrollHeight;
+            }
+        });
+    }
+    render() {
+        // #region agent log
+        fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ location: 'af-accordion-item.tsx:render', message: 'Render called', data: { itemId: this.itemId, open: this.open }, timestamp: Date.now(), sessionId: 'debug-session', hypothesisId: 'E' }) }).catch(() => { });
+        // #endregion
+        const contentStyle = {
+            maxHeight: this.open ? `${this.contentHeight}px` : '0px'
+        };
+        return (h(Host, { key: '3fe538b657584129ecdce848caf5a9425287a354', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: '6d1766d97738f60f1d21a7f623ef732a15a9e911', class: "accordion-item" }, h("button", { key: '8782c20a4d74f655786586d7d7fd4255a6fc2806', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: '54aff551c3547148f92c26bc51a42417a36ff4d3', class: "trigger-content" }, h("slot", { key: '5692b3c1b11ff38b3bde8c7dd30a2c2a2e1b5c67', name: "trigger" })), h("div", { key: '88d0a967e3ed518d8355c824f226ad21abf96c0f', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: 'd879b4f0a2b6b4de5782c783d2202fb6c9cb73f8', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '590eaf035dc51886a303dee77152c64c227e9ccb', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '02c882442a9cbe57b4888b07c95f2b6f252f1cc7', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '6975a215a16bcfb27cc76aba7daed2a19d0f143d', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '9b7d50813485ff195d0105bf2d97d1c032ab5aff' }))))));
+    }
+    static get is() { return "af-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "itemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this accordion item.\nUsed by parent af-accordion to track open state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "item-id"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is currently expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is disabled (cannot be toggled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentHeight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "accordionToggle",
+                "name": "af-accordion-toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the accordion item is toggled"
+                },
+                "complexType": {
+                    "original": "{ itemId: string; open: boolean }",
+                    "resolved": "{ itemId: string; open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically toggle the accordion item",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=af-accordion-item.js.map

package/dist/collection/components/af-accordion-item/af-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-accordion-item.js","sourceRoot":"","sources":["../../../src/components/af-accordion-item/af-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n * \n * @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n */\n@Component({\n  tag: 'af-accordion-item',\n  styleUrl: 'af-accordion-item.css',\n  shadow: true,\n})\nexport class AfAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this accordion item.\n   * Used by parent af-accordion to track open state.\n   */\n  @Prop({ reflect: true }) itemId!: string;\n\n  /**\n   * Whether this item is currently expanded\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n  @State() contentHeight: number = 0;\n\n  private contentRef?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.measureContent();\n    }\n  }\n\n  componentDidLoad() {\n    // #region agent log\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad',message:'Component loaded',data:{itemId:this.itemId,hasShadowRoot:!!this.el.shadowRoot},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'E'})}).catch(()=>{});\n    // #endregion\n\n    // #region agent log\n    const shadowRoot = this.el.shadowRoot;\n    const triggerSlot = shadowRoot?.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement | null;\n    const assignedNodes = triggerSlot?.assignedNodes() || [];\n    const assignedElements = triggerSlot?.assignedElements() || [];\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad:slotCheck',message:'Checking trigger slot content',data:{hasTriggerSlot:!!triggerSlot,assignedNodesCount:assignedNodes.length,assignedElementsCount:assignedElements.length,assignedContent:assignedElements.map(el => ({tagName:(el as Element).tagName,textContent:(el as Element).textContent}))},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'A'})}).catch(()=>{});\n    // #endregion\n\n    // #region agent log\n    const triggerContent = shadowRoot?.querySelector('.trigger-content') as HTMLElement | null;\n    const triggerContentStyles = triggerContent ? getComputedStyle(triggerContent) : null;\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad:styleCheck',message:'Checking trigger-content styles',data:{hasTriggerContent:!!triggerContent,width:triggerContent?.offsetWidth,height:triggerContent?.offsetHeight,color:triggerContentStyles?.color,display:triggerContentStyles?.display,visibility:triggerContentStyles?.visibility},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'B,C'})}).catch(()=>{});\n    // #endregion\n\n    // #region agent log\n    const lightDomChildren = Array.from(this.el.children);\n    const slottedTrigger = this.el.querySelector('[slot=\"trigger\"]');\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:componentDidLoad:lightDomCheck',message:'Checking light DOM for slotted content',data:{lightDomChildCount:lightDomChildren.length,lightDomTags:lightDomChildren.map(c => c.tagName),hasSlottedTrigger:!!slottedTrigger,slottedTriggerText:slottedTrigger?.textContent},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'D'})}).catch(()=>{});\n    // #endregion\n\n    if (this.open) {\n      this.measureContent();\n    }\n    \n    // Set up ResizeObserver to handle dynamic content changes\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.open && this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n    \n    if (this.contentRef) {\n      this.resizeObserver.observe(this.contentRef);\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  /**\n   * Programmatically toggle the accordion item\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled) {\n      this.open = !this.open;\n      this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n    }\n  }\n\n  private measureContent() {\n    // Use requestAnimationFrame to ensure DOM has updated before measuring\n    requestAnimationFrame(() => {\n      if (this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.toggle();\n    }\n  };\n\n  render() {\n    // #region agent log\n    fetch('http://127.0.0.1:7242/ingest/b0b55d5e-d10c-4b52-9f1d-02a40f4c5e87',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'af-accordion-item.tsx:render',message:'Render called',data:{itemId:this.itemId,open:this.open},timestamp:Date.now(),sessionId:'debug-session',hypothesisId:'E'})}).catch(()=>{});\n    // #endregion\n\n    const contentStyle = {\n      maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n    };\n\n    return (\n      <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n        <div class=\"accordion-item\">\n          <button\n            class=\"trigger\"\n            onClick={this.handleTriggerClick}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls={`content-${this.itemId}`}\n            disabled={this.disabled}\n            type=\"button\"\n          >\n            <div class=\"trigger-content\">\n              <slot name=\"trigger\"></slot>\n            </div>\n            <div class={{ 'chevron': true, 'is-open': this.open }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </div>\n          </button>\n          <div\n            id={`content-${this.itemId}`}\n            class=\"content-wrapper\"\n            style={contentStyle}\n            aria-hidden={!this.open ? 'true' : 'false'}\n          >\n            <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 /**
  * Button component that inherits colors from theme context.
- * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+ * Colors are determined by the parent theme (af-section, af-card, etc.)
  * via CSS custom properties.
  *
  * @slot - Button label text

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

@@ -1 +1 @@
-{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;;;;;GAQG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;;;WAKG;QACsB,YAAO,GAAyC,SAAS,CAAC;QAEnF;;;;WAIG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QAO9C,gBAAW,GAAY,KAAK,CAAC;QAC7B,iBAAY,GAAY,KAAK,CAAC;QAE/B,qBAAgB,GAAG,CAAC,QAAoC,EAAE,EAAE,CAAC,CAAC,KAAY,EAAE,EAAE;YACpF,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YACnD,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;KAyCH;IAvCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE;gBACjE,YAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE;gBACnE,YAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS,CAC7E;SACR,CAAC;QAEF,0DAA0D;QAC1D,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `tertiary` - Subtle text-link style with underline\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs\n   * - `small` - Compact size for inline or secondary contexts\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;;;;;GAQG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;;;WAKG;QACsB,YAAO,GAAyC,SAAS,CAAC;QAEnF;;;;WAIG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QAO9C,gBAAW,GAAY,KAAK,CAAC;QAC7B,iBAAY,GAAY,KAAK,CAAC;QAE/B,qBAAgB,GAAG,CAAC,QAAoC,EAAE,EAAE,CAAC,CAAC,KAAY,EAAE,EAAE;YACpF,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YACnD,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;KAyCH;IAvCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE;gBACjE,YAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE;gBACnE,YAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS,CAC7E;SACR,CAAC;QAEF,0DAA0D;QAC1D,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `tertiary` - Subtle text-link style with underline\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs\n   * - `small` - Compact size for inline or secondary contexts\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-button-group/af-button-group.js

@@ -15,7 +15,7 @@ export class AfButtonGroup {
             'button-group': true,
             [`direction-${this.direction}`]: true
         };
-        return (h(Host, { key: '28faa5610144730bd66361b304167a0fb64be5d5' }, h("div", { key: 'a4bcc27d77f421dff083f5cccfe261be34a9b8f1', class: classes, style: { gap: this.gap } }, h("slot", { key: '365862ea727b18cfa0a96f0b99d9fb338c0be91a' }))));
+        return (h(Host, { key: '476e29cb69f3ff7b616cc0fbe1de00709db6bdc0' }, h("div", { key: '6c3002a6540e4a7581f93affac1933c36ad48199', class: classes, style: { gap: this.gap } }, h("slot", { key: '44559af160fcaee6596a46a9428215587634eec5' }))));
     }
     static get is() { return "af-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,6 +85,17 @@
   --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
   --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
   --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --af-form-control-bg: var(--colour-inkwell-450, #203e45);
+  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);
+  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);
+  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);
+  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);
+  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);
+  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);
+  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-label: var(--colour-brand-white, #ffffff);
 }
 
 /* MIST-GREEN THEME */

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

@@ -26,7 +26,7 @@ export class AfCard {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '6cca6ca308005443face72876637fafb9db98d8e' }, h("div", { key: 'c78b8297fdf5e12159e62f6f142cda2663315a21', class: classes }, h("div", { key: 'e18adbc09fcd0ed80f4decd30ebc8a5334ce86ad', class: "card__content" }, h("slot", { key: '312f6852573f1a550e8a67aa6e84a87cde3aaf43' })))));
+        return (h(Host, { key: 'efd6ae011a1fb247ac79b2ecc5feaf4c9589bcba' }, h("div", { key: 'e8e4bba3554986337e2f13c2cf9be83971035158', class: classes }, h("div", { key: 'fecb01569f2b407a1239aa60c66fba67cf3f09dc', class: "card__content" }, h("slot", { key: 'd65732b56be56fe4399297cc35b9f842a7719bd6' })))));
     }
     static get is() { return "af-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none;
+}
+

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

@@ -0,0 +1,119 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Center layout component for quickly centering content.
+ * Supports horizontal, vertical, or both axes.
+ *
+ * @slot - Content to center
+ */
+export class AfCenter {
+    constructor() {
+        /**
+         * Which axis to center on.
+         * - 'horizontal': Center horizontally (justify-content: center)
+         * - 'vertical': Center vertically (align-items: center)
+         * - 'both': Center on both axes
+         */
+        this.axis = 'both';
+        /**
+         * Use inline-flex instead of flex.
+         * Useful when the center container should only take up as much space as needed.
+         */
+        this.inline = false;
+    }
+    render() {
+        const style = {
+            display: this.inline ? 'inline-flex' : 'flex',
+        };
+        if (this.axis === 'horizontal' || this.axis === 'both') {
+            style.justifyContent = 'center';
+        }
+        if (this.axis === 'vertical' || this.axis === 'both') {
+            style.alignItems = 'center';
+        }
+        if (this.minHeight) {
+            style.minHeight = this.minHeight;
+        }
+        return (h(Host, { key: 'ea24131f49ed2e71639eb55ac38c19519d8e4608', style: style }, h("slot", { key: '6547ee3e9cae65dd7373e8cb7b5adfa29042f851' })));
+    }
+    static get is() { return "af-center"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-center.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-center.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "axis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Axis",
+                    "resolved": "\"both\" | \"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Axis": {
+                            "location": "global",
+                            "id": "global::Axis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which axis to center on.\n- 'horizontal': Center horizontally (justify-content: center)\n- 'vertical': Center vertically (align-items: center)\n- 'both': Center on both axes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "axis",
+                "defaultValue": "'both'"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use inline-flex instead of flex.\nUseful when the center container should only take up as much space as needed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set a minimum height. Useful for vertical centering in a viewport.\nAccepts any valid CSS value (e.g., '100vh', '400px')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-center.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-center.js","sourceRoot":"","sources":["../../../src/components/af-center/af-center.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;;;WAKG;QACK,SAAI,GAAS,MAAM,CAAC;QAE5B;;;WAGG;QACK,WAAM,GAAY,KAAK,CAAC;KA+BjC;IAvBC,MAAM;QACJ,MAAM,KAAK,GAA2B;YACpC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;SAC9C,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACvD,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACrD,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC9B,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Axis = 'horizontal' | 'vertical' | 'both';\n\n/**\n * Center layout component for quickly centering content.\n * Supports horizontal, vertical, or both axes.\n *\n * @slot - Content to center\n */\n@Component({\n  tag: 'af-center',\n  styleUrl: 'af-center.css',\n  shadow: true,\n})\nexport class AfCenter {\n  /**\n   * Which axis to center on.\n   * - 'horizontal': Center horizontally (justify-content: center)\n   * - 'vertical': Center vertically (align-items: center)\n   * - 'both': Center on both axes\n   */\n  @Prop() axis: Axis = 'both';\n\n  /**\n   * Use inline-flex instead of flex.\n   * Useful when the center container should only take up as much space as needed.\n   */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Set a minimum height. Useful for vertical centering in a viewport.\n   * Accepts any valid CSS value (e.g., '100vh', '400px').\n   */\n  @Prop() minHeight?: string;\n\n  render() {\n    const style: Record<string, string> = {\n      display: this.inline ? 'inline-flex' : 'flex',\n    };\n\n    if (this.axis === 'horizontal' || this.axis === 'both') {\n      style.justifyContent = 'center';\n    }\n\n    if (this.axis === 'vertical' || this.axis === 'both') {\n      style.alignItems = 'center';\n    }\n\n    if (this.minHeight) {\n      style.minHeight = this.minHeight;\n    }\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -10,7 +10,7 @@
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
   font-size: 14px;
   line-height: 20px;
-  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));
   user-select: none;
 }
 
@@ -34,52 +34,66 @@
 
 /* Custom checkbox control */
 .control {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
+  display: block;
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-radius: var(--radii-checkbox, 4px);
-  border: 1px solid var(--forms-control-stroke, #d0d6d8);
-  background: var(--forms-control-bg-default, #ffffff);
+  /* Use inset box-shadow instead of border to prevent layout shift */
+  border: none;
+  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));
+  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));
   transition: all 0.15s ease;
   box-sizing: border-box;
 }
 
 /* Checked/indeterminate state */
 .control.checked {
-  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
-  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));
+  box-shadow: none;
 }
 
 /* Disabled state */
 .control.disabled {
-  background: var(--forms-control-bg-default-disabled, #e8ebeb);
-  border-color: var(--forms-control-stroke-disabled, #d0d6d8);
+  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));
+  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));
 }
 
 .control.checked.disabled {
-  background: var(--forms-control-bg-active-disabled, #708380);
-  border-color: var(--forms-control-bg-active-disabled, #708380);
+  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));
+  box-shadow: none;
 }
 
 /* Hover state */
-.checkbox:not(.disabled):hover .control {
-  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
+.checkbox:not(.disabled):hover .control:not(.checked) {
+  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
 }
 
 /* Focus state */
 .input:focus-visible + .control {
-  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);
   outline: none;
+  box-shadow: 
+    inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),
+    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), 
+    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
+}
+
+.input:focus-visible + .control.checked {
+  box-shadow: 
+    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), 
+    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
 }
 
-/* Icon styling */
+/* Icon styling - absolutely positioned to prevent layout shift */
 .icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: 16px;
   height: 16px;
-  color: #ffffff;
+  color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));
 }
 
 /* Label styling */
@@ -93,4 +107,3 @@
 .label:empty {
   display: none;
 }
-

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

@@ -48,7 +48,7 @@ export class AfCheckbox {
             'checked': this.checked || this.indeterminate,
             'disabled': this.disabled
         };
-        return (h(Host, { key: '704dbd9106798984fcbd46e56f8a9baca515bdbf' }, h("label", { key: '81ca6ce4e7a75eb371670a3dda2020e2b0b964fa', class: checkboxClasses }, h("input", { key: 'eb1b53e57dcbdb642d27980059e193d91ecfe926', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'de52fa18c14faf38a40aff2a5d99c679efabcfa3', class: controlClasses }, this.checked && !this.indeterminate && (h("svg", { key: '4e8d59f891090221798d9aae19156ccf51d1b297', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'c53cce8b04e2c4c5e08744bc184add29a3e808b5', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '420a6222b098df08f66a84e3f92734f7d9a7fc43', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8ff3b3d01c6db33f2eb753caea38f0a1feeab717', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("span", { key: '9513888140fbe087a71ef79b4c80a66f6a8e49ec', class: "label" }, h("slot", { key: '4fd9ddb4b6e25ded5f806ad7682a553fba119671' })))));
+        return (h(Host, { key: '3133417b8722f3d3b854391a2f9362405d6b645d' }, h("label", { key: '375fa0931469ba89017cd8f6962a9f130a8099b7', class: checkboxClasses }, h("input", { key: 'b4714d31bfd2689ed8276bec0fa5580dc4b7457c', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'c3472bec48c64733eeadb17c86dd25699fb3efd8', class: controlClasses }, this.checked && !this.indeterminate && (h("svg", { key: '2d569ab2de0fc5b75ca605c48e395ecf0b61e084', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '3d9991a86bd8065687bca3b206878fe8cabd991c', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '81c46466f7853a4c85a20c08ab4e79b30d76de90', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'c55aca66a778a9a65a5d621b28607565451e0560', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("span", { key: '9f8c25404a57227172617b6b28a30c9fd816edfa', class: "label" }, h("slot", { key: '087b50963a66f4bd79aedd7af52cb8c9697c8b4f' })))));
     }
     static get is() { return "af-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-client-carousel/af-client-carousel.js

@@ -13,7 +13,7 @@ export class AfClientCarousel {
         this.theme = 'inkwell';
     }
     render() {
-        return (h(Host, { key: '5b422b47406a2ce622a2c67f88f9da6933812768', class: `theme-${this.theme}` }, h("div", { key: '830bbbd027dcd61d282c80d8ec2edf8cbabef1d1', class: `client-carousel theme-${this.theme}` }, h("div", { key: 'e8746e1860a94eba0d8136dce2c3aa81986eedb2', class: "carousel-container" }, h("div", { key: '13e17fd9ae7a4959997f342c93e6bf44091b31a2', class: "carousel-row scroll-left" }, h("div", { key: '9c9f813b95406aa35b7b44bfc081079af520d836', class: "logo-track" }, h("slot", { key: 'ea952977509633ac91113591865af83ca3cb5ba9', name: "row-1" }), h("slot", { key: '7c838999d4e97f46b5855f62a2f6bee42617c18d', name: "row-1" }))), h("div", { key: '2e30703c86f4d6dad64d9233568996926b9ce4a6', class: "carousel-row scroll-right" }, h("div", { key: 'df2eb879096a421a3702c77e9db2c6416adfe393', class: "logo-track" }, h("slot", { key: '031fdc0c8fb9f69e8f3ae3eff10f7c7e72dca9db', name: "row-2" }), h("slot", { key: 'e48f4d94ab9707d143329e443ec8cee4da66cb9a', name: "row-2" })))))));
+        return (h(Host, { key: '2e7ecfbbde6c66bcb8c2b581ef65938451b46f10', class: `theme-${this.theme}` }, h("div", { key: 'c17d3a429c31fd0c8b45792be5af4191079ec070', class: `client-carousel theme-${this.theme}` }, h("div", { key: '42f1dde981082b450991ab1d9e73e06f357fc7b7', class: "carousel-container" }, h("div", { key: 'be3106cce710d07ef4ace805f7beea181c2881e3', class: "carousel-row scroll-left" }, h("div", { key: 'c5b6959756e7f86ba2bba6b5b6b403e906c804bb', class: "logo-track" }, h("slot", { key: '712acf9f80c4eec3f1f44c6854fca813a3d942a9', name: "row-1" }), h("slot", { key: '6a8819dcc886bb5d8f6898390f615612e38d7a4e', name: "row-1" }))), h("div", { key: 'e5811147386c7232e8b2ca191e08eae1a66a3204', class: "carousel-row scroll-right" }, h("div", { key: 'f38087992cc2b1c4e5f876d02b1a976aafc4df63', class: "logo-track" }, h("slot", { key: '3240385b3d01e8da8decc67313ddca23f1a076f5', name: "row-2" }), h("slot", { key: 'e7fa32487ab745ab3ac86e10fc9a7211b576a15d', name: "row-2" })))))));
     }
     static get is() { return "af-client-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-contact-item/af-contact-item.js

@@ -11,7 +11,7 @@ export class AfContactItem {
         this.value = '';
     }
     render() {
-        return (h(Host, { key: 'fab41abebbb385d54aac14e620e18e713b97b8fb' }, h("div", { key: '66935eed5340e987276e8487acea6fd1858a4333', class: "contact-item" }, this.label && (h("h5", { key: '97113a9f95f873b03c54e22f87662eda97df06fc', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: 'd45cdfc1dc08d2dc6f8232f04c21a345fb54fc5b', class: "contact-item__value" }, this.value)), h("slot", { key: 'e128fb4d7e006e371e54b98e2a3d817c47664642' }))));
+        return (h(Host, { key: '25c9989697baa866874a566ea76bad08946773fc' }, h("div", { key: 'ad2ada738e77fd5f1c03cdc2beba65c1cfb6f827', class: "contact-item" }, this.label && (h("h5", { key: '7d7105256639744dff5e640ea8f5842f6d10d1ee', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: 'c661a4a566280c5470d917f537c85fa7afd09d44', class: "contact-item__value" }, this.value)), h("slot", { key: 'd7f1e94f19e5fbcbc25fcccf57f39d68fda88d61' }))));
     }
     static get is() { return "af-contact-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,25 @@
+:host {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(.divider--horizontal) {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: var(--colour-tints-inkwell-100, #d4d4d4);
+}
+
+:host(.divider--vertical) {
+  display: inline-block;
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+  background-color: var(--colour-tints-inkwell-100, #d4d4d4);
+  align-self: stretch;
+}
+