@affinda/wc 0.0.15 → 0.0.16

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

@@ -0,0 +1 @@
+{"file":"p-Dvi1lz3x.js","mappings":";;AAAA,MAAM,SAAS,GAAG,o7EAAo7E;;MCez7E,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DzkSL2bi.js

@@ -0,0 +1,141 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));cursor:default}.required{color:var(--forms-fields-error, #be292a);margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--buttons-secondary-stroke, #14343b);outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--forms-fields-bg-default, #ffffff);border:1px solid var(--forms-fields-stroke-default, #d0d6d8);border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--forms-fields-bg-hover, #f3f5f5)}.input-container.focused{background:var(--forms-fields-bg-default, #ffffff);border-color:var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));box-shadow:0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b)}.input-container.error{border-color:var(--forms-fields-stroke-error, #be292a)}.input-container.disabled{background:var(--forms-fields-bg-disabled, #e8ebeb);border-color:var(--forms-fields-stroke-default, #d0d6d8);cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));outline:none}.input::placeholder{color:var(--forms-fields-placeholder, #60767b);opacity:1}.input:disabled{cursor:not-allowed;color:var(--forms-fields-placeholder, #60767b)}.input:disabled::placeholder{color:var(--forms-fields-placeholder, #60767b)}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--buttons-secondary-stroke, #14343b);outline-offset:2px;border-radius:4px}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--forms-fields-error, #be292a)}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--forms-fields-error, #be292a)}";
+
+const AfInput = /*@__PURE__*/ proxyCustomElement(class AfInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afInput = createEvent(this, "afInput");
+        this.afBlur = createEvent(this, "afBlur");
+        this.afFocus = createEvent(this, "afFocus");
+        this.afClear = createEvent(this, "afClear");
+        this.afInfoClick = createEvent(this, "afInfoClick");
+        /**
+         * The current value of the input
+         */
+        this.value = '';
+        /**
+         * The input type (text, email, password, number, tel, url, search)
+         */
+        this.type = 'text';
+        /**
+         * Whether the input is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the input is required
+         */
+        this.required = false;
+        /**
+         * Whether the input is read-only
+         */
+        this.readonly = false;
+        /**
+         * Whether to show the info icon next to the label
+         */
+        this.showInfoIcon = false;
+        /**
+         * Whether to show a search icon in the input
+         */
+        this.showSearchIcon = false;
+        /**
+         * Whether to show a clear button when input has value
+         */
+        this.clearable = false;
+        this.isFocused = false;
+        this.isHovered = false;
+        this.handleInput = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.afInput.emit({ value: this.value });
+        };
+        this.handleFocus = () => {
+            this.isFocused = true;
+            this.afFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.isFocused = false;
+            this.afBlur.emit();
+        };
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+        };
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+        };
+        this.handleClear = () => {
+            this.value = '';
+            this.afClear.emit();
+            this.afInput.emit({ value: '' });
+            this.inputEl?.focus();
+        };
+        this.handleInfoClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.afInfoClick.emit();
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        const hasValue = !!(this.value && this.value.length > 0);
+        const wrapperClasses = {
+            'input-wrapper': true,
+            'disabled': this.disabled,
+            'error': hasError,
+            'focused': this.isFocused,
+            'hovered': this.isHovered && !this.disabled && !this.isFocused,
+            'populated': hasValue
+        };
+        const inputContainerClasses = {
+            'input-container': true,
+            'disabled': this.disabled,
+            'error': hasError,
+            'focused': this.isFocused,
+            'hovered': this.isHovered && !this.disabled && !this.isFocused
+        };
+        return (h(Host, { key: '5bf8980e12ad5fc3b8b84df3acc749bddf61042d' }, h("div", { key: 'd0266eca85871397ed73381ca3d36f3dc2dd79ce', class: wrapperClasses }, this.label && (h("div", { key: 'f9fc2fe3f52a1f9be1404943d91489357ea941dc', class: "label-row" }, h("label", { key: '76283a7f0c9be127aa8c9115fcbc26b2d67d51cc', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: '6b0de23e857abfdd25d6eefaa6ff22f22fa813dd', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '7c5f7a47a8357301f3fe28d6078bdec3ec1160c3', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '655c9448589937c2047a58962f78ab1872e0da84', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5066c29389ac8f9e1e27771f43a98f75f9b03634', 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" }), h("path", { key: '1993da070066d33575618267d6af5b13b641143b', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dd99ac12d4a23b98c98fca1df34916968276fc0e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'b406de5a455af79a69497c6a641b5c41347ee1ab', name: "label-end" }))), this.description && (h("p", { key: '0dcebb186df7055efb168f96ad4199e2f614a87c', class: "description" }, this.description)), h("div", { key: '754b8a3e67d5807d7d484d475d31913dee8004f4', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (h("span", { key: '5757962a3479a6cd1f12bd1da183919af69ad9f4', class: "search-icon" }, h("svg", { key: '4106175e5b41e4c978b38eda6db36799a6a6f762', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1d54b9a8c682c9049e97b28143f0dcd90e068dee', 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" }), h("path", { key: 'd3ed0187abde8c14eae462612c918e10cb46916d', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: 'fb7a551d44282686732b78865bab8720c5e08830', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '6ad41a3ee4ffdbeefa11e45754a22143b33405e5', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '129f73660030e81ff17071fae51bb34af23eca57', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '78d4c71521ac7daced7023c5bcfb2bfccf593fab', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '4eb85452029e8347dd648dcc849fa000b41b7fea', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: 'cc3b6083e88bb99ec17edffbf95ec89e2bb27e97', class: "error-row", id: "error-message" }, h("span", { key: 'fe264a854aaebe481a6913275859ca57b1d61d0d', class: "error-icon" }, h("svg", { key: '1159f77b184d1888c5c5ebe6138070c66abb66e6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '59975a202086127c2548843e842d33895d6ba1ff', 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" }), h("path", { key: '11c79f296c1dce73beebd67eeefe3d71b17ee191', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9f146c96a38b14afb1919cf480224ee520ac16b0', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '2d326d0d72727dca4c4839fb5279323e556fbe04', class: "error-text" }, this.error))))));
+    }
+    static get style() { return afInputCss; }
+}, [257, "af-input", {
+        "label": [1],
+        "description": [1],
+        "placeholder": [1],
+        "value": [1025],
+        "type": [1],
+        "name": [1],
+        "disabled": [516],
+        "required": [4],
+        "readonly": [4],
+        "error": [1],
+        "showInfoIcon": [4, "show-info-icon"],
+        "showSearchIcon": [4, "show-search-icon"],
+        "clearable": [4],
+        "autocomplete": [1],
+        "maxlength": [2],
+        "minlength": [2],
+        "pattern": [1],
+        "isFocused": [32],
+        "isHovered": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfInput);
+            }
+            break;
+    } });
+}
+
+export { AfInput as A, defineCustomElement as d };
+//# sourceMappingURL=p-DzkSL2bi.js.map
+
+//# sourceMappingURL=p-DzkSL2bi.js.map

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

@@ -0,0 +1 @@
+{"file":"p-DzkSL2bi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--forms-fields-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(--forms-fields-label, var(--colour-brand-inkwell, #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(--buttons-secondary-stroke, #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(--forms-fields-description, var(--colour-inkwell-400, #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(--forms-fields-bg-default, #ffffff);\n  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);\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(--forms-fields-bg-hover, #f3f5f5);\n}\n\n/* Focus state */\n.input-container.focused {\n  background: var(--forms-fields-bg-default, #ffffff);\n  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));\n  box-shadow: \n    0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n}\n\n/* Error state */\n.input-container.error {\n  border-color: var(--forms-fields-stroke-error, #be292a);\n}\n\n/* Disabled state */\n.input-container.disabled {\n  background: var(--forms-fields-bg-disabled, #e8ebeb);\n  border-color: var(--forms-fields-stroke-default, #d0d6d8);\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(--forms-fields-label, var(--colour-brand-inkwell, #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(--forms-fields-input, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  color: var(--forms-fields-placeholder, #60767b);\n}\n\n.input:disabled::placeholder {\n  color: var(--forms-fields-placeholder, #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(--forms-fields-label, var(--colour-brand-inkwell, #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(--buttons-secondary-stroke, #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(--forms-fields-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(--forms-fields-error, #be292a);\n}\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"],"version":3}

package/dist/components/p-JepBVz99.js

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afIconButtonCss = ":host{display:inline-block}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"tertiary\"]){color:var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}";
+
+const AfIconButton = /*@__PURE__*/ proxyCustomElement(class AfIconButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The visual variant of the button.
+         * - `primary` - Main CTA with filled ice background
+         * - `secondary` - Supporting action with white background
+         * - `tertiary` - Minimal style with transparent background
+         */
+        this.variant = 'primary';
+        /**
+         * The size of the button
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
+    }
+    render() {
+        const classes = {
+            'icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            'disabled': this.disabled
+        };
+        const content = (h("span", { class: "icon" }, h("slot", null)));
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes, "aria-label": this.ariaLabel }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes, "aria-label": this.ariaLabel }, content)));
+    }
+    static get style() { return afIconButtonCss; }
+}, [257, "af-icon-button", {
+        "variant": [513],
+        "size": [1],
+        "disabled": [4],
+        "href": [1],
+        "type": [1],
+        "ariaLabel": [1, "aria-label"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-icon-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIconButton);
+            }
+            break;
+    } });
+}
+
+export { AfIconButton as A, defineCustomElement as d };
+//# sourceMappingURL=p-JepBVz99.js.map
+
+//# sourceMappingURL=p-JepBVz99.js.map

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

@@ -0,0 +1 @@
+{"file":"p-JepBVz99.js","mappings":";;AAAA,MAAM,eAAe,GAAG,szFAAszF;;MCOj0F,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;QAED,MAAM,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance */\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  padding: 0;\n}\n\n/* Size variants */\n.size-large {\n  width: 72px;\n  height: 72px;\n  padding: 24px;\n}\n\n.size-large .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-medium {\n  width: 48px;\n  height: 48px;\n  padding: 12px;\n}\n\n.size-medium .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small {\n  width: 36px;\n  height: 36px;\n  padding: 8px;\n}\n\n.size-small .icon {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon slot - inherits color from parent */\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n}\n\n.icon ::slotted(*) {\n  width: 100%;\n  height: 100%;\n  color: inherit;\n}\n\n/* Primary variant (ice background) */\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n/* Secondary variant (outlined) */\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* Tertiary variant (minimal, no border) */\n.variant-tertiary {\n  background: transparent;\n  border-color: transparent;\n  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-tertiary:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* Disabled state */\n.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.icon-button {\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n}\n\nbutton.icon-button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\nbutton.icon-button.variant-tertiary {\n  background: transparent;\n  border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled ice background\n   * - `secondary` - Supporting action with white background\n   * - `tertiary` - Minimal style with transparent background\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'large' | 'medium' | 'small' = 'medium';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = (\n      <span class=\"icon\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-_bQXTXUb.js

@@ -0,0 +1,98 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$1 } from './p-D99aXp3U.js';
+
+const afNavbarCss = ":host{display:block;width:100%}.navbar-spacer{height:100px;}.navbar-spacer.theme-white{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container{position:fixed;top:32px;left:0;right:0;z-index:10;padding:0 80px;box-sizing:border-box}.navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap;}.navbar-left{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle svg{display:block}.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right{display:flex;align-items:center;gap:20px}.nav-actions{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center}.dropdown-container{position:absolute;top:108px;left:0;right:0;padding:0 80px;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:0 4px 24px rgba(20, 52, 59, 0.12)}.dropdown-panel:empty{display:none}.mobile-dropdowns{display:none}@media (max-width: 1099px){.nav-actions{display:none}.navbar-right{gap:0}}@media (max-width: 1024px){.navbar-spacer{height:88px}.navbar-container{top:24px;padding:0 40px}.navbar-left{gap:24px}.nav-links{gap:4px}.dropdown-container{padding:0 40px}}@media (max-width: 991px){.navbar-spacer{height:72px}.navbar-container{top:16px;padding:0 16px}.navbar{padding:8px 16px;flex-direction:column;border-radius:16px;gap:0;flex-wrap:wrap;}.navbar-left{width:100%;flex-direction:row;justify-content:space-between;align-items:center;gap:16px}.mobile-menu-toggle{display:flex}.nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:16px;flex-wrap:wrap}.nav-links.mobile-open{display:flex}.navbar-right{display:none;width:100%;flex-direction:column;gap:12px;align-items:stretch;margin-top:16px}.navbar-right.mobile-open{display:flex}.nav-actions{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:0}.nav-button{width:100%}.dropdown-container{display:none}.mobile-dropdowns{display:block;padding:0 16px;margin-top:8px}}";
+
+const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.mobileMenuOpen = false;
+        /** The currently open dropdown identifier (null if none open) */
+        this.activeDropdown = null;
+        /** Whether to show the default Affinda logo when no logo slot content is provided */
+        this.showDefaultLogo = true;
+        this.toggleMobileMenu = () => {
+            this.mobileMenuOpen = !this.mobileMenuOpen;
+            // Close any open dropdown when toggling mobile menu
+            this.activeDropdown = null;
+        };
+        /**
+         * Opens a dropdown by its identifier
+         */
+        this.openDropdown = (dropdownId) => {
+            this.activeDropdown = dropdownId;
+        };
+        /**
+         * Closes the currently open dropdown
+         */
+        this.closeDropdown = () => {
+            this.activeDropdown = null;
+        };
+        /**
+         * Toggles a dropdown by its identifier
+         */
+        this.toggleDropdown = (dropdownId) => {
+            if (this.activeDropdown === dropdownId) {
+                this.activeDropdown = null;
+            }
+            else {
+                this.activeDropdown = dropdownId;
+            }
+        };
+    }
+    /**
+     * Handle clicks outside the navbar to close dropdowns
+     */
+    handleDocumentClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle escape key to close dropdowns
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.closeDropdown();
+        }
+    }
+    render() {
+        const hasDropdown = this.activeDropdown !== null;
+        return (h(Host, { key: '56ca144ca11afcaeb86bbdbab52aee47c8a4e8db', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: '8ccc05b735246db5ca63ee2ad4546dbafda8c949', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '10d422e2fb0ae5c227522813da2f3f788e144074', class: "navbar-container" }, h("div", { key: 'b7062b1ead44808b1df54776c34833e7d710cc8e', class: "navbar" }, h("div", { key: 'fd88961f3744b8f38a27541d19ba59bd3b50a537', class: "navbar-left" }, h("div", { key: '1747708e1970b53acca93f8f1e902aadf99b094e', class: "logo" }, h("slot", { key: '30cd58a1cb5419f84044b8ff31b5646c916648a9', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: 'df1ae72b0689352b823499e5d01e39166077fcfe' }))), h("button", { key: '93c3d9c6a21cfb056958f81b774b373acd9b3565', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '3fd2c86dc4c90818d5c9227f2b8a86af7b4e9759', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'c65a49fc343293508a5112f0aa41aa04c3fc2062', name: "start" }))), h("div", { key: 'c0e23ee412e251b927db5557b30d44ea356db74a', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'b770b0a10f9f01c7314464dd1a8925b92190b394', class: "nav-actions" }, h("slot", { key: '597e24b9a726a7b050640f17d13c4082e643ed68', name: "end" })), h("div", { key: '15930743487c7719ea81df36ecbdf349a44faa32', class: "nav-button" }, h("slot", { key: '445dd032e53ab524cee0c55e2183f9062b9f2ee0', name: "button" })))), h("div", { key: '462113ba1fd1465baae3eb06d8a0a6153b3879f7', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'f88a39284ae6bb4596b9d5bb50e300b301714445', class: "dropdown-panel" }, h("slot", { key: '7b0e453d4f87c1e50b0557f72c16a77362825eb5', name: "dropdown-solutions" }), h("slot", { key: 'd4988f12dadfa08037d93adf8199cb82ae87fde3', name: "dropdown-pricing" }), h("slot", { key: 'ac7fee5d8cc9eae53a4ac2974f833869e5df3921', name: "dropdown-resources" }), h("slot", { key: 'c32254e0fa9b96f1d56a03430141c3d5854e5099', name: "dropdown" })))), this.mobileMenuOpen && (h("div", { key: 'a50c1ca35d99949f619960898fcb2e37211f5445', class: "mobile-dropdowns" }, h("slot", { key: '2539233c4536572946776249f40bfaa993939213', name: "mobile-menu" })))));
+    }
+    get el() { return this; }
+    static get style() { return afNavbarCss; }
+}, [257, "af-navbar", {
+        "showDefaultLogo": [4, "show-default-logo"],
+        "theme": [1],
+        "mobileMenuOpen": [32],
+        "activeDropdown": [32]
+    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-navbar", "af-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-navbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavbar);
+            }
+            break;
+        case "af-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AfNavbar as A, defineCustomElement as d };
+//# sourceMappingURL=p-_bQXTXUb.js.map
+
+//# sourceMappingURL=p-_bQXTXUb.js.map

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

@@ -0,0 +1 @@
+{"file":"p-_bQXTXUb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=shadow","src/components/af-navbar/af-navbar.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Spacer element that sits in normal document flow to prevent content overlap */\n.navbar-spacer {\n  height: 100px; /* Accounts for navbar height + top margin */\n}\n\n/* Theme variants for spacer background - matches section themes */\n.navbar-spacer.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/* Sticky navbar that floats above the spacer */\n.navbar-container {\n  position: fixed;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  padding: 0 80px;\n  box-sizing: border-box;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n  flex-wrap: nowrap; /* Prevent wrapping */\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n  display: none;\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n  display: block;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Dropdown container */\n.dropdown-container {\n  position: absolute;\n  top: 108px;\n  left: 0;\n  right: 0;\n  padding: 0 80px;\n  pointer-events: none;\n  opacity: 0;\n  transform: translateY(-8px);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.dropdown-panel {\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n  overflow: hidden;\n  box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);\n}\n\n/* Hide empty dropdown slots */\n.dropdown-panel:empty {\n  display: none;\n}\n\n/* Mobile dropdowns container */\n.mobile-dropdowns {\n  display: none;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n */\n@media (max-width: 1099px) {\n  .nav-actions {\n    display: none;\n  }\n  \n  .navbar-right {\n    gap: 0;\n  }\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-spacer {\n    height: 88px;\n  }\n\n  .navbar-container {\n    top: 24px;\n    padding: 0 40px;\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n\n  .dropdown-container {\n    padding: 0 40px;\n  }\n}\n\n/* \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n */\n@media (max-width: 991px) {\n  .navbar-spacer {\n    height: 72px;\n  }\n\n  .navbar-container {\n    top: 16px;\n    padding: 0 16px;\n  }\n\n  .navbar {\n    padding: 8px 16px;\n    flex-direction: column;\n    border-radius: 16px;\n    gap: 0;\n    flex-wrap: wrap; /* Allow wrapping in mobile menu */\n  }\n\n  .navbar-left {\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: 16px;\n  }\n\n  /* Show hamburger button on mobile */\n  .mobile-menu-toggle {\n    display: flex;\n  }\n\n  /* Hide nav links by default on mobile */\n  .nav-links {\n    display: none;\n    width: 100%;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    margin-top: 16px;\n    flex-wrap: wrap;\n  }\n\n  /* Show nav links when menu is open */\n  .nav-links.mobile-open {\n    display: flex;\n  }\n\n  /* Hide right section by default on mobile */\n  .navbar-right {\n    display: none;\n    width: 100%;\n    flex-direction: column;\n    gap: 12px;\n    align-items: stretch;\n    margin-top: 16px;\n  }\n\n  /* Show right section when menu is open */\n  .navbar-right.mobile-open {\n    display: flex;\n  }\n\n  /* Show nav-actions again in mobile menu */\n  .nav-actions {\n    display: flex;\n    width: 100%;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n  }\n\n  .nav-button {\n    width: 100%;\n  }\n\n  /* Hide desktop dropdown on mobile */\n  .dropdown-container {\n    display: none;\n  }\n\n  /* Show mobile dropdowns */\n  .mobile-dropdowns {\n    display: block;\n    padding: 0 16px;\n    margin-top: 8px;\n  }\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu dropdown slots */}\n        {this.mobileMenuOpen && (\n          <div class=\"mobile-dropdowns\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-l95vl6T1.js

@@ -0,0 +1,108 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+
+const afTabBarCss = ":host{display:block;width:100%}.tab-bar{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda)}.tab-bar::-webkit-scrollbar{height:4px}.tab-bar::-webkit-scrollbar-track{background:var(--af-scrollbar-track, #d1ddda);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb{background:var(--af-scrollbar-thumb, #8a7049);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb:hover{background:var(--af-scrollbar-thumb-hover, #8d785a)}.tab-bar.shape-square{gap:0;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}.tab-bar.shape-pill{gap:0;padding:var(--space-2, 8px);background-color:var(--af-background-level-1, #e8eeed);border-radius:var(--radius-pill, 999px)}.tab-bar.breakpoint-mobile{}.tab-bar.breakpoint-mobile.shape-square{}.tab-bar.breakpoint-mobile.shape-pill{padding:var(--space-1, 4px)}.tab-bar.breakpoint-desktop{}.tab-bar.breakpoint-desktop.shape-square{}.tab-bar.breakpoint-desktop.shape-pill{padding:var(--space-2, 8px)}";
+
+const AfTabBar = /*@__PURE__*/ proxyCustomElement(class AfTabBar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Visual shape variant for all tabs
+         * - `square` - Rectangular tabs with bottom border indicator
+         * - `pill` - Rounded pill tabs with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Responsive breakpoint mode
+         * - `mobile` - Compact layout with smaller padding
+         * - `desktop` - Larger layout with more generous spacing
+         */
+        this.breakpoint = 'desktop';
+    }
+    componentDidLoad() {
+        this.syncChildProps();
+    }
+    componentDidUpdate() {
+        this.syncChildProps();
+    }
+    /**
+     * Sync shape and breakpoint props to child af-tab elements
+     */
+    syncChildProps() {
+        const tabs = this.el.querySelectorAll('af-tab');
+        tabs.forEach((tab) => {
+            tab.setAttribute('shape', this.shape);
+            tab.setAttribute('data-breakpoint', this.breakpoint);
+        });
+    }
+    /**
+     * Handle keyboard navigation between tabs
+     */
+    handleKeyDown(event) {
+        const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])'));
+        const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);
+        if (currentIndex === -1)
+            return;
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        // Focus the button inside the shadow DOM of the tab
+        const targetTab = tabs[newIndex];
+        const button = targetTab.shadowRoot?.querySelector('button');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'tab-bar': true,
+            [`shape-${this.shape}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
+        };
+        return (h(Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
+    }
+    get el() { return this; }
+    static get style() { return afTabBarCss; }
+}, [257, "af-tab-bar", {
+        "shape": [513],
+        "breakpoint": [513]
+    }, [[0, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-tab-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-tab-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfTabBar);
+            }
+            break;
+    } });
+}
+
+export { AfTabBar as A, defineCustomElement as d };
+//# sourceMappingURL=p-l95vl6T1.js.map
+
+//# sourceMappingURL=p-l95vl6T1.js.map

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

@@ -0,0 +1 @@
+{"file":"p-l95vl6T1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles */\n:host {\n  display: block;\n  width: 100%;\n}\n\n.tab-bar {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/* Custom scrollbar for WebKit browsers */\n.tab-bar::-webkit-scrollbar {\n  height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n  background: var(--af-scrollbar-track, #d1ddda);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n  background: var(--af-scrollbar-thumb, #8a7049);\n  border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n  background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/* ==========================================================================\n   SHAPE: SQUARE\n   ========================================================================== */\n\n.tab-bar.shape-square {\n  gap: 0;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* ==========================================================================\n   SHAPE: PILL\n   ========================================================================== */\n\n.tab-bar.shape-pill {\n  gap: 0;\n  padding: var(--space-2, 8px);\n  background-color: var(--af-background-level-1, #e8eeed);\n  border-radius: var(--radius-pill, 999px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: MOBILE\n   ========================================================================== */\n\n.tab-bar.breakpoint-mobile {\n  /* Mobile uses compact spacing */\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n  /* Tabs handle their own padding in mobile */\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n  padding: var(--space-1, 4px);\n}\n\n/* ==========================================================================\n   BREAKPOINT: DESKTOP\n   ========================================================================== */\n\n.tab-bar.breakpoint-desktop {\n  /* Desktop uses more generous spacing */\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n  /* Tabs handle their own padding in desktop mode */\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n  padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}