@affinda/wc 0.0.26 → 0.0.27

package/dist/components/p-BjJS1_8G.js

@@ -0,0 +1,102 @@
+import { p as proxyCustomElement, H, h } from './p-BBpihWJI.js';
+
+const afAspectRatioCss = ":host{display:block;width:100%}.aspect-ratio-container{width:100%;position:relative;overflow:hidden}.aspect-ratio-container ::slotted(*){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}";
+
+const AfAspectRatio = /*@__PURE__*/ proxyCustomElement(class AfAspectRatio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The aspect ratio to maintain. Can be:
+         * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.
+         * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
+         *
+         * @example
+         * <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio>
+         * <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
+         */
+        this.ratio = '1:1';
+    }
+    getRatioValue() {
+        // Map common ratio shortcuts to actual CSS aspect-ratio values
+        const ratioMap = {
+            // Common ratios
+            '1:1': '1 / 1',
+            '1:2': '1 / 2',
+            '2:1': '2 / 1',
+            '2:3': '2 / 3',
+            '3:1': '3 / 1',
+            '3:2': '3 / 2',
+            '3:4': '3 / 4',
+            '4:1': '4 / 1',
+            '4:3': '4 / 3',
+            '4:5': '4 / 5',
+            '5:2': '5 / 2',
+            '5:4': '5 / 4',
+            '8:3': '8 / 3',
+            '8:5': '8 / 5',
+            // Screen ratios
+            '9:8': '9 / 8',
+            '9:16': '9 / 16',
+            '9:21': '9 / 21',
+            '10:16': '10 / 16',
+            '14:3': '14 / 3',
+            '16:5': '16 / 5',
+            '16:9': '16 / 9',
+            '16:10': '16 / 10',
+            '21:9': '21 / 9',
+            '32:9': '32 / 9',
+            // Golden ratio variants
+            'golden-portrait': '1 / 1.618',
+            'golden-landscape': '1.618 / 1',
+            'golden-portrait-half': '1 / 0.809',
+            'golden-landscape-half': '0.809 / 1',
+            // Paper sizes - A4
+            'a4-portrait': '1 / 1.414',
+            'a4-landscape': '1.414 / 1',
+            'a4-portrait-half': '1 / 0.707',
+            'a4-landscape-half': '0.707 / 1',
+            // Paper sizes - Letter
+            'letter-portrait': '1 / 1.294',
+            'letter-landscape': '1.294 / 1',
+            'letter-portrait-half': '1 / 0.647',
+            'letter-landscape-half': '0.647 / 1',
+            // Special
+            '6:7': '6 / 7'
+        };
+        // If it's a predefined ratio, return the mapped value
+        if (ratioMap[this.ratio]) {
+            return ratioMap[this.ratio];
+        }
+        // Otherwise, assume it's a custom ratio already in the correct format
+        return this.ratio;
+    }
+    render() {
+        const ratioValue = this.getRatioValue();
+        return (h("div", { key: '02bfa5463911ecd25903521e90a0570bb3bca0ad', class: "aspect-ratio-container", style: { aspectRatio: ratioValue } }, h("slot", { key: '9575c859052e8f1b1b362d9395fdfdf43d46b0b4' })));
+    }
+    static get style() { return afAspectRatioCss; }
+}, [257, "af-aspect-ratio", {
+        "ratio": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-aspect-ratio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-aspect-ratio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfAspectRatio);
+            }
+            break;
+    } });
+}
+
+export { AfAspectRatio as A, defineCustomElement as d };
+//# sourceMappingURL=p-BjJS1_8G.js.map
+
+//# sourceMappingURL=p-BjJS1_8G.js.map

package/dist/components/p-BjJS1_8G.js.map

@@ -0,0 +1 @@
+{"file":"p-BjJS1_8G.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6MAA6M;;MCWzN,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,KAAK;AAuE9B;IArES,aAAa,GAAA;;AAEnB,QAAA,MAAM,QAAQ,GAA8B;;AAE1C,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;;AAEd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;;AAEhB,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,aAAa,EAAE,WAAW;AAC1B,YAAA,cAAc,EAAE,WAAW;AAC3B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,mBAAmB,EAAE,WAAW;;AAEhC,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,KAAK,EAAE;SACR;;AAGD,QAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;;;QAI7B,OAAO,IAAI,CAAC,KAAK;;IAGnB,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAAA,EAElC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-aspect-ratio/af-aspect-ratio.css?tag=af-aspect-ratio&encapsulation=shadow","src/components/af-aspect-ratio/af-aspect-ratio.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.aspect-ratio-container {\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Ensure slotted content fills the container */\n.aspect-ratio-container ::slotted(*) {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A container component that maintains a fixed aspect ratio for its content.\n * Useful for images, videos, or any content that needs to maintain specific proportions.\n */\n@Component({\n  tag: 'af-aspect-ratio',\n  styleUrl: 'af-aspect-ratio.css',\n  shadow: true\n})\nexport class AfAspectRatio {\n  /**\n   * The aspect ratio to maintain. Can be:\n   * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.\n   * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.\n   *\n   * @example\n   * <af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n   * <af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>\n   */\n  @Prop() ratio: string = '1:1';\n\n  private getRatioValue(): string {\n    // Map common ratio shortcuts to actual CSS aspect-ratio values\n    const ratioMap: { [key: string]: string } = {\n      // Common ratios\n      '1:1': '1 / 1',\n      '1:2': '1 / 2',\n      '2:1': '2 / 1',\n      '2:3': '2 / 3',\n      '3:1': '3 / 1',\n      '3:2': '3 / 2',\n      '3:4': '3 / 4',\n      '4:1': '4 / 1',\n      '4:3': '4 / 3',\n      '4:5': '4 / 5',\n      '5:2': '5 / 2',\n      '5:4': '5 / 4',\n      '8:3': '8 / 3',\n      '8:5': '8 / 5',\n      // Screen ratios\n      '9:8': '9 / 8',\n      '9:16': '9 / 16',\n      '9:21': '9 / 21',\n      '10:16': '10 / 16',\n      '14:3': '14 / 3',\n      '16:5': '16 / 5',\n      '16:9': '16 / 9',\n      '16:10': '16 / 10',\n      '21:9': '21 / 9',\n      '32:9': '32 / 9',\n      // Golden ratio variants\n      'golden-portrait': '1 / 1.618',\n      'golden-landscape': '1.618 / 1',\n      'golden-portrait-half': '1 / 0.809',\n      'golden-landscape-half': '0.809 / 1',\n      // Paper sizes - A4\n      'a4-portrait': '1 / 1.414',\n      'a4-landscape': '1.414 / 1',\n      'a4-portrait-half': '1 / 0.707',\n      'a4-landscape-half': '0.707 / 1',\n      // Paper sizes - Letter\n      'letter-portrait': '1 / 1.294',\n      'letter-landscape': '1.294 / 1',\n      'letter-portrait-half': '1 / 0.647',\n      'letter-landscape-half': '0.647 / 1',\n      // Special\n      '6:7': '6 / 7'\n    };\n\n    // If it's a predefined ratio, return the mapped value\n    if (ratioMap[this.ratio]) {\n      return ratioMap[this.ratio];\n    }\n\n    // Otherwise, assume it's a custom ratio already in the correct format\n    return this.ratio;\n  }\n\n  render() {\n    const ratioValue = this.getRatioValue();\n\n    return (\n      <div\n        class=\"aspect-ratio-container\"\n        style={{ aspectRatio: ratioValue }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BnX_qYj5.js

@@ -0,0 +1,58 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+
+const afFieldsetCss = ":host{display:block}.fieldset{display:flex;flex-direction:column;border:none;padding:0;margin:0;min-inline-size:0}.fieldset.disabled{opacity:0.5;pointer-events:none}.legend{display:block;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));padding:0;margin:0 0 12px 0;width:100%}.items{display:flex}.items.orientation-vertical{flex-direction:column;gap:8px;align-items:flex-start}.items.orientation-horizontal{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center}::slotted(*){flex-shrink:0}.items.orientation-vertical ::slotted(*){width:100%}";
+
+const AfFieldset = /*@__PURE__*/ proxyCustomElement(class AfFieldset extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The layout orientation of the fieldset items
+         * - `vertical` - Items stack vertically (default)
+         * - `horizontal` - Items are laid out horizontally
+         */
+        this.orientation = 'vertical';
+        /**
+         * Whether the fieldset is disabled (disables all child controls)
+         */
+        this.disabled = false;
+    }
+    render() {
+        const fieldsetClasses = {
+            'fieldset': true,
+            [`orientation-${this.orientation}`]: true,
+            'disabled': this.disabled
+        };
+        const itemsClasses = {
+            'items': true,
+            [`orientation-${this.orientation}`]: true
+        };
+        return (h(Host, { key: '907af09a079116df5906d3ee63454c6d788e98f9' }, h("fieldset", { key: '30396861eb6e071b740edcfcbe79b08a8f94ccac', class: fieldsetClasses, disabled: this.disabled }, this.legend && (h("legend", { key: 'c4e3f1936945e5cdaa9d7a735970fd06926fe2e5', class: "legend" }, this.legend)), h("div", { key: 'a3a2446d6f061bab988ef2dcbe1721d650fb4823', class: itemsClasses }, h("slot", { key: '1aec6fa9ab398e634c0b3eec3d5287a206609bfe' })))));
+    }
+    static get style() { return afFieldsetCss; }
+}, [257, "af-fieldset", {
+        "legend": [1],
+        "orientation": [1],
+        "disabled": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-fieldset"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-fieldset":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfFieldset);
+            }
+            break;
+    } });
+}
+
+export { AfFieldset as A, defineCustomElement as d };
+//# sourceMappingURL=p-BnX_qYj5.js.map
+
+//# sourceMappingURL=p-BnX_qYj5.js.map

package/dist/components/p-BnX_qYj5.js.map

@@ -0,0 +1 @@
+{"file":"p-BnX_qYj5.js","mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-BntvCg5H.js

@@ -0,0 +1,45 @@
+import { p as proxyCustomElement, H, h } from './p-BBpihWJI.js';
+
+const afContainerCss = ":host{display:block;width:100%}.container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;padding-left:20px;padding-right:20px}@media (min-width: 768px){.container{padding-left:32px;padding-right:32px}.max-width-medium{max-width:768px}}@media (min-width: 1024px){.container{padding-left:64px;padding-right:64px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}@media (min-width: 1440px){.container{padding-left:80px;padding-right:80px}.max-width-xlarge{max-width:1440px}.max-width-large{max-width:1024px}.max-width-medium{max-width:768px}}.max-width-fluid{max-width:none}";
+
+const AfContainer = /*@__PURE__*/ proxyCustomElement(class AfContainer extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Maximum width constraint for the container
+         * - 'xlarge': 1440px container (default)
+         * - 'large': 1024px container
+         * - 'medium': 768px container
+         * - 'fluid': No max-width constraint, full width with margins
+         */
+        this.maxWidth = 'xlarge';
+    }
+    render() {
+        return (h("div", { key: '4a40fad6df79915adeb7273a7c71ed26b327ff8f', class: `container max-width-${this.maxWidth}` }, h("slot", { key: 'a1759c05860511cdb6b916e44925df7f7a80bcf1' })));
+    }
+    static get style() { return afContainerCss; }
+}, [257, "af-container", {
+        "maxWidth": [1, "max-width"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfContainer);
+            }
+            break;
+    } });
+}
+
+export { AfContainer as A, defineCustomElement as d };
+//# sourceMappingURL=p-BntvCg5H.js.map
+
+//# sourceMappingURL=p-BntvCg5H.js.map

package/dist/components/p-BntvCg5H.js.map

@@ -0,0 +1 @@
+{"file":"p-BntvCg5H.js","mappings":";;AAAA,MAAM,cAAc,GAAG,qmBAAqmB;;MCW/mB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;AAMG;AACK,QAAA,IAAQ,CAAA,QAAA,GAA4C,QAAQ;AASrE;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAA,EAChD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-container/af-container.css?tag=af-container&encapsulation=shadow","src/components/af-container/af-container.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.container {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  box-sizing: border-box;\n\n  /* Mobile first: base padding (applies below 768px) */\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n/* ≥ mobile */\n/* Medium breakpoint (768px) */\n@media (min-width: 768px) {\n  .container {\n    padding-left: 32px;\n    padding-right: 32px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* ≥ tablet */\n/* Large breakpoint (1024px) */\n@media (min-width: 1024px) {\n  .container {\n    padding-left: 64px;\n    padding-right: 64px;\n  }\n\n  .max-width-large {\n    max-width: 1024px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* ≥ desktop-wide */\n/* XLarge breakpoint (1440px) */\n@media (min-width: 1440px) {\n  .container {\n    padding-left: 80px;\n    padding-right: 80px;\n  }\n\n  .max-width-xlarge {\n    max-width: 1440px;\n  }\n\n  .max-width-large {\n    max-width: 1024px;\n  }\n\n  .max-width-medium {\n    max-width: 768px;\n  }\n}\n\n/* Fluid has no max-width */\n.max-width-fluid {\n  max-width: none;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A responsive container component that provides consistent margins and max-width\n * constraints based on the Affinda grid system.\n */\n@Component({\n  tag: 'af-container',\n  styleUrl: 'af-container.css',\n  shadow: true\n})\nexport class AfContainer {\n  /**\n   * Maximum width constraint for the container\n   * - 'xlarge': 1440px container (default)\n   * - 'large': 1024px container\n   * - 'medium': 768px container\n   * - 'fluid': No max-width constraint, full width with margins\n   */\n  @Prop() maxWidth: 'xlarge' | 'large' | 'medium' | 'fluid' = 'xlarge';\n\n  render() {\n    return (\n      <div class={`container max-width-${this.maxWidth}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-Btsw1ple.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h } from './p-BBpihWJI.js';
+
+const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));letter-spacing:var(--letter-spacing-heading, -0.02em)}.align-inherit{text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));line-height:var(--line-height-heading-tight, 1)}.level-1{font-size:var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));line-height:var(--line-height-heading-tight, 1)}.level-2{font-size:var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));line-height:var(--line-height-heading-tight, 1)}.level-3{font-size:var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));line-height:var(--line-height-heading-tight, 1)}.level-4{font-size:var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-4{line-height:var(--line-height-heading-relaxed, 1.2)}}.level-5{font-size:var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-5{line-height:var(--line-height-heading-relaxed, 1.2)}}";
+
+const AfHeading = /*@__PURE__*/ proxyCustomElement(class AfHeading extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Heading level */
+        this.level = '1';
+        /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */
+        this.align = 'inherit';
+    }
+    getHeadingTag() {
+        // Map display levels to semantic HTML tags
+        const tagMap = {
+            'xl': 'h1',
+            '1': 'h1',
+            '2': 'h2',
+            '3': 'h3',
+            '4': 'h4',
+            '5': 'h5'
+        };
+        return tagMap[this.level] || 'h1';
+    }
+    render() {
+        const Tag = this.getHeadingTag();
+        return (h(Tag, { key: '554451170ad9c9cf3345d4c115cc4bd360c54651', class: {
+                'heading': true,
+                [`level-${this.level}`]: true,
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: 'a41808f28f04efa17b49ef1a4ebfd79896ba8e98' })));
+    }
+    static get style() { return afHeadingCss; }
+}, [257, "af-heading", {
+        "level": [1],
+        "align": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-heading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfHeading);
+            }
+            break;
+    } });
+}
+
+export { AfHeading as A, defineCustomElement as d };
+//# sourceMappingURL=p-Btsw1ple.js.map
+
+//# sourceMappingURL=p-Btsw1ple.js.map

package/dist/components/p-Btsw1ple.js.map

@@ -0,0 +1 @@
+{"file":"p-Btsw1ple.js","mappings":";;AAAA,MAAM,YAAY,GAAG,06CAA06C;;MCYl7C,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAuC,GAAG;;AAG/C,QAAA,IAAK,CAAA,KAAA,GAA4C,SAAS;AA+BnE;IA7BS,aAAa,GAAA;;AAEnB,QAAA,MAAM,MAAM,GAA2B;AACrC,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE;SACN;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI;;IAGnC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS;QAEvC,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/* Alignment - inherits from --af-text-align if set, otherwise uses explicit align prop */\n.align-inherit {\n  text-align: var(--af-text-align, left);\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/*\n * Fluid typography: font-size scales continuously with viewport width between\n * the mobile size (anchored at 375px viewport) and the desktop size\n * (anchored at 1280px viewport) using clamp().\n *\n * Formula: clamp(mobilePx, Avw + Bpx, desktopPx)\n *   A = (desktop - mobile) / (1280 - 375) * 100   (vw slope)\n *   B = mobile - A/100 * 375                      (px intercept)\n *\n * Each level exposes a --font-size-heading-{level}-fluid custom property so\n * consumers can still override the resulting size without defeating clamp().\n */\n\n/* Heading XL */\n.level-xl {\n  font-size: var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n/* Heading 1 */\n.level-1 {\n  font-size: var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n/* Heading 2 */\n.level-2 {\n  font-size: var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n/* Heading 3 */\n.level-3 {\n  font-size: var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n/* Heading 4 */\n.level-4 {\n  font-size: var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-4 {\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n\n/* Heading 5 */\n.level-5 {\n  font-size: var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-5 {\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */\n  @Prop() align: 'inherit' | 'left' | 'center' | 'right' = 'inherit';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BxwCXPuv.js

@@ -0,0 +1,53 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+
+const afCardCss = ".sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--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)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}";
+
+const AfCard = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Theme - sets background color and provides theme context to children.
+         * Defaults to 'mist-green' if not specified.
+         */
+        this.theme = 'mist-green';
+        /**
+         * When true, the card stretches to fill its container height.
+         * Use this when the card is in a flex/grid container and needs to
+         * participate in equal-height layouts. The card's content will use
+         * flexbox to distribute space between children.
+         */
+        this.stretch = false;
+    }
+    render() {
+        const classes = {
+            'card': true,
+            [`theme-${this.theme}`]: true
+        };
+        return (h(Host, { key: '9847c934dc643291c0b19a5bbd7a5a1f95171573' }, h("div", { key: 'ef75699eb880055c79cfb605821167e5e9958aa5', class: classes }, h("div", { key: '48b0ca5f605d7af698564d6907e38dedf2a4beef', class: "card__content" }, h("slot", { key: 'fa2832e5ff3796fc80b72d5a4cb630e978a4b083' })))));
+    }
+    static get style() { return afCardCss; }
+}, [262, "af-card", {
+        "theme": [1],
+        "stretch": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfCard);
+            }
+            break;
+    } });
+}
+
+export { AfCard as A, defineCustomElement as d };
+//# sourceMappingURL=p-BxwCXPuv.js.map
+
+//# sourceMappingURL=p-BxwCXPuv.js.map

package/dist/components/p-BxwCXPuv.js.map

@@ -0,0 +1 @@
+{"file":"p-BxwCXPuv.js","mappings":";;AAAA,MAAM,SAAS,GAAG,i/FAAi/F;;MCet/F,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C8y3mc7N.js

@@ -0,0 +1,108 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+
+const afTabBarCss = ":host{display:block;width:100%}.tab-bar{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda)}.tab-bar::-webkit-scrollbar{height:4px}.tab-bar::-webkit-scrollbar-track{background:var(--af-scrollbar-track, #d1ddda);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb{background:var(--af-scrollbar-thumb, #8a7049);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb:hover{background:var(--af-scrollbar-thumb-hover, #8d785a)}.tab-bar.shape-square{gap:0;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}.tab-bar.shape-pill{gap:0;padding:var(--space-2, 8px);background-color:var(--af-background-level-1, #e8eeed);border-radius:var(--radius-pill, 999px)}.tab-bar.breakpoint-mobile{}.tab-bar.breakpoint-mobile.shape-square{}.tab-bar.breakpoint-mobile.shape-pill{padding:var(--space-1, 4px)}.tab-bar.breakpoint-desktop{}.tab-bar.breakpoint-desktop.shape-square{}.tab-bar.breakpoint-desktop.shape-pill{padding:var(--space-2, 8px)}";
+
+const AfTabBar = /*@__PURE__*/ proxyCustomElement(class AfTabBar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Visual shape variant for all tabs
+         * - `square` - Rectangular tabs with bottom border indicator
+         * - `pill` - Rounded pill tabs with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Responsive breakpoint mode
+         * - `mobile` - Compact layout with smaller padding
+         * - `desktop` - Larger layout with more generous spacing
+         */
+        this.breakpoint = 'desktop';
+    }
+    componentDidLoad() {
+        this.syncChildProps();
+    }
+    componentDidUpdate() {
+        this.syncChildProps();
+    }
+    /**
+     * Sync shape and breakpoint props to child af-tab elements
+     */
+    syncChildProps() {
+        const tabs = this.el.querySelectorAll('af-tab');
+        tabs.forEach((tab) => {
+            tab.setAttribute('shape', this.shape);
+            tab.setAttribute('data-breakpoint', this.breakpoint);
+        });
+    }
+    /**
+     * Handle keyboard navigation between tabs
+     */
+    handleKeyDown(event) {
+        const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])'));
+        const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);
+        if (currentIndex === -1)
+            return;
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        // Focus the button inside the shadow DOM of the tab
+        const targetTab = tabs[newIndex];
+        const button = targetTab.shadowRoot?.querySelector('button');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'tab-bar': true,
+            [`shape-${this.shape}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
+        };
+        return (h(Host, { key: '79e200382e16ac4fde0bef958763373b01d24feb', role: "tablist" }, h("div", { key: '703f11c9ed35f8163feba14a6056435c420ccf49', class: containerClasses }, h("slot", { key: '959d4581b14fd720f00f2faaf5b9845d9faa367a' }))));
+    }
+    get el() { return this; }
+    static get style() { return afTabBarCss; }
+}, [257, "af-tab-bar", {
+        "shape": [513],
+        "breakpoint": [513]
+    }, [[0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-tab-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-tab-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfTabBar);
+            }
+            break;
+    } });
+}
+
+export { AfTabBar as A, defineCustomElement as d };
+//# sourceMappingURL=p-C8y3mc7N.js.map
+
+//# sourceMappingURL=p-C8y3mc7N.js.map

package/dist/components/p-C8y3mc7N.js.map

@@ -0,0 +1 @@
+{"file":"p-C8y3mc7N.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.tab-bar {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/* Custom scrollbar for WebKit browsers */\n.tab-bar::-webkit-scrollbar {\n  height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n  background: var(--af-scrollbar-track, #d1ddda);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n  background: var(--af-scrollbar-thumb, #8a7049);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n  background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab-bar.shape-square {\n  gap: 0;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab-bar.shape-pill {\n  gap: 0;\n  padding: var(--space-2, 8px);\n  background-color: var(--af-background-level-1, #e8eeed);\n  border-radius: var(--radius-pill, 999px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: MOBILE\n   ========================================================================== */\n\n.tab-bar.breakpoint-mobile {\n  /* Mobile uses compact spacing */\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n  /* Tabs handle their own padding in mobile */\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n  padding: var(--space-1, 4px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: DESKTOP\n   ========================================================================== */\n\n.tab-bar.breakpoint-desktop {\n  /* Desktop uses more generous spacing */\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n  /* Tabs handle their own padding in desktop mode */\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n  padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-CBrB-J4s.js

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+
+const afIconButtonCss = ":host{display:inline-block}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"tertiary\"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}";
+
+const AfIconButton = /*@__PURE__*/ proxyCustomElement(class AfIconButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The visual variant of the button.
+         * - `primary` - Main CTA with filled ice background
+         * - `secondary` - Supporting action with white background
+         * - `tertiary` - Minimal style with transparent background
+         */
+        this.variant = 'primary';
+        /**
+         * The size of the button
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
+    }
+    render() {
+        const classes = {
+            'icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            'disabled': this.disabled
+        };
+        const content = (h("span", { class: "icon" }, h("slot", null)));
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes, "aria-label": this.ariaLabel }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes, "aria-label": this.ariaLabel }, content)));
+    }
+    static get style() { return afIconButtonCss; }
+}, [257, "af-icon-button", {
+        "variant": [513],
+        "size": [1],
+        "disabled": [4],
+        "href": [1],
+        "type": [1],
+        "ariaLabel": [1, "aria-label"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-icon-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIconButton);
+            }
+            break;
+    } });
+}
+
+export { AfIconButton as A, defineCustomElement as d };
+//# sourceMappingURL=p-CBrB-J4s.js.map
+
+//# sourceMappingURL=p-CBrB-J4s.js.map

package/dist/components/p-CBrB-J4s.js.map

@@ -0,0 +1 @@
+{"file":"p-CBrB-J4s.js","mappings":";;AAAA,MAAM,eAAe,GAAG,gzFAAgzF;;MCO3zF,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;QAED,MAAM,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance */\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  padding: 0;\n}\n\n/* Size variants */\n.size-large {\n  width: 72px;\n  height: 72px;\n  padding: 24px;\n}\n\n.size-large .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-medium {\n  width: 48px;\n  height: 48px;\n  padding: 12px;\n}\n\n.size-medium .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small {\n  width: 36px;\n  height: 36px;\n  padding: 8px;\n}\n\n.size-small .icon {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon slot - inherits color from parent */\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n}\n\n.icon ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  color: inherit;\n}\n\n/* Primary variant (ice background) */\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n/* Secondary variant (outlined) */\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* Tertiary variant (minimal, no border) */\n.variant-tertiary {\n  background: transparent;\n  border-color: transparent;\n  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-tertiary:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* Disabled state */\n.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.icon-button {\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n}\n\nbutton.icon-button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\nbutton.icon-button.variant-tertiary {\n  background: transparent;\n  border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled ice background\n   * - `secondary` - Supporting action with white background\n   * - `tertiary` - Minimal style with transparent background\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'large' | 'medium' | 'small' = 'medium';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-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\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}