@affinda/wc 0.1.0 → 0.2.0

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

@@ -34,7 +34,7 @@ export class AfIllustratedCard {
             [`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" }))))));
+        return (h(Host, { key: 'ef2bef2685ff1c476d6cdffcac8dba7d8bb0f9e9' }, h("div", { key: '7a9fab8ac214d2715b2f96186e4cbb2978b53137', class: wrapperClasses }, h("af-card", { key: '9967cb01f648bb29b33743d50f733c21883ae6fd', theme: this.theme }, h("div", { key: 'eb791121145c80101fdb5109636a990de735074f', class: "illustrated-card__content" }, h("af-typography-lockup", { key: 'f5f39cc0cfa368df8cd8f44b4f259af6dcf25fdb', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: '0ed9b6ef9c8af21b239d505bd4a55f19d6aff418' }), h("span", { key: '1e7af14cfbd40cedf7c4cacc67d0232560ca6a18', slot: "description" }, h("slot", { key: '1a63ad36fd61d5140201c0d62a37e36dad5470a3', name: "body" })), h("span", { key: '9fe3673d3aee02dae3f2d541a332a68e37794427', slot: "buttons" }, h("slot", { key: '932d6a3ca09ef215818dfca3353ceca2764b3ac2', name: "buttons" })))), h("div", { key: 'ceb3132f1986c70766e897aad8c71b155eb3d84e', class: "illustrated-card__illustration-area" }, h("slot", { key: '1b2456a9b4a87823832555b0836381336e44ee83', name: "illustration" }))))));
     }
     static get is() { return "af-illustrated-card"; }
     static get encapsulation() { return "scoped"; }
@@ -54,9 +54,15 @@ export class AfIllustratedCard {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay'",
+                    "original": "Theme",
                     "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\" | undefined",
-                    "references": {}
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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

@@ -1 +1 @@
-{"version":3,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,GAAsE,YAAY,CAAC;QAEhG;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAwCnD;IAtCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU;4BAEvB,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,GAAW,YAAY,CAAC;QAErC;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAwCnD;IAtCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU;4BAEvB,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\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?: Theme = '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"]}

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

@@ -17,7 +17,7 @@ export class AfImage {
         this.shape = 'rounded';
     }
     render() {
-        return (h(Host, { key: 'c1d2a3fa4d205e24e5c55e9c84e8ff5b3150a161' }, h("div", { key: '5c77f95ebdfd2792ebfb55accc4ec0ea9da5953a', class: `image-container image-container--${this.shape}` }, h("img", { key: '1c9694ebb590d141e46267bb3217eda2400c5b23', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '2505652d87a23db29d54705b93978f44794837b9', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: '9e6de616aae4375e3b2e734edd095f392aa8ef1b' }, h("div", { key: '69d0eb9902766ff13f04d85c4737a5d322e63417', class: `image-container image-container--${this.shape}` }, h("img", { key: 'cddfe6dedc57a63318d7a970747cda8641c4f83b', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '23e0a9195e06da984aee8da6edc273a6367a7852', class: "image-border", "aria-hidden": "true" }))));
     }
     static get is() { return "af-image"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js

@@ -66,7 +66,7 @@ export class AfInPageBanner {
         return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
     }
     render() {
-        return (h(Host, { key: '1f14f0d7df4f632817b7e8c955b8249a5a3d2ce4' }, h("div", { key: '0fc90536d6d5b65912fca02d3c74019bee067133', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: 'c70ea65d7536efbceb8fc3f2e6d714d56c2d5be9', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'c209db43fd9a559854b73268f7b8a19b7c1a3268', class: "banner__content" }, h("div", { key: '7b1898662500a54e7dbf500646017f43ffe21e23', class: "banner__copy" }, h("h2", { key: '443078b848ee5ca1725ab960fc844e0f5d106ef7', class: "banner__heading" }, h("slot", { key: '10ce17b8014571ec6bc61cbda03b3881f2741215', name: "heading" }, this.heading)), h("div", { key: '3c43d4d4dd4c4c708891fdd3398de996a7b08d04', class: "banner__description" }, h("slot", { key: 'd58a7f5d4bea7dc2e4ce1dee10a99f19753427b4', name: "description" }, this.description))), h("div", { key: 'c10df7f70cb8ac0dd0d5e63e34a6fbc8fef9c62f', class: "banner__buttons" }, h("slot", { key: 'ff5cf411dee854f14fdbecda0bc8aac4b01b4abf', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'c8da6aa83a13a9b8a7e892de29b1914aa5ae41c1', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '42b8ba18fa9d15539ab2c80af98da504d8b14013', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '6bea21791ecb2e68e63a757f5ecfdaa1f07b728d' }, h("div", { key: '2c5afc83dcdc9917ae0542d81c1de02abfdd90a6', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '8c646d4ea9d08a3a1c1bed729d09503cd7257ece', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '77afe16ba80d1568869ab4a24dc75a65c49dab90', class: "banner__content" }, h("div", { key: 'dce08d53d206a7ccd358da11d337330dcf269d52', class: "banner__copy" }, h("h2", { key: '626df9e5fcbb345ff1f477191203343db10f2e52', class: "banner__heading" }, h("slot", { key: '5e6daf16162dffb58d9e4c61e91d226ba5fc35e7', name: "heading" }, this.heading)), h("div", { key: 'ef9dab42d2a03f3d7fdf0b8a4aed1bac5f104795', class: "banner__description" }, h("slot", { key: '3a4b3c7c474f00375c6ac49653713dec61f2a6f5', name: "description" }, this.description))), h("div", { key: 'af2f8c614c803b272fcac1ae83cbc3f3de908a4d', class: "banner__buttons" }, h("slot", { key: 'b047769e0807ad1915e28b174ef6122969ab52c6', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: '46d8a79deb045a8ba2baf1625583f181af576157', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'dde5d455151eac0b5abd2c45e920a1c45155145d', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }
@@ -86,12 +86,13 @@ export class AfInPageBanner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BannerTheme",
-                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white-ivory\"",
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
                     "references": {
-                        "BannerTheme": {
-                            "location": "global",
-                            "id": "global::BannerTheme"
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
                         }
                     }
                 },

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,GAAgB,YAAY,CAAC;QAE1C,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KA4E5C;IA1EC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACvB,2DAAI,KAAK,EAAC,iBAAiB;4BACzB,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC;wBACL,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF;oBAEN,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,6DAAM,IAAI,EAAC,SAAS;4BACjB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,IACtD,IAAI,CAAC,iBAAiB,CACb,CACb;4BACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,IAC1D,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n *\n * **Slot-based composition (preferred for rich content):**\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n *   props; use when you need ghost variants, more than two buttons, or\n *   per-button icons).\n * - `illustration` — custom illustration markup.\n *\n * The string props remain supported for simple cases.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: BannerTheme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area — slots take precedence over string props. */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              <h2 class=\"banner__heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </h2>\n              <div class=\"banner__description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            </div>\n\n            <div class=\"banner__buttons\">\n              <slot name=\"buttons\">\n                {this.primaryButtonText && (\n                  <af-button href={this.primaryButtonUrl} variant=\"primary\">\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,GAAU,YAAY,CAAC;QAEpC,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KA4E5C;IA1EC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACvB,2DAAI,KAAK,EAAC,iBAAiB;4BACzB,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC;wBACL,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF;oBAEN,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,6DAAM,IAAI,EAAC,SAAS;4BACjB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,IACtD,IAAI,CAAC,iBAAiB,CACb,CACb;4BACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,IAC1D,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n *\n * **Slot-based composition (preferred for rich content):**\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n *   props; use when you need ghost variants, more than two buttons, or\n *   per-button icons).\n * - `illustration` — custom illustration markup.\n *\n * The string props remain supported for simple cases.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: Theme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area — slots take precedence over string props. */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              <h2 class=\"banner__heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </h2>\n              <div class=\"banner__description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            </div>\n\n            <div class=\"banner__buttons\">\n              <slot name=\"buttons\">\n                {this.primaryButtonText && (\n                  <af-button href={this.primaryButtonUrl} variant=\"primary\">\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -49,7 +49,7 @@ export class AfInline {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '17b13c3b8a5ade7e5d3c990673b2e884b0ae5cb5', style: style }, h("slot", { key: 'ac563668c3e6e26f9a1b730c6edb16cb8cb46498' })));
+        return (h(Host, { key: '05c8a9c14341060f3e5f24397770740b09fee85c', style: style }, h("slot", { key: '871efa9e4e74690534375283878c8b0732f4859d' })));
     }
     static get is() { return "af-inline"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +73,9 @@ export class AfInline {
                     "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\"",
                     "references": {
                         "Gap": {
-                            "location": "global",
-                            "id": "global::Gap"
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Gap"
                         }
                     }
                 },

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

@@ -1 +1 @@
-{"version":3,"file":"af-inline.js","sourceRoot":"","sources":["../../../src/components/af-inline/af-inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,QAAQ,CAAC;QAEhC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,IAAI,CAAC;KAmC9B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.\n * Ideal for button groups, tags, pills, and other inline elements.\n *\n * @slot - Content to layout inline\n */\n@Component({\n  tag: 'af-inline',\n  styleUrl: 'af-inline.css',\n  shadow: true,\n})\nexport class AfInline {\n  /**\n   * Gap between items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '2';\n\n  /**\n   * Align items on the cross axis.\n   */\n  @Prop() align: Align = 'center';\n\n  /**\n   * Justify content on the main axis.\n   */\n  @Prop() justify: Justify = 'start';\n\n  /**\n   * Whether items should wrap to the next line when they overflow.\n   */\n  @Prop() wrap: boolean = true;\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<Justify, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    const style = {\n      display: 'inline-flex',\n      flexDirection: 'row',\n      gap: `var(--space-${this.gap})`,\n      alignItems: alignMap[this.align],\n      justifyContent: justifyMap[this.justify],\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    } as Record<string, string>;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-inline.js","sourceRoot":"","sources":["../../../src/components/af-inline/af-inline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,QAAQ,CAAC;QAEhC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,IAAI,CAAC;KAmC9B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,KAAK;YACpB,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.\n * Ideal for button groups, tags, pills, and other inline elements.\n *\n * @slot - Content to layout inline\n */\n@Component({\n  tag: 'af-inline',\n  styleUrl: 'af-inline.css',\n  shadow: true,\n})\nexport class AfInline {\n  /**\n   * Gap between items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '2';\n\n  /**\n   * Align items on the cross axis.\n   */\n  @Prop() align: Align = 'center';\n\n  /**\n   * Justify content on the main axis.\n   */\n  @Prop() justify: Justify = 'start';\n\n  /**\n   * Whether items should wrap to the next line when they overflow.\n   */\n  @Prop() wrap: boolean = true;\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<Justify, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    const style = {\n      display: 'inline-flex',\n      flexDirection: 'row',\n      gap: `var(--space-${this.gap})`,\n      alignItems: alignMap[this.align],\n      justifyContent: justifyMap[this.justify],\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    } as Record<string, string>;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-logo-well/af-logo-well.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: 'c0896e6345cc862d0cd7105117016a5dc76b3141' }, h("div", { key: 'a754bb9b44319040e9b1bcb03c6440c60c91af25', class: "logo-well" }, h("slot", { key: '8f87dc5de8caba94cc30a529aaa8e4c4426c5e81' }))));
+        return (h(Host, { key: 'b3abd933476da0e33ab6fcc4cd2f638fd8d3d69e' }, h("div", { key: '16d17b912cb38663ae6d2f71109a99cc5cb9ab08', class: "logo-well" }, h("slot", { key: '801820bb88b3af3ebb1f9514b2a8f1297b6d033c' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class AfNavAccordion {
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
+        return (h(Host, { key: 'a0c6718b375af88cefb975e997d70a228d1fb9aa', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '63b1716e6b40f7d73c9609a030b03af55a5db714', class: "nav-accordion" }, h("slot", { key: '48bb056a8e8cf39a47b20b8c54abbc7266f75765' }))));
     }
     static get is() { return "af-nav-accordion"; }
     static get encapsulation() { return "scoped"; }

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

@@ -84,11 +84,11 @@ export class AfNavAccordionItem {
         // sub-content to expand. A plain href item with no children is a
         // direct link and shouldn't show a disclosure affordance.
         const hasDropdownContent = this.hasContent;
-        return (h(Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
+        return (h(Host, { key: '514c8d8a02712f76eb9de767f6ab5c171f7cba8a', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
+            } }, h("div", { key: 'c8e9e4d3cea27fe1ecdcb629f1525c1e3fb8c02a', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '4da5b93689a0dac535dca6233b3c9d2218d333c1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '103be83255e80feef963f95566cb22c0ab4bb338', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '2f48b5257f7fdcaf30635dc178ff452cd4a176a0' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-menu/af-nav-menu.js

@@ -30,7 +30,7 @@ export class AfNavMenu {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (h(Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
+        return (h(Host, { key: '98d8c217eb9e952d4feb3928c69cae1559621092' }, h("div", { key: '3185c320e6ce6cff4c2630fc7492bbb2b34ef838', class: classes }, this.heading && (h("div", { key: '207eeef13c68e3ff26dcf2bbeee20574c7fab481', class: "menu-header" }, h("h3", { key: 'a2c6e28d60b2aeb49b96e99c57c853493b415a4c', class: "menu-heading" }, this.heading))), h("div", { key: 'f133eea0ed320467cd4840820251d09e2d98f49f', class: "menu-items" }, h("slot", { key: '91b640df3dd990f556d394056683ddd9fd26d6c3' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js

@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '10f78b27ad9bb744415303815a0d332c521b97ce' }, h("div", { key: '1fd8d7624889e151a7051b0f8b2ee7c773ae4d60', class: classes }, h("div", { key: 'e2fefca6e151476e80c1b45d435bb72b623f8c15', class: "menu-columns" }, h("slot", { key: '321200c424b9e4b8b9f1f9cf101de1a2a4fdc742' })), h("div", { key: '8956a487218299d9735ece9a6ca9fe3a23828e0f', class: "menu-sidebar" }, h("slot", { key: '8cb04d5028ec97976d38b39a1b66f41600b7fa0f', name: "sidebar" })))));
+        return (h(Host, { key: '799695a1e7e9edef21a1df1a2424d39dda307796' }, h("div", { key: '04d44b23ab48f4fa36d772b607a913bff03573d4', class: classes }, h("div", { key: '572aa555fff3429dd72c8623759d324cbc686aae', class: "menu-columns" }, h("slot", { key: '5e0f32b02a01b57a853921cafc583a05ec5ead38' })), h("div", { key: 'e043ec11d26b4bb7e1ded5d55ea20c99aa52301e', class: "menu-sidebar" }, h("slot", { key: '6f8efbba5940a73bc26086ef5329b25af2019368', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }

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

@@ -172,7 +172,7 @@ export class AfNavbar {
     }
     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" })))));
+        return (h(Host, { key: '78bb68495b077735b93558eb2ff3c7a5368c95ba', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd295d9865e936a9e10f2a552658265b5bfff2509', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '7a2f7ea2a7ac704d5a4854ed8bde9ec4186b7a48', class: "navbar-container" }, h("div", { key: '796c3fbcdc5b93ac2ea756f400900050a4e68904', class: "navbar theme-white" }, h("div", { key: '4f470bd5ca1c24f2de9a051c049ca0f3a6d343d7', class: "navbar-left" }, h("div", { key: '0ff19f610a2dfc60535ca601187214fd9184706c', class: "logo" }, h("slot", { key: 'b62680fa9641835e96c0975aa8b53289a4c331be', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '5acf4cce6d2b59ca3f08cb112aa53608ff92d3d7' }))), h("button", { key: '2fae1551b462c43388ef570620e2b6356d176724', 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: '847fa6e696769da5ce2d166e4298bbf35acdffec', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '79774a3987661ff611090741b8d0f598a5cbc1c1', name: "start" }))), h("div", { key: '18c965fe437fc54f293d5127af13d94d83e212d3', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '664c29f5d0cd01b493ae8bf9b430be34fd135c5c', class: "nav-actions" }, h("slot", { key: 'c94f3e8b1092d4e6891a77a1714470be7fa265d8', name: "end" })), h("div", { key: '2f598ff355d1cf5662a7246434eeb02af034da7c', class: "nav-button" }, h("slot", { key: 'cda81abe6c63c56270926015cb389e4fe6735d22', name: "button" })))), h("div", { key: 'e551f820e91cca9ae401bd0f514e35b77af896d0', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: '1253fb594e9db19bb9b79eb3f5d0e1788f728c3d', class: "dropdown-panel theme-white" }, h("slot", { key: 'b134d4150908a4d3bb7d77ba5d80246bbc709b35', name: "dropdowns" })))), h("div", { key: '40c2c6de6f661f89a9746ab55a5be2d68a9ad5a8', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '41a56f4f9b05d819cf0e65f022e5be85d8481361', class: "mobile-button-container" }, h("slot", { key: 'f4b70499d11fb68c92855020b7d1efa97d3dce3a', name: "mobile-button" }, h("slot", { key: '653ca252d1a159891838cba8b9fc1c0bbb9cd348', name: "button" }))), h("div", { key: 'e1e85dd0bba34a4e335792ec2382a4fa94ae79c8', class: "mobile-menu-content" }, h("slot", { key: '1d9ca44862dc2bd2fc4bfcdf3384df0e8f26bc80', name: "mobile-menu" })))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "scoped"; }
@@ -212,9 +212,15 @@ export class AfNavbar {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay'",
-                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | undefined",
-                    "references": {}
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\" | undefined",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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

@@ -1 +1 @@
-{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\nimport type { Theme } from '../../types';\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?: Theme;\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"]}

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: '816770ea4351ba01a7c069b57558efad8015f5f8', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '33bd320ab7e56fbf29251035008e862b6a249258', class: {
+        return (h(Host, { key: '71d32d2c1b2c6abec25edab3fadc0343d7575aaa', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '4686c4e277d1557cb6c3945a52a7713d0fd1b021', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/collection/components/af-numbered-stepper/af-numbered-stepper.css

@@ -0,0 +1,30 @@
+:host {
+  display: grid;
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+/* Horizontal: equal-width columns; each item paints its own connector segment. */
+.numbered-stepper--horizontal {
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: 0;
+}
+
+/* Vertical: one column; items render the badge-row inline and the connector
+ * runs along the top of the row between badges. */
+.numbered-stepper--vertical {
+  max-width: 680px;
+  grid-auto-flow: row;
+  gap: var(--space-8, 32px);
+}
+
+/* ≤ mobile — horizontal collapses to vertical stack. */
+@media (max-width: 767px) {
+  .numbered-stepper--horizontal {
+    grid-auto-flow: row;
+    grid-auto-columns: unset;
+    gap: var(--space-8, 32px);
+  }
+}

package/dist/collection/components/af-numbered-stepper/af-numbered-stepper.js

@@ -0,0 +1,92 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
+ * heading + body description per step. Sibling to `af-stepper` (which uses
+ * outlined badges on a single spine connector); the numbered variant uses
+ * filled badges with per-step connector segments, matching the Webflow
+ * "How it works" marketing pattern.
+ *
+ * Renders children `af-numbered-stepper-item` elements horizontally on
+ * desktop (auto-stacks on mobile) or vertically when `orientation="vertical"`.
+ * The parent auto-assigns badge numbers based on DOM order, so consumers
+ * don't hand-number the steps.
+ *
+ * Headings use the shared `heading-size="card"` scale from
+ * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.
+ *
+ * @example
+ * ```html
+ * <af-numbered-stepper>
+ *   <af-numbered-stepper-item>
+ *     <h3 slot="heading">Connect your ATS</h3>
+ *     <p slot="body">OAuth-based hook into the tools you already use.</p>
+ *   </af-numbered-stepper-item>
+ *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+ *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+ * </af-numbered-stepper>
+ * ```
+ *
+ * @slot - `af-numbered-stepper-item` elements.
+ */
+export class AfNumberedStepper {
+    constructor() {
+        /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */
+        this.orientation = 'horizontal';
+    }
+    componentDidLoad() {
+        this.assignIndices();
+    }
+    componentDidUpdate() {
+        this.assignIndices();
+    }
+    assignIndices() {
+        const items = Array.from(this.el.querySelectorAll('af-numbered-stepper-item'));
+        items.forEach((item, i) => {
+            // Only set when the consumer hasn't explicitly numbered the step.
+            if (item.index == null || item.index === 1) {
+                item.index = i + 1;
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a1df62f85981a64331d4b641074eaa54db04fef8', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, h("slot", { key: '2c1fbae6a474c883ce7eef49b79610882b401464' })));
+    }
+    static get is() { return "af-numbered-stepper"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-numbered-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-numbered-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation. Horizontal auto-stacks to vertical on mobile."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=af-numbered-stepper.js.map

package/dist/collection/components/af-numbered-stepper/af-numbered-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-numbered-stepper.js","sourceRoot":"","sources":["../../../src/components/af-numbered-stepper/af-numbered-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QASE,wEAAwE;QAChE,gBAAW,GAA8B,YAAY,CAAC;KAgC/D;IA9BC,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,aAAa;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAClB,CAAC;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACxB,kEAAkE;YAClE,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,sCAAsC,IAAI,CAAC,WAAW,EAAE,EAC/D,IAAI,EAAC,MAAM;YAEX,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a\n * heading + body description per step. Sibling to `af-stepper` (which uses\n * outlined badges on a single spine connector); the numbered variant uses\n * filled badges with per-step connector segments, matching the Webflow\n * \"How it works\" marketing pattern.\n *\n * Renders children `af-numbered-stepper-item` elements horizontally on\n * desktop (auto-stacks on mobile) or vertically when `orientation=\"vertical\"`.\n * The parent auto-assigns badge numbers based on DOM order, so consumers\n * don't hand-number the steps.\n *\n * Headings use the shared `heading-size=\"card\"` scale from\n * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.\n *\n * @example\n * ```html\n * <af-numbered-stepper>\n *   <af-numbered-stepper-item>\n *     <h3 slot=\"heading\">Connect your ATS</h3>\n *     <p slot=\"body\">OAuth-based hook into the tools you already use.</p>\n *   </af-numbered-stepper-item>\n *   <af-numbered-stepper-item>...</af-numbered-stepper-item>\n *   <af-numbered-stepper-item>...</af-numbered-stepper-item>\n * </af-numbered-stepper>\n * ```\n *\n * @slot - `af-numbered-stepper-item` elements.\n */\n@Component({\n  tag: 'af-numbered-stepper',\n  styleUrl: 'af-numbered-stepper.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNumberedStepper {\n  @Element() el!: HTMLElement;\n\n  /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.assignIndices();\n  }\n\n  componentDidUpdate() {\n    this.assignIndices();\n  }\n\n  private assignIndices() {\n    const items = Array.from(\n      this.el.querySelectorAll('af-numbered-stepper-item'),\n    ) as unknown as { index?: number }[];\n    items.forEach((item, i) => {\n      // Only set when the consumer hasn't explicitly numbered the step.\n      if (item.index == null || item.index === 1) {\n        item.index = i + 1;\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={`numbered-stepper numbered-stepper--${this.orientation}`}\n        role=\"list\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}