@affinda/wc 0.6.1 → 0.7.0

package/dist/components/p-BwowgpiS.js

@@ -1,52 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
-
-const afProgressLineCss = ".sc-af-progress-line-h{display:block;width:100%}.progress-line.sc-af-progress-line{position:relative;overflow:hidden}.progress-line--horizontal.sc-af-progress-line{height:3px;width:100%}.progress-line__background.sc-af-progress-line{position:absolute;inset:0;background:var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));height:1px;top:50%;transform:translateY(-50%)}.progress-line__active.sc-af-progress-line{position:relative;height:100%;min-width:1px;background:var(--af-background-border-active, var(--colour-background-border-active, #8a7049));transition:width 0.15s ease-out}";
-
-const AfProgressLine = /*@__PURE__*/ proxyCustomElement(class AfProgressLine extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Progress value from 0 to 1 (0 = 0%, 1 = 100%).
-         */
-        this.progress = 0;
-        /**
-         * Orientation of the progress line.
-         * Currently only horizontal is supported.
-         */
-        this.orientation = 'horizontal';
-    }
-    render() {
-        // Clamp progress between 0 and 1
-        const clampedProgress = Math.max(0, Math.min(1, this.progress));
-        const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: 'f56ae490d0d9e374f540ccb88b0af53430796b42' }, h("div", { key: '20832426b290b5ee44d0507848f1cd4f06973202', class: {
-                'progress-line': true,
-                [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '19623163676a5fd71c7b5ba91b33f53d188647c9', class: "progress-line__background" }), h("div", { key: '0bd6ccd0748930edd43a384bf8ddad55f8c9d07b', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
-    }
-    static get style() { return afProgressLineCss; }
-}, [258, "af-progress-line", {
-        "progress": [2],
-        "orientation": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-progress-line"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-progress-line":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfProgressLine);
-            }
-            break;
-    } });
-}
-
-export { AfProgressLine as A, defineCustomElement as d };
-//# sourceMappingURL=p-BwowgpiS.js.map
-
-//# sourceMappingURL=p-BwowgpiS.js.map

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

@@ -1 +0,0 @@
-{"file":"p-BwowgpiS.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0mBAA0mB;;MCcvnB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAE5B;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAiB,YAAY;AA4BjD;IA1BC,MAAM,GAAA;;AAEJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/D,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AAC7C,aAAA,EACD,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC3B,eAAA,EAAA,CAAC,mBACD,GAAG,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAG,CAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,eAAe,CAAG,CAAA,CAAA,EAAE,GACvC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-progress-line/af-progress-line.css?tag=af-progress-line&encapsulation=scoped","src/components/af-progress-line/af-progress-line.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Progress Line Base Styles\n   ========================================================================== */\n\n.progress-line {\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-line--horizontal {\n  height: 3px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Background Track\n   ========================================================================== */\n\n.progress-line__background {\n  position: absolute;\n  inset: 0;\n  background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));\n  height: 1px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* ==========================================================================\n   Active Progress\n   ========================================================================== */\n\n.progress-line__active {\n  position: relative;\n  height: 100%;\n  min-width: 1px;\n  background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));\n  transition: width 0.15s ease-out;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n */\n@Component({\n  tag: 'af-progress-line',\n  styleUrl: 'af-progress-line.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfProgressLine {\n  /**\n   * Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n   */\n  @Prop() progress: number = 0;\n\n  /**\n   * Orientation of the progress line.\n   * Currently only horizontal is supported.\n   */\n  @Prop() orientation: 'horizontal' = 'horizontal';\n\n  render() {\n    // Clamp progress between 0 and 1\n    const clampedProgress = Math.max(0, Math.min(1, this.progress));\n    const progressPercent = clampedProgress * 100;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'progress-line': true,\n            [`progress-line--${this.orientation}`]: true,\n          }}\n          role=\"progressbar\"\n          aria-valuenow={Math.round(progressPercent)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        >\n          <div class=\"progress-line__background\" />\n          <div\n            class=\"progress-line__active\"\n            style={{ width: `${progressPercent}%` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-C05qWmXd.js

@@ -1,59 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-Btpdr0Bi.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-C05qWmXd.js.map
-
-//# sourceMappingURL=p-C05qWmXd.js.map

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

@@ -1 +0,0 @@
-{"file":"p-C05qWmXd.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-C1nX4HkM.js

@@ -1,48 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-Btpdr0Bi.js';
-
-const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));letter-spacing:var(--letter-spacing-body, 0);text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.variant-xlarge{font-size:var(--font-size-body-xlarge, 22px);line-height:var(--line-height-body-xlarge, 28px)}.variant-large{font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px)}.variant-medium{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.variant-small{font-size:var(--font-size-body-small, 14px);line-height:var(--line-height-body-small, 20px)}";
-
-const AfText = /*@__PURE__*/ proxyCustomElement(class AfText extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Text variant */
-        this.variant = 'medium';
-        /** Semantic element to render */
-        this.as = 'p';
-    }
-    render() {
-        const Tag = this.as;
-        return (h(Tag, { key: '522550f1e2027db872a76232f0833571b558e817', class: {
-                'text': true,
-                [`variant-${this.variant}`]: true,
-                [`align-${this.align}`]: !!this.align
-            }, part: "base" }, h("slot", { key: '8968ce08e3080dcefa3583520dcc75894140c057' })));
-    }
-    static get style() { return afTextCss; }
-}, [257, "af-text", {
-        "variant": [1],
-        "align": [1],
-        "as": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-text":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfText);
-            }
-            break;
-    } });
-}
-
-export { AfText as A, defineCustomElement as d };
-//# sourceMappingURL=p-C1nX4HkM.js.map
-
-//# sourceMappingURL=p-C1nX4HkM.js.map

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

@@ -1 +0,0 @@
-{"file":"p-C1nX4HkM.js","mappings":";;AAAA,MAAM,SAAS,GAAG,20BAA20B;;MCYh1B,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA4C,QAAQ;;AAM3D,QAAA,IAAE,CAAA,EAAA,GAAmC,GAAG;AAkBjD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS;QAE1B,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;gBACjC,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC;AACjC,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-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-bodyfont, '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-body-default, var(--colour-inkwell-400, #2b484f));\n  letter-spacing: var(--letter-spacing-body, 0);\n  /* Inherit alignment from parent context (e.g. typography lockup), default to left */\n  text-align: var(--af-text-align, left);\n}\n\n/* Alignment */\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/* Body variants */\n.variant-xlarge {\n  font-size: var(--font-size-body-xlarge, 22px);\n  line-height: var(--line-height-body-xlarge, 28px);\n}\n\n.variant-large {\n  font-size: var(--font-size-body-large, 18px);\n  line-height: var(--line-height-body-large, 26px);\n}\n\n.variant-medium {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.variant-small {\n  font-size: var(--font-size-body-small, 14px);\n  line-height: var(--line-height-body-small, 20px);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text/body 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-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' = 'medium';\n\n  /** Visual alignment. When not set, inherits from parent context (e.g. typography lockup). */\n  @Prop() align?: 'left' | 'center' | 'right';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: !!this.align\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-C8HmyE5-.js

@@ -1,71 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.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:background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0;will-change:transform}@media (prefers-reduced-motion: reduce){.icon-button{transition-duration:0.01ms}}.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);transform:translateY(1px)}.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));transform:translateY(1px)}.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-C8HmyE5-.js.map
-
-//# sourceMappingURL=p-C8HmyE5-.js.map

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

@@ -1 +0,0 @@
-{"file":"p-C8HmyE5-.js","mappings":";;AAAA,MAAM,eAAe,GAAG,s+GAAs+G;;MCOj/G,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:\n    background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    opacity var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  padding: 0;\n  will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .icon-button {\n    transition-duration: 0.01ms;\n  }\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  transform: translateY(1px);\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  transform: translateY(1px);\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}