npm - @affinda/wc - Versions diffs - 0.0.26 → 0.0.28 - Mend

@affinda/wc 0.0.26 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (894) hide show

package/dist/cjs/af-input.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-input.entry.cjs.js","sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper */\n.input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/* Label row */\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/* Info icon button */\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/* Description */\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/* Input container */\n.input-container {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n min-height: 48px;\n box-sizing: border-box;\n}\n\n/* Hover state */\n.input-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/* Focus state */\n.input-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/* Error state */\n.input-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/* Disabled state */\n.input-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/* Search icon */\n.search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n}\n\n.search-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.disabled .search-icon {\n opacity: 0.5;\n}\n\n/* Native input */\n.input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n}\n\n.input::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n.input:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Hide native browser styling for search inputs */\n.input[type=\"search\"]::-webkit-search-decoration,\n.input[type=\"search\"]::-webkit-search-cancel-button,\n.input[type=\"search\"]::-webkit-search-results-button,\n.input[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide number input spinners */\n.input[type=\"number\"]::-webkit-inner-spin-button,\n.input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n/* Clear button */\n.clear-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.clear-button svg {\n width: 16px;\n height: 16px;\n}\n\n.clear-button:hover {\n opacity: 1;\n}\n\n.clear-button:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/* Error row */\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Input field component with label, description, and error states.\n * Supports various input types and validation states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n tag: 'af-input',\n styleUrl: 'af-input.css',\n shadow: true\n})\nexport class AfInput {\n /**\n * The label text for the input field\n */\n @Prop() label?: string;\n\n /**\n * Description text displayed below the label\n */\n @Prop() description?: string;\n\n /**\n * Placeholder text for the input\n */\n @Prop() placeholder?: string;\n\n /**\n * The current value of the input\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * The input type (text, email, password, number, tel, url, search)\n */\n @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n /**\n * The name of the input for form submission\n */\n @Prop() name?: string;\n\n /**\n * Whether the input is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the input is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Error message to display (also sets error state)\n */\n @Prop() error?: string;\n\n /**\n * Whether to show the info icon next to the label\n */\n @Prop() showInfoIcon: boolean = false;\n\n /**\n * Whether to show a search icon in the input\n */\n @Prop() showSearchIcon: boolean = false;\n\n /**\n * Whether to show a clear button when input has value\n */\n @Prop() clearable: boolean = false;\n\n /**\n * Autocomplete attribute for the input\n */\n @Prop() autocomplete?: string;\n\n /**\n * Maximum length of input value\n */\n @Prop() maxlength?: number;\n\n /**\n * Minimum length of input value\n */\n @Prop() minlength?: number;\n\n /**\n * Pattern for input validation (regex)\n */\n @Prop() pattern?: string;\n\n /**\n * Emitted when the input value changes\n */\n @Event() afInput!: EventEmitter<{ value: string }>;\n\n /**\n * Emitted when the input loses focus\n */\n @Event() afBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the input gains focus\n */\n @Event() afFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the clear button is clicked\n */\n @Event() afClear!: EventEmitter<void>;\n\n /**\n * Emitted when the info icon is clicked\n */\n @Event() afInfoClick!: EventEmitter<void>;\n\n @State() private isFocused: boolean = false;\n @State() private isHovered: boolean = false;\n\n private inputEl?: HTMLInputElement;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.afInput.emit({ value: this.value });\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n this.afFocus.emit();\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n this.afBlur.emit();\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleClear = () => {\n this.value = '';\n this.afClear.emit();\n this.afInput.emit({ value: '' });\n this.inputEl?.focus();\n };\n\n private handleInfoClick = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.afInfoClick.emit();\n };\n\n render() {\n const hasError = !!this.error;\n const hasValue = !!(this.value && this.value.length > 0);\n\n const wrapperClasses = {\n 'input-wrapper': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused,\n 'populated': hasValue\n };\n\n const inputContainerClasses = {\n 'input-container': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n {/* Label */}\n {this.label && (\n <div class=\"label-row\">\n <label class=\"label\" htmlFor=\"input\">\n {this.label}\n {this.required && <span class=\"required\">*</span>}\n </label>\n {this.showInfoIcon && (\n <button \n type=\"button\" \n class=\"info-icon\" \n onClick={this.handleInfoClick}\n aria-label=\"More information\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n <slot name=\"label-end\"></slot>\n </div>\n )}\n\n {/* Description */}\n {this.description && (\n <p class=\"description\">{this.description}</p>\n )}\n\n {/* Input container */}\n <div \n class={inputContainerClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n {/* Search icon */}\n {this.showSearchIcon && (\n <span class=\"search-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M21 21L16.65 16.65\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n )}\n\n {/* Native input */}\n <input\n ref={(el) => this.inputEl = el ?? undefined}\n id=\"input\"\n class=\"input\"\n type={this.type}\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n readonly={this.readonly}\n autocomplete={this.autocomplete}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n aria-invalid={hasError ? 'true' : undefined}\n aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n\n {/* Clear button */}\n {this.clearable && hasValue && !this.disabled && !this.readonly && (\n <button \n type=\"button\" \n class=\"clear-button\" \n onClick={this.handleClear}\n aria-label=\"Clear input\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n </div>\n\n {/* Error message */}\n {hasError && (\n <div class=\"error-row\" id=\"error-message\">\n <span class=\"error-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"error-text\">{this.error}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":"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"}

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

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

package/dist/cjs/af-logo-well.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-logo-well.entry.cjs.js","sources":["src/components/af-logo-well/af-logo-well.css?tag=af-logo-well&encapsulation=shadow","src/components/af-logo-well/af-logo-well.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.logo-well {\n /* Use theme variable from parent carousel, or fall back to dark theme default */\n background: var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));\n border-radius: var(--radius-logo-well-desktop, 16px);\n height: 72px;\n width: 184px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 32px;\n box-sizing: border-box;\n}\n\n::slotted(img) {\n max-height: 32px;\n max-width: 120px;\n width: auto;\n height: auto;\n display: block;\n object-fit: contain;\n /* Use logo filter from parent theme, default to white logos for dark backgrounds */\n filter: var(--af-carousel-logo-filter, brightness(0) invert(1));\n}\n\n::slotted(svg) {\n max-height: 32px;\n max-width: 120px;\n width: auto;\n height: auto;\n display: block;\n /* SVG color inherits from parent */\n color: var(--af-carousel-logo-color, white);\n}\n\n::slotted(div) {\n white-space: nowrap;\n color: var(--af-carousel-logo-color, white);\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 600;\n font-size: 16px;\n}\n\n/* Mobile adjustments */\n/* ≤ mobile */\n@media (max-width: 767px) {\n .logo-well {\n border-radius: var(--radius-logo-well-mobile, 12px);\n padding: 20px 24px;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rounded container for displaying client logos\n */\n@Component({\n tag: 'af-logo-well',\n styleUrl: 'af-logo-well.css',\n shadow: true,\n})\nexport class AfLogoWell {\n render() {\n return (\n <Host>\n <div class=\"logo-well\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,02BAA02B;;MCUn3B,UAAU,GAAA,MAAA;;;;IACrB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-CcvVbx1D.js');
-const afNavAccordionItemCss = () => `.sc-af-nav-accordion-item-h{display:block;width:100%}.nav-accordion-item.sc-af-nav-accordion-item{width:100%}.trigger.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 12px;background:transparent;border:none;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));cursor:pointer;font:inherit;text-align:left;text-decoration:none;color:inherit;box-sizing:border-box}a.trigger.sc-af-nav-accordion-item{color:inherit}.trigger.sc-af-nav-accordion-item:hover:not(:disabled){background-color:rgba(20, 52, 59, 0.02)}.trigger.sc-af-nav-accordion-item:focus-visible{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:-2px}.trigger.sc-af-nav-accordion-item:disabled{cursor:not-allowed;opacity:0.5}.trigger-content.sc-af-nav-accordion-item{flex:1;min-width:0;display:flex;align-items:center;min-height:24px}.label.sc-af-nav-accordion-item{font-family:var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--typography-headingweight, 500);font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.chevron.sc-af-nav-accordion-item,.chevron-button.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));transition:transform 0.3s ease}.chevron-button.sc-af-nav-accordion-item{background:transparent;border:none;cursor:pointer;padding:0}.chevron-button.sc-af-nav-accordion-item:hover{opacity:0.7}.chevron.is-open.sc-af-nav-accordion-item{transform:rotate(180deg)}.content-wrapper.sc-af-nav-accordion-item{overflow:hidden;transition:max-height 0.3s ease}.content.sc-af-nav-accordion-item{padding:0;background:var(--af-background-base, white)}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{cursor:not-allowed;opacity:0.5}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item:hover{background-color:transparent}.is-open.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{border-bottom-color:transparent}.breakpoint-mobile.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:20px 12px}.breakpoint-mobile.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.breakpoint-desktop.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:12px}.breakpoint-desktop.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:16px;line-height:20px;letter-spacing:0}.breakpoint-mobile.sc-af-nav-accordion-item-h .content.sc-af-nav-accordion-item{padding-left:0}`;
+const afNavAccordionItemCss = ".sc-af-nav-accordion-item-h{display:block;width:100%}.nav-accordion-item.sc-af-nav-accordion-item{width:100%}.trigger.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:20px 12px;background:transparent;border:none;border-bottom:1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));cursor:pointer;font:inherit;text-align:left;text-decoration:none;color:inherit;box-sizing:border-box}a.trigger.sc-af-nav-accordion-item{color:inherit}.trigger.sc-af-nav-accordion-item:hover:not(:disabled){background-color:rgba(20, 52, 59, 0.02)}.trigger.sc-af-nav-accordion-item:focus-visible{outline:2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));outline-offset:-2px}.trigger.sc-af-nav-accordion-item:disabled{cursor:not-allowed;opacity:0.5}.trigger-content.sc-af-nav-accordion-item{flex:1;min-width:0;display:flex;align-items:center;min-height:24px}.label.sc-af-nav-accordion-item{font-family:var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);font-weight:var(--typography-headingweight, 500);font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b))}.chevron.sc-af-nav-accordion-item,.chevron-button.sc-af-nav-accordion-item{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));transition:transform 0.3s ease}.chevron-button.sc-af-nav-accordion-item{background:transparent;border:none;cursor:pointer;padding:0}.chevron-button.sc-af-nav-accordion-item:hover{opacity:0.7}.chevron.is-open.sc-af-nav-accordion-item{transform:rotate(180deg)}.content-wrapper.sc-af-nav-accordion-item{overflow:hidden;transition:max-height 0.3s ease}.content.sc-af-nav-accordion-item{padding:0;background:var(--af-background-base, white)}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{cursor:not-allowed;opacity:0.5}.is-disabled.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item:hover{background-color:transparent}.is-open.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{border-bottom-color:transparent}.breakpoint-mobile.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:20px 12px}.breakpoint-mobile.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.breakpoint-desktop.sc-af-nav-accordion-item-h .trigger.sc-af-nav-accordion-item{padding:12px}.breakpoint-desktop.sc-af-nav-accordion-item-h .label.sc-af-nav-accordion-item{font-size:16px;line-height:20px;letter-spacing:0}.breakpoint-mobile.sc-af-nav-accordion-item-h .content.sc-af-nav-accordion-item{padding-left:0}";
 const AfNavAccordionItem = class {
     constructor(hostRef) {
@@ -92,11 +92,10 @@ const AfNavAccordionItem = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": [{
-                "handleOpenChange": 0
-            }]
+        "open": ["handleOpenChange"]
     }; }
 };
-AfNavAccordionItem.style = afNavAccordionItemCss();
+AfNavAccordionItem.style = afNavAccordionItemCss;
 exports.af_nav_accordion_item = AfNavAccordionItem;
+//# sourceMappingURL=af-nav-accordion-item.entry.cjs.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-accordion-item.entry.cjs.js","sources":["src/components/af-nav-accordion-item/af-nav-accordion-item.css?tag=af-nav-accordion-item&encapsulation=scoped","src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nav-accordion-item {\n width: 100%;\n}\n\n/* Trigger button/link - clickable header */\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n padding: 20px 12px;\n background: transparent;\n border: none;\n border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n cursor: pointer;\n font: inherit;\n text-align: left;\n text-decoration: none;\n color: inherit;\n box-sizing: border-box;\n}\n\na.trigger {\n color: inherit;\n}\n\n.trigger:hover:not(:disabled) {\n background-color: rgba(20, 52, 59, 0.02);\n}\n\n.trigger:focus-visible {\n outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n outline-offset: -2px;\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Trigger content */\n.trigger-content {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Label styling - matches NavItem primary-01 mobile */\n.label {\n font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Chevron indicator */\n.chevron,\n.chevron-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n transition: transform 0.3s ease;\n}\n\n.chevron-button {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n}\n\n.chevron-button:hover {\n opacity: 0.7;\n}\n\n.chevron.is-open {\n transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.content {\n padding: 0;\n background: var(--af-background-base, white);\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n border-bottom-color: transparent;\n}\n\n/* Mobile breakpoint styling */\n:host(.breakpoint-mobile) .trigger {\n padding: 20px 12px;\n}\n\n:host(.breakpoint-mobile) .label {\n font-size: 20px;\n line-height: 1.1;\n letter-spacing: -0.4px;\n}\n\n/* Desktop breakpoint styling */\n:host(.breakpoint-desktop) .trigger {\n padding: 12px;\n}\n\n:host(.breakpoint-desktop) .label {\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0;\n}\n\n/* Nested content uses different padding */\n:host(.breakpoint-mobile) .content {\n padding-left: 0;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * Navigation accordion item with NavItem-styled trigger.\n * Combines navigation item styling with accordion collapse behavior.\n * \n * @slot trigger - Custom trigger content (optional - uses label if not provided)\n * @slot - The collapsible content (typically NavMenuNest or NavMenu components)\n */\n@Component({\n tag: 'af-nav-accordion-item',\n styleUrl: 'af-nav-accordion-item.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavAccordionItem {\n @Element() el!: HTMLElement;\n\n /**\n * Unique identifier for this accordion item\n */\n @Prop({ reflect: true }) itemId!: string;\n\n /**\n * Label text for the navigation item trigger\n */\n @Prop() label?: string;\n\n /**\n * Whether this item is currently expanded\n */\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n /**\n * Whether this item is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Optional href - if provided, clicking navigates instead of expanding\n * (chevron area would still toggle expansion if both behaviors needed)\n */\n @Prop() href?: string;\n\n /**\n * Breakpoint for styling\n */\n @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'mobile';\n\n /**\n * Emitted when the accordion item is toggled\n */\n @Event({ eventName: 'af-nav-accordion-item-toggle' }) navAccordionItemToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n @State() contentHeight: number = 0;\n @State() hasTriggerSlot: boolean = false;\n @State() hasContent: boolean = false;\n\n private contentRef?: HTMLElement;\n\n @Watch('open')\n handleOpenChange(newValue: boolean) {\n if (newValue) {\n this.measureContent();\n }\n }\n\n /**\n * Detect whether the host has any default-slot children — i.e. whether\n * this item expands to reveal a sub-menu, or is just a simple link.\n * We check in componentWillLoad (before render) because after render\n * Stencil has appended its own output to the host and this.el.children\n * would include that.\n */\n componentWillLoad() {\n this.hasContent = Array.from(this.el.children).some(\n (child) => !(child as HTMLElement).hasAttribute('slot'),\n );\n }\n\n componentDidLoad() {\n if (this.open) {\n this.measureContent();\n }\n }\n\n /**\n * Programmatically toggle the accordion item\n */\n @Method()\n async toggle() {\n if (!this.disabled && !this.href) {\n this.open = !this.open;\n this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });\n }\n }\n\n private measureContent() {\n if (this.contentRef) {\n this.contentHeight = this.contentRef.scrollHeight;\n }\n }\n\n private handleTriggerClick = (event: MouseEvent) => {\n // If it's a link, let it navigate (unless they clicked the chevron specifically)\n if (this.href) {\n return;\n }\n event.preventDefault();\n this.toggle();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if ((event.key === 'Enter' || event.key === ' ') && !this.href) {\n event.preventDefault();\n this.toggle();\n }\n };\n\n private handleSlotChange = (event: Event) => {\n const slot = event.target as HTMLSlotElement;\n this.hasTriggerSlot = slot.assignedNodes().length > 0;\n };\n\n render() {\n const contentStyle = {\n maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n };\n\n // Only render the chevron toggle when this item actually has\n // sub-content to expand. A plain href item with no children is a\n // direct link and shouldn't show a disclosure affordance.\n const hasDropdownContent = this.hasContent;\n\n return (\n <Host \n class={{ \n 'is-open': this.open, \n 'is-disabled': this.disabled,\n [`breakpoint-${this.breakpoint}`]: true\n }}\n >\n <div class=\"nav-accordion-item\">\n {/* Trigger */}\n {this.href ? (\n <a\n href={this.href}\n class=\"trigger\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <button \n class=\"chevron-button\"\n onClick={(e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }}\n aria-label={this.open ? 'Collapse' : 'Expand'}\n type=\"button\"\n >\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </button>\n )}\n </a>\n ) : (\n <button\n class=\"trigger\"\n onClick={this.handleTriggerClick}\n onKeyDown={this.handleKeyDown}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`content-${this.itemId}`}\n disabled={this.disabled}\n type=\"button\"\n >\n <div class=\"trigger-content\">\n <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n <span class=\"label\">{this.label}</span>\n </slot>\n </div>\n {hasDropdownContent && (\n <div class={{ 'chevron': true, 'is-open': this.open }}>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n )}\n </button>\n )}\n\n {/* Collapsible content */}\n <div\n id={`content-${this.itemId}`}\n class=\"content-wrapper\"\n style={contentStyle}\n aria-hidden={!this.open ? 'true' : 'false'}\n >\n <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-CcvVbx1D.js');
-const afNavAccordionCss = () => `.sc-af-nav-accordion-h{display:block;width:100%}.nav-accordion.sc-af-nav-accordion{display:flex;flex-direction:column;width:100%}`;
+const afNavAccordionCss = ".sc-af-nav-accordion-h{display:block;width:100%}.nav-accordion.sc-af-nav-accordion{display:flex;flex-direction:column;width:100%}";
 const AfNavAccordion = class {
     constructor(hostRef) {
@@ -76,6 +76,7 @@ const AfNavAccordion = class {
     }
     get el() { return index.getElement(this); }
 };
-AfNavAccordion.style = afNavAccordionCss();
+AfNavAccordion.style = afNavAccordionCss;
 exports.af_nav_accordion = AfNavAccordion;
+//# sourceMappingURL=af-nav-accordion.entry.cjs.js.map

package/dist/cjs/af-nav-accordion.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-accordion.entry.cjs.js","sources":["src/components/af-nav-accordion/af-nav-accordion.css?tag=af-nav-accordion&encapsulation=scoped","src/components/af-nav-accordion/af-nav-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.nav-accordion {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n/* Mobile breakpoint styling */\n:host(.breakpoint-mobile) .nav-accordion {\n /* Mobile-specific styles */\n}\n\n/* Desktop breakpoint styling */\n:host(.breakpoint-desktop) .nav-accordion {\n /* Desktop-specific styles if needed */\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Listen } from '@stencil/core';\n\n/**\n * Navigation-styled accordion for mobile menu patterns.\n * A wrapper around af-accordion with navigation-specific styling.\n * \n * @slot - Place af-nav-accordion-item components here\n */\n@Component({\n tag: 'af-nav-accordion',\n styleUrl: 'af-nav-accordion.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavAccordion {\n @Element() el!: HTMLElement;\n\n /**\n * Behavior mode for the accordion.\n * - `independent`: Multiple items can be open simultaneously\n * - `exclusive`: Only one item can be open at a time (typical for mobile nav)\n */\n @Prop() mode: 'independent' | 'exclusive' = 'exclusive';\n\n /**\n * Breakpoint for styling\n * - `desktop`: Desktop-specific styles\n * - `mobile`: Mobile-specific styles (default for nav menus)\n */\n @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'mobile';\n\n /**\n * Currently open item ID(s)\n */\n @Prop({ mutable: true }) value?: string | string[];\n\n /**\n * Emitted when the open state of items changes\n */\n @Event({ eventName: 'af-nav-accordion-change' }) navAccordionChange!: EventEmitter<{ value: string | string[] | null }>;\n\n @State() internalValue: string[] = [];\n\n componentWillLoad() {\n this.internalValue = this.normalizeValue(this.value);\n }\n\n /**\n * Listen for toggle events from child items\n */\n @Listen('af-nav-accordion-item-toggle')\n handleItemToggle(event: CustomEvent<{ itemId: string; open: boolean }>) {\n event.stopPropagation();\n const { itemId, open } = event.detail;\n\n let newValue: string[];\n\n if (this.mode === 'exclusive') {\n newValue = open ? [itemId] : [];\n } else {\n if (open) {\n newValue = [...this.internalValue, itemId];\n } else {\n newValue = this.internalValue.filter(id => id !== itemId);\n }\n }\n\n this.internalValue = newValue;\n this.syncItems();\n\n const emitValue = this.mode === 'exclusive' \n ? (newValue.length > 0 ? newValue[0] : null)\n : newValue;\n this.navAccordionChange.emit({ value: emitValue });\n }\n\n private normalizeValue(value: string | string[] | undefined): string[] {\n if (value === undefined || value === null) {\n return [];\n }\n if (Array.isArray(value)) {\n return this.mode === 'exclusive' ? value.slice(0, 1) : value;\n }\n return [value];\n }\n\n private syncItems() {\n const items = this.el.querySelectorAll('af-nav-accordion-item');\n items.forEach((element) => {\n const item = element as HTMLElement & { itemId?: string; open?: boolean };\n if (item.itemId) {\n item.open = this.internalValue.includes(item.itemId);\n }\n });\n }\n\n componentDidLoad() {\n this.syncItems();\n }\n\n render() {\n return (\n <Host class={{ [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true }}>\n <div class=\"nav-accordion\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,mIAAmI;;MCchJ,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASE;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAgC,WAAW;AAEvD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAyB,QAAQ;AAY3D,QAAA,IAAa,CAAA,aAAA,GAAa,EAAE;AAoEtC;IAlEC,iBAAiB,GAAA;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGtD;;AAEG;AAEH,IAAA,gBAAgB,CAAC,KAAqD,EAAA;QACpE,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM;AAErC,QAAA,IAAI,QAAkB;AAEtB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;AAC7B,YAAA,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE;;aAC1B;YACL,IAAI,IAAI,EAAE;gBACR,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;;iBACrC;AACL,gBAAA,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC;;;AAI7D,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;QAC7B,IAAI,CAAC,SAAS,EAAE;AAEhB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK;AAC9B,eAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;cACzC,QAAQ;QACZ,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;;AAG5C,IAAA,cAAc,CAAC,KAAoC,EAAA;QACzD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;AACzC,YAAA,OAAO,EAAE;;AAEX,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK;;QAE9D,OAAO,CAAC,KAAK,CAAC;;IAGR,SAAS,GAAA;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC;AAC/D,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;YACxB,MAAM,IAAI,GAAG,OAA4D;AACzE,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;AAExD,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,CAAC,CAAc,WAAA,EAAA,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI,EAAE,CAAC,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,EAAA,EACnFD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;"}

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

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

package/dist/cjs/af-nav-card.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-card.entry.cjs.js","sources":["src/components/af-nav-card/af-nav-card.css?tag=af-nav-card&encapsulation=scoped","src/components/af-nav-card/af-nav-card.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.card-link {\n text-decoration: none;\n color: inherit;\n display: block;\n}\n\n/* Card container */\n.nav-card {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 290px;\n height: 360px;\n min-height: 360px;\n border-radius: var(--radii-image, 16px);\n overflow: hidden;\n justify-content: flex-end;\n transition: transform 0.2s ease;\n}\n\n.nav-card.is-hovered {\n transform: scale(1.02);\n}\n\n/* Image container */\n.image-container {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.card-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n/* Gradient overlay */\n.overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);\n padding: 80px 24px 24px 24px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n/* Heading */\n.heading {\n margin: 0;\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 24px;\n line-height: 1.2;\n letter-spacing: -0.48px;\n color: #ffffff;\n width: 100%;\n}\n\n.nav-card.is-hovered .heading {\n text-decoration: underline;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * A navigation card component for featured article content in mega-menu dropdowns.\n * Displays an image with a gradient overlay and headline text.\n * \n * **Usage:**\n * - Place in the `sidebar` slot of NavMenuNest\n * - Provide imageSrc, heading, and href props\n * \n * **Hover behavior:**\n * - Slight scale effect (1.02)\n * - Headline underline\n */\n@Component({\n tag: 'af-nav-card',\n styleUrl: 'af-nav-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavCard {\n /**\n * The headline text displayed over the image\n */\n @Prop() heading?: string;\n\n /**\n * URL to navigate to when clicked\n */\n @Prop() href?: string;\n\n /**\n * Image source URL for the background\n */\n @Prop() imageSrc?: string;\n\n /**\n * Alternative text for the image\n */\n @Prop() imageAlt: string = '';\n\n @State() isHovered: boolean = false;\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n render() {\n const classes = {\n 'nav-card': true,\n 'is-hovered': this.isHovered\n };\n\n const content = (\n <div\n class={classes}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <div class=\"image-container\">\n {this.imageSrc && (\n <img src={this.imageSrc} alt={this.imageAlt} class=\"card-image\" />\n )}\n </div>\n <div class=\"overlay\">\n {this.heading && (\n <h3 class=\"heading\">{this.heading}</h3>\n )}\n </div>\n </div>\n );\n\n if (this.href) {\n return (\n <Host>\n <a href={this.href} class=\"card-link\">\n {content}\n </a>\n </Host>\n );\n }\n\n return <Host>{content}</Host>;\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,+kCAA+kC;;MCoBvlC,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAsBE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAEpB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,MAAM,OAAO,IACXA,iBACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnCA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACzB,EAAA,IAAI,CAAC,QAAQ,KACZA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,EAAG,CAAA,CACnE,CACG,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,KACXA,OAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACG,CACF,CACP;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,EAClC,EAAA,OAAO,CACN,CACC;;QAIX,OAAOA,OAAC,CAAAC,UAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-menu-nest.entry.cjs.js","sources":["src/components/af-nav-menu-nest/af-nav-menu-nest.css?tag=af-nav-menu-nest&encapsulation=scoped","src/components/af-nav-menu-nest/af-nav-menu-nest.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.nav-menu-nest {\n display: inline-flex;\n background: var(--af-background-base, #ffffff);\n border-radius: 32px;\n}\n\n/* Desktop layout */\n.nav-menu-nest.breakpoint-desktop {\n flex-direction: row;\n align-items: stretch;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-columns {\n display: flex;\n flex-direction: row;\n gap: 32px;\n padding: 24px 0 32px 40px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar {\n display: flex;\n flex-direction: column;\n padding: 24px 40px 32px 32px;\n}\n\n/* Slotted content in sidebar - match column spacing */\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-menu) {\n padding-top: 16px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-card) {\n margin-top: 16px;\n}\n\n/* Slotted NavMenu in columns - equal-width flex items with border and\n * spacing. `flex: 1 1 0` gives every column the same width regardless of\n * content; `min-width: 0` lets the content wrap within its column rather\n * than forcing the whole row to grow. */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {\n flex: 1 1 0;\n min-width: 0;\n border-right: 1px solid var(--af-background-border-subtle, #e8eeed);\n padding-right: 32px;\n padding-top: 16px;\n}\n\n/* Last NavMenu in columns - no border by default */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n border-right: none;\n padding-right: 0;\n}\n\n/* When showSidebarBorder is true, last column gets heavier border */\n:host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n border-right: 1px solid var(--af-background-border-heavy, #c6d5d1);\n padding-right: 32px;\n}\n\n/* Tighter layout in the 992–1199px band where the desktop nav is still\n * shown but horizontal room is limited — reduces gap/padding so the\n * four-column layout doesn't read as cramped. */\n@media (max-width: 1199px) {\n .nav-menu-nest.breakpoint-desktop .menu-columns {\n gap: 20px;\n padding: 20px 0 24px 24px;\n }\n .nav-menu-nest.breakpoint-desktop .menu-sidebar {\n padding: 20px 24px 24px 20px;\n }\n .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {\n padding-right: 20px;\n }\n :host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n padding-right: 20px;\n }\n}\n\n/* Mobile layout */\n.nav-menu-nest.breakpoint-mobile {\n flex-direction: column;\n border-radius: 0;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns {\n display: flex;\n flex-direction: column;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-sidebar {\n display: flex;\n flex-direction: column;\n padding: 32px 12px;\n border-top: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns ::slotted(af-nav-menu) {\n border-right: none;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A mega-menu dropdown panel component.\n * Acts as a container for NavMenu columns and optionally a sidebar.\n * Used as the dropdown content for navbar items.\n * \n * **Slots:**\n * - default: Place NavMenu components here - they will be displayed as columns\n * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)\n * \n * **Example:**\n * ```html\n * <af-nav-menu-nest type=\"solutions\" breakpoint=\"desktop\">\n * <af-nav-menu heading=\"Industries\">...</af-nav-menu>\n * <af-nav-menu heading=\"Use Cases\">...</af-nav-menu>\n * <af-nav-menu heading=\"Documents\">...</af-nav-menu>\n * <af-nav-menu slot=\"sidebar\" heading=\"Resume Parser\">...</af-nav-menu>\n * </af-nav-menu-nest>\n * ```\n */\n@Component({\n tag: 'af-nav-menu-nest',\n styleUrl: 'af-nav-menu-nest.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavMenuNest {\n /**\n * The type/variant of the mega-menu\n * - 'solutions': Multi-column layout (3 columns + sidebar)\n * - 'solutions-alt': Alternative solutions layout\n * - 'resources': Multi-column layout with optional featured card\n * - 'pricing': Simpler layout without sidebar\n */\n @Prop() type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing' = 'solutions';\n\n /**\n * Breakpoint variant for responsive styling\n * - 'desktop': Horizontal multi-column layout\n * - 'mobile': Vertical stacked layout\n */\n @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n /**\n * Whether to show the heavier border on the last column (before sidebar).\n * Set to `true` when sidebar has content, `false` when no sidebar.\n * When `false`, the last column has no border.\n */\n @Prop({ reflect: true }) showSidebarBorder: boolean = true;\n\n render() {\n const classes = {\n 'nav-menu-nest': true,\n 'theme-white': true,\n [`type-${this.type}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"menu-columns\">\n <slot></slot>\n </div>\n <div class=\"menu-sidebar\">\n <slot name=\"sidebar\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,w9GAAw9G;;MC2Bp+G,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;;;;AAMG;AACK,QAAA,IAAI,CAAA,IAAA,GAA4D,WAAW;AAEnF;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACsB,QAAA,IAAiB,CAAA,iBAAA,GAAY,IAAI;AAuB3D;IArBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

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

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

package/dist/cjs/af-nav-menu.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-menu.entry.cjs.js","sources":["src/components/af-nav-menu/af-nav-menu.css?tag=af-nav-menu&encapsulation=scoped","src/components/af-nav-menu/af-nav-menu.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.nav-menu {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n min-height: 1px;\n min-width: 1px;\n}\n\n/* Desktop styles */\n.nav-menu.breakpoint-desktop {\n padding: 0;\n flex: 1 0 0;\n align-self: stretch;\n}\n\n/* Border is now controlled by parent NavMenuNest via ::slotted()\n Use showBorder prop only when NavMenu is used standalone */\n.nav-menu.breakpoint-desktop.has-border {\n border-right: 1px solid var(--af-background-border-subtle, #e8eeed);\n padding-right: 32px;\n padding-top: 16px;\n}\n\n/* Mobile styles */\n.nav-menu.breakpoint-mobile {\n padding: 32px 12px;\n width: 100%;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Menu header */\n.menu-header {\n display: flex;\n gap: 16px;\n align-items: center;\n width: 100%;\n}\n\n.menu-heading {\n margin: 0;\n font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 20px;\n line-height: 1.2;\n letter-spacing: -0.4px;\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n flex: 1 0 0;\n min-height: 1px;\n min-width: 1px;\n}\n\n/* Mobile heading adjustments */\n.nav-menu.breakpoint-mobile .menu-heading {\n line-height: 1.1;\n}\n\n/* Menu items container */\n.menu-items {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 100%;\n}\n\n/* Mobile items with left padding */\n.nav-menu.breakpoint-mobile .menu-items {\n padding-left: 24px;\n}\n\n/* Slot styling for nav-items */\n::slotted(af-nav-item) {\n width: 100%;\n}\n\n/* Card style variant - adds background and rounded corners */\n.nav-menu.card-style {\n background: var(--af-background-level-1, #e8eeed);\n border-radius: var(--radii-card-level-1, 32px);\n padding: 40px;\n}\n\n.nav-menu.card-style.breakpoint-desktop {\n flex: 1 0 0;\n align-self: stretch;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n tag: 'af-nav-menu',\n styleUrl: 'af-nav-menu.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavMenu {\n /**\n * The heading text displayed above the navigation items\n */\n @Prop() heading?: string;\n\n /**\n * Breakpoint variant for responsive styling\n * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n */\n @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n /**\n * Whether to show the right border separator.\n * When used inside NavMenuNest, borders are controlled by the parent.\n * Set to true only when using NavMenu standalone.\n */\n @Prop() showBorder: boolean = false;\n\n /**\n * Whether to display as a card with background color and rounded corners.\n * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n */\n @Prop({ reflect: true }) cardStyle: boolean = false;\n\n render() {\n const classes = {\n 'nav-menu': true,\n [`breakpoint-${this.breakpoint}`]: true,\n 'has-border': this.showBorder,\n 'card-style': this.cardStyle\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.heading && (\n <div class=\"menu-header\">\n <h3 class=\"menu-heading\">{this.heading}</h3>\n </div>\n )}\n <div class=\"menu-items\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,69CAA69C;;MCYr+C,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;;AAGG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAyBpD;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,OAAO,KACXA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP,EACDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-CcvVbx1D.js');
-const afNumberBadgeCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;line-height:1;user-select:none;flex-shrink:0}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);font-weight:500}.badge.variant-inCircle{border-radius:50%;background-color:var(--af-color-brand-soft-clay, #B09670);color:var(--af-color-brand-inkwell, #14343B)}.badge.variant-outlined{background-color:transparent;color:var(--af-color-brand-mist-green, #C6D5D1)}`;
+const afNumberBadgeCss = ":host{display:inline-flex;align-items:center;justify-content:center;line-height:1;user-select:none;flex-shrink:0}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);font-weight:500}.badge.variant-inCircle{border-radius:50%;background-color:var(--af-color-brand-soft-clay, #B09670);color:var(--af-color-brand-inkwell, #14343B)}.badge.variant-outlined{background-color:transparent;color:var(--af-color-brand-mist-green, #C6D5D1)}";
 const AfNumberBadge = class {
     constructor(hostRef) {
@@ -36,6 +36,7 @@ const AfNumberBadge = class {
             }, style: badgeStyle }, this.number)));
     }
 };
-AfNumberBadge.style = afNumberBadgeCss();
+AfNumberBadge.style = afNumberBadgeCss;
 exports.af_number_badge = AfNumberBadge;
+//# sourceMappingURL=af-number-badge.entry.cjs.js.map

package/dist/cjs/af-number-badge.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-number-badge.entry.cjs.js","sources":["src/components/af-number-badge/af-number-badge.css?tag=af-number-badge&encapsulation=shadow","src/components/af-number-badge/af-number-badge.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n user-select: none;\n flex-shrink: 0;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--af-font-family-sans, 'NeuSans', Arial, sans-serif);\n font-weight: 500;\n}\n\n/* In Circle variant - filled soft-clay circle */\n.badge.variant-inCircle {\n border-radius: 50%;\n background-color: var(--af-color-brand-soft-clay, #B09670);\n color: var(--af-color-brand-inkwell, #14343B);\n}\n\n/* Outlined variant - text only in mist-green */\n.badge.variant-outlined {\n background-color: transparent;\n color: var(--af-color-brand-mist-green, #C6D5D1);\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\nexport type NumberBadgeVariant = 'inCircle' | 'outlined';\n\n/**\n * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.\n * Perfect for numbered lists, step indicators, or ordered content.\n * \n * @example\n * ```html\n * <af-number-badge number=\"1\" variant=\"inCircle\" size=\"48\"></af-number-badge>\n * <af-number-badge number=\"5\" variant=\"outlined\" size=\"32\"></af-number-badge>\n * ```\n */\n@Component({\n tag: 'af-number-badge',\n styleUrl: 'af-number-badge.css',\n shadow: true\n})\nexport class AfNumberBadge {\n /**\n * The number to display (1-10)\n */\n @Prop() number: NumberBadgeNumber = 1;\n\n /**\n * Visual variant of the badge\n * - `inCircle` - Number in filled soft-clay circle\n * - `outlined` - Number text only in mist-green\n */\n @Prop() variant: NumberBadgeVariant = 'inCircle';\n\n /**\n * Size of the badge in pixels\n */\n @Prop() size: number = 48;\n\n render() {\n const isInCircle = this.variant === 'inCircle';\n const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;\n\n const badgeStyle = {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${fontSize}px`,\n };\n\n return (\n <Host\n role=\"img\"\n aria-label={`Number ${this.number}${isInCircle ? ' badge' : ''}`}\n >\n <span\n class={{\n 'badge': true,\n [`variant-${this.variant}`]: true,\n }}\n style={badgeStyle}\n >\n {this.number}\n </span>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,mgBAAmgB;;MCoB/gB,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAsB,CAAC;AAErC;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,UAAU;AAEhD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA6B1B;IA3BC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU;AAC9C,QAAA,MAAM,QAAQ,GAAG,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG;AAE/D,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;AACvB,YAAA,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;YACxB,QAAQ,EAAE,CAAG,EAAA,QAAQ,CAAI,EAAA,CAAA;SAC1B;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,CAAU,OAAA,EAAA,IAAI,CAAC,MAAM,CAAA,EAAG,UAAU,GAAG,QAAQ,GAAG,EAAE,EAAE,EAAA,EAEhED,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAClC,EACD,KAAK,EAAE,UAAU,EAEhB,EAAA,IAAI,CAAC,MAAM,CACP,CACF;;;;;;;"}

package/dist/cjs/af-progress-line.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-CcvVbx1D.js');
-const afProgressLineCss = () => `.sc-af-progress-line-h{display:block;width:100%}.progress-line.sc-af-progress-line{position:relative;overflow:hidden}.progress-line--horizontal.sc-af-progress-line{height:3px;width:100%}.progress-line__background.sc-af-progress-line{position:absolute;inset:0;background:var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));height:1px;top:50%;transform:translateY(-50%)}.progress-line__active.sc-af-progress-line{position:relative;height:100%;min-width:1px;background:var(--af-background-border-active, var(--colour-background-border-active, #8a7049));transition:width 0.15s ease-out}`;
+const afProgressLineCss = ".sc-af-progress-line-h{display:block;width:100%}.progress-line.sc-af-progress-line{position:relative;overflow:hidden}.progress-line--horizontal.sc-af-progress-line{height:3px;width:100%}.progress-line__background.sc-af-progress-line{position:absolute;inset:0;background:var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));height:1px;top:50%;transform:translateY(-50%)}.progress-line__active.sc-af-progress-line{position:relative;height:100%;min-width:1px;background:var(--af-background-border-active, var(--colour-background-border-active, #8a7049));transition:width 0.15s ease-out}";
 const AfProgressLine = class {
     constructor(hostRef) {
@@ -27,6 +27,7 @@ const AfProgressLine = class {
             }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, index.h("div", { key: 'e7e2ab3850a97dc4d37194132dcdd9c7f3d614e3', class: "progress-line__background" }), index.h("div", { key: '00c16c1a7eebbcd314db1f12ee4344d2b2bebc9d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
 };
-AfProgressLine.style = afProgressLineCss();
+AfProgressLine.style = afProgressLineCss;
 exports.af_progress_line = AfProgressLine;
+//# sourceMappingURL=af-progress-line.entry.cjs.js.map

package/dist/cjs/af-progress-line.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/cjs/af-radio.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-CcvVbx1D.js');
-const afRadioCss = () => `:host{display:inline-block}.radio{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}.radio.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;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-radio, 9999px);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}.radio: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)),     0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)),      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)),      0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.dot{position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff));opacity:0;transition:opacity 0.15s ease}.control.checked .dot{opacity:1}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}`;
+const afRadioCss = ":host{display:inline-block}.radio{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}.radio.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;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-radio, 9999px);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}.radio: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))}.dot{position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff));opacity:0;transition:opacity 0.15s ease}.control.checked .dot{opacity:1}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
 const AfRadio = class {
     constructor(hostRef) {
@@ -46,6 +46,7 @@ const AfRadio = class {
     }
     get el() { return index.getElement(this); }
 };
-AfRadio.style = afRadioCss();
+AfRadio.style = afRadioCss;
 exports.af_radio = AfRadio;
+//# sourceMappingURL=af-radio.entry.cjs.js.map

package/dist/cjs/af-radio.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-radio.entry.cjs.js","sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.radio {\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.radio.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 radio control */\n.control {\n position: relative;\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border-radius: var(--radii-radio, 9999px);\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 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.radio: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/* Inner dot - always present, visibility controlled by opacity */\n.dot {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.control.checked .dot {\n opacity: 1;\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, Element } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * Radios with the same `name` prop are mutually exclusive.\n * \n * @slot - Radio label text\n */\n@Component({\n tag: 'af-radio',\n styleUrl: 'af-radio.css',\n shadow: true\n})\nexport class AfRadio {\n @Element() el!: HTMLElement;\n\n /**\n * Whether the radio is checked\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /**\n * Whether the radio is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the radio for form submission (radios with same name are grouped)\n */\n @Prop({ reflect: true }) name?: string;\n\n /**\n * The value of the radio for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the radio checked state changes\n */\n @Event() afChange!: EventEmitter<{ checked: boolean; value?: string; name?: string }>;\n\n private handleClick = () => {\n if (this.disabled || this.checked) return;\n \n // Uncheck other radios with the same name\n if (this.name) {\n const siblings = document.querySelectorAll(`af-radio[name=\"${this.name}\"]`);\n siblings.forEach((radio) => {\n if (radio !== this.el && (radio as any).checked) {\n (radio as any).checked = false;\n }\n });\n }\n \n this.checked = true;\n this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });\n };\n\n render() {\n const radioClasses = {\n 'radio': true,\n 'disabled': this.disabled\n };\n\n const controlClasses = {\n 'control': true,\n 'checked': this.checked,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={radioClasses} onClick={this.handleClick}>\n <input\n type=\"radio\"\n class=\"input\"\n checked={this.checked}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n tabindex={this.disabled ? -1 : 0}\n />\n <span class={controlClasses}>\n <span class=\"dot\"></span>\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,2rEAA2rE;;MCajsE,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;;AAGnC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,CAAC;AAC3E,gBAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;oBACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,IAAK,KAAa,CAAC,OAAO,EAAE;AAC9C,wBAAA,KAAa,CAAC,OAAO,GAAG,KAAK;;AAElC,iBAAC,CAAC;;AAGJ,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACnF,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACnDA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,CAAA,EACFA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CACpB,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;"}

package/dist/cjs/af-section.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-CcvVbx1D.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 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 = class {
     constructor(hostRef) {
@@ -19,6 +19,7 @@ const AfSection = class {
         return (index.h(index.Host, { key: '66fa1e6000cebdf1fa4ea850156ff54ec55f5952' }, index.h("div", { key: '883a3f086eab3b120afed962b2fff8986aaf0b25', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (index.h("af-container", null, content)) : content)));
     }
 };
-AfSection.style = afSectionCss();
+AfSection.style = afSectionCss;
 exports.af_section = AfSection;
+//# sourceMappingURL=af-section.entry.cjs.js.map