@affinda/wc 0.0.28 → 0.2.0

package/dist/cjs/af-illustrated-card.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.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 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;border-radius:var(--radius-lg, 20px)}.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 = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const AfIllustratedCard = class {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (index.h(index.Host, { key: 'afe7b84219cbe07a6949825042295def34dafe5e' }, index.h("div", { key: '9b5697ca0732d5bc5ac8170869bf04db5c3e9b07', class: wrapperClasses }, index.h("af-card", { key: '0de8d7d93eb225298664e9edcd7efec821c341c6', theme: this.theme }, index.h("div", { key: '4a691832606f011d996f005c533f423acc960ea2', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: '59d8417922cffd552df7610b72b4f2ec6c222105', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: 'ee18abb24d0637f3bea71b48ccafdd3c6df0ea45' }), index.h("span", { key: 'be0bebfef478da4491ba1137ba1975052f4dcb5c', slot: "description" }, index.h("slot", { key: 'b05c91bd5d5085f74d94fabd22d8b79a2b008719', name: "body" })), index.h("span", { key: '79c1f836418dd6d2d2c96a1ea680bf05ade2b0d8', slot: "buttons" }, index.h("slot", { key: '03a5aff63f8225bf2323abe44e8e830562cf0c6c', name: "buttons" })))), index.h("div", { key: '1c75154af4e7cc89eceda3f16a958ca720f17450', class: "illustrated-card__illustration-area" }, index.h("slot", { key: '46071088a5aad6cbf64635a3961aa78e1f7b3fee', name: "illustration" }))))));
+        return (index.h(index.Host, { key: 'ef2bef2685ff1c476d6cdffcac8dba7d8bb0f9e9' }, index.h("div", { key: '7a9fab8ac214d2715b2f96186e4cbb2978b53137', class: wrapperClasses }, index.h("af-card", { key: '9967cb01f648bb29b33743d50f733c21883ae6fd', theme: this.theme }, index.h("div", { key: 'eb791121145c80101fdb5109636a990de735074f', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: 'f5f39cc0cfa368df8cd8f44b4f259af6dcf25fdb', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: '0ed9b6ef9c8af21b239d505bd4a55f19d6aff418' }), index.h("span", { key: '1e7af14cfbd40cedf7c4cacc67d0232560ca6a18', slot: "description" }, index.h("slot", { key: '1a63ad36fd61d5140201c0d62a37e36dad5470a3', name: "body" })), index.h("span", { key: '9fe3673d3aee02dae3f2d541a332a68e37794427', slot: "buttons" }, index.h("slot", { key: '932d6a3ca09ef215818dfca3353ceca2764b3ac2', name: "buttons" })))), index.h("div", { key: 'ceb3132f1986c70766e897aad8c71b155eb3d84e', class: "illustrated-card__illustration-area" }, index.h("slot", { key: '1b2456a9b4a87823832555b0836381336e44ee83', name: "illustration" }))))));
     }
 };
 AfIllustratedCard.style = afIllustratedCardCss;

package/dist/cjs/af-illustrated-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-illustrated-card.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCqBn5D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxBA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,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,EAEvBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}
+{"version":3,"file":"af-illustrated-card.entry.cjs.js","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. The inner image gets the same corner radius\n * (radius-lg / 20px) as the outer af-card so art with a photographic edge\n * stays within the card's rounded frame. Consumers of af-illustrated-card\n * previously hand-rolled this value; it now comes from the token ladder. */\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  border-radius: var(--radius-lg, 20px);\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';\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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,w6DAAw6D;;MCsBx7D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxBA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,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,EAEvBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}

package/dist/cjs/af-image.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afImageCss = ".sc-af-image-h{display:block;width:100%}.image-container.sc-af-image{position:relative;overflow:hidden}.image-container--rounded.sc-af-image{border-radius:var(--radius-md, 12px)}.image-container--rounded-left.sc-af-image{border-top-left-radius:var(--radius-md, 12px);border-bottom-left-radius:var(--radius-md, 12px)}.image-container--rounded-right.sc-af-image{border-top-right-radius:var(--radius-md, 12px);border-bottom-right-radius:var(--radius-md, 12px)}.image-container--square.sc-af-image{border-radius:0}.image.sc-af-image{display:block;width:100%;height:auto;object-fit:cover}.image-border.sc-af-image{position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));pointer-events:none;border-radius:inherit}";
 
@@ -19,7 +19,7 @@ const AfImage = class {
         this.shape = 'rounded';
     }
     render() {
-        return (index.h(index.Host, { key: 'c1d2a3fa4d205e24e5c55e9c84e8ff5b3150a161' }, index.h("div", { key: '5c77f95ebdfd2792ebfb55accc4ec0ea9da5953a', class: `image-container image-container--${this.shape}` }, index.h("img", { key: '1c9694ebb590d141e46267bb3217eda2400c5b23', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: '2505652d87a23db29d54705b93978f44794837b9', class: "image-border", "aria-hidden": "true" }))));
+        return (index.h(index.Host, { key: '9e6de616aae4375e3b2e734edd095f392aa8ef1b' }, index.h("div", { key: '69d0eb9902766ff13f04d85c4737a5d322e63417', class: `image-container image-container--${this.shape}` }, index.h("img", { key: 'cddfe6dedc57a63318d7a970747cda8641c4f83b', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: '23e0a9195e06da984aee8da6edc273a6367a7852', class: "image-border", "aria-hidden": "true" }))));
     }
 };
 AfImage.style = afImageCss;

package/dist/cjs/af-in-page-banner.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
-const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radii-card-level-1, 32px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:288px;height:288px;max-width:288px;max-height:288px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:38px;padding-bottom:38px;padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:normal}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:normal}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:normal}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:24px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radii-card-level-1-mobile, 24px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
+const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radius-lg, 20px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:288px;height:288px;max-width:288px;max-height:288px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:38px;padding-bottom:38px;padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:normal}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:normal}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:normal}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:24px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radius-lg, 20px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
 
 const AfInPageBanner = class {
     constructor(hostRef) {
@@ -38,7 +38,7 @@ const AfInPageBanner = class {
         return (index.h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, index.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 (index.h(index.Host, { key: '1f14f0d7df4f632817b7e8c955b8249a5a3d2ce4' }, index.h("div", { key: '0fc90536d6d5b65912fca02d3c74019bee067133', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: 'c70ea65d7536efbceb8fc3f2e6d714d56c2d5be9', class: "banner__illustration" }, this.illustrationUrl ? (index.h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (index.h("slot", { name: "illustration" }))), index.h("div", { key: 'c209db43fd9a559854b73268f7b8a19b7c1a3268', class: "banner__content" }, index.h("div", { key: '7b1898662500a54e7dbf500646017f43ffe21e23', class: "banner__copy" }, index.h("h2", { key: '443078b848ee5ca1725ab960fc844e0f5d106ef7', class: "banner__heading" }, index.h("slot", { key: '10ce17b8014571ec6bc61cbda03b3881f2741215', name: "heading" }, this.heading)), index.h("div", { key: '3c43d4d4dd4c4c708891fdd3398de996a7b08d04', class: "banner__description" }, index.h("slot", { key: 'd58a7f5d4bea7dc2e4ce1dee10a99f19753427b4', name: "description" }, this.description))), index.h("div", { key: 'c10df7f70cb8ac0dd0d5e63e34a6fbc8fef9c62f', class: "banner__buttons" }, index.h("slot", { key: 'ff5cf411dee854f14fdbecda0bc8aac4b01b4abf', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: 'c8da6aa83a13a9b8a7e892de29b1914aa5ae41c1', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: '42b8ba18fa9d15539ab2c80af98da504d8b14013', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (index.h(index.Host, { key: '6bea21791ecb2e68e63a757f5ecfdaa1f07b728d' }, index.h("div", { key: '2c5afc83dcdc9917ae0542d81c1de02abfdd90a6', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: '8c646d4ea9d08a3a1c1bed729d09503cd7257ece', class: "banner__illustration" }, this.illustrationUrl ? (index.h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (index.h("slot", { name: "illustration" }))), index.h("div", { key: '77afe16ba80d1568869ab4a24dc75a65c49dab90', class: "banner__content" }, index.h("div", { key: 'dce08d53d206a7ccd358da11d337330dcf269d52', class: "banner__copy" }, index.h("h2", { key: '626df9e5fcbb345ff1f477191203343db10f2e52', class: "banner__heading" }, index.h("slot", { key: '5e6daf16162dffb58d9e4c61e91d226ba5fc35e7', name: "heading" }, this.heading)), index.h("div", { key: 'ef9dab42d2a03f3d7fdf0b8a4aed1bac5f104795', class: "banner__description" }, index.h("slot", { key: '3a4b3c7c474f00375c6ac49653713dec61f2a6f5', name: "description" }, this.description))), index.h("div", { key: 'af2f8c614c803b272fcac1ae83cbc3f3de908a4d', class: "banner__buttons" }, index.h("slot", { key: 'b047769e0807ad1915e28b174ef6122969ab52c6', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: '46d8a79deb045a8ba2baf1625583f181af576157', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: 'dde5d455151eac0b5abd2c45e920a1c45155145d', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
 };
 AfInPageBanner.style = afInPageBannerCss;

package/dist/cjs/af-in-page-banner.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-in-page-banner.entry.cjs.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Banner Container\n   \n   Design specs from Figma:\n   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n   - Border radius: 32px (desktop), 24px (mobile)\n   - Content padding vertical: 48px (margins/margin TB tight)\n   ========================================================================== */\n\n.banner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding-left: 40px;\n  padding-right: 148px;\n  padding-top: 0;\n  padding-bottom: 0;\n  border-radius: var(--radii-card-level-1, 32px);\n  overflow: hidden;\n  max-width: 1280px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Theme Variants - Background Colors\n   \n   Colors from Figma:\n   - mist-green: #c6d5d1 (background/base)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - soft-clay: #c0ab8d (softclay-400)\n   - white-ivory: #fff9ee (background/ivory-paper)\n   ========================================================================== */\n\n.banner.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons - ice primary, inkwell secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n  --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n  \n  /* Buttons - ice primary, white secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-450, #203e45);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   Decorative Wave Overlay\n   \n   Figma specs:\n   - Position: bottom -17.41px, right -156px\n   - Size: 521px x 323px\n   - Fill colors per theme\n   ========================================================================== */\n\n.banner__wave-overlay {\n  position: absolute;\n  bottom: -17px;\n  right: -156px;\n  width: 521px;\n  height: 323px;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.banner__wave-svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Theme-specific Wave Colors\n   The SVG uses currentColor, so we set color on the overlay container.\n   ========================================================================== */\n\n.banner.theme-mist-green .banner__wave-overlay {\n  color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n  color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.04);\n}\n\n/* ==========================================================================\n   Illustration Area\n   \n   Figma specs:\n   - Desktop: max 360px x 360px, aspect ratio preserved\n   - Mobile: 212px x 212px, positioned absolute top-right\n   ========================================================================== */\n\n.banner__illustration {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 288px;\n  height: 288px;\n  max-width: 288px;\n  max-height: 288px;\n  aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Allow slotted content to fill the illustration area */\n.banner__illustration ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Content Area (Typography Lockup)\n   \n   Figma specs:\n   - Vertical padding: 48px (margins/margin TB tight)\n   - Gap between copy and buttons: 40px\n   - Gap between heading and description: 16px\n   - Max-width for copy: 840px\n   ========================================================================== */\n\n.banner__content {\n  position: relative;\n  z-index: 1;\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n  padding-top: 38px;\n  padding-bottom: 38px;\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.banner__copy {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 840px;\n  width: 100%;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Heading\n   \n   Figma specs:\n   - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n   - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n   - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n   ========================================================================== */\n\n.banner__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-headingweight, 500);\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n  margin: 0;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Description\n   \n   Figma specs:\n   - Font size: 18px\n   - Line height: 26px\n   - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n   - Color: typography/body-default #2b484f (or theme variant)\n   ========================================================================== */\n\n.banner__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-bodyweight, 400);\n  font-size: 18px;\n  line-height: 26px;\n  color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Button Group\n   \n   Figma specs:\n   - Desktop: horizontal, gap 12px\n   - Mobile: vertical, full-width buttons, gap 12px\n   - Button padding: 24px horizontal, 12px vertical\n   - Button border-radius: 9999px (radii/button)\n   ========================================================================== */\n\n.banner__buttons {\n  display: flex;\n  flex-direction: row;\n  gap: 24px;\n  align-items: flex-start;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (≤768px)\n   \n   Figma mobile specs:\n   - Width: 100%\n   - Border radius: 24px\n   - Padding top: 224px (space for illustration)\n   - Content padding: pb 48px, pt 16px, px 28px\n   - Content min-height: 320px\n   - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n   ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n  .banner {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 224px 0 0 0;\n    border-radius: var(--radii-card-level-1-mobile, 24px);\n    max-width: 100%;\n    min-height: auto;\n  }\n\n  /* Wave overlay hidden on mobile */\n  .banner__wave-overlay {\n    display: none;\n  }\n\n  /* Illustration positioned at top-right on mobile */\n  .banner__illustration {\n    position: absolute;\n    top: 12px;\n    left: auto;\n    right: 0;\n    transform: none;\n    width: 212px;\n    height: 212px;\n    max-width: 280px;\n    max-height: 280px;\n  }\n\n  /* Content takes full width with min-height */\n  .banner__content {\n    width: 100%;\n    min-height: 320px;\n    padding: 16px 28px 48px 28px;\n    gap: 40px;\n    flex: none;\n  }\n\n  /* Ensure copy section doesn't constrain width on mobile */\n  .banner__copy {\n    max-width: 100%;\n  }\n\n  /* Mobile heading size */\n  .banner__heading {\n    font-size: 32px;\n    letter-spacing: -0.64px;\n  }\n\n  /* Buttons stack vertically on mobile, full width */\n  .banner__buttons {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    width: 100%;\n  }\n\n  /* Ensure af-button takes full width on mobile */\n  .banner__buttons {\n    --af-button-width: 100%;\n  }\n\n  .banner__buttons af-button {\n    display: block;\n    width: 100%;\n  }\n}\n\n/* ==========================================================================\n   Small Mobile (≤480px)\n   ========================================================================== */\n\n/* ≤ small */\n@media (max-width: 480px) {\n  .banner {\n    padding-top: 200px;\n  }\n\n  .banner__illustration {\n    /* Keep right-aligned, just adjust size */\n    right: 0;\n    width: 180px;\n    height: 180px;\n  }\n\n  .banner__content {\n    padding: 16px 20px 36px 20px;\n    min-height: 280px;\n  }\n\n  .banner__heading {\n    font-size: 28px;\n    letter-spacing: -0.56px;\n  }\n}\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,22LAA22L;;MC4Cx3L,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAgB,YAAY;;AAGjC,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGxB,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;;AAG9B,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE;;AAGhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,GAAG;AAExC;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;;AAG5B,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AA4E3C;AA1EC;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,iBAAa,MAAM,EAAA,EAClDA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB,EAAA,EAExBA,OACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,CACF;;IAIV,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAGpDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,IACnBA,iBACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,CAAA,KAEFA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAClC,CACG,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACvC,EACLA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,iBAAiB,KACrBA,OAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,EAAA,EACtD,IAAI,CAAC,iBAAiB,CACb,CACb,EACA,IAAI,CAAC,mBAAmB,KACvBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,EAC1D,EAAA,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-in-page-banner.entry.cjs.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Banner Container\n\n   Design specs from Figma:\n   - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n   - Border radius: radius-lg (20px) — aligned with af-card across the token ladder\n   - Content padding vertical: 48px (margins/margin TB tight)\n   ========================================================================== */\n\n.banner {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding-left: 40px;\n  padding-right: 148px;\n  padding-top: 0;\n  padding-bottom: 0;\n  border-radius: var(--radius-lg, 20px);\n  overflow: hidden;\n  max-width: 1280px;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Theme Variants - Background Colors\n   \n   Colors from Figma:\n   - mist-green: #c6d5d1 (background/base)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - soft-clay: #c0ab8d (softclay-400)\n   - white-ivory: #fff9ee (background/ivory-paper)\n   ========================================================================== */\n\n.banner.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons - ice primary, inkwell secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n  --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n  \n  /* Buttons - ice primary, white secondary */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-450, #203e45);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n  --banner-body-color: var(--colour-inkwell-400, #2b484f);\n  \n  /* Buttons */\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   Decorative Wave Overlay\n   \n   Figma specs:\n   - Position: bottom -17.41px, right -156px\n   - Size: 521px x 323px\n   - Fill colors per theme\n   ========================================================================== */\n\n.banner__wave-overlay {\n  position: absolute;\n  bottom: -17px;\n  right: -156px;\n  width: 521px;\n  height: 323px;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.banner__wave-svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Theme-specific Wave Colors\n   The SVG uses currentColor, so we set color on the overlay container.\n   ========================================================================== */\n\n.banner.theme-mist-green .banner__wave-overlay {\n  color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n  color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n  color: rgba(20, 52, 59, 0.04);\n}\n\n/* ==========================================================================\n   Illustration Area\n   \n   Figma specs:\n   - Desktop: max 360px x 360px, aspect ratio preserved\n   - Mobile: 212px x 212px, positioned absolute top-right\n   ========================================================================== */\n\n.banner__illustration {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 288px;\n  height: 288px;\n  max-width: 288px;\n  max-height: 288px;\n  aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Allow slotted content to fill the illustration area */\n.banner__illustration ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* ==========================================================================\n   Content Area (Typography Lockup)\n   \n   Figma specs:\n   - Vertical padding: 48px (margins/margin TB tight)\n   - Gap between copy and buttons: 40px\n   - Gap between heading and description: 16px\n   - Max-width for copy: 840px\n   ========================================================================== */\n\n.banner__content {\n  position: relative;\n  z-index: 1;\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n  padding-top: 38px;\n  padding-bottom: 38px;\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.banner__copy {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  max-width: 840px;\n  width: 100%;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Heading\n   \n   Figma specs:\n   - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n   - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n   - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n   ========================================================================== */\n\n.banner__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-headingweight, 500);\n  font-size: 44px;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n  margin: 0;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Description\n   \n   Figma specs:\n   - Font size: 18px\n   - Line height: 26px\n   - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n   - Color: typography/body-default #2b484f (or theme variant)\n   ========================================================================== */\n\n.banner__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--typography-bodyweight, 400);\n  font-size: 18px;\n  line-height: 26px;\n  color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n  white-space: normal;\n}\n\n/* ==========================================================================\n   Button Group\n   \n   Figma specs:\n   - Desktop: horizontal, gap 12px\n   - Mobile: vertical, full-width buttons, gap 12px\n   - Button padding: 24px horizontal, 12px vertical\n   - Button border-radius: 9999px (radii/button)\n   ========================================================================== */\n\n.banner__buttons {\n  display: flex;\n  flex-direction: row;\n  gap: 24px;\n  align-items: flex-start;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (≤768px)\n   \n   Figma mobile specs:\n   - Width: 100%\n   - Border radius: 24px\n   - Padding top: 224px (space for illustration)\n   - Content padding: pb 48px, pt 16px, px 28px\n   - Content min-height: 320px\n   - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n   ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n  .banner {\n    flex-direction: column;\n    align-items: stretch;\n    padding: 224px 0 0 0;\n    /* Mobile keeps the same 20px corner as desktop — simpler after the\n     * token ladder consolidation. */\n    border-radius: var(--radius-lg, 20px);\n    max-width: 100%;\n    min-height: auto;\n  }\n\n  /* Wave overlay hidden on mobile */\n  .banner__wave-overlay {\n    display: none;\n  }\n\n  /* Illustration positioned at top-right on mobile */\n  .banner__illustration {\n    position: absolute;\n    top: 12px;\n    left: auto;\n    right: 0;\n    transform: none;\n    width: 212px;\n    height: 212px;\n    max-width: 280px;\n    max-height: 280px;\n  }\n\n  /* Content takes full width with min-height */\n  .banner__content {\n    width: 100%;\n    min-height: 320px;\n    padding: 16px 28px 48px 28px;\n    gap: 40px;\n    flex: none;\n  }\n\n  /* Ensure copy section doesn't constrain width on mobile */\n  .banner__copy {\n    max-width: 100%;\n  }\n\n  /* Mobile heading size */\n  .banner__heading {\n    font-size: 32px;\n    letter-spacing: -0.64px;\n  }\n\n  /* Buttons stack vertically on mobile, full width */\n  .banner__buttons {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n    width: 100%;\n  }\n\n  /* Ensure af-button takes full width on mobile */\n  .banner__buttons {\n    --af-button-width: 100%;\n  }\n\n  .banner__buttons af-button {\n    display: block;\n    width: 100%;\n  }\n}\n\n/* ==========================================================================\n   Small Mobile (≤480px)\n   ========================================================================== */\n\n/* ≤ small */\n@media (max-width: 480px) {\n  .banner {\n    padding-top: 200px;\n  }\n\n  .banner__illustration {\n    /* Keep right-aligned, just adjust size */\n    right: 0;\n    width: 180px;\n    height: 180px;\n  }\n\n  .banner__content {\n    padding: 16px 20px 36px 20px;\n    min-height: 280px;\n  }\n\n  .banner__heading {\n    font-size: 28px;\n    letter-spacing: -0.56px;\n  }\n}\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,k1LAAk1L;;MC2C/1L,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAU,YAAY;;AAG3B,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGxB,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;;AAG9B,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE;;AAGhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,GAAG;AAExC;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;;AAG5B,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AA4E3C;AA1EC;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,iBAAa,MAAM,EAAA,EAClDA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB,EAAA,EAExBA,OACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,CACF;;IAIV,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAGpDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,IACnBA,iBACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,CAAA,KAEFA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAClC,CACG,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACvC,EACLA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,iBAAiB,KACrBA,OAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,EAAA,EACtD,IAAI,CAAC,iBAAiB,CACb,CACb,EACA,IAAI,CAAC,mBAAmB,KACvBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,EAC1D,EAAA,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD;;;;;;;"}

package/dist/cjs/af-inline.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afInlineCss = ":host{display:inline-flex;box-sizing:border-box}:host([hidden]){display:none}";
 
@@ -49,7 +49,7 @@ const AfInline = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '17b13c3b8a5ade7e5d3c990673b2e884b0ae5cb5', style: style }, index.h("slot", { key: 'ac563668c3e6e26f9a1b730c6edb16cb8cb46498' })));
+        return (index.h(index.Host, { key: '05c8a9c14341060f3e5f24397770740b09fee85c', style: style }, index.h("slot", { key: '871efa9e4e74690534375283878c8b0732f4859d' })));
     }
 };
 AfInline.style = afInlineCss;

package/dist/cjs/af-inline.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-inline.entry.cjs.js","sources":["src/components/af-inline/af-inline.css?tag=af-inline&encapsulation=shadow","src/components/af-inline/af-inline.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,+EAA+E;;MCiBtF,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,QAAQ;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;AAmC7B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}
+{"version":3,"file":"af-inline.entry.cjs.js","sources":["src/components/af-inline/af-inline.css?tag=af-inline&encapsulation=shadow","src/components/af-inline/af-inline.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,+EAA+E;;MCiBtF,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,QAAQ;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;AAmC7B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/cjs/af-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
 

package/dist/cjs/af-logo-well.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afLogoWellCss = ":host{display:inline-block}.logo-well{background:var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));border-radius:var(--radius-logo-well-desktop, 16px);height:72px;width:184px;display:flex;align-items:center;justify-content:center;padding:20px 32px;box-sizing:border-box}::slotted(img){max-height:32px;max-width:120px;width:auto;height:auto;display:block;object-fit:contain;filter:var(--af-carousel-logo-filter, brightness(0) invert(1))}::slotted(svg){max-height:32px;max-width:120px;width:auto;height:auto;display:block;color:var(--af-carousel-logo-color, white)}::slotted(div){white-space:nowrap;color:var(--af-carousel-logo-color, white);font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:600;font-size:16px}@media (max-width: 767px){.logo-well{border-radius:var(--radius-logo-well-mobile, 12px);padding:20px 24px}}";
 
@@ -9,7 +9,7 @@ const AfLogoWell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'c0896e6345cc862d0cd7105117016a5dc76b3141' }, index.h("div", { key: 'a754bb9b44319040e9b1bcb03c6440c60c91af25', class: "logo-well" }, index.h("slot", { key: '8f87dc5de8caba94cc30a529aaa8e4c4426c5e81' }))));
+        return (index.h(index.Host, { key: 'b3abd933476da0e33ab6fcc4cd2f638fd8d3d69e' }, index.h("div", { key: '16d17b912cb38663ae6d2f71109a99cc5cb9ab08', class: "logo-well" }, index.h("slot", { key: '801820bb88b3af3ebb1f9514b2a8f1297b6d033c' }))));
     }
 };
 AfLogoWell.style = afLogoWellCss;

package/dist/cjs/af-nav-accordion-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afNavAccordionItemCss = ".sc-af-nav-accordion-item-h{display:block;width:100%}.nav-accordion-item.sc-af-nav-accordion-item{width:100%}.trigger.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 12px;background:transparent;border:none;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));cursor:pointer;font:inherit;text-align:left;text-decoration:none;color:inherit;box-sizing:border-box}a.trigger.sc-af-nav-accordion-item{color:inherit}.trigger.sc-af-nav-accordion-item:hover:not(:disabled){background-color:rgba(20, 52, 59, 0.02)}.trigger.sc-af-nav-accordion-item:focus-visible{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:-2px}.trigger.sc-af-nav-accordion-item:disabled{cursor:not-allowed;opacity:0.5}.trigger-content.sc-af-nav-accordion-item{flex:1;min-width:0;display:flex;align-items:center;min-height:24px}.label.sc-af-nav-accordion-item{font-family:var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--typography-headingweight, 500);font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.chevron.sc-af-nav-accordion-item,.chevron-button.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));transition:transform 0.3s ease}.chevron-button.sc-af-nav-accordion-item{background:transparent;border:none;cursor:pointer;padding:0}.chevron-button.sc-af-nav-accordion-item:hover{opacity:0.7}.chevron.is-open.sc-af-nav-accordion-item{transform:rotate(180deg)}.content-wrapper.sc-af-nav-accordion-item{overflow:hidden;transition:max-height 0.3s ease}.content.sc-af-nav-accordion-item{padding:0;background:var(--af-background-base, white)}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{cursor:not-allowed;opacity:0.5}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item:hover{background-color:transparent}.is-open.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{border-bottom-color:transparent}.breakpoint-mobile.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:20px 12px}.breakpoint-mobile.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.breakpoint-desktop.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:12px}.breakpoint-desktop.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:16px;line-height:20px;letter-spacing:0}.breakpoint-mobile.sc-af-nav-accordion-item-h .content.sc-af-nav-accordion-item{padding-left:0}";
 
@@ -84,11 +84,11 @@ const AfNavAccordionItem = class {
         // 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 (index.h(index.Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
+        return (index.h(index.Host, { key: '514c8d8a02712f76eb9de767f6ab5c171f7cba8a', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, index.h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', class: "nav-accordion-item" }, this.href ? (index.h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (index.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" }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, index.h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
+            } }, index.h("div", { key: 'c8e9e4d3cea27fe1ecdcb629f1525c1e3fb8c02a', class: "nav-accordion-item" }, this.href ? (index.h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (index.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" }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '4da5b93689a0dac535dca6233b3c9d2218d333c1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, index.h("div", { key: '103be83255e80feef963f95566cb22c0ab4bb338', class: "content", ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '2f48b5257f7fdcaf30635dc178ff452cd4a176a0' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/af-nav-accordion.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afNavAccordionCss = ".sc-af-nav-accordion-h{display:block;width:100%}.nav-accordion.sc-af-nav-accordion{display:flex;flex-direction:column;width:100%}";
 
@@ -72,7 +72,7 @@ const AfNavAccordion = class {
         this.syncItems();
     }
     render() {
-        return (index.h(index.Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, index.h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, index.h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
+        return (index.h(index.Host, { key: 'a0c6718b375af88cefb975e997d70a228d1fb9aa', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, index.h("div", { key: '63b1716e6b40f7d73c9609a030b03af55a5db714', class: "nav-accordion" }, index.h("slot", { key: '48bb056a8e8cf39a47b20b8c54abbc7266f75765' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-nav-card.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afNavCardCss = ".sc-af-nav-card-h{display:block}.card-link.sc-af-nav-card{text-decoration:none;color:inherit;display:block}.nav-card.sc-af-nav-card{display:flex;flex-direction:column;position:relative;width:290px;height:360px;min-height:360px;border-radius:var(--radii-image, 16px);overflow:hidden;justify-content:flex-end;transition:transform 0.2s ease}.nav-card.is-hovered.sc-af-nav-card{transform:scale(1.02)}.image-container.sc-af-nav-card{position:absolute;inset:0;overflow:hidden}.card-image.sc-af-nav-card{width:100%;height:100%;object-fit:cover;object-position:center}.overlay.sc-af-nav-card{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);padding:80px 24px 24px 24px;display:flex;flex-direction:column;align-items:flex-start}.heading.sc-af-nav-card{margin:0;font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--font-weight-book, 500);font-size:24px;line-height:1.2;letter-spacing:-0.48px;color:#ffffff;width:100%}.nav-card.is-hovered.sc-af-nav-card .heading.sc-af-nav-card{text-decoration:underline}";
 

package/dist/cjs/af-nav-menu-nest.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afNavMenuNestCss = ".sc-af-nav-menu-nest-h{display:inline-block}.nav-menu-nest.sc-af-nav-menu-nest{display:inline-flex;background:var(--af-background-base, #ffffff);border-radius:32px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest{flex-direction:row;align-items:stretch}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{display:flex;flex-direction:row;gap:32px;padding:24px 0 32px 40px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{display:flex;flex-direction:column;padding:24px 40px 32px 32px}.nav-menu-nest.breakpoint-desktop .menu-sidebar.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-sidebar .sc-af-nav-menu-nest-s>af-nav-menu{padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-sidebar.sc-af-nav-menu-nest-s>af-nav-card,.nav-menu-nest.breakpoint-desktop .menu-sidebar .sc-af-nav-menu-nest-s>af-nav-card{margin-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{flex:1 1 0;min-width:0;border-right:1px solid var(--af-background-border-subtle, #e8eeed);padding-right:32px;padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{border-right:none;padding-right:0}.sc-af-nav-menu-nest-h[show-sidebar-border] .nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{border-right:1px solid var(--af-background-border-heavy, #c6d5d1);padding-right:32px}@media (max-width: 1199px){.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{gap:20px;padding:20px 0 24px 24px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{padding:20px 24px 24px 20px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{padding-right:20px}.sc-af-nav-menu-nest-h[show-sidebar-border] .nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{padding-right:20px}}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest{flex-direction:column;border-radius:0}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{display:flex;flex-direction:column}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{display:flex;flex-direction:column;padding:32px 12px;border-top:1px solid var(--af-background-border-subtle, #e8eeed)}.nav-menu-nest.breakpoint-mobile .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-mobile .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{border-right:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}";
 
@@ -35,7 +35,7 @@ const AfNavMenuNest = class {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (index.h(index.Host, { key: '10f78b27ad9bb744415303815a0d332c521b97ce' }, index.h("div", { key: '1fd8d7624889e151a7051b0f8b2ee7c773ae4d60', class: classes }, index.h("div", { key: 'e2fefca6e151476e80c1b45d435bb72b623f8c15', class: "menu-columns" }, index.h("slot", { key: '321200c424b9e4b8b9f1f9cf101de1a2a4fdc742' })), index.h("div", { key: '8956a487218299d9735ece9a6ca9fe3a23828e0f', class: "menu-sidebar" }, index.h("slot", { key: '8cb04d5028ec97976d38b39a1b66f41600b7fa0f', name: "sidebar" })))));
+        return (index.h(index.Host, { key: '799695a1e7e9edef21a1df1a2424d39dda307796' }, index.h("div", { key: '04d44b23ab48f4fa36d772b607a913bff03573d4', class: classes }, index.h("div", { key: '572aa555fff3429dd72c8623759d324cbc686aae', class: "menu-columns" }, index.h("slot", { key: '5e0f32b02a01b57a853921cafc583a05ec5ead38' })), index.h("div", { key: 'e043ec11d26b4bb7e1ded5d55ea20c99aa52301e', class: "menu-sidebar" }, index.h("slot", { key: '6f8efbba5940a73bc26086ef5329b25af2019368', name: "sidebar" })))));
     }
 };
 AfNavMenuNest.style = afNavMenuNestCss;

package/dist/cjs/af-nav-menu.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afNavMenuCss = ".sc-af-nav-menu-h{display:block}.nav-menu.sc-af-nav-menu{display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-height:1px;min-width:1px}.nav-menu.breakpoint-desktop.sc-af-nav-menu{padding:0;flex:1 0 0;align-self:stretch}.nav-menu.breakpoint-desktop.has-border.sc-af-nav-menu{border-right:1px solid var(--af-background-border-subtle, #e8eeed);padding-right:32px;padding-top:16px}.nav-menu.breakpoint-mobile.sc-af-nav-menu{padding:32px 12px;width:100%;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}.menu-header.sc-af-nav-menu{display:flex;gap:16px;align-items:center;width:100%}.menu-heading.sc-af-nav-menu{margin:0;font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--font-weight-book, 500);font-size:20px;line-height:1.2;letter-spacing:-0.4px;color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));flex:1 0 0;min-height:1px;min-width:1px}.nav-menu.breakpoint-mobile.sc-af-nav-menu .menu-heading.sc-af-nav-menu{line-height:1.1}.menu-items.sc-af-nav-menu{display:flex;flex-direction:column;align-items:flex-start;width:100%}.nav-menu.breakpoint-mobile.sc-af-nav-menu .menu-items.sc-af-nav-menu{padding-left:24px}.sc-af-nav-menu-s>af-nav-item{width:100%}.nav-menu.card-style.sc-af-nav-menu{background:var(--af-background-level-1, #e8eeed);border-radius:var(--radii-card-level-1, 32px);padding:40px}.nav-menu.card-style.breakpoint-desktop.sc-af-nav-menu{flex:1 0 0;align-self:stretch}";
 
@@ -32,7 +32,7 @@ const AfNavMenu = class {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (index.h(index.Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, index.h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (index.h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, index.h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), index.h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, index.h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
+        return (index.h(index.Host, { key: '98d8c217eb9e952d4feb3928c69cae1559621092' }, index.h("div", { key: '3185c320e6ce6cff4c2630fc7492bbb2b34ef838', class: classes }, this.heading && (index.h("div", { key: '207eeef13c68e3ff26dcf2bbeee20574c7fab481', class: "menu-header" }, index.h("h3", { key: 'a2c6e28d60b2aeb49b96e99c57c853493b415a4c', class: "menu-heading" }, this.heading))), index.h("div", { key: 'f133eea0ed320467cd4840820251d09e2d98f49f', class: "menu-items" }, index.h("slot", { key: '91b640df3dd990f556d394056683ddd9fd26d6c3' })))));
     }
 };
 AfNavMenu.style = afNavMenuCss;

package/dist/cjs/af-number-badge.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CcvVbx1D.js');
+var index = require('./index-BzZA0USq.js');
 
 const afNumberBadgeCss = ":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;user-select:none;flex-shrink:0}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);font-weight:500}.badge.variant-inCircle{border-radius:50%;background-color:var(--af-color-brand-soft-clay, #B09670);color:var(--af-color-brand-inkwell, #14343B)}.badge.variant-outlined{background-color:transparent;color:var(--af-color-brand-mist-green, #C6D5D1)}";
 
@@ -30,7 +30,7 @@ const AfNumberBadge = class {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (index.h(index.Host, { key: '816770ea4351ba01a7c069b57558efad8015f5f8', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, index.h("span", { key: '33bd320ab7e56fbf29251035008e862b6a249258', class: {
+        return (index.h(index.Host, { key: '71d32d2c1b2c6abec25edab3fadc0343d7575aaa', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, index.h("span", { key: '4686c4e277d1557cb6c3945a52a7713d0fd1b021', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/cjs/af-numbered-stepper-item.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-BzZA0USq.js');
+
+const afNumberedStepperItemCss = ".sc-af-numbered-stepper-item-h{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--space-6, 24px);min-width:0;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343B))}.numbered-stepper-item__marker-row.sc-af-numbered-stepper-item{position:relative;display:flex;justify-content:center;width:100%;margin-bottom:var(--space-6, 24px)}.numbered-stepper-item__badge.sc-af-numbered-stepper-item{position:relative;z-index:1}.numbered-stepper-item__connector.sc-af-numbered-stepper-item{position:absolute;left:calc(50% + 20px);right:calc(-50% + 20px);top:50%;height:1px;background:var(--colour-brand-soft-clay, #B09670)}.sc-af-numbered-stepper-item-h:last-child .numbered-stepper-item__connector.sc-af-numbered-stepper-item{display:none}.numbered-stepper-item__lockup.sc-af-numbered-stepper-item{display:block;max-width:320px}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-6, 24px);padding:0}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item{width:auto;flex-shrink:0;margin-bottom:0;align-self:stretch;justify-content:flex-start;align-items:flex-start}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item{left:50%;right:auto;top:calc(var(--space-10, 40px) + var(--space-1, 4px));bottom:calc(var(--space-8, 32px) * -1);height:auto;width:1px;transform:translateX(-50%)}.numbered-stepper--vertical.sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item,.numbered-stepper--vertical .sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item{max-width:none;flex:1 1 auto;padding-top:var(--space-2, 8px)}@media (max-width: 767px){.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-6, 24px);padding:0}.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h .numbered-stepper-item__marker-row.sc-af-numbered-stepper-item{width:auto;flex-shrink:0;margin-bottom:0}.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h .numbered-stepper-item__connector.sc-af-numbered-stepper-item{display:none}.numbered-stepper--horizontal.sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item,.numbered-stepper--horizontal .sc-af-numbered-stepper-item-h .numbered-stepper-item__lockup.sc-af-numbered-stepper-item{max-width:none;flex:1 1 auto;padding-top:var(--space-2, 8px)}}";
+
+const AfNumberedStepperItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Step number shown in the badge. Auto-assigned by the parent stepper if
+         * not explicitly set.
+         */
+        this.index = 1;
+    }
+    render() {
+        // The badge supports 1–10; clamp for safety so we never pass a bad prop.
+        const clamped = Math.max(1, Math.min(10, this.index | 0));
+        return (index.h(index.Host, { key: '6aa07b74803b11d666b724fe2c96149860c58810', role: "listitem" }, index.h("div", { key: 'ddf3ea9200c5015dbefb53a2dc77ade6f634e24e', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, index.h("af-number-badge", { key: 'b778abffa4a41bbea6728920c61e1f2d2155662a', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), index.h("span", { key: 'e3f74fb9b1bc4fe999095878bdbe10f47694f8d8', class: "numbered-stepper-item__connector" })), index.h("af-typography-lockup", { key: '6f4688fc503175db37d5a91fa626b43692e4858a', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, index.h("slot", { key: 'd628fb339348c23c988e4fb69bc647105d7041f6', name: "heading" }), index.h("span", { key: 'a5b58d21e44537de9c32b22a754e0f4a8ef96007', slot: "description" }, index.h("slot", { key: '17607c180f777c5f829ea9d9919c5a7187718f2d', name: "body" })))));
+    }
+};
+AfNumberedStepperItem.style = afNumberedStepperItemCss;
+
+exports.af_numbered_stepper_item = AfNumberedStepperItem;
+//# sourceMappingURL=af-numbered-stepper-item.entry.cjs.js.map

package/dist/cjs/af-numbered-stepper-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-numbered-stepper-item.entry.cjs.js","sources":["src/components/af-numbered-stepper-item/af-numbered-stepper-item.css?tag=af-numbered-stepper-item&encapsulation=scoped","src/components/af-numbered-stepper-item/af-numbered-stepper-item.tsx"],"sourcesContent":["/* Horizontal default: centered column — badge on top, lockup below.\n * The connector is a 1px line on the right half of the marker row that\n * reaches into the next sibling's marker row, so visually the line spans\n * between the two badges. Hidden on :last-child. */\n:host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding: 0 var(--space-6, 24px);\n  min-width: 0;\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343B));\n}\n\n.numbered-stepper-item__marker-row {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  margin-bottom: var(--space-6, 24px);\n}\n\n.numbered-stepper-item__badge {\n  position: relative;\n  z-index: 1;\n}\n\n/* Connector segment between this badge and the next one.\n * 20px = half of 40px badge. We offset by that from the centre so the line\n * starts at the edge of the badge and stretches off the right side of the\n * host, joining the next item's mirror-offset half. */\n.numbered-stepper-item__connector {\n  position: absolute;\n  left: calc(50% + 20px);\n  right: calc(-50% + 20px);\n  top: 50%;\n  height: 1px;\n  background: var(--colour-brand-soft-clay, #B09670);\n}\n\n/* Last item doesn't draw a connector. */\n:host(:last-child) .numbered-stepper-item__connector {\n  display: none;\n}\n\n.numbered-stepper-item__lockup {\n  display: block;\n  max-width: 320px;\n}\n\n/* Vertical parent orientation: badges in a column, text to the right.\n * Connector runs vertically along the badge column. */\n:host-context(.numbered-stepper--vertical) {\n  flex-direction: row;\n  align-items: flex-start;\n  text-align: left;\n  gap: var(--space-6, 24px);\n  padding: 0;\n}\n\n:host-context(.numbered-stepper--vertical) .numbered-stepper-item__marker-row {\n  width: auto;\n  flex-shrink: 0;\n  margin-bottom: 0;\n  /* Pin to top so subsequent text content flows naturally beside it. */\n  align-self: stretch;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n:host-context(.numbered-stepper--vertical) .numbered-stepper-item__connector {\n  left: 50%;\n  right: auto;\n  top: calc(var(--space-10, 40px) + var(--space-1, 4px));\n  bottom: calc(var(--space-8, 32px) * -1);\n  height: auto;\n  width: 1px;\n  transform: translateX(-50%);\n}\n\n:host-context(.numbered-stepper--vertical) .numbered-stepper-item__lockup {\n  max-width: none;\n  flex: 1 1 auto;\n  /* Align text baseline roughly to the badge centre. */\n  padding-top: var(--space-2, 8px);\n}\n\n/* ≤ mobile — horizontal collapses to a vertical row-layout for the item too. */\n@media (max-width: 767px) {\n  :host-context(.numbered-stepper--horizontal) {\n    flex-direction: row;\n    align-items: flex-start;\n    text-align: left;\n    gap: var(--space-6, 24px);\n    padding: 0;\n  }\n\n  :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__marker-row {\n    width: auto;\n    flex-shrink: 0;\n    margin-bottom: 0;\n  }\n\n  :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__connector {\n    display: none;\n  }\n\n  :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__lockup {\n    max-width: none;\n    flex: 1 1 auto;\n    padding-top: var(--space-2, 8px);\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an `af-numbered-stepper`. Renders a filled soft-clay\n * circle badge (via `af-number-badge`) alongside a heading + body lockup.\n *\n * The parent `af-numbered-stepper` auto-assigns the `index` prop based on\n * DOM order. Pass `index` explicitly to override.\n *\n * Heading scale is the shared `card` variant from `af-typography-lockup`\n * (22/20px) — the same ladder step used by diff-card, related-card, and\n * other card-title uses across the design system.\n *\n * @slot heading - Step title (h3 or h4 recommended for semantics).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n  tag: 'af-numbered-stepper-item',\n  styleUrl: 'af-numbered-stepper-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNumberedStepperItem {\n  /**\n   * Step number shown in the badge. Auto-assigned by the parent stepper if\n   * not explicitly set.\n   */\n  @Prop({ reflect: true }) index: number = 1;\n\n  render() {\n    // The badge supports 1–10; clamp for safety so we never pass a bad prop.\n    const clamped = Math.max(1, Math.min(10, this.index | 0)) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\n    return (\n      <Host role=\"listitem\">\n        <div class=\"numbered-stepper-item__marker-row\" aria-hidden=\"true\">\n          <af-number-badge\n            class=\"numbered-stepper-item__badge\"\n            number={clamped}\n            variant=\"inCircle\"\n            size={40}\n          ></af-number-badge>\n          <span class=\"numbered-stepper-item__connector\"></span>\n        </div>\n        <af-typography-lockup\n          class=\"numbered-stepper-item__lockup\"\n          heading-size=\"card\"\n          text-alignment=\"center\"\n        >\n          <slot name=\"heading\"></slot>\n          <span slot=\"description\">\n            <slot name=\"body\"></slot>\n          </span>\n        </af-typography-lockup>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,4pGAA4pG;;MCsBhrG,qBAAqB,GAAA,MAAA;AANlC,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AA8B3C;IA5BC,MAAM,GAAA;;QAEJ,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAA2C;AAEnG,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mCAAmC,EAAA,aAAA,EAAa,MAAM,EAAA,EAC/DA,OAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,MAAM,EAAE,OAAO,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,EAAE,EACS,CAAA,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kCAAkC,EAAA,CAAQ,CAClD,EACNA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,+BAA+B,EACxB,cAAA,EAAA,MAAM,oBACJ,QAAQ,EAAA,EAEvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,CACc,CAClB;;;;;;;"}

package/dist/cjs/af-numbered-stepper.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-BzZA0USq.js');
+
+const afNumberedStepperCss = ".sc-af-numbered-stepper-h{display:grid;width:100%;max-width:1120px;margin:0 auto}.numbered-stepper--horizontal.sc-af-numbered-stepper{grid-auto-columns:1fr;grid-auto-flow:column;gap:0}.numbered-stepper--vertical.sc-af-numbered-stepper{max-width:680px;grid-auto-flow:row;gap:var(--space-8, 32px)}@media (max-width: 767px){.numbered-stepper--horizontal.sc-af-numbered-stepper{grid-auto-flow:row;grid-auto-columns:unset;gap:var(--space-8, 32px)}}";
+
+const AfNumberedStepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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 (index.h(index.Host, { key: 'a1df62f85981a64331d4b641074eaa54db04fef8', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, index.h("slot", { key: '2c1fbae6a474c883ce7eef49b79610882b401464' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AfNumberedStepper.style = afNumberedStepperCss;
+
+exports.af_numbered_stepper = AfNumberedStepper;
+//# sourceMappingURL=af-numbered-stepper.entry.cjs.js.map

package/dist/cjs/af-numbered-stepper.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-numbered-stepper.entry.cjs.js","sources":["src/components/af-numbered-stepper/af-numbered-stepper.css?tag=af-numbered-stepper&encapsulation=scoped","src/components/af-numbered-stepper/af-numbered-stepper.tsx"],"sourcesContent":[":host {\n  display: grid;\n  width: 100%;\n  max-width: 1120px;\n  margin: 0 auto;\n}\n\n/* Horizontal: equal-width columns; each item paints its own connector segment. */\n.numbered-stepper--horizontal {\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n  gap: 0;\n}\n\n/* Vertical: one column; items render the badge-row inline and the connector\n * runs along the top of the row between badges. */\n.numbered-stepper--vertical {\n  max-width: 680px;\n  grid-auto-flow: row;\n  gap: var(--space-8, 32px);\n}\n\n/* ≤ mobile — horizontal collapses to vertical stack. */\n@media (max-width: 767px) {\n  .numbered-stepper--horizontal {\n    grid-auto-flow: row;\n    grid-auto-columns: unset;\n    gap: var(--space-8, 32px);\n  }\n}\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCqC7c,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAgC9D;IA9BC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGtB,kBAAkB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAClB;QACpC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;AAExB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,CAAsC,mCAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAE,EAC/D,IAAI,EAAC,MAAM,EAAA,EAEXD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}