@affinda/wc 0.0.28 → 0.2.0

package/dist/components/{p-Dxa6cHAb.js → p-DbVc-b1e.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-DOgb6SUj.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}";
 
@@ -76,6 +76,6 @@ function defineCustomElement() {
 }
 
 export { AfCheckbox as A, defineCustomElement as d };
-//# sourceMappingURL=p-Dxa6cHAb.js.map
+//# sourceMappingURL=p-DbVc-b1e.js.map
 
-//# sourceMappingURL=p-Dxa6cHAb.js.map
+//# sourceMappingURL=p-DbVc-b1e.js.map

package/dist/components/{p-Dxa6cHAb.js.map → p-DbVc-b1e.js.map}

@@ -1 +1 @@
-{"file":"p-Dxa6cHAb.js","mappings":"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","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}
+{"file":"p-DbVc-b1e.js","mappings":"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","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-D3oGtcJ5.js → p-Dd3nOGt_.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.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.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: 1023px){[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)}}";
 
@@ -88,6 +88,6 @@ function defineCustomElement() {
 }
 
 export { AfNavItem as A, defineCustomElement as d };
-//# sourceMappingURL=p-D3oGtcJ5.js.map
+//# sourceMappingURL=p-Dd3nOGt_.js.map
 
-//# sourceMappingURL=p-D3oGtcJ5.js.map
+//# sourceMappingURL=p-Dd3nOGt_.js.map

package/dist/components/{p-D3oGtcJ5.js.map → p-Dd3nOGt_.js.map}

@@ -1 +1 @@
-{"file":"p-D3oGtcJ5.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qiQAAqiQ;;MCmB7iQ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AASE;;;;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;AAE/B;;;;AAIG;AACK,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAI;AACtD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBAC1E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;AAEnB,SAAC;AAgDF;IA9CC,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,MAAM;SACtB;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA;AAC9B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT;YACN,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAQ,CAAA;SAChC;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAAG,YAAY,CAAO,CACvC,CACC;;QAIX,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC;QAC/D,IAAI,iBAAiB,EAAE;AACrB,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAA,eAAA,EACG,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,oBAAoB,IAEnC,YAAY,CACT,CACD;;AAIX,QAAA,OAAO,CAAA,CAAC,IAAI,EAAA,IAAA,EAAE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAG,EAAA,YAAY,CAAO,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 active for mobile primary with dropdown indicator.\n   Desktop chevrons stay static — rotating on hover/active felt fidgety\n   and the open/closed state is already clear from the dropdown panel. */\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/* ≤ tablet */\n@media (max-width: 1023px) {\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, Element, 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 * **Dropdown trigger a11y:** when the host carries a `data-dropdown=\"id\"`\n * attribute and has no `href`, the inner wrapper is promoted to\n * `role=\"button\"` with `tabindex=\"0\"` and keyboard activation (Enter/Space),\n * so keyboard users can open the matching dropdown panel just like a\n * pointer click. The companion `af-navbar` keeps `aria-expanded` on the\n * host in sync with the active dropdown.\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  @Element() el!: HTMLElement;\n\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  /**\n   * Promote Enter and Space on a focused trigger into a synthetic click\n   * so the surrounding af-navbar (which listens on click) treats the\n   * keyboard activation identically to a pointer click.\n   */\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.el.click();\n    }\n  };\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 innerContent = [\n      <slot name=\"icon-left\"></slot>,\n      <div class=\"label-container\">\n        <slot></slot>\n      </div>,\n      <slot name=\"icon-right\"></slot>,\n    ];\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            <div class={classes}>{innerContent}</div>\n          </a>\n        </Host>\n      );\n    }\n\n    const isDropdownTrigger = this.el.hasAttribute('data-dropdown');\n    if (isDropdownTrigger) {\n      return (\n        <Host>\n          <div\n            class={classes}\n            role=\"button\"\n            tabindex={0}\n            aria-haspopup=\"menu\"\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {innerContent}\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host>{<div class={classes}>{innerContent}</div>}</Host>;\n  }\n}\n"],"version":3}
+{"file":"p-Dd3nOGt_.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qiQAAqiQ;;MCmB7iQ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AASE;;;;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;AAE/B;;;;AAIG;AACK,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAI;AACtD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBAC1E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;AAEnB,SAAC;AAgDF;IA9CC,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,MAAM;SACtB;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA;AAC9B,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT;YACN,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,YAAY,EAAQ,CAAA;SAChC;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAAG,YAAY,CAAO,CACvC,CACC;;QAIX,MAAM,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC;QAC/D,IAAI,iBAAiB,EAAE;AACrB,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAA,eAAA,EACG,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,oBAAoB,IAEnC,YAAY,CACT,CACD;;AAIX,QAAA,OAAO,CAAA,CAAC,IAAI,EAAA,IAAA,EAAE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAAG,EAAA,YAAY,CAAO,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 active for mobile primary with dropdown indicator.\n   Desktop chevrons stay static — rotating on hover/active felt fidgety\n   and the open/closed state is already clear from the dropdown panel. */\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/* ≤ tablet */\n@media (max-width: 1023px) {\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, Element, 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 * **Dropdown trigger a11y:** when the host carries a `data-dropdown=\"id\"`\n * attribute and has no `href`, the inner wrapper is promoted to\n * `role=\"button\"` with `tabindex=\"0\"` and keyboard activation (Enter/Space),\n * so keyboard users can open the matching dropdown panel just like a\n * pointer click. The companion `af-navbar` keeps `aria-expanded` on the\n * host in sync with the active dropdown.\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  @Element() el!: HTMLElement;\n\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  /**\n   * Promote Enter and Space on a focused trigger into a synthetic click\n   * so the surrounding af-navbar (which listens on click) treats the\n   * keyboard activation identically to a pointer click.\n   */\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.el.click();\n    }\n  };\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 innerContent = [\n      <slot name=\"icon-left\"></slot>,\n      <div class=\"label-container\">\n        <slot></slot>\n      </div>,\n      <slot name=\"icon-right\"></slot>,\n    ];\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            <div class={classes}>{innerContent}</div>\n          </a>\n        </Host>\n      );\n    }\n\n    const isDropdownTrigger = this.el.hasAttribute('data-dropdown');\n    if (isDropdownTrigger) {\n      return (\n        <Host>\n          <div\n            class={classes}\n            role=\"button\"\n            tabindex={0}\n            aria-haspopup=\"menu\"\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {innerContent}\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host>{<div class={classes}>{innerContent}</div>}</Host>;\n  }\n}\n"],"version":3}

package/dist/components/{p-DRujYIJW.js → p-DqJRvNOl.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
-import { d as defineCustomElement$1 } from './p-DCu8UsJv.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+import { d as defineCustomElement$1 } from './p-BRDu9zN1.js';
 
-const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:max(32px, env(safe-area-inset-top));left:0;right:0;z-index:10;padding:0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:100px;left:0;right:0;padding:8px 80px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:0 4px 24px rgba(20, 52, 59, 0.12)}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:max(24px, env(safe-area-inset-top));padding:0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left))}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
+const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:max(32px, env(safe-area-inset-top));left:0;right:0;z-index:10;padding:0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:100px;left:0;right:0;padding:8px 80px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:var(--shadow-navbar, 0 4px 24px rgba(20, 52, 59, 0.12))}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:max(24px, env(safe-area-inset-top));padding:0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left))}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
 
 const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
     constructor(registerHost) {
@@ -160,7 +160,7 @@ const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
     }
     render() {
         const hasDropdown = this.activeDropdown !== null;
-        return (h(Host, { key: 'bb5b7b7b1fe78eed12b3c16e2878d7905352d40c', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd35c38cfbb329a7811abbc4bbc5b83e3673d3dab', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '44d49577e393f60773db2d3b934ee1a253a3db1c', class: "navbar-container" }, h("div", { key: '172dfc9bcfd092c62537e2906dce3b97ae0bc6f3', class: "navbar theme-white" }, h("div", { key: 'bb10a24a359b569bd29082a75264e0d150a0cfae', class: "navbar-left" }, h("div", { key: 'd9b13adcdd2936fbfe3d177c81597b36998239a5', class: "logo" }, h("slot", { key: 'e6752d9755b854dbca123f4e45f7c4194fba9997', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '414958654451d4ec05d2ede68f989d850d6e3326' }))), h("button", { key: '42361097f38ca78004d91299ff570f168b79c342', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '11cedc5ae46d5bc4c1254c73571fa6d99849db15', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '2ab1f72977583995c0ee569e34df8c87ea5a2787', name: "start" }))), h("div", { key: 'aca92b065a53ee293a391bc32e3d1eb693acd7c0', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'c94a0d6c88f6dbbdc92a328effa898a3b275466c', class: "nav-actions" }, h("slot", { key: '051e4a16d64f9d8b66504921cfafd734a78a3148', name: "end" })), h("div", { key: 'fc60234ab1b58d4bfb675d7a4d65253995c3b548', class: "nav-button" }, h("slot", { key: '5a826f4d58eef982abd103e4b2fe076f0dfc138e', name: "button" })))), h("div", { key: 'cd7c0db3e62cdb689ec75855109091666177deb7', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'c40e3a8032991758e8fbe40507533b9335febfef', class: "dropdown-panel theme-white" }, h("slot", { key: '72680638403af582146ae0937d21dc8342cee1cb', name: "dropdowns" })))), h("div", { key: '12dbebc3c6bb463b63424d1ee431ecdcb2d11391', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: 'db40b156136d18f54647583d03fbc108c1ea6243', class: "mobile-button-container" }, h("slot", { key: '9a018110748c36f0129e30fadaffe4e15bf4c076', name: "mobile-button" }, h("slot", { key: '8929b69c67419e9ceccaca72b90ffede5a2ade29', name: "button" }))), h("div", { key: '151a7cad7ad32874176c59a1729a37049ca57f75', class: "mobile-menu-content" }, h("slot", { key: 'caee9dd00f204a52e0e3b7598b215020a2bec70e', name: "mobile-menu" })))));
+        return (h(Host, { key: '78bb68495b077735b93558eb2ff3c7a5368c95ba', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd295d9865e936a9e10f2a552658265b5bfff2509', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '7a2f7ea2a7ac704d5a4854ed8bde9ec4186b7a48', class: "navbar-container" }, h("div", { key: '796c3fbcdc5b93ac2ea756f400900050a4e68904', class: "navbar theme-white" }, h("div", { key: '4f470bd5ca1c24f2de9a051c049ca0f3a6d343d7', class: "navbar-left" }, h("div", { key: '0ff19f610a2dfc60535ca601187214fd9184706c', class: "logo" }, h("slot", { key: 'b62680fa9641835e96c0975aa8b53289a4c331be', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '5acf4cce6d2b59ca3f08cb112aa53608ff92d3d7' }))), h("button", { key: '2fae1551b462c43388ef570620e2b6356d176724', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '847fa6e696769da5ce2d166e4298bbf35acdffec', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '79774a3987661ff611090741b8d0f598a5cbc1c1', name: "start" }))), h("div", { key: '18c965fe437fc54f293d5127af13d94d83e212d3', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '664c29f5d0cd01b493ae8bf9b430be34fd135c5c', class: "nav-actions" }, h("slot", { key: 'c94f3e8b1092d4e6891a77a1714470be7fa265d8', name: "end" })), h("div", { key: '2f598ff355d1cf5662a7246434eeb02af034da7c', class: "nav-button" }, h("slot", { key: 'cda81abe6c63c56270926015cb389e4fe6735d22', name: "button" })))), h("div", { key: 'e551f820e91cca9ae401bd0f514e35b77af896d0', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: '1253fb594e9db19bb9b79eb3f5d0e1788f728c3d', class: "dropdown-panel theme-white" }, h("slot", { key: 'b134d4150908a4d3bb7d77ba5d80246bbc709b35', name: "dropdowns" })))), h("div", { key: '40c2c6de6f661f89a9746ab55a5be2d68a9ad5a8', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '41a56f4f9b05d819cf0e65f022e5be85d8481361', class: "mobile-button-container" }, h("slot", { key: 'f4b70499d11fb68c92855020b7d1efa97d3dce3a', name: "mobile-button" }, h("slot", { key: '653ca252d1a159891838cba8b9fc1c0bbb9cd348', name: "button" }))), h("div", { key: 'e1e85dd0bba34a4e335792ec2382a4fa94ae79c8', class: "mobile-menu-content" }, h("slot", { key: '1d9ca44862dc2bd2fc4bfcdf3384df0e8f26bc80', name: "mobile-menu" })))));
     }
     get el() { return this; }
     static get style() { return afNavbarCss; }
@@ -191,6 +191,6 @@ function defineCustomElement() {
 }
 
 export { AfNavbar as A, defineCustomElement as d };
-//# sourceMappingURL=p-DRujYIJW.js.map
+//# sourceMappingURL=p-DqJRvNOl.js.map
 
-//# sourceMappingURL=p-DRujYIJW.js.map
+//# sourceMappingURL=p-DqJRvNOl.js.map

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

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

package/dist/components/{p-DGBMGvZK.js → p-Dx_UXI2a.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";
 
@@ -52,6 +52,6 @@ function defineCustomElement() {
 }
 
 export { AfTag as A, defineCustomElement as d };
-//# sourceMappingURL=p-DGBMGvZK.js.map
+//# sourceMappingURL=p-Dx_UXI2a.js.map
 
-//# sourceMappingURL=p-DGBMGvZK.js.map
+//# sourceMappingURL=p-Dx_UXI2a.js.map

package/dist/components/{p-DGBMGvZK.js.map → p-Dx_UXI2a.js.map}

@@ -1 +1 @@
-{"file":"p-DGBMGvZK.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,sjEAAsjE;;MCyB1jE,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,SAAS;AA0BxC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: DEFAULT (inherits from parent theme context)\n   ========================================================================== */\n\n.tag.variant-default {\n  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-default:hover {\n  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   EXPLICIT THEME VARIANTS\n   ========================================================================== */\n\n.tag.variant-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-brand-white, #ffffff);\n}\n\n.tag.variant-inkwell:hover {\n  background-color: var(--colour-tints-inkwell-500, #1e4a48);\n}\n\n.tag.variant-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-white:hover {\n  background-color: var(--colour-tints-mist-green-100, #e1eee1);\n}\n\n.tag.variant-soft-clay {\n  background-color: var(--colour-brand-soft-clay, #b09670);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-soft-clay:hover {\n  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);\n}\n\n.tag.variant-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-mist-green:hover {\n  background-color: var(--colour-tints-mist-green-200, #d2e8e3);\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n.tag:focus {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding (default)\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * Visual variant of the tag. `default` inherits tag colors from the\n   * parent theme context. Theme-named variants force a specific palette.\n   */\n  @Prop() variant: TagVariant = 'default';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Dx_UXI2a.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,sjEAAsjE;;MCyB1jE,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,SAAS;AA0BxC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: DEFAULT (inherits from parent theme context)\n   ========================================================================== */\n\n.tag.variant-default {\n  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-default:hover {\n  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   EXPLICIT THEME VARIANTS\n   ========================================================================== */\n\n.tag.variant-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-brand-white, #ffffff);\n}\n\n.tag.variant-inkwell:hover {\n  background-color: var(--colour-tints-inkwell-500, #1e4a48);\n}\n\n.tag.variant-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-white:hover {\n  background-color: var(--colour-tints-mist-green-100, #e1eee1);\n}\n\n.tag.variant-soft-clay {\n  background-color: var(--colour-brand-soft-clay, #b09670);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-soft-clay:hover {\n  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);\n}\n\n.tag.variant-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-mist-green:hover {\n  background-color: var(--colour-tints-mist-green-200, #d2e8e3);\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n.tag:focus {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding (default)\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * Visual variant of the tag. `default` inherits tag colors from the\n   * parent theme context. Theme-named variants force a specific palette.\n   */\n  @Prop() variant: TagVariant = 'default';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DENib4OL.js → p-DyZaoX4Q.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afFieldsetCss = ":host{display:block}.fieldset{display:flex;flex-direction:column;border:none;padding:0;margin:0;min-inline-size:0}.fieldset.disabled{opacity:0.5;pointer-events:none}.legend{display:block;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));padding:0;margin:0 0 12px 0;width:100%}.items{display:flex}.items.orientation-vertical{flex-direction:column;gap:8px;align-items:flex-start}.items.orientation-horizontal{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center}::slotted(*){flex-shrink:0}.items.orientation-vertical ::slotted(*){width:100%}";
 
@@ -53,6 +53,6 @@ function defineCustomElement() {
 }
 
 export { AfFieldset as A, defineCustomElement as d };
-//# sourceMappingURL=p-DENib4OL.js.map
+//# sourceMappingURL=p-DyZaoX4Q.js.map
 
-//# sourceMappingURL=p-DENib4OL.js.map
+//# sourceMappingURL=p-DyZaoX4Q.js.map

package/dist/components/{p-DENib4OL.js.map → p-DyZaoX4Q.js.map}

@@ -1 +1 @@
-{"file":"p-DENib4OL.js","mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-DyZaoX4Q.js","mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-CKcuq0NU.js → p-LRPXnaSx.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afImageCss = ".sc-af-image-h{display:block;width:100%}.image-container.sc-af-image{position:relative;overflow:hidden}.image-container--rounded.sc-af-image{border-radius:var(--radius-md, 12px)}.image-container--rounded-left.sc-af-image{border-top-left-radius:var(--radius-md, 12px);border-bottom-left-radius:var(--radius-md, 12px)}.image-container--rounded-right.sc-af-image{border-top-right-radius:var(--radius-md, 12px);border-bottom-right-radius:var(--radius-md, 12px)}.image-container--square.sc-af-image{border-radius:0}.image.sc-af-image{display:block;width:100%;height:auto;object-fit:cover}.image-border.sc-af-image{position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));pointer-events:none;border-radius:inherit}";
 
@@ -20,7 +20,7 @@ const AfImage = /*@__PURE__*/ proxyCustomElement(class AfImage extends H {
         this.shape = 'rounded';
     }
     render() {
-        return (h(Host, { key: 'c1d2a3fa4d205e24e5c55e9c84e8ff5b3150a161' }, h("div", { key: '5c77f95ebdfd2792ebfb55accc4ec0ea9da5953a', class: `image-container image-container--${this.shape}` }, h("img", { key: '1c9694ebb590d141e46267bb3217eda2400c5b23', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '2505652d87a23db29d54705b93978f44794837b9', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: '9e6de616aae4375e3b2e734edd095f392aa8ef1b' }, h("div", { key: '69d0eb9902766ff13f04d85c4737a5d322e63417', class: `image-container image-container--${this.shape}` }, h("img", { key: 'cddfe6dedc57a63318d7a970747cda8641c4f83b', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '23e0a9195e06da984aee8da6edc273a6367a7852', class: "image-border", "aria-hidden": "true" }))));
     }
     static get style() { return afImageCss; }
 }, [258, "af-image", {
@@ -43,6 +43,6 @@ function defineCustomElement() {
 }
 
 export { AfImage as A, defineCustomElement as d };
-//# sourceMappingURL=p-CKcuq0NU.js.map
+//# sourceMappingURL=p-LRPXnaSx.js.map
 
-//# sourceMappingURL=p-CKcuq0NU.js.map
+//# sourceMappingURL=p-LRPXnaSx.js.map

package/dist/components/{p-CKcuq0NU.js.map → p-LRPXnaSx.js.map}

@@ -1 +1 @@
-{"file":"p-CKcuq0NU.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-LRPXnaSx.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DMOGClIa.js → p-NtJ_O8-z.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h } from './p-DOgb6SUj.js';
 
 const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
 
@@ -39,6 +39,6 @@ function defineCustomElement() {
 }
 
 export { AfColorSwatch as A, defineCustomElement as d };
-//# sourceMappingURL=p-DMOGClIa.js.map
+//# sourceMappingURL=p-NtJ_O8-z.js.map
 
-//# sourceMappingURL=p-DMOGClIa.js.map
+//# sourceMappingURL=p-NtJ_O8-z.js.map

package/dist/components/{p-DMOGClIa.js.map → p-NtJ_O8-z.js.map}

@@ -1 +1 @@
-{"file":"p-DMOGClIa.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-NtJ_O8-z.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-O26uYJSV.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+import { d as defineCustomElement$1 } from './p-CYKk6Qhi.js';
+
+const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-none.sc-af-section{padding:0}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.theme-white.sc-af-section{background-color:var(--colour-brand-white, #FFFFFF);--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-section{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
+
+const AfSection = /*@__PURE__*/ proxyCustomElement(class AfSection extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Padding variant */
+        this.padding = 'default';
+        /** Theme - sets background color and provides theme context to children */
+        this.theme = 'white';
+        /** Whether to include a Container wrapper */
+        this.container = true;
+    }
+    render() {
+        const content = h("slot", { key: '68d5433974bb7213d103836ed6f9b06a067fc52a' });
+        return (h(Host, { key: 'd4e9437832b34127a5ed32d8eb6a9d9b09b887e7' }, h("div", { key: '92d24d2430a57a5e592cccdfea3e85daff729bea', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+    }
+    static get style() { return afSectionCss; }
+}, [262, "af-section", {
+        "padding": [1],
+        "theme": [1],
+        "container": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-section", "af-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfSection);
+            }
+            break;
+        case "af-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfSection as A, defineCustomElement as d };
+//# sourceMappingURL=p-O26uYJSV.js.map
+
+//# sourceMappingURL=p-O26uYJSV.js.map