@affinda/wc 0.0.17 → 0.0.18

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

@@ -0,0 +1,185 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Navigation-styled accordion for mobile menu patterns.
+ * A wrapper around af-accordion with navigation-specific styling.
+ *
+ * @slot - Place af-nav-accordion-item components here
+ */
+export class AfNavAccordion {
+    constructor() {
+        /**
+         * 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: '891409dbe4cbb089085aa5b942c5f3c9f4a9bfe5', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'b52051c0d7df92a5bc34400b55156fb638acbccc', class: "nav-accordion" }, h("slot", { key: '86cbd9894e0c8bb44d8001a53df01822b8806542' }))));
+    }
+    static get is() { return "af-nav-accordion"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-nav-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-nav-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'independent' | 'exclusive'",
+                    "resolved": "\"exclusive\" | \"independent\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'exclusive'"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'desktop' | 'mobile'",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint for styling\n- `desktop`: Desktop-specific styles\n- `mobile`: Mobile-specific styles (default for nav menus)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "breakpoint",
+                "defaultValue": "'mobile'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently open item ID(s)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navAccordionChange",
+                "name": "af-nav-accordion-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the open state of items changes"
+                },
+                "complexType": {
+                    "original": "{ value: string | string[] | null }",
+                    "resolved": "{ value: string | string[] | null; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "af-nav-accordion-item-toggle",
+                "method": "handleItemToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=af-nav-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-accordion.js","sourceRoot":"","sources":["../../../src/components/af-nav-accordion/af-nav-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/af-nav-accordion-item/af-nav-accordion-item.css

@@ -0,0 +1,146 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.nav-accordion-item {
+  width: 100%;
+}
+
+/* Trigger button/link - clickable header */
+.trigger {
+  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 {
+  color: inherit;
+}
+
+.trigger:hover:not(:disabled) {
+  background-color: rgba(20, 52, 59, 0.02);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));
+  outline-offset: -2px;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Trigger content */
+.trigger-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+/* Label styling - matches NavItem primary-01 mobile */
+.label {
+  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 indicator */
+.chevron,
+.chevron-button {
+  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 {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.chevron-button:hover {
+  opacity: 0.7;
+}
+
+.chevron.is-open {
+  transform: rotate(180deg);
+}
+
+/* Content wrapper - handles animation */
+.content-wrapper {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.content {
+  padding: 0;
+  background: var(--af-background-base, white);
+}
+
+/* Disabled state */
+:host(.is-disabled) .trigger {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:host(.is-disabled) .trigger:hover {
+  background-color: transparent;
+}
+
+/* Open state styling */
+:host(.is-open) .trigger {
+  border-bottom-color: transparent;
+}
+
+/* Mobile breakpoint styling */
+:host(.breakpoint-mobile) .trigger {
+  padding: 20px 12px;
+}
+
+:host(.breakpoint-mobile) .label {
+  font-size: 20px;
+  line-height: 1.1;
+  letter-spacing: -0.4px;
+}
+
+/* Desktop breakpoint styling */
+:host(.breakpoint-desktop) .trigger {
+  padding: 12px;
+}
+
+:host(.breakpoint-desktop) .label {
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0;
+}
+
+/* Nested content uses different padding */
+:host(.breakpoint-mobile) .content {
+  padding-left: 0;
+}
+

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

@@ -0,0 +1,265 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Navigation accordion item with NavItem-styled trigger.
+ * Combines navigation item styling with accordion collapse behavior.
+ *
+ * @slot trigger - Custom trigger content (optional - uses label if not provided)
+ * @slot - The collapsible content (typically NavMenuNest or NavMenu components)
+ */
+export class AfNavAccordionItem {
+    constructor() {
+        /**
+         * 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.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();
+        }
+    }
+    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'
+        };
+        const hasDropdownContent = true; // Assume content is always present for accordion items
+        return (h(Host, { key: 'c60d17b2939f91ff7224f4eb156ed90645288c3c', class: {
+                'is-open': this.open,
+                'is-disabled': this.disabled,
+                [`breakpoint-${this.breakpoint}`]: true
+            } }, h("div", { key: '8fc7a72d88e6ab275ec9828098cc3aa70e2dcf58', 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))), 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: '4fb193591c092154364f98e0a1677c2dfee9cad9', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '1aa3437d93630a60dbce5163cdd1ceae1d234213', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '2eea67c87eaccd58d180ec89ffae7f58785fb5c4' }))))));
+    }
+    static get is() { return "af-nav-accordion-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-nav-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-nav-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "itemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this accordion item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "item-id"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the navigation item trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is currently expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional href - if provided, clicking navigates instead of expanding\n(chevron area would still toggle expansion if both behaviors needed)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'desktop' | 'mobile'",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint for styling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "breakpoint",
+                "defaultValue": "'mobile'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentHeight": {},
+            "hasTriggerSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navAccordionItemToggle",
+                "name": "af-nav-accordion-item-toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the accordion item is toggled"
+                },
+                "complexType": {
+                    "original": "{ itemId: string; open: boolean }",
+                    "resolved": "{ itemId: string; open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically toggle the accordion item",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=af-nav-accordion-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-accordion-item.js","sourceRoot":"","sources":["../../../src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"names":[],"mappings":"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","sourcesContent":["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\n  private contentRef?: HTMLElement;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.measureContent();\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    const hasDropdownContent = true; // Assume content is always present for accordion items\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              <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\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"]}

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

@@ -37,7 +37,7 @@ export class AfNavCard {
         return h(Host, null, content);
     }
     static get is() { return "af-nav-card"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["af-nav-card.css"]

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

@@ -1 +1 @@
-{"version":3,"file":"af-nav-card.js","sourceRoot":"","sources":["../../../src/components/af-nav-card/af-nav-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,SAAS;IALtB;QAqBE;;WAEG;QACK,aAAQ,GAAW,EAAE,CAAC;QAErB,cAAS,GAAY,KAAK,CAAC;QAE5B,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;KAuCH;IArCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,WACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB;YAEnC,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAG,CACnE,CACG;YACN,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,IAAI,CACf,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACG,CACF,CACP,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,IAClC,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,OAAO,CAAQ,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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: 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,"file":"af-nav-card.js","sourceRoot":"","sources":["../../../src/components/af-nav-card/af-nav-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,SAAS;IANtB;QAsBE;;WAEG;QACK,aAAQ,GAAW,EAAE,CAAC;QAErB,cAAS,GAAY,KAAK,CAAC;QAE5B,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;KAuCH;IArCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,WACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB;YAEnC,WAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,GAAG,CACnE,CACG;YACN,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,IAAI,CACf,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACG,CACF,CACP,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,IAClC,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,OAAO,CAAQ,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}