@affinda/wc 0.0.16 → 0.0.18

package/dist/components/{p-wwnR-hlX.js → p-D66k2SSB.js}

@@ -22,10 +22,10 @@ const AfProgressLine = /*@__PURE__*/ proxyCustomElement(class AfProgressLine ext
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: '0b5f1dccd9d5d3d80a68dbecd7c78e9c7ba1e9eb' }, h("div", { key: '70083ced351eeed528c93787c47299af86edf693', class: {
+        return (h(Host, { key: '62410fb52d8010a3544e4aff10587e656162eb50' }, h("div", { key: '35ecb7c0c89d305456aa07a1db34fa0cf41e9181', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '6a37704b7183543b589a872c44413fafc6a643dc', class: "progress-line__background" }), h("div", { key: 'ff7cee0f9e117e3ea346d195126c635d86efc5da', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'd5c61725e5797df2d16555b2035aa58477622b07', class: "progress-line__background" }), h("div", { key: '983d07564432e4f6699dd820a304fd10935e952d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get style() { return afProgressLineCss; }
 }, [258, "af-progress-line", {
@@ -47,6 +47,6 @@ function defineCustomElement() {
 }
 
 export { AfProgressLine as A, defineCustomElement as d };
-//# sourceMappingURL=p-wwnR-hlX.js.map
+//# sourceMappingURL=p-D66k2SSB.js.map
 
-//# sourceMappingURL=p-wwnR-hlX.js.map
+//# sourceMappingURL=p-D66k2SSB.js.map

package/dist/components/{p-wwnR-hlX.js.map → p-D66k2SSB.js.map}

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

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

@@ -1 +1 @@
-{"file":"p-DBnL9UHx.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k9KAAk9K;;MCgBz9K,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"tertiary\"]) {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n  /* Allow width to be controlled from outside via CSS custom property */\n  width: var(--af-button-width, auto);\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-small {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n  display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n  margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n  margin-left: 12px;\n}\n\n.size-small .icon-left.has-content {\n  margin-right: 8px;\n}\n\n.size-small .icon-right.has-content {\n  margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.size-default .label {\n  height: 24px;\n}\n\n.size-small .label {\n  height: 20px;\n}\n\n/* ==========================================================================\n   Primary Button\n   Filled background with ice color, inkwell text\n   ========================================================================== */\n\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n  background: var(--af-button-primary-bg, #A6FFFB);\n  border-color: var(--af-button-primary-stroke, #14343B);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n  outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n}\n\n/* ==========================================================================\n   Secondary Button\n   Transparent background with visible border\n   ========================================================================== */\n\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n  background: var(--af-background-base, #FFF);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n  outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* ==========================================================================\n   Tertiary Button\n   Text-only link style with underline, no border or background\n   ========================================================================== */\n\n.variant-tertiary {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343b));\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-tertiary .label {\n  border-bottom: 2px solid var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-tertiary .icon-left,\n.variant-tertiary .icon-right {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-tertiary:focus:not(.disabled),\n.variant-tertiary:focus-visible:not(.disabled) {\n  outline: none;\n}\n\n.variant-tertiary:focus-visible:not(.disabled) .label {\n  box-shadow: 0 4px 0 0 var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-tertiary:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Disabled states\n   ========================================================================== */\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.variant-primary.disabled {\n  border: 1px solid var(--af-button-primary-stroke, #14343B);\n  background: var(--af-button-primary-bg, #A6FFFB);\n  opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  opacity: 0.6;\n}\n\n.variant-tertiary.disabled {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Reset button element styles\n   ========================================================================== */\n\nbutton.button {\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-tertiary {\n  background: transparent;\n  border: none;\n}\n\n/* ==========================================================================\n   Reset anchor element styles (when using href prop)\n   ========================================================================== */\n\na.button {\n  text-decoration: none;\n  color: inherit;\n}\n\na.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-tertiary {\n  background: transparent;\n  border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `tertiary` - Subtle text-link style with underline\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs\n   * - `small` - Compact size for inline or secondary contexts\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DBnL9UHx.js","mappings":";;AAAA,MAAM,WAAW,GAAG,k9KAAk9K;;MCgBz9K,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAE7C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"tertiary\"]) {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n  /* Allow width to be controlled from outside via CSS custom property */\n  width: var(--af-button-width, auto);\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-small {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n  display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small .icon-left,\n.size-small .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n  margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n  margin-left: 12px;\n}\n\n.size-small .icon-left.has-content {\n  margin-right: 8px;\n}\n\n.size-small .icon-right.has-content {\n  margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.size-default .label {\n  height: 24px;\n}\n\n.size-small .label {\n  height: 20px;\n}\n\n/* ==========================================================================\n   Primary Button\n   Filled background with ice color, inkwell text\n   ========================================================================== */\n\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n  background: var(--af-button-primary-bg, #A6FFFB);\n  border-color: var(--af-button-primary-stroke, #14343B);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n  outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n}\n\n/* ==========================================================================\n   Secondary Button\n   Transparent background with visible border\n   ========================================================================== */\n\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n  background: var(--af-background-base, #FFF);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n  outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* ==========================================================================\n   Tertiary Button\n   Text-only link style with underline, no border or background\n   ========================================================================== */\n\n.variant-tertiary {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343b));\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-tertiary .label {\n  border-bottom: 2px solid var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-tertiary .icon-left,\n.variant-tertiary .icon-right {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-tertiary:focus:not(.disabled),\n.variant-tertiary:focus-visible:not(.disabled) {\n  outline: none;\n}\n\n.variant-tertiary:focus-visible:not(.disabled) .label {\n  box-shadow: 0 4px 0 0 var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-tertiary:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Disabled states\n   ========================================================================== */\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.variant-primary.disabled {\n  border: 1px solid var(--af-button-primary-stroke, #14343B);\n  background: var(--af-button-primary-bg, #A6FFFB);\n  opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  opacity: 0.6;\n}\n\n.variant-tertiary.disabled {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Reset button element styles\n   ========================================================================== */\n\nbutton.button {\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-tertiary {\n  background: transparent;\n  border: none;\n}\n\n/* ==========================================================================\n   Reset anchor element styles (when using href prop)\n   ========================================================================== */\n\na.button {\n  text-decoration: none;\n  color: inherit;\n}\n\na.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-tertiary {\n  background: transparent;\n  border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `tertiary` - Subtle text-link style with underline\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs\n   * - `small` - Compact size for inline or secondary contexts\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DOkvrcIE.js → p-DReSTue0.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
 
-const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));letter-spacing:var(--letter-spacing-body, 0)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.variant-xlarge{font-size:var(--font-size-body-xlarge, 22px);line-height:var(--line-height-body-xlarge, 28px)}.variant-large{font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px)}.variant-medium{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.variant-small{font-size:var(--font-size-body-small, 14px);line-height:var(--line-height-body-small, 20px)}";
+const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));letter-spacing:var(--letter-spacing-body, 0);text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.variant-xlarge{font-size:var(--font-size-body-xlarge, 22px);line-height:var(--line-height-body-xlarge, 28px)}.variant-large{font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px)}.variant-medium{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.variant-small{font-size:var(--font-size-body-small, 14px);line-height:var(--line-height-body-small, 20px)}";
 
 const AfText = /*@__PURE__*/ proxyCustomElement(class AfText extends H {
     constructor(registerHost) {
@@ -11,18 +11,16 @@ const AfText = /*@__PURE__*/ proxyCustomElement(class AfText extends H {
         this.__attachShadow();
         /** Text variant */
         this.variant = 'medium';
-        /** Visual alignment */
-        this.align = 'left';
         /** Semantic element to render */
         this.as = 'p';
     }
     render() {
         const Tag = this.as;
-        return (h(Tag, { key: '824ada09e3f1b9eff027c758087e8369f4de5daa', class: {
+        return (h(Tag, { key: '522550f1e2027db872a76232f0833571b558e817', class: {
                 'text': true,
                 [`variant-${this.variant}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: '3c9762436be40ed4920db1dea3a38561e275848e' })));
+                [`align-${this.align}`]: !!this.align
+            }, part: "base" }, h("slot", { key: '8968ce08e3080dcefa3583520dcc75894140c057' })));
     }
     static get style() { return afTextCss; }
 }, [257, "af-text", {
@@ -45,6 +43,6 @@ function defineCustomElement() {
 }
 
 export { AfText as A, defineCustomElement as d };
-//# sourceMappingURL=p-DOkvrcIE.js.map
+//# sourceMappingURL=p-DReSTue0.js.map
 
-//# sourceMappingURL=p-DOkvrcIE.js.map
+//# sourceMappingURL=p-DReSTue0.js.map

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

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

package/dist/components/p-DUQu3N38.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afSwitchCss = ":host{display:inline-block}.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--af-typography-body-dark, #14343b));user-select:none}.switch.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.track{position:relative;display:flex;align-items:center;flex-shrink:0;width:52px;height:30px;border-radius:var(--radii-switch, 9999px);background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));transition:background 0.2s ease;box-sizing:border-box}.track.active{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b))}.track.disabled{background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed))}.track.active.disabled{background:var(--af-form-control-bg-checked-disabled, #708380)}.switch:not(.disabled):hover .track:not(.active){background:var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3))}.input:focus-visible+.track{box-shadow:0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));outline:none}.knob{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.2s ease, background 0.2s ease;transform:translateX(2px)}.knob.active{transform:translateX(24px);background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.knob.disabled{background:var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));box-shadow:none}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+
+const AfSwitch = /*@__PURE__*/ proxyCustomElement(class AfSwitch extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afChange = createEvent(this, "afChange");
+        /**
+         * Whether the switch is active (on)
+         */
+        this.active = false;
+        /**
+         * Whether the switch is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.active = !this.active;
+            this.afChange.emit({ active: this.active });
+        };
+    }
+    render() {
+        const switchClasses = {
+            'switch': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const trackClasses = {
+            'track': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const knobClasses = {
+            'knob': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '40208bbee69ac5f433b5949737ea7ae25abb04d1' }, h("label", { key: '57f6e0fd6b4e57b0d7fd0385d783162ba9b5223c', class: switchClasses }, h("input", { key: 'ef12fcf04481c28d8cdf56951cdb2db2686f5f11', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '3a58b5503f2a431eabb79a4dc9091d4ec1f72e4d', class: trackClasses }, h("span", { key: 'f202d1bd926a4bf495778c0e51cb6473ab2eace1', class: knobClasses })), h("span", { key: 'c7b975cbb09a30105751ec5706279320b642e56c', class: "label" }, h("slot", { key: '2666e5ffaed3213357141dfff086837c6bf094e3' })))));
+    }
+    static get style() { return afSwitchCss; }
+}, [257, "af-switch", {
+        "active": [1540],
+        "disabled": [516],
+        "name": [1],
+        "value": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfSwitch);
+            }
+            break;
+    } });
+}
+
+export { AfSwitch as A, defineCustomElement as d };
+//# sourceMappingURL=p-DUQu3N38.js.map
+
+//# sourceMappingURL=p-DUQu3N38.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DUQu3N38.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+3DAA+3D;;MCYt4D,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--af-typography-body-dark, #14343b));\n  user-select: none;\n}\n\n.switch.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Switch track */\n.track {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 52px;\n  height: 30px;\n  border-radius: var(--radii-switch, 9999px);\n  background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n  transition: background 0.2s ease;\n  box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n  background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n}\n\n/* Track active + disabled state */\n.track.active.disabled {\n  background: var(--af-form-control-bg-checked-disabled, #708380);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n  background: var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3));\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n  box-shadow: 0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n}\n\n/* Switch knob */\n.knob {\n  position: absolute;\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease, background 0.2s ease;\n  transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n  transform: translateX(24px);\n  /* When active, knob should contrast with the checked track */\n  background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Knob disabled state */\n.knob.disabled {\n  background: var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));\n  box-shadow: none;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-DhdRcSve.js → p-DZ6UMG8G.js}

@@ -57,7 +57,7 @@ const AfTab = /*@__PURE__*/ proxyCustomElement(class AfTab extends H {
             'disabled': this.disabled,
             [`shape-${this.shape}`]: true,
         };
-        return (h(Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
+        return (h(Host, { key: 'fcf77b9850cb9993b793fecc1e99a4c4d66083e5' }, h("button", { key: '0a365b50db1fa33892eb81e1dbc5a2865cc66f3c', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: 'a0747ae5203c28324b9922561d50115a1f62285d', class: "number-slot" }, h("slot", { key: '3ca35e03fe76f71fde734d3fd6a0c98d6ca3f447', name: "number" }))), this.displayIcon && (h("span", { key: '70946507dd105fdb3322fcfb0e59971dc7f34b05', class: "icon-slot" }, h("slot", { key: 'abcc10059ca476b4c61392107823ec22e1d65a38', name: "icon" }))), h("span", { key: 'ab7d4e45bff940cc079c11f24fcc43406436e603', class: "label" }, this.label))));
     }
     static get style() { return afTabCss; }
 }, [257, "af-tab", {
@@ -84,6 +84,6 @@ function defineCustomElement() {
 }
 
 export { AfTab as A, defineCustomElement as d };
-//# sourceMappingURL=p-DhdRcSve.js.map
+//# sourceMappingURL=p-DZ6UMG8G.js.map
 
-//# sourceMappingURL=p-DhdRcSve.js.map
+//# sourceMappingURL=p-DZ6UMG8G.js.map

package/dist/components/{p-DhdRcSve.js.map → p-DZ6UMG8G.js.map}

@@ -1 +1 @@
-{"file":"p-DhdRcSve.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-label-button, 17px);\n  line-height: var(--line-height-label-button, 20px);\n  text-align: center;\n  transition: \n    color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.tab:focus {\n  outline: none;\n}\n\n.tab:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n   SLOTS\n   ========================================================================== */\n\n.icon-slot,\n.number-slot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.number-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab.shape-square {\n  padding: var(--space-3, 12px);\n  border-radius: 0;\n  overflow: hidden;\n  border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  border-bottom-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-radius: var(--radius-pill, 999px);\n  overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-base, #ffffff);\n  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  background-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   DESKTOP BREAKPOINT ADJUSTMENTS\n   Tabs in desktop mode get larger padding via the tab-bar parent\n   These are applied via CSS custom properties set by af-tab-bar\n   ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n  padding: var(--space-6, 24px) var(--space-5, 20px);\n  border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n *   <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n *   <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n  tag: 'af-tab',\n  styleUrl: 'af-tab.css',\n  shadow: true\n})\nexport class AfTab {\n  /**\n   * The text label for the tab\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Whether the tab is currently active/selected\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Visual shape variant\n   * - `square` - Rectangular tab with bottom border indicator\n   * - `pill` - Rounded pill shape with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabShape = 'square';\n\n  /**\n   * Whether to show the icon slot\n   */\n  @Prop() displayIcon: boolean = false;\n\n  /**\n   * Whether to show the number badge slot\n   */\n  @Prop() displayNumber: boolean = false;\n\n  /**\n   * Unique value for the tab, used for programmatic selection\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.afTabClick.emit({ value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.afTabClick.emit({ value: this.value });\n    }\n  };\n\n  render() {\n    const tabClasses = {\n      'tab': true,\n      'active': this.active,\n      'disabled': this.disabled,\n      [`shape-${this.shape}`]: true,\n    };\n\n    return (\n      <Host>\n        <button\n          class={tabClasses}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n        >\n          {this.displayNumber && (\n            <span class=\"number-slot\">\n              <slot name=\"number\" />\n            </span>\n          )}\n          {this.displayIcon && (\n            <span class=\"icon-slot\">\n              <slot name=\"icon\" />\n            </span>\n          )}\n          <span class=\"label\">{this.label}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-DZ6UMG8G.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-label-button, 17px);\n  line-height: var(--line-height-label-button, 20px);\n  text-align: center;\n  transition: \n    color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease;\n}\n\n.tab:focus {\n  outline: none;\n}\n\n.tab:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n   SLOTS\n   ========================================================================== */\n\n.icon-slot,\n.number-slot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.number-slot {\n  width: 24px;\n  height: 24px;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab.shape-square {\n  padding: var(--space-3, 12px);\n  border-radius: 0;\n  overflow: hidden;\n  border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n  color: var(--af-typography-body-dark, #14343b);\n  border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  border-bottom-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n  border-radius: var(--radius-pill, 999px);\n  overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n  color: var(--af-typography-body-default, #2b484f);\n  background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n  color: var(--af-typography-body-dark, #14343b);\n  background-color: var(--af-background-base, #ffffff);\n  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n  color: var(--af-typography-body-subtle, #60767b);\n  background-color: transparent;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n  color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n  color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n   DESKTOP BREAKPOINT ADJUSTMENTS\n   Tabs in desktop mode get larger padding via the tab-bar parent\n   These are applied via CSS custom properties set by af-tab-bar\n   ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n  padding: var(--space-6, 24px) var(--space-5, 20px);\n  border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n  padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n *   <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n *   <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n  tag: 'af-tab',\n  styleUrl: 'af-tab.css',\n  shadow: true\n})\nexport class AfTab {\n  /**\n   * The text label for the tab\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Whether the tab is currently active/selected\n   */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Visual shape variant\n   * - `square` - Rectangular tab with bottom border indicator\n   * - `pill` - Rounded pill shape with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabShape = 'square';\n\n  /**\n   * Whether to show the icon slot\n   */\n  @Prop() displayIcon: boolean = false;\n\n  /**\n   * Whether to show the number badge slot\n   */\n  @Prop() displayNumber: boolean = false;\n\n  /**\n   * Unique value for the tab, used for programmatic selection\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    this.afTabClick.emit({ value: this.value });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.afTabClick.emit({ value: this.value });\n    }\n  };\n\n  render() {\n    const tabClasses = {\n      'tab': true,\n      'active': this.active,\n      'disabled': this.disabled,\n      [`shape-${this.shape}`]: true,\n    };\n\n    return (\n      <Host>\n        <button\n          class={tabClasses}\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n        >\n          {this.displayNumber && (\n            <span class=\"number-slot\">\n              <slot name=\"number\" />\n            </span>\n          )}\n          {this.displayIcon && (\n            <span class=\"icon-slot\">\n              <slot name=\"icon\" />\n            </span>\n          )}\n          <span class=\"label\">{this.label}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-Dd7Lt2QL.js

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afCheckboxCss = ":host{display:inline-block}.checkbox{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));user-select:none}.checkbox.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.control{position:relative;display:block;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-checkbox, 4px);border:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));box-shadow:none}.control.disabled{background:var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8))}.control.checked.disabled{background:var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));box-shadow:none}.checkbox:not(.disabled):hover .control:not(.checked){box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{outline:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control.checked{box-shadow:0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:16px;height:16px;color:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+
+const AfCheckbox = /*@__PURE__*/ proxyCustomElement(class AfCheckbox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afChange = createEvent(this, "afChange");
+        /**
+         * Whether the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the checkbox is in an indeterminate state
+         */
+        this.indeterminate = false;
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.afChange.emit({ checked: this.checked });
+        };
+    }
+    componentDidLoad() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    render() {
+        const checkboxClasses = {
+            'checkbox': true,
+            'checked': this.checked,
+            'indeterminate': this.indeterminate,
+            'disabled': this.disabled
+        };
+        const controlClasses = {
+            'control': true,
+            'checked': this.checked || this.indeterminate,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '3133417b8722f3d3b854391a2f9362405d6b645d' }, h("label", { key: '375fa0931469ba89017cd8f6962a9f130a8099b7', class: checkboxClasses }, h("input", { key: 'b4714d31bfd2689ed8276bec0fa5580dc4b7457c', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'c3472bec48c64733eeadb17c86dd25699fb3efd8', class: controlClasses }, this.checked && !this.indeterminate && (h("svg", { key: '2d569ab2de0fc5b75ca605c48e395ecf0b61e084', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '3d9991a86bd8065687bca3b206878fe8cabd991c', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '81c46466f7853a4c85a20c08ab4e79b30d76de90', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'c55aca66a778a9a65a5d621b28607565451e0560', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("span", { key: '9f8c25404a57227172617b6b28a30c9fd816edfa', class: "label" }, h("slot", { key: '087b50963a66f4bd79aedd7af52cb8c9697c8b4f' })))));
+    }
+    static get style() { return afCheckboxCss; }
+}, [257, "af-checkbox", {
+        "checked": [1540],
+        "indeterminate": [516],
+        "disabled": [516],
+        "name": [1],
+        "value": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfCheckbox);
+            }
+            break;
+    } });
+}
+
+export { AfCheckbox as A, defineCustomElement as d };
+//# sourceMappingURL=p-Dd7Lt2QL.js.map
+
+//# sourceMappingURL=p-Dd7Lt2QL.js.map

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

@@ -0,0 +1 @@
+{"file":"p-Dd7Lt2QL.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mpEAAmpE;;MCa5pE,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAEvD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC5B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AAC/C,SAAC;AAuEF;IArEC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;;IAInD,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa;;;IAInD,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,eAAe,EAAE,IAAI,CAAC,aAAa;YACnC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,SAAS,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa;YAC7C,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAA,EAC3B,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,OAAO,EACb,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,SAAS,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,KAClC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,sBAAsB,EACxB,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,oBACD,OAAO,EAAA,iBAAA,EACN,OAAO,EAAA,CACvB,CACE,CACP,EACA,IAAI,CAAC,aAAa,KACjB,4DAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,SAAS,EACX,MAAM,EAAC,cAAc,EACR,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,EACtB,CAAA,CACE,CACP,CACI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.checkbox.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom checkbox control */\n.control {\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-checkbox, 4px);\n  /* Use inset box-shadow instead of border to prevent layout shift */\n  border: none;\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked/indeterminate state */\n.control.checked {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n  box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n  box-shadow: none;\n}\n\n/* Hover state */\n.checkbox:not(.disabled):hover .control:not(.checked) {\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  outline: none;\n  box-shadow: \n    inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Icon styling - absolutely positioned to prevent layout shift */\n.icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 16px;\n  height: 16px;\n  color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n */\n@Component({\n  tag: 'af-checkbox',\n  styleUrl: 'af-checkbox.css',\n  shadow: true\n})\nexport class AfCheckbox {\n  /**\n   * Whether the checkbox is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the checkbox for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the checkbox for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checkbox checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n  private inputEl?: HTMLInputElement;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.afChange.emit({ checked: this.checked });\n  };\n\n  componentDidLoad() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    const checkboxClasses = {\n      'checkbox': true,\n      'checked': this.checked,\n      'indeterminate': this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked || this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={checkboxClasses}>\n          <input\n            type=\"checkbox\"\n            class=\"input\"\n            ref={(el) => this.inputEl = el ?? undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && !this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M13.5 4L6 11.5L2.5 8\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\" \n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M3 8H13\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/p-DkvJiyn0.js

@@ -0,0 +1,73 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afNavItemCss = ".sc-af-nav-item-h{display:inline-block}[breakpoint=\"mobile\"].sc-af-nav-item-h{display:block;width:100%}.nav-link.sc-af-nav-item{text-decoration:none;color:inherit;display:block}.nav-item.sc-af-nav-item{display:flex;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer}.hierarchy-primary.sc-af-nav-item{padding:12px;justify-content:center}.hierarchy-primary.sc-af-nav-item .label-container.sc-af-nav-item{display:flex;align-items:center;justify-content:center;height:24px;gap:10px}.hierarchy-primary.variant-01.sc-af-nav-item{font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-size:16px;font-weight:var(--font-weight-book, 500);line-height:20px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-primary.variant-01.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom:1px solid transparent}.hierarchy-primary.variant-02.sc-af-nav-item{font-family:var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);font-size:16px;font-weight:var(--font-weight-regular, 400);line-height:20px;color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}.hierarchy-primary.variant-01.sc-af-nav-item:hover .label-container.sc-af-nav-item{border-bottom-color:currentColor}.hierarchy-primary.variant-01.active.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));margin-bottom:-1px}.hierarchy-primary.variant-02.sc-af-nav-item:hover{background-color:rgba(20, 52, 59, 0.04);border-radius:8px}.hierarchy-primary.variant-02.active.sc-af-nav-item{background-color:rgba(20, 52, 59, 0.08);border-radius:8px}.hierarchy-secondary.sc-af-nav-item{padding:4px 0}.hierarchy-secondary.sc-af-nav-item .label-container.sc-af-nav-item{display:flex;align-items:center;flex:1;min-height:24px;gap:10px}.hierarchy-secondary.variant-01.sc-af-nav-item{font-family:var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-size:14px;font-weight:500;line-height:20px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-secondary.variant-02.sc-af-nav-item{font-family:var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-size:14px;font-weight:400;line-height:20px;color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}.hierarchy-secondary.sc-af-nav-item:hover .label-container.sc-af-nav-item{text-decoration:underline}.nav-item.sc-af-nav-item:focus-within{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:2px;border-radius:4px}.nav-link.sc-af-nav-item:focus{outline:none}.nav-link.sc-af-nav-item:focus-visible+.nav-item.sc-af-nav-item,.sc-af-nav-item-h:focus-visible .nav-item.sc-af-nav-item{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:2px;border-radius:4px}.hierarchy-primary.breakpoint-mobile.sc-af-nav-item{padding:20px 12px;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));width:100%;justify-content:flex-start}.hierarchy-primary.breakpoint-mobile.sc-af-nav-item .label-container.sc-af-nav-item{flex:1;justify-content:flex-start}.hierarchy-primary.variant-01.breakpoint-mobile.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.hierarchy-primary.variant-02.breakpoint-mobile.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b))}.hierarchy-secondary.breakpoint-mobile.sc-af-nav-item{padding:2px 0;height:40px}.hierarchy-secondary.breakpoint-mobile.sc-af-nav-item .label-container.sc-af-nav-item{min-height:24px}.hierarchy-primary.breakpoint-mobile.variant-01.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom-color:transparent}.hierarchy-primary.breakpoint-mobile.variant-01.sc-af-nav-item:hover .label-container.sc-af-nav-item{border-bottom-color:transparent}.hierarchy-primary.breakpoint-mobile.variant-01.active.sc-af-nav-item .label-container.sc-af-nav-item{border-bottom-color:transparent;margin-bottom:0}.sc-af-nav-item-s>[slot=\"icon-left\"],.sc-af-nav-item-s>[slot=\"icon-right\"]{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease}.hierarchy-primary.variant-01.sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-01 .sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-01.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-01 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-primary.variant-02.sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-02 .sc-af-nav-item-s>[slot=\"icon-left\"],.hierarchy-primary.variant-02.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-02 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}.hierarchy-primary.variant-01.breakpoint-desktop:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-01.breakpoint-desktop:hover .sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-01.breakpoint-desktop.active.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.variant-01.breakpoint-desktop.active .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}.hierarchy-primary.breakpoint-mobile.active.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-primary.breakpoint-mobile.active .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}.hierarchy-secondary.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-secondary .sc-af-nav-item-s>[slot=\"icon-right\"]{width:20px;height:20px}.hierarchy-secondary.variant-01.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-secondary.variant-01 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.hierarchy-secondary.variant-02.sc-af-nav-item-s>[slot=\"icon-right\"],.hierarchy-secondary.variant-02 .sc-af-nav-item-s>[slot=\"icon-right\"]{color:var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f))}@media (max-width: 991px){[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.sc-af-nav-item{padding:20px 12px;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));width:100%}[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.sc-af-nav-item .label-container.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.sc-af-nav-item .label-container.sc-af-nav-item{flex:1;justify-content:flex-start}[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.variant-01.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.variant-01.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}[breakpoint=\"auto\"].sc-af-nav-item-h .hierarchy-primary.variant-02.sc-af-nav-item,.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.variant-02.sc-af-nav-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b))}.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active .sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary:hover .sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary:hover .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:none}.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h[breakpoint=\"auto\"] .hierarchy-primary.active:hover .sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active:hover.sc-af-nav-item-s>[slot=\"icon-right\"],.sc-af-nav-item-h:not([breakpoint]) .hierarchy-primary.active:hover .sc-af-nav-item-s>[slot=\"icon-right\"]{transform:rotate(180deg)}}";
+
+const AfNavItem = /*@__PURE__*/ proxyCustomElement(class AfNavItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Visual hierarchy level of the navigation item
+         * - 'primary': Bold, main navigation (larger text, prominent styling)
+         * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+         */
+        this.hierarchy = 'primary';
+        /**
+         * Visual variant within the hierarchy level
+         * - '01': Darker/more prominent styling
+         * - '02': Lighter/more subtle styling
+         */
+        this.variant = '01';
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Desktop-specific styles
+         * - 'mobile': Mobile-specific styles (larger text, different spacing)
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether this nav item is currently active/selected
+         */
+        this.active = false;
+    }
+    render() {
+        const classes = {
+            'nav-item': true,
+            [`hierarchy-${this.hierarchy}`]: true,
+            [`variant-${this.variant}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
+            'active': this.active
+        };
+        const content = (h("div", { class: classes }, h("slot", { name: "icon-left" }), h("div", { class: "label-container" }, h("slot", null)), h("slot", { name: "icon-right" })));
+        if (this.href) {
+            return (h(Host, null, h("a", { href: this.href, class: "nav-link" }, content)));
+        }
+        return h(Host, null, content);
+    }
+    static get style() { return afNavItemCss; }
+}, [262, "af-nav-item", {
+        "hierarchy": [1],
+        "variant": [1],
+        "breakpoint": [513],
+        "href": [1],
+        "active": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavItem);
+            }
+            break;
+    } });
+}
+
+export { AfNavItem as A, defineCustomElement as d };
+//# sourceMappingURL=p-DkvJiyn0.js.map
+
+//# sourceMappingURL=p-DkvJiyn0.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DkvJiyn0.js","mappings":";;AAAA,MAAM,YAAY,GAAG,y7QAAy7Q;;MCYj8Q,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAA4B,SAAS;AAEtD;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,IAAI;AAEnC;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAOrE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAiChC;IA/BC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,QAAQ,EAAE,IAAI,CAAC;SAChB;QAED,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT,EACN,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAQ,CAAA,CAC3B,CACP;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,EACjC,EAAA,OAAO,CACN,CACC;;QAIX,OAAO,CAAC,CAAA,IAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-nav-item/af-nav-item.css?tag=af-nav-item&encapsulation=scoped","src/components/af-nav-item/af-nav-item.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Mobile breakpoint - full width block display */\n:host([breakpoint=\"mobile\"]) {\n  display: block;\n  width: 100%;\n}\n\n.nav-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.nav-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n/* Primary hierarchy - bold main navigation */\n.hierarchy-primary {\n  padding: 12px;\n  justify-content: center;\n}\n\n.hierarchy-primary .label-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  gap: 10px;\n}\n\n/* Primary variant 01 - darker */\n.hierarchy-primary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-book, 500);\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Add transparent border to prevent layout shift on hover */\n.hierarchy-primary.variant-01 .label-container {\n  border-bottom: 1px solid transparent;\n}\n\n/* Primary variant 02 - lighter for light backgrounds */\n.hierarchy-primary.variant-02 {\n  font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for primary variant-01 - show underline */\n.hierarchy-primary.variant-01:hover .label-container {\n  border-bottom-color: currentColor;\n}\n\n/* Active state for primary variant-01 - thicker border */\n.hierarchy-primary.variant-01.active .label-container {\n  border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  /* Adjust margin to prevent shift from 1px to 2px border */\n  margin-bottom: -1px;\n}\n\n/* Hover and active states for variant-02 (light backgrounds) - no border */\n.hierarchy-primary.variant-02:hover {\n  background-color: rgba(20, 52, 59, 0.04);\n  border-radius: 8px;\n}\n\n.hierarchy-primary.variant-02.active {\n  background-color: rgba(20, 52, 59, 0.08);\n  border-radius: 8px;\n}\n\n/* Secondary hierarchy - smaller sub-navigation */\n.hierarchy-secondary {\n  padding: 4px 0;\n}\n\n.hierarchy-secondary .label-container {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-height: 24px;\n  gap: 10px;\n}\n\n/* Secondary variant 01 - medium weight */\n.hierarchy-secondary.variant-01 {\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Secondary variant 02 - regular weight */\n.hierarchy-secondary.variant-02 {\n  font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Hover state for secondary - underline text */\n.hierarchy-secondary:hover .label-container {\n  text-decoration: underline;\n}\n\n/* Focus states for accessibility */\n.nav-item:focus-within {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Remove default focus outline on link */\n.nav-link:focus {\n  outline: none;\n}\n\n.nav-link:focus-visible + .nav-item,\n:host(:focus-visible) .nav-item {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Mobile breakpoint styles - explicit via prop */\n.hierarchy-primary.breakpoint-mobile {\n  padding: 20px 12px;\n  border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n  width: 100%;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.breakpoint-mobile .label-container {\n  flex: 1;\n  justify-content: flex-start;\n}\n\n.hierarchy-primary.variant-01.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n}\n\n.hierarchy-primary.variant-02.breakpoint-mobile {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n  color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Mobile breakpoint for secondary hierarchy */\n.hierarchy-secondary.breakpoint-mobile {\n  padding: 2px 0;\n  height: 40px;\n}\n\n.hierarchy-secondary.breakpoint-mobile .label-container {\n  min-height: 24px;\n}\n\n/* Mobile removes the hover underline effect */\n.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {\n  border-bottom-color: transparent;\n}\n\n.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {\n  border-bottom-color: transparent;\n  margin-bottom: 0;\n}\n\n/* Icon sizing and styling */\n::slotted([slot=\"icon-left\"]),\n::slotted([slot=\"icon-right\"]) {\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Icon color inheritance for primary hierarchy */\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-left\"]),\n.hierarchy-primary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Icon rotation on hover for desktop primary with dropdown indicator */\n.hierarchy-primary.variant-01.breakpoint-desktop:hover ::slotted([slot=\"icon-right\"]),\n.hierarchy-primary.variant-01.breakpoint-desktop.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Icon rotation on active for mobile primary with dropdown indicator */\n.hierarchy-primary.breakpoint-mobile.active ::slotted([slot=\"icon-right\"]) {\n  transform: rotate(180deg);\n}\n\n/* Secondary hierarchy - smaller icons */\n.hierarchy-secondary ::slotted([slot=\"icon-right\"]) {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon color inheritance for secondary hierarchy */\n.hierarchy-secondary.variant-01 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n.hierarchy-secondary.variant-02 ::slotted([slot=\"icon-right\"]) {\n  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));\n}\n\n/* Fallback media query for when breakpoint prop is not set */\n@media (max-width: 991px) {\n  :host([breakpoint=\"auto\"]) .hierarchy-primary,\n  :host(:not([breakpoint])) .hierarchy-primary {\n    padding: 20px 12px;\n    border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n    width: 100%;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary .label-container,\n  :host(:not([breakpoint])) .hierarchy-primary .label-container {\n    flex: 1;\n    justify-content: flex-start;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-01,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-01 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.variant-02,\n  :host(:not([breakpoint])) .hierarchy-primary.variant-02 {\n    font-size: 20px;\n    line-height: 1.1;\n    letter-spacing: -0.4px;\n    color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));\n  }\n\n  /* Icon rotation on active for auto/responsive breakpoint */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n\n  /* Disable desktop hover rotation in mobile view */\n  :host([breakpoint=\"auto\"]) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot=\"icon-right\"]) {\n    transform: none;\n  }\n\n  :host([breakpoint=\"auto\"]) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]),\n  :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot=\"icon-right\"]) {\n    transform: rotate(180deg);\n  }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"],"version":3}