@affinda/wc 0.0.26 → 0.0.27

package/dist/components/p-eAysTBjl.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { d as defineCustomElement$1 } from './p-BFLKhcjQ.js';
+
+const afIconBoxCss = ".sc-af-icon-box-h{display:inline-block}.icon-box.sc-af-icon-box{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background-color:var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));color:var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.icon-box--size-small.sc-af-icon-box{width:48px;height:48px;padding:14px;border-radius:12px}.icon-box--size-default.sc-af-icon-box{width:64px;height:64px;padding:12px;border-radius:16px}.icon-box--size-large.sc-af-icon-box{width:80px;height:80px;padding:16px;border-radius:20px}";
+
+const AfIconBox = /*@__PURE__*/ proxyCustomElement(class AfIconBox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Size variant of the icon box
+         * - 'small': 48px container, 20px icon
+         * - 'default': 64px container, 40px icon
+         * - 'large': 80px container, 48px icon
+         */
+        this.size = 'default';
+    }
+    render() {
+        const containerClasses = {
+            'icon-box': true,
+            [`icon-box--size-${this.size}`]: true,
+        };
+        const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
+        return (h(Host, { key: 'e270fbfc75794a1bc2fce141cde5e6295d13c80c' }, h("div", { key: '3533c3e5afe2aaf1ee0227ffe9d37323b954753f', class: containerClasses }, h("af-icon", { key: 'e692e0110fb1233ced5d29f7b8f612c0ab89e058', name: this.icon, size: iconSize }))));
+    }
+    static get style() { return afIconBoxCss; }
+}, [258, "af-icon-box", {
+        "icon": [1],
+        "size": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-icon-box", "af-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-icon-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIconBox);
+            }
+            break;
+        case "af-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfIconBox as A, defineCustomElement as d };
+//# sourceMappingURL=p-eAysTBjl.js.map
+
+//# sourceMappingURL=p-eAysTBjl.js.map

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

@@ -0,0 +1 @@
+{"file":"p-eAysTBjl.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,6lBAA6lB;;MCqBrmB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,SAAS;AAkBxD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACtC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAE7E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAY,CAChD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-box/af-icon-box.css?tag=af-icon-box&encapsulation=scoped","src/components/af-icon-box/af-icon-box.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.icon-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n/* Size variants */\n.icon-box--size-small {\n  width: 48px;\n  height: 48px;\n  padding: 14px;\n  border-radius: 12px;\n}\n\n.icon-box--size-default {\n  width: 64px;\n  height: 64px;\n  padding: 12px;\n  border-radius: 16px;\n}\n\n.icon-box--size-large {\n  width: 80px;\n  height: 80px;\n  padding: 16px;\n  border-radius: 20px;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconBox atom - a themed container for displaying an icon with a rounded background.\n * \n * Inherits theme colors from parent Section via CSS custom properties:\n * - Background uses `--af-background-contrast`\n * - Icon color uses `--af-background-icon-default`\n * \n * @example\n * ```html\n * <af-icon-box icon=\"settings\" size=\"default\"></af-icon-box>\n * ```\n */\n@Component({\n  tag: 'af-icon-box',\n  styleUrl: 'af-icon-box.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconBox {\n  /**\n   * The name of the icon to display (from @affinda/icons)\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Size variant of the icon box\n   * - 'small': 48px container, 20px icon\n   * - 'default': 64px container, 40px icon\n   * - 'large': 80px container, 48px icon\n   */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-box': true,\n      [`icon-box--size-${this.size}`]: true,\n    };\n\n    const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon name={this.icon} size={iconSize}></af-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-jTq4gh1Q.js

@@ -0,0 +1,52 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.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: 'ab4db165b98bbd164b87d65f2e013d6719a04f52' }, h("div", { key: 'ef6ffbf323aff182c9de107d07992f032606e422', 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: 'e7e2ab3850a97dc4d37194132dcdd9c7f3d614e3', class: "progress-line__background" }), h("div", { key: '00c16c1a7eebbcd314db1f12ee4344d2b2bebc9d', 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-jTq4gh1Q.js.map
+
+//# sourceMappingURL=p-jTq4gh1Q.js.map

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

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

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { d as defineCustomElement$2 } from './p-BxwCXPuv.js';
+import { d as defineCustomElement$1 } from './p-287-nef9.js';
+
+const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";
+
+const AfIllustratedCard = /*@__PURE__*/ proxyCustomElement(class AfIllustratedCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Theme variant - sets background color and provides theme context.
+         * Defaults to 'mist-green'.
+         */
+        this.theme = 'mist-green';
+        /**
+         * Responsive breakpoint for typography sizing.
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Card size variant (applies to desktop only).
+         */
+        this.cardSize = 'default';
+    }
+    render() {
+        const wrapperClasses = {
+            'illustrated-card': true,
+            [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
+            [`illustrated-card--size-${this.cardSize}`]: true,
+        };
+        return (h(Host, { key: 'afe7b84219cbe07a6949825042295def34dafe5e' }, h("div", { key: '9b5697ca0732d5bc5ac8170869bf04db5c3e9b07', class: wrapperClasses }, h("af-card", { key: '0de8d7d93eb225298664e9edcd7efec821c341c6', theme: this.theme }, h("div", { key: '4a691832606f011d996f005c533f423acc960ea2', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '59d8417922cffd552df7610b72b4f2ec6c222105', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: 'ee18abb24d0637f3bea71b48ccafdd3c6df0ea45' }), h("span", { key: 'be0bebfef478da4491ba1137ba1975052f4dcb5c', slot: "description" }, h("slot", { key: 'b05c91bd5d5085f74d94fabd22d8b79a2b008719', name: "body" })), h("span", { key: '79c1f836418dd6d2d2c96a1ea680bf05ade2b0d8', slot: "buttons" }, h("slot", { key: '03a5aff63f8225bf2323abe44e8e830562cf0c6c', name: "buttons" })))), h("div", { key: '1c75154af4e7cc89eceda3f16a958ca720f17450', class: "illustrated-card__illustration-area" }, h("slot", { key: '46071088a5aad6cbf64635a3961aa78e1f7b3fee', name: "illustration" }))))));
+    }
+    static get style() { return afIllustratedCardCss; }
+}, [262, "af-illustrated-card", {
+        "theme": [1],
+        "breakpoint": [1],
+        "cardSize": [1, "card-size"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-illustrated-card", "af-card", "af-typography-lockup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-illustrated-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIllustratedCard);
+            }
+            break;
+        case "af-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "af-typography-lockup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfIllustratedCard as A, defineCustomElement as d };
+//# sourceMappingURL=p-noO3IF9V.js.map
+
+//# sourceMappingURL=p-noO3IF9V.js.map

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

@@ -0,0 +1 @@
+{"file":"p-noO3IF9V.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCqBn5D,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAwClD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n *\n * Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n *\n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n *\n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonLayout=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-tiZXMu0t.js

@@ -0,0 +1,196 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { d as defineCustomElement$1 } from './p-0-_hX4o-.js';
+
+const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:max(32px, env(safe-area-inset-top));left:0;right:0;z-index:10;padding:0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:100px;left:0;right:0;padding:8px 80px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:0 4px 24px rgba(20, 52, 59, 0.12)}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:max(24px, env(safe-area-inset-top));padding:0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left))}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
+
+const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.mobileMenuOpen = false;
+        /** The currently open dropdown identifier (null if none open) */
+        this.activeDropdown = null;
+        /** Whether to show the default Affinda logo when no logo slot content is provided */
+        this.showDefaultLogo = true;
+        /** Force mobile layout regardless of viewport size (useful for testing/stories) */
+        this.forceMobile = false;
+        this.toggleMobileMenu = () => {
+            this.mobileMenuOpen = !this.mobileMenuOpen;
+            // Close any open dropdown when toggling mobile menu
+            this.activeDropdown = null;
+        };
+        /**
+         * Opens a dropdown by its identifier
+         */
+        this.openDropdown = (dropdownId) => {
+            this.activeDropdown = dropdownId;
+        };
+        /**
+         * Closes the currently open dropdown
+         */
+        this.closeDropdown = () => {
+            this.activeDropdown = null;
+        };
+        /**
+         * Toggles a dropdown by its identifier
+         */
+        this.toggleDropdown = (dropdownId) => {
+            if (this.activeDropdown === dropdownId) {
+                this.activeDropdown = null;
+            }
+            else {
+                this.activeDropdown = dropdownId;
+            }
+        };
+    }
+    /**
+     * Open the dropdown matching a `[data-dropdown]` trigger on click —
+     * acts as a toggle so keyboard/touch users can still dismiss it.
+     */
+    handleTriggerClick(event) {
+        const target = event.target;
+        const trigger = target?.closest?.('[data-dropdown]');
+        if (!trigger || !this.el.contains(trigger))
+            return;
+        const id = trigger.getAttribute('data-dropdown');
+        if (!id)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelScheduledClose();
+        this.lastActiveTrigger = trigger;
+        this.toggleDropdown(id);
+    }
+    /**
+     * Open the dropdown matching a `[data-dropdown]` trigger on hover.
+     * Uses mouseover (which bubbles) and checks for the trigger ancestor.
+     */
+    handleHover(event) {
+        const target = event.target;
+        const trigger = target?.closest?.('[data-dropdown]');
+        if (!trigger || !this.el.contains(trigger))
+            return;
+        const id = trigger.getAttribute('data-dropdown');
+        if (!id || this.activeDropdown === id) {
+            this.cancelScheduledClose();
+            return;
+        }
+        this.cancelScheduledClose();
+        this.lastActiveTrigger = trigger;
+        this.openDropdown(id);
+    }
+    /**
+     * When the pointer leaves the navbar entirely (including any open
+     * dropdown panel), schedule a close. Re-entering cancels it.
+     */
+    handleHostLeave() {
+        this.scheduleClose();
+    }
+    handleHostEnter() {
+        this.cancelScheduledClose();
+    }
+    scheduleClose() {
+        // Short 100ms debounce so the mouse has time to cross any tiny
+        // dead-zone between the nav pill, the dropdown panel, and the
+        // items inside it without accidentally closing the panel. A
+        // re-entering mouseenter on the host cancels the pending close.
+        this.cancelScheduledClose();
+        this.closeTimer = window.setTimeout(() => {
+            this.closeDropdown();
+            this.closeTimer = undefined;
+        }, 100);
+    }
+    cancelScheduledClose() {
+        if (this.closeTimer !== undefined) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+    }
+    /**
+     * Handle clicks outside the navbar to close dropdowns
+     */
+    handleDocumentClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Keep the visibility of slotted dropdown panels, and the `data-active`
+     * flag on their triggers, in sync with the currently active dropdown.
+     * Each panel lives in the `dropdowns` slot and carries a `data-for`
+     * attribute that matches its trigger's id.
+     */
+    componentDidLoad() {
+        this.syncDropdownState();
+    }
+    componentDidUpdate() {
+        this.syncDropdownState();
+    }
+    syncDropdownState() {
+        this.el.querySelectorAll('[data-for]').forEach((panel) => {
+            if (!this.el.contains(panel))
+                return;
+            panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;
+        });
+        this.el.querySelectorAll('[data-dropdown]').forEach((trigger) => {
+            if (!this.el.contains(trigger))
+                return;
+            const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;
+            if (active)
+                trigger.setAttribute('data-active', '');
+            else
+                trigger.removeAttribute('data-active');
+            trigger.setAttribute('aria-expanded', active ? 'true' : 'false');
+        });
+    }
+    /**
+     * Handle escape key to close dropdowns. If a dropdown is open, restore
+     * focus to the trigger that opened it so keyboard users don't lose
+     * their place in the tab order.
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.activeDropdown !== null) {
+            const toFocus = this.lastActiveTrigger;
+            this.closeDropdown();
+            toFocus?.focus?.();
+        }
+    }
+    render() {
+        const hasDropdown = this.activeDropdown !== null;
+        return (h(Host, { key: 'bb5b7b7b1fe78eed12b3c16e2878d7905352d40c', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd35c38cfbb329a7811abbc4bbc5b83e3673d3dab', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '44d49577e393f60773db2d3b934ee1a253a3db1c', class: "navbar-container" }, h("div", { key: '172dfc9bcfd092c62537e2906dce3b97ae0bc6f3', class: "navbar theme-white" }, h("div", { key: 'bb10a24a359b569bd29082a75264e0d150a0cfae', class: "navbar-left" }, h("div", { key: 'd9b13adcdd2936fbfe3d177c81597b36998239a5', class: "logo" }, h("slot", { key: 'e6752d9755b854dbca123f4e45f7c4194fba9997', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '414958654451d4ec05d2ede68f989d850d6e3326' }))), h("button", { key: '42361097f38ca78004d91299ff570f168b79c342', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '11cedc5ae46d5bc4c1254c73571fa6d99849db15', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '2ab1f72977583995c0ee569e34df8c87ea5a2787', name: "start" }))), h("div", { key: 'aca92b065a53ee293a391bc32e3d1eb693acd7c0', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'c94a0d6c88f6dbbdc92a328effa898a3b275466c', class: "nav-actions" }, h("slot", { key: '051e4a16d64f9d8b66504921cfafd734a78a3148', name: "end" })), h("div", { key: 'fc60234ab1b58d4bfb675d7a4d65253995c3b548', class: "nav-button" }, h("slot", { key: '5a826f4d58eef982abd103e4b2fe076f0dfc138e', name: "button" })))), h("div", { key: 'cd7c0db3e62cdb689ec75855109091666177deb7', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'c40e3a8032991758e8fbe40507533b9335febfef', class: "dropdown-panel theme-white" }, h("slot", { key: '72680638403af582146ae0937d21dc8342cee1cb', name: "dropdowns" })))), h("div", { key: '12dbebc3c6bb463b63424d1ee431ecdcb2d11391', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: 'db40b156136d18f54647583d03fbc108c1ea6243', class: "mobile-button-container" }, h("slot", { key: '9a018110748c36f0129e30fadaffe4e15bf4c076', name: "mobile-button" }, h("slot", { key: '8929b69c67419e9ceccaca72b90ffede5a2ade29', name: "button" }))), h("div", { key: '151a7cad7ad32874176c59a1729a37049ca57f75', class: "mobile-menu-content" }, h("slot", { key: 'caee9dd00f204a52e0e3b7598b215020a2bec70e', name: "mobile-menu" })))));
+    }
+    get el() { return this; }
+    static get style() { return afNavbarCss; }
+}, [262, "af-navbar", {
+        "showDefaultLogo": [4, "show-default-logo"],
+        "theme": [1],
+        "forceMobile": [516, "force-mobile"],
+        "mobileMenuOpen": [32],
+        "activeDropdown": [32]
+    }, [[0, "click", "handleTriggerClick"], [1, "mouseover", "handleHover"], [1, "mouseleave", "handleHostLeave"], [1, "mouseenter", "handleHostEnter"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-navbar", "af-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-navbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavbar);
+            }
+            break;
+        case "af-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfNavbar as A, defineCustomElement as d };
+//# sourceMappingURL=p-tiZXMu0t.js.map
+
+//# sourceMappingURL=p-tiZXMu0t.js.map

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

@@ -0,0 +1 @@
+{"file":"p-tiZXMu0t.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=scoped","src/components/af-navbar/af-navbar.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Spacer element that sits in normal document flow to prevent content overlap */\n.navbar-spacer {\n  height: 100px; /* Accounts for navbar height + top margin */\n}\n\n/* Theme variants for spacer background - matches section themes */\n.navbar-spacer.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/* Sticky navbar that floats above the spacer */\n.navbar-container {\n  position: fixed;\n  /* Add safe-area-inset-top so the pill drops below the iOS notch / status bar\n     when the page uses viewport-fit=cover. Falls back to the original 32px. */\n  top: max(32px, env(safe-area-inset-top));\n  left: 0;\n  right: 0;\n  z-index: 10;\n  /* Horizontal padding honours safe-area-inset-left/right for landscape on\n     notched devices; the inset is added on top of the existing 80px gutter. */\n  padding: 0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));\n  box-sizing: border-box;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n  flex-wrap: nowrap; /* Prevent wrapping */\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n  display: none;\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n  display: block;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Dropdown container. The container's top is raised 8px into what\n   was previously a blank gap between the nav pill and the panel, and\n   that 8px is absorbed as container top-padding — so the visible panel\n   stays put, but the hoverable region is now continuous between the\n   nav pill and the dropdown. Without this, the mouse crosses an\n   un-hovered strip on its way from trigger to panel and the navbar's\n   mouseleave handler fires a close. */\n.dropdown-container {\n  position: absolute;\n  top: 100px;\n  left: 0;\n  right: 0;\n  padding: 8px 80px 0;\n  pointer-events: none;\n  opacity: 0;\n  transform: translateY(-8px);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.dropdown-panel {\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n  overflow: hidden;\n  box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);\n}\n\n/* Hide empty dropdown slots */\n.dropdown-panel:empty {\n  display: none;\n}\n\n/* Mobile menu panel - separate from navbar for proper positioning */\n.mobile-menu-panel {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--colour-background-base, #ffffff);\n  z-index: 9;\n  /* Full-viewport drawer: pad the top below the notch, the bottom above the\n     home indicator, and the sides away from landscape edge cutouts. */\n  padding:\n    max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));\n  overflow-y: auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n.mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Mobile CTA button container */\n.mobile-button-container {\n  margin-bottom: 8px;\n}\n\n.mobile-button-container ::slotted(*) {\n  width: 100%;\n}\n\n/* Mobile menu content - flex column ensures items stack vertically */\n.mobile-menu-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Force slotted items to take full width for composability */\n.mobile-menu-content ::slotted(*) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n */\n@media (max-width: 1099px) {\n  .nav-actions {\n    display: none;\n  }\n  \n  .navbar-right {\n    gap: 0;\n  }\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-spacer {\n    height: 88px;\n  }\n\n  .navbar-container {\n    top: max(24px, env(safe-area-inset-top));\n    padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left));\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n\n  .dropdown-container {\n    padding: 0 40px;\n  }\n}\n\n/* \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n */\n@media (max-width: 991px) {\n  .navbar-spacer {\n    height: 72px;\n  }\n\n  .navbar-container {\n    top: max(16px, env(safe-area-inset-top));\n    padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n    z-index: 11; /* Above mobile menu panel */\n  }\n\n  .navbar {\n    padding: 8px 8px 8px 24px; /* Figma: 8px padding right, 24px left on mobile */\n    flex-direction: row;\n    border-radius: 9999px; /* Keep pill shape on mobile */\n    gap: 0;\n  }\n\n  .navbar-left {\n    width: auto;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n  }\n\n  /* Show hamburger button on mobile */\n  .mobile-menu-toggle {\n    display: flex;\n    padding: 12px;\n    margin-left: auto;\n    border-radius: 9999px;\n    border: 1px solid var(--colour-brand-inkwell, #14343b);\n  }\n\n  .mobile-menu-toggle:hover {\n    background: rgba(20, 52, 59, 0.05);\n  }\n\n  /* Hide nav links on mobile - they're in the mobile menu panel */\n  .nav-links {\n    display: none;\n  }\n\n  /* Hide right section on mobile - button is in mobile menu panel */\n  .navbar-right {\n    display: none;\n  }\n\n  /* Hide desktop dropdown on mobile */\n  .dropdown-container {\n    display: none;\n  }\n\n  /* Mobile menu panel adjustments */\n  .mobile-menu-panel {\n    padding-top: max(88px, calc(88px + env(safe-area-inset-top))); /* Accounts for navbar height + notch */\n  }\n\n  .mobile-button-container {\n    padding: 0 12px;\n    margin-bottom: 8px;\n  }\n\n  .mobile-button-container ::slotted(af-button),\n  .mobile-button-container ::slotted(button) {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n}\n\n/* ==========================================================================\n   Force Mobile Mode\n   Apply mobile styles regardless of viewport when force-mobile attribute is set\n   ========================================================================== */\n\n:host([force-mobile]) .navbar-spacer {\n  height: 72px;\n}\n\n:host([force-mobile]) .navbar-container {\n  top: max(16px, env(safe-area-inset-top));\n  padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n  z-index: 11;\n}\n\n:host([force-mobile]) .navbar {\n  padding: 8px 8px 8px 24px;\n  flex-direction: row;\n  border-radius: 9999px;\n  gap: 0;\n}\n\n:host([force-mobile]) .navbar-left {\n  width: auto;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n}\n\n:host([force-mobile]) .mobile-menu-toggle {\n  display: flex;\n  padding: 12px;\n  margin-left: auto;\n  border-radius: 9999px;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n}\n\n:host([force-mobile]) .mobile-menu-toggle:hover {\n  background: rgba(20, 52, 59, 0.05);\n}\n\n:host([force-mobile]) .nav-links {\n  display: none;\n}\n\n:host([force-mobile]) .navbar-right {\n  display: none;\n}\n\n:host([force-mobile]) .nav-actions {\n  display: none;\n}\n\n:host([force-mobile]) .dropdown-container {\n  display: none;\n}\n\n:host([force-mobile]) .mobile-menu-panel {\n  padding-top: max(88px, calc(88px + env(safe-area-inset-top)));\n}\n\n:host([force-mobile]) .mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host([force-mobile]) .mobile-button-container {\n  padding: 0 12px;\n  margin-bottom: 8px;\n}\n\n:host([force-mobile]) .mobile-button-container ::slotted(af-button),\n:host([force-mobile]) .mobile-button-container ::slotted(button) {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n/* Force mobile: flex column ensures items stack vertically */\n:host([force-mobile]) .mobile-menu-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Force mobile: slotted items take full width for composability */\n:host([force-mobile]) .mobile-menu-content ::slotted(*) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n * \n * **Slots:**\n * - `logo` - Logo area (defaults to Affinda logo if empty)\n * - `start` - Primary navigation links (left side, desktop)\n * - `end` - Secondary/utility links (right side)\n * - `button` - Call-to-action button\n * - `dropdowns` - One or more dropdown panels, each a `<div data-for=\"id\">`\n *   where `id` matches the `data-dropdown=\"id\"` attribute on the trigger.\n *   Clicking a trigger toggles the matching panel; only one is visible at\n *   a time.\n * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)\n * - `mobile-button` - CTA button for mobile menu (appears at top)\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  /** Force mobile layout regardless of viewport size (useful for testing/stories) */\n  @Prop({ reflect: true }) forceMobile: boolean = false;\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /** Timer id used to debounce hover-driven closes. */\n  private closeTimer?: number;\n\n  /**\n   * The trigger element that opened the currently active dropdown. Tracked\n   * so an Esc keypress can close the dropdown and restore focus to the\n   * trigger, matching WAI-ARIA menu-button guidance.\n   */\n  private lastActiveTrigger?: HTMLElement;\n\n  /**\n   * Open the dropdown matching a `[data-dropdown]` trigger on click —\n   * acts as a toggle so keyboard/touch users can still dismiss it.\n   */\n  @Listen('click')\n  handleTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement | null;\n    const trigger = target?.closest?.('[data-dropdown]') as HTMLElement | null;\n    if (!trigger || !this.el.contains(trigger)) return;\n    const id = trigger.getAttribute('data-dropdown');\n    if (!id) return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.cancelScheduledClose();\n    this.lastActiveTrigger = trigger;\n    this.toggleDropdown(id);\n  }\n\n  /**\n   * Open the dropdown matching a `[data-dropdown]` trigger on hover.\n   * Uses mouseover (which bubbles) and checks for the trigger ancestor.\n   */\n  @Listen('mouseover')\n  handleHover(event: MouseEvent) {\n    const target = event.target as HTMLElement | null;\n    const trigger = target?.closest?.('[data-dropdown]') as HTMLElement | null;\n    if (!trigger || !this.el.contains(trigger)) return;\n    const id = trigger.getAttribute('data-dropdown');\n    if (!id || this.activeDropdown === id) {\n      this.cancelScheduledClose();\n      return;\n    }\n    this.cancelScheduledClose();\n    this.lastActiveTrigger = trigger;\n    this.openDropdown(id);\n  }\n\n  /**\n   * When the pointer leaves the navbar entirely (including any open\n   * dropdown panel), schedule a close. Re-entering cancels it.\n   */\n  @Listen('mouseleave')\n  handleHostLeave() {\n    this.scheduleClose();\n  }\n\n  @Listen('mouseenter')\n  handleHostEnter() {\n    this.cancelScheduledClose();\n  }\n\n  private scheduleClose() {\n    // Short 100ms debounce so the mouse has time to cross any tiny\n    // dead-zone between the nav pill, the dropdown panel, and the\n    // items inside it without accidentally closing the panel. A\n    // re-entering mouseenter on the host cancels the pending close.\n    this.cancelScheduledClose();\n    this.closeTimer = window.setTimeout(() => {\n      this.closeDropdown();\n      this.closeTimer = undefined;\n    }, 100);\n  }\n\n  private cancelScheduledClose() {\n    if (this.closeTimer !== undefined) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = undefined;\n    }\n  }\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Keep the visibility of slotted dropdown panels, and the `data-active`\n   * flag on their triggers, in sync with the currently active dropdown.\n   * Each panel lives in the `dropdowns` slot and carries a `data-for`\n   * attribute that matches its trigger's id.\n   */\n  componentDidLoad() {\n    this.syncDropdownState();\n  }\n\n  componentDidUpdate() {\n    this.syncDropdownState();\n  }\n\n  private syncDropdownState() {\n    this.el.querySelectorAll<HTMLElement>('[data-for]').forEach((panel) => {\n      if (!this.el.contains(panel)) return;\n      panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;\n    });\n    this.el.querySelectorAll<HTMLElement>('[data-dropdown]').forEach((trigger) => {\n      if (!this.el.contains(trigger)) return;\n      const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;\n      if (active) trigger.setAttribute('data-active', '');\n      else trigger.removeAttribute('data-active');\n      trigger.setAttribute('aria-expanded', active ? 'true' : 'false');\n    });\n  }\n\n  /**\n   * Handle escape key to close dropdowns. If a dropdown is open, restore\n   * focus to the trigger that opened it so keyboard users don't lose\n   * their place in the tab order.\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.activeDropdown !== null) {\n      const toFocus = this.lastActiveTrigger;\n      this.closeDropdown();\n      toFocus?.focus?.();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar theme-white\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel theme-white\">\n              <slot name=\"dropdowns\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu panel */}\n        <div class={`mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}`}>\n          {/* Mobile CTA button at top */}\n          <div class=\"mobile-button-container\">\n            <slot name=\"mobile-button\">\n              <slot name=\"button\"></slot>\n            </slot>\n          </div>\n          \n          {/* Mobile navigation content */}\n          <div class=\"mobile-menu-content\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/af-accordion-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-C7nUZsb8.js';
 
-const afAccordionItemCss = () => `:host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color 0.2s ease}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform 0.3s ease}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height 0.3s ease}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}`;
+const afAccordionItemCss = ":host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color 0.2s ease}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform 0.3s ease}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height 0.3s ease}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}";
 
 const AfAccordionItem = class {
     constructor(hostRef) {
@@ -68,11 +68,10 @@ const AfAccordionItem = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "open": [{
-                "handleOpenChange": 0
-            }]
+        "open": ["handleOpenChange"]
     }; }
 };
-AfAccordionItem.style = afAccordionItemCss();
+AfAccordionItem.style = afAccordionItemCss;
 
 export { AfAccordionItem as af_accordion_item };
+//# sourceMappingURL=af-accordion-item.entry.js.map

package/dist/esm/af-accordion-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-accordion-item.entry.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion-item {\n  width: 100%;\n}\n\n/* Trigger button - clickable header */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 16px 0;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: background-color 0.2s ease;\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--af-background-base-hover, rgba(20, 52, 59, 0.02));\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--af-background-border-active, #8a7049);\n  outline-offset: -2px;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.trigger-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Chevron indicator */\n.chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: transform 0.3s ease;\n}\n\n.chevron.is-open {\n  transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n}\n\n.content {\n  padding: 0;\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n  background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n  border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n *\n * @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n */\n@Component({\n  tag: 'af-accordion-item',\n  styleUrl: 'af-accordion-item.css',\n  shadow: true,\n})\nexport class AfAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this accordion item.\n   * Used by parent af-accordion to track open state.\n   */\n  @Prop({ reflect: true }) itemId!: string;\n\n  /**\n   * Whether this item is currently expanded\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n  @State() contentHeight: number = 0;\n\n  private contentRef?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.measureContent();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      this.measureContent();\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.open && this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n\n    if (this.contentRef) {\n      this.resizeObserver.observe(this.contentRef);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  /**\n   * Programmatically toggle the accordion item\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled) {\n      this.open = !this.open;\n      this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n    }\n  }\n\n  private measureContent() {\n    requestAnimationFrame(() => {\n      if (this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.toggle();\n    }\n  };\n\n  render() {\n    const contentStyle = {\n      maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n    };\n\n    return (\n      <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n        <div class=\"accordion-item\">\n          <button\n            class=\"trigger\"\n            onClick={this.handleTriggerClick}\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-controls={`content-${this.itemId}`}\n            disabled={this.disabled}\n            type=\"button\"\n          >\n            <div class=\"trigger-content\">\n              <slot name=\"trigger\"></slot>\n            </div>\n            <div class={{ 'chevron': true, 'is-open': this.open }}>\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </div>\n          </button>\n          <div\n            id={`content-${this.itemId}`}\n            class=\"content-wrapper\"\n            style={contentStyle}\n            aria-hidden={!this.open ? 'true' : 'false'}\n          >\n            <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/af-accordion.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-C7nUZsb8.js';
 
-const afAccordionCss = () => `.sc-af-accordion-h{display:block;width:100%}.accordion.sc-af-accordion{display:flex;flex-direction:column;width:100%}.sc-af-accordion-s>af-accordion-item{display:block}.sc-af-accordion-s>af-accordion-item:last-child{--accordion-item-border:transparent}`;
+const afAccordionCss = ".sc-af-accordion-h{display:block;width:100%}.accordion.sc-af-accordion{display:flex;flex-direction:column;width:100%}.sc-af-accordion-s>af-accordion-item{display:block}.sc-af-accordion-s>af-accordion-item:last-child{--accordion-item-border:transparent}";
 
 const AfAccordion = class {
     constructor(hostRef) {
@@ -91,11 +91,10 @@ const AfAccordion = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }]
+        "value": ["handleValueChange"]
     }; }
 };
-AfAccordion.style = afAccordionCss();
+AfAccordion.style = afAccordionCss;
 
 export { AfAccordion as af_accordion };
+//# sourceMappingURL=af-accordion.entry.js.map

package/dist/esm/af-accordion.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-accordion.entry.js","sources":["src/components/af-accordion/af-accordion.css?tag=af-accordion&encapsulation=scoped","src/components/af-accordion/af-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Ensure proper stacking for accordion items */\n::slotted(af-accordion-item) {\n  display: block;\n}\n\n/* Remove bottom border from last item */\n::slotted(af-accordion-item:last-child) {\n  --accordion-item-border: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Listen } from '@stencil/core';\n\n/**\n * Accordion container that manages multiple accordion items.\n * Controls which items are open based on mode (independent or exclusive).\n * \n * @slot - Place af-accordion-item components here\n */\n@Component({\n  tag: 'af-accordion',\n  styleUrl: 'af-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfAccordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Behavior mode for the accordion.\n   * - `independent`: Multiple items can be open simultaneously\n   * - `exclusive`: Only one item can be open at a time\n   */\n  @Prop() mode: 'independent' | 'exclusive' = 'independent';\n\n  /**\n   * Currently open item(s) for controlled mode.\n   * In independent mode, can be an array of item IDs.\n   * In exclusive mode, should be a single item ID or null.\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Default open item(s) for uncontrolled mode.\n   * Used as initial state when value prop is not provided.\n   */\n  @Prop() defaultValue?: string | string[];\n\n  /**\n   * Emitted when the open state of items changes.\n   * Returns the new value (string[] for independent, string | null for exclusive).\n   */\n  @Event({ eventName: 'af-accordion-change' }) accordionChange!: EventEmitter<{ value: string | string[] | null }>;\n\n  @State() internalValue: string[] = [];\n\n  private isControlled(): boolean {\n    return this.value !== undefined;\n  }\n\n  componentWillLoad() {\n    // Initialize internal value from defaultValue or value\n    const initialValue = this.isControlled() ? this.value : this.defaultValue;\n    this.internalValue = this.normalizeValue(initialValue);\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string | string[] | undefined) {\n    if (this.isControlled()) {\n      this.internalValue = this.normalizeValue(newValue);\n      this.syncItems();\n    }\n  }\n\n  componentDidLoad() {\n    this.syncItems();\n  }\n\n  /**\n   * Listen for toggle events from child accordion items\n   */\n  @Listen('af-accordion-toggle')\n  handleItemToggle(event: CustomEvent<{ itemId: string; open: boolean }>) {\n    event.stopPropagation();\n    const { itemId, open } = event.detail;\n\n    let newValue: string[];\n\n    if (this.mode === 'exclusive') {\n      // In exclusive mode, only one item can be open\n      newValue = open ? [itemId] : [];\n    } else {\n      // In independent mode, toggle the item\n      if (open) {\n        newValue = [...this.internalValue, itemId];\n      } else {\n        newValue = this.internalValue.filter(id => id !== itemId);\n      }\n    }\n\n    if (!this.isControlled()) {\n      this.internalValue = newValue;\n      this.syncItems();\n    }\n\n    // Emit change event\n    const emitValue = this.mode === 'exclusive' \n      ? (newValue.length > 0 ? newValue[0] : null)\n      : newValue;\n    this.accordionChange.emit({ value: emitValue });\n  }\n\n  /**\n   * Normalize value prop to array format for internal use\n   */\n  private normalizeValue(value: string | string[] | undefined): string[] {\n    if (value === undefined || value === null) {\n      return [];\n    }\n    if (Array.isArray(value)) {\n      // In exclusive mode, only keep the first item\n      return this.mode === 'exclusive' ? value.slice(0, 1) : value;\n    }\n    return [value];\n  }\n\n  /**\n   * Sync the open state of all child accordion items\n   */\n  private syncItems() {\n    const items = this.el.querySelectorAll('af-accordion-item');\n    items.forEach((element) => {\n      const item = element as HTMLElement & { itemId?: string; open?: boolean };\n      if (item.itemId) {\n        item.open = this.internalValue.includes(item.itemId);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host class={{ [`mode-${this.mode}`]: true }}>\n        <div class=\"accordion\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/esm/af-aspect-ratio.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CPfAC9fk.js';
+import { r as registerInstance, h } from './index-C7nUZsb8.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 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 = class {
     constructor(hostRef) {
@@ -75,6 +75,7 @@ const AfAspectRatio = class {
         return (h("div", { key: '02bfa5463911ecd25903521e90a0570bb3bca0ad', class: "aspect-ratio-container", style: { aspectRatio: ratioValue } }, h("slot", { key: '9575c859052e8f1b1b362d9395fdfdf43d46b0b4' })));
     }
 };
-AfAspectRatio.style = afAspectRatioCss();
+AfAspectRatio.style = afAspectRatioCss;
 
 export { AfAspectRatio as af_aspect_ratio };
+//# sourceMappingURL=af-aspect-ratio.entry.js.map