@affinda/wc 0.0.25 → 0.0.27

package/dist/components/af-nav-accordion-item.js

@@ -1 +1,133 @@
-import{p as t,H as e,d as a,h as i,c as n,t as o}from"./p-DsNqeD3z.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.navAccordionItemToggle=a(this,"af-nav-accordion-item-toggle"),this.open=!1,this.disabled=!1,this.breakpoint="mobile",this.contentHeight=0,this.hasTriggerSlot=!1,this.hasContent=!1,this.handleTriggerClick=t=>{this.href||(t.preventDefault(),this.toggle())},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||this.href||(t.preventDefault(),this.toggle())},this.handleSlotChange=t=>{this.hasTriggerSlot=t.target.assignedNodes().length>0}}handleOpenChange(t){t&&this.measureContent()}componentWillLoad(){this.hasContent=Array.from(this.el.children).some((t=>!t.hasAttribute("slot")))}componentDidLoad(){this.open&&this.measureContent()}async toggle(){this.disabled||this.href||(this.open=!this.open,this.navAccordionItemToggle.emit({itemId:this.itemId,open:this.open}))}measureContent(){this.contentRef&&(this.contentHeight=this.contentRef.scrollHeight)}render(){const t={maxHeight:this.open?this.contentHeight+"px":"0px"},e=this.hasContent;return i(n,{key:"959165c0c1ba72e3e3e33956862a47a9e080ce91",class:{"is-open":this.open,"is-disabled":this.disabled,["breakpoint-"+this.breakpoint]:!0}},i("div",{key:"7edc90a2480aa453ca8407acf31c6af8c44bc9ab",class:"nav-accordion-item"},this.href?i("a",{href:this.href,class:"trigger","aria-expanded":this.open?"true":"false","aria-controls":"content-"+this.itemId},i("div",{class:"trigger-content"},i("slot",{name:"trigger",onSlotchange:this.handleSlotChange},i("span",{class:"label"},this.label))),e&&i("button",{class:"chevron-button",onClick:t=>{t.preventDefault(),t.stopPropagation(),this.toggle()},"aria-label":this.open?"Collapse":"Expand",type:"button"},i("div",{class:{chevron:!0,"is-open":this.open}},i("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},i("path",{d:"M6 9l6 6 6-6","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))))):i("button",{class:"trigger",onClick:this.handleTriggerClick,onKeyDown:this.handleKeyDown,"aria-expanded":this.open?"true":"false","aria-controls":"content-"+this.itemId,disabled:this.disabled,type:"button"},i("div",{class:"trigger-content"},i("slot",{name:"trigger",onSlotchange:this.handleSlotChange},i("span",{class:"label"},this.label))),e&&i("div",{class:{chevron:!0,"is-open":this.open}},i("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},i("path",{d:"M6 9l6 6 6-6","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("div",{key:"826855c6ca16a807c1f4dec417c771c8bbdc0966",id:"content-"+this.itemId,class:"content-wrapper",style:t,"aria-hidden":this.open?"false":"true"},i("div",{key:"9a614290248120ad48b7658fbeecb8d4e83e53db",class:"content",ref:t=>this.contentRef=t},i("slot",{key:"dd22fe45b6ad6f7a7c39b1a0a1055421b7b80a51"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return".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}"}},[262,"af-nav-accordion-item",{itemId:[513,"item-id"],label:[1],open:[1540],disabled:[516],href:[1],breakpoint:[513],contentHeight:[32],hasTriggerSlot:[32],hasContent:[32],toggle:[64]},void 0,{open:[{handleOpenChange:0}]}]),s=r,c=function(){"undefined"!=typeof customElements&&["af-nav-accordion-item"].forEach((t=>{"af-nav-accordion-item"===t&&(customElements.get(o(t))||customElements.define(o(t),r))}))};export{s as AfNavAccordionItem,c as defineCustomElement}
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BBpihWJI.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 AfNavAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class AfNavAccordionItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.navAccordionItemToggle = createEvent(this, "af-nav-accordion-item-toggle");
+        /**
+         * Whether this item is currently expanded
+         */
+        this.open = false;
+        /**
+         * Whether this item is disabled
+         */
+        this.disabled = false;
+        /**
+         * Breakpoint for styling
+         */
+        this.breakpoint = 'mobile';
+        this.contentHeight = 0;
+        this.hasTriggerSlot = false;
+        this.hasContent = false;
+        this.handleTriggerClick = (event) => {
+            // If it's a link, let it navigate (unless they clicked the chevron specifically)
+            if (this.href) {
+                return;
+            }
+            event.preventDefault();
+            this.toggle();
+        };
+        this.handleKeyDown = (event) => {
+            if ((event.key === 'Enter' || event.key === ' ') && !this.href) {
+                event.preventDefault();
+                this.toggle();
+            }
+        };
+        this.handleSlotChange = (event) => {
+            const slot = event.target;
+            this.hasTriggerSlot = slot.assignedNodes().length > 0;
+        };
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.measureContent();
+        }
+    }
+    /**
+     * Detect whether the host has any default-slot children — i.e. whether
+     * this item expands to reveal a sub-menu, or is just a simple link.
+     * We check in componentWillLoad (before render) because after render
+     * Stencil has appended its own output to the host and this.el.children
+     * would include that.
+     */
+    componentWillLoad() {
+        this.hasContent = Array.from(this.el.children).some((child) => !child.hasAttribute('slot'));
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.measureContent();
+        }
+    }
+    /**
+     * Programmatically toggle the accordion item
+     */
+    async toggle() {
+        if (!this.disabled && !this.href) {
+            this.open = !this.open;
+            this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });
+        }
+    }
+    measureContent() {
+        if (this.contentRef) {
+            this.contentHeight = this.contentRef.scrollHeight;
+        }
+    }
+    render() {
+        const contentStyle = {
+            maxHeight: this.open ? `${this.contentHeight}px` : '0px'
+        };
+        // Only render the chevron toggle when this item actually has
+        // sub-content to expand. A plain href item with no children is a
+        // direct link and shouldn't show a disclosure affordance.
+        const hasDropdownContent = this.hasContent;
+        return (h(Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
+                'is-open': this.open,
+                'is-disabled': this.disabled,
+                [`breakpoint-${this.breakpoint}`]: true
+            } }, h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return afNavAccordionItemCss; }
+}, [262, "af-nav-accordion-item", {
+        "itemId": [513, "item-id"],
+        "label": [1],
+        "open": [1540],
+        "disabled": [516],
+        "href": [1],
+        "breakpoint": [513],
+        "contentHeight": [32],
+        "hasTriggerSlot": [32],
+        "hasContent": [32],
+        "toggle": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-accordion-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavAccordionItem$1);
+            }
+            break;
+    } });
+}
+
+const AfNavAccordionItem = AfNavAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavAccordionItem, defineCustomElement };
+//# sourceMappingURL=af-nav-accordion-item.js.map
+
+//# sourceMappingURL=af-nav-accordion-item.js.map

package/dist/components/af-nav-accordion-item.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-accordion-item.js","mappings":"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","names":["AfNavAccordionItem","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/af-nav-accordion.js

@@ -1 +1,106 @@
-import{p as e,H as t,d as s,h as i,c as a,t as c}from"./p-DsNqeD3z.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.navAccordionChange=s(this,"af-nav-accordion-change"),this.mode="exclusive",this.breakpoint="mobile",this.internalValue=[]}componentWillLoad(){this.internalValue=this.normalizeValue(this.value)}handleItemToggle(e){e.stopPropagation();const{itemId:t,open:s}=e.detail;let i;i="exclusive"===this.mode?s?[t]:[]:s?[...this.internalValue,t]:this.internalValue.filter((e=>e!==t)),this.internalValue=i,this.syncItems(),this.navAccordionChange.emit({value:"exclusive"===this.mode?i.length>0?i[0]:null:i})}normalizeValue(e){return null==e?[]:Array.isArray(e)?"exclusive"===this.mode?e.slice(0,1):e:[e]}syncItems(){this.el.querySelectorAll("af-nav-accordion-item").forEach((e=>{e.itemId&&(e.open=this.internalValue.includes(e.itemId))}))}componentDidLoad(){this.syncItems()}render(){return i(a,{key:"9764092415b6f501cdbf38649e00d172bbbf8e12",class:{["breakpoint-"+this.breakpoint]:!0,["mode-"+this.mode]:!0}},i("div",{key:"c8dbefa2fcffc74ade77432b4a97e0decbc15823",class:"nav-accordion"},i("slot",{key:"688c01dc567713e5e1040b766f32f8d1a67b8d0f"})))}get el(){return this}static get style(){return".sc-af-nav-accordion-h{display:block;width:100%}.nav-accordion.sc-af-nav-accordion{display:flex;flex-direction:column;width:100%}"}},[262,"af-nav-accordion",{mode:[1],breakpoint:[513],value:[1025],internalValue:[32]},[[0,"af-nav-accordion-item-toggle","handleItemToggle"]]]),o=n,l=function(){"undefined"!=typeof customElements&&["af-nav-accordion"].forEach((e=>{"af-nav-accordion"===e&&(customElements.get(c(e))||customElements.define(c(e),n))}))};export{o as AfNavAccordion,l as defineCustomElement}
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BBpihWJI.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 AfNavAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfNavAccordion extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.navAccordionChange = createEvent(this, "af-nav-accordion-change");
+        /**
+         * Behavior mode for the accordion.
+         * - `independent`: Multiple items can be open simultaneously
+         * - `exclusive`: Only one item can be open at a time (typical for mobile nav)
+         */
+        this.mode = 'exclusive';
+        /**
+         * Breakpoint for styling
+         * - `desktop`: Desktop-specific styles
+         * - `mobile`: Mobile-specific styles (default for nav menus)
+         */
+        this.breakpoint = 'mobile';
+        this.internalValue = [];
+    }
+    componentWillLoad() {
+        this.internalValue = this.normalizeValue(this.value);
+    }
+    /**
+     * Listen for toggle events from child items
+     */
+    handleItemToggle(event) {
+        event.stopPropagation();
+        const { itemId, open } = event.detail;
+        let newValue;
+        if (this.mode === 'exclusive') {
+            newValue = open ? [itemId] : [];
+        }
+        else {
+            if (open) {
+                newValue = [...this.internalValue, itemId];
+            }
+            else {
+                newValue = this.internalValue.filter(id => id !== itemId);
+            }
+        }
+        this.internalValue = newValue;
+        this.syncItems();
+        const emitValue = this.mode === 'exclusive'
+            ? (newValue.length > 0 ? newValue[0] : null)
+            : newValue;
+        this.navAccordionChange.emit({ value: emitValue });
+    }
+    normalizeValue(value) {
+        if (value === undefined || value === null) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            return this.mode === 'exclusive' ? value.slice(0, 1) : value;
+        }
+        return [value];
+    }
+    syncItems() {
+        const items = this.el.querySelectorAll('af-nav-accordion-item');
+        items.forEach((element) => {
+            const item = element;
+            if (item.itemId) {
+                item.open = this.internalValue.includes(item.itemId);
+            }
+        });
+    }
+    componentDidLoad() {
+        this.syncItems();
+    }
+    render() {
+        return (h(Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
+    }
+    get el() { return this; }
+    static get style() { return afNavAccordionCss; }
+}, [262, "af-nav-accordion", {
+        "mode": [1],
+        "breakpoint": [513],
+        "value": [1025],
+        "internalValue": [32]
+    }, [[0, "af-nav-accordion-item-toggle", "handleItemToggle"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavAccordion$1);
+            }
+            break;
+    } });
+}
+
+const AfNavAccordion = AfNavAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavAccordion, defineCustomElement };
+//# sourceMappingURL=af-nav-accordion.js.map
+
+//# sourceMappingURL=af-nav-accordion.js.map

package/dist/components/af-nav-accordion.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-accordion.js","mappings":"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","names":["AfNavAccordion","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/af-nav-card.js

@@ -1 +1,62 @@
-import{p as a,H as e,h as t,c as i,t as s}from"./p-DsNqeD3z.js";const n=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.imageAlt="",this.isHovered=!1,this.handleMouseEnter=()=>{this.isHovered=!0},this.handleMouseLeave=()=>{this.isHovered=!1}}render(){const a=t("div",{class:{"nav-card":!0,"is-hovered":this.isHovered},onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},t("div",{class:"image-container"},this.imageSrc&&t("img",{src:this.imageSrc,alt:this.imageAlt,class:"card-image"})),t("div",{class:"overlay"},this.heading&&t("h3",{class:"heading"},this.heading)));return t(i,null,this.href?t("a",{href:this.href,class:"card-link"},a):a)}static get style(){return".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}"}},[2,"af-nav-card",{heading:[1],href:[1],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],isHovered:[32]}]),r=n,o=function(){"undefined"!=typeof customElements&&["af-nav-card"].forEach((a=>{"af-nav-card"===a&&(customElements.get(s(a))||customElements.define(s(a),n))}))};export{r as AfNavCard,o as defineCustomElement}
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.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 AfNavCard$1 = /*@__PURE__*/ proxyCustomElement(class AfNavCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Alternative text for the image
+         */
+        this.imageAlt = '';
+        this.isHovered = false;
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+        };
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+        };
+    }
+    render() {
+        const classes = {
+            'nav-card': true,
+            'is-hovered': this.isHovered
+        };
+        const content = (h("div", { class: classes, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { class: "image-container" }, this.imageSrc && (h("img", { src: this.imageSrc, alt: this.imageAlt, class: "card-image" }))), h("div", { class: "overlay" }, this.heading && (h("h3", { class: "heading" }, this.heading)))));
+        if (this.href) {
+            return (h(Host, null, h("a", { href: this.href, class: "card-link" }, content)));
+        }
+        return h(Host, null, content);
+    }
+    static get style() { return afNavCardCss; }
+}, [258, "af-nav-card", {
+        "heading": [1],
+        "href": [1],
+        "imageSrc": [1, "image-src"],
+        "imageAlt": [1, "image-alt"],
+        "isHovered": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavCard$1);
+            }
+            break;
+    } });
+}
+
+const AfNavCard = AfNavCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavCard, defineCustomElement };
+//# sourceMappingURL=af-nav-card.js.map
+
+//# sourceMappingURL=af-nav-card.js.map

package/dist/components/af-nav-card.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-card.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+kCAA+kC;;MCoBvlCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,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,IACX,WACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACzB,EAAA,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,EAAG,CAAA,CACnE,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,KACX,CAAI,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,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,EAClC,EAAA,OAAO,CACN,CACC;;QAIX,OAAO,CAAC,CAAA,IAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNavCard","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/af-nav-item.js

@@ -1 +1,9 @@
-import{A as o,d as s}from"./p-oawfHsaK.js";const a=o,p=s;export{a as AfNavItem,p as defineCustomElement}
+import { A as AfNavItem$1, d as defineCustomElement$1 } from './p-a9H_FzMp.js';
+
+const AfNavItem = AfNavItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavItem, defineCustomElement };
+//# sourceMappingURL=af-nav-item.js.map
+
+//# sourceMappingURL=af-nav-item.js.map

package/dist/components/af-nav-item.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-nav-menu-nest.js

@@ -1 +1,67 @@
-import{p as n,H as e,h as a,c as s,t}from"./p-DsNqeD3z.js";const m=n(class extends e{constructor(n){super(),!1!==n&&this.__registerHost(),this.type="solutions",this.breakpoint="desktop",this.showSidebarBorder=!0}render(){return a(s,{key:"8b256672578e162c65c1dd83b735f3fd8af8bb56"},a("div",{key:"1f009f9f0986790e3b330eec97fa5e9f63604108",class:{"nav-menu-nest":!0,"theme-white":!0,["type-"+this.type]:!0,["breakpoint-"+this.breakpoint]:!0}},a("div",{key:"db3540b0259d8474093e1d31c51e7ae1311700c0",class:"menu-columns"},a("slot",{key:"06c90ac9305b96d64bc86fcf16ba639db31c4d08"})),a("div",{key:"5ad8cb59dd4c88c6dadf38aac88df6697541ad52",class:"menu-sidebar"},a("slot",{key:"98a73cb259c755fa1efc70294772abf89d233581",name:"sidebar"}))))}static get style(){return".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)}"}},[262,"af-nav-menu-nest",{type:[1],breakpoint:[1],showSidebarBorder:[516,"show-sidebar-border"]}]),u=m,o=function(){"undefined"!=typeof customElements&&["af-nav-menu-nest"].forEach((n=>{"af-nav-menu-nest"===n&&(customElements.get(t(n))||customElements.define(t(n),m))}))};export{u as AfNavMenuNest,o as defineCustomElement}
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+
+const afNavMenuNestCss = ".sc-af-nav-menu-nest-h{display:inline-block}.nav-menu-nest.sc-af-nav-menu-nest{display:inline-flex;background:var(--af-background-base, #ffffff);border-radius:32px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest{flex-direction:row;align-items:stretch}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{display:flex;flex-direction:row;gap:32px;padding:24px 0 32px 40px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{display:flex;flex-direction:column;padding:24px 40px 32px 32px}.nav-menu-nest.breakpoint-desktop .menu-sidebar.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-sidebar .sc-af-nav-menu-nest-s>af-nav-menu{padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-sidebar.sc-af-nav-menu-nest-s>af-nav-card,.nav-menu-nest.breakpoint-desktop .menu-sidebar .sc-af-nav-menu-nest-s>af-nav-card{margin-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{flex:1 1 0;min-width:0;border-right:1px solid var(--af-background-border-subtle, #e8eeed);padding-right:32px;padding-top:16px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{border-right:none;padding-right:0}.sc-af-nav-menu-nest-h[show-sidebar-border] .nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{border-right:1px solid var(--af-background-border-heavy, #c6d5d1);padding-right:32px}@media (max-width: 1199px){.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{gap:20px;padding:20px 0 24px 24px}.nav-menu-nest.breakpoint-desktop.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{padding:20px 24px 24px 20px}.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{padding-right:20px}.sc-af-nav-menu-nest-h[show-sidebar-border] .nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu:last-of-type,.nav-menu-nest.breakpoint-desktop .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-desktop .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu:last-of-type{padding-right:20px}}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest{flex-direction:column;border-radius:0}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest .menu-columns.sc-af-nav-menu-nest{display:flex;flex-direction:column}.nav-menu-nest.breakpoint-mobile.sc-af-nav-menu-nest .menu-sidebar.sc-af-nav-menu-nest{display:flex;flex-direction:column;padding:32px 12px;border-top:1px solid var(--af-background-border-subtle, #e8eeed)}.nav-menu-nest.breakpoint-mobile .menu-columns.sc-af-nav-menu-nest-s>af-nav-menu,.nav-menu-nest.breakpoint-mobile .menu-columns .sc-af-nav-menu-nest-s>af-nav-menu{border-right:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}";
+
+const AfNavMenuNest$1 = /*@__PURE__*/ proxyCustomElement(class AfNavMenuNest extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * The type/variant of the mega-menu
+         * - 'solutions': Multi-column layout (3 columns + sidebar)
+         * - 'solutions-alt': Alternative solutions layout
+         * - 'resources': Multi-column layout with optional featured card
+         * - 'pricing': Simpler layout without sidebar
+         */
+        this.type = 'solutions';
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Horizontal multi-column layout
+         * - 'mobile': Vertical stacked layout
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether to show the heavier border on the last column (before sidebar).
+         * Set to `true` when sidebar has content, `false` when no sidebar.
+         * When `false`, the last column has no border.
+         */
+        this.showSidebarBorder = true;
+    }
+    render() {
+        const classes = {
+            'nav-menu-nest': true,
+            'theme-white': true,
+            [`type-${this.type}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true
+        };
+        return (h(Host, { key: '10f78b27ad9bb744415303815a0d332c521b97ce' }, h("div", { key: '1fd8d7624889e151a7051b0f8b2ee7c773ae4d60', class: classes }, h("div", { key: 'e2fefca6e151476e80c1b45d435bb72b623f8c15', class: "menu-columns" }, h("slot", { key: '321200c424b9e4b8b9f1f9cf101de1a2a4fdc742' })), h("div", { key: '8956a487218299d9735ece9a6ca9fe3a23828e0f', class: "menu-sidebar" }, h("slot", { key: '8cb04d5028ec97976d38b39a1b66f41600b7fa0f', name: "sidebar" })))));
+    }
+    static get style() { return afNavMenuNestCss; }
+}, [262, "af-nav-menu-nest", {
+        "type": [1],
+        "breakpoint": [1],
+        "showSidebarBorder": [516, "show-sidebar-border"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-menu-nest"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-menu-nest":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavMenuNest$1);
+            }
+            break;
+    } });
+}
+
+const AfNavMenuNest = AfNavMenuNest$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavMenuNest, defineCustomElement };
+//# sourceMappingURL=af-nav-menu-nest.js.map
+
+//# sourceMappingURL=af-nav-menu-nest.js.map

package/dist/components/af-nav-menu-nest.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-menu-nest.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,w9GAAw9G;;MC2Bp+GA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,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,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,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNavMenuNest","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/af-nav-menu.js

@@ -1 +1,65 @@
-import{p as e,H as a,h as n,c as t,t as s}from"./p-DsNqeD3z.js";const i=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.breakpoint="desktop",this.showBorder=!1,this.cardStyle=!1}render(){return n(t,{key:"11f883b5cc420ee5cb99c723cc492b7346c3761d"},n("div",{key:"c3261a46a80fcbbdbfc3d82ee43e4cb31f6de4d8",class:{"nav-menu":!0,["breakpoint-"+this.breakpoint]:!0,"has-border":this.showBorder,"card-style":this.cardStyle}},this.heading&&n("div",{key:"fd6f90c2bc9f34ef30efc22b49eb36bd6fd7ae52",class:"menu-header"},n("h3",{key:"5e80c33bdd36dcc23d3445fd92af76f69f28a7c8",class:"menu-heading"},this.heading)),n("div",{key:"6b62d13e30422c7f331350ec39ab2429f5a50294",class:"menu-items"},n("slot",{key:"49740ab88d6c957395b902f98526b60353af4be5"}))))}static get style(){return".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}"}},[262,"af-nav-menu",{heading:[1],breakpoint:[1],showBorder:[4,"show-border"],cardStyle:[516,"card-style"]}]),d=i,r=function(){"undefined"!=typeof customElements&&["af-nav-menu"].forEach((e=>{"af-nav-menu"===e&&(customElements.get(s(e))||customElements.define(s(e),i))}))};export{d as AfNavMenu,r as defineCustomElement}
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.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 AfNavMenu$1 = /*@__PURE__*/ proxyCustomElement(class AfNavMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Desktop-specific styles (right border, horizontal padding)
+         * - 'mobile': Mobile-specific styles (bottom border, vertical layout)
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether to show the right border separator.
+         * When used inside NavMenuNest, borders are controlled by the parent.
+         * Set to true only when using NavMenu standalone.
+         */
+        this.showBorder = false;
+        /**
+         * Whether to display as a card with background color and rounded corners.
+         * Used for highlighted sidebar menus (e.g., solutions-alt variant).
+         */
+        this.cardStyle = false;
+    }
+    render() {
+        const classes = {
+            'nav-menu': true,
+            [`breakpoint-${this.breakpoint}`]: true,
+            'has-border': this.showBorder,
+            'card-style': this.cardStyle
+        };
+        return (h(Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
+    }
+    static get style() { return afNavMenuCss; }
+}, [262, "af-nav-menu", {
+        "heading": [1],
+        "breakpoint": [1],
+        "showBorder": [4, "show-border"],
+        "cardStyle": [516, "card-style"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-nav-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-nav-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNavMenu$1);
+            }
+            break;
+    } });
+}
+
+const AfNavMenu = AfNavMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavMenu, defineCustomElement };
+//# sourceMappingURL=af-nav-menu.js.map
+
+//# sourceMappingURL=af-nav-menu.js.map

package/dist/components/af-nav-menu.js.map

@@ -0,0 +1 @@
+{"file":"af-nav-menu.js","mappings":";;AAAA,MAAM,YAAY,GAAG,69CAA69C;;MCYr+CA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,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,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNavMenu","__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/af-navbar.js

@@ -1 +1,9 @@
-import{A as o,d as s}from"./p-CYXTWxXF.js";const p=o,r=s;export{p as AfNavbar,r as defineCustomElement}
+import { A as AfNavbar$1, d as defineCustomElement$1 } from './p-tiZXMu0t.js';
+
+const AfNavbar = AfNavbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNavbar, defineCustomElement };
+//# sourceMappingURL=af-navbar.js.map
+
+//# sourceMappingURL=af-navbar.js.map

package/dist/components/af-navbar.js.map

@@ -0,0 +1 @@
+{"file":"af-navbar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}