@affinda/wc 0.0.14 → 0.0.16

package/dist/collection/components/af-logo-well/af-logo-well.css

@@ -3,8 +3,9 @@
 }
 
 .logo-well {
-  background: rgb(32, 62, 69); /* Slightly lighter than inkwell for contrast */
-  border-radius: 16px;
+  /* Use theme variable from parent carousel, or fall back to dark theme default */
+  background: var(--af-carousel-logo-well-bg, var(--colour-background-level1-dark, #203e45));
+  border-radius: var(--radius-logo-well-desktop, 16px);
   height: 72px;
   width: 184px;
   display: flex;
@@ -21,7 +22,8 @@
   height: auto;
   display: block;
   object-fit: contain;
-  filter: brightness(0) invert(1); /* Make logos white */
+  /* Use logo filter from parent theme, default to white logos for dark backgrounds */
+  filter: var(--af-carousel-logo-filter, brightness(0) invert(1));
 }
 
 ::slotted(svg) {
@@ -30,13 +32,22 @@
   width: auto;
   height: auto;
   display: block;
+  /* SVG color inherits from parent */
+  color: var(--af-carousel-logo-color, white);
 }
 
 ::slotted(div) {
   white-space: nowrap;
-  color: white;
+  color: var(--af-carousel-logo-color, white);
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
   font-weight: 600;
   font-size: 16px;
 }
 
+/* Mobile adjustments */
+@media (max-width: 767px) {
+  .logo-well {
+    border-radius: var(--radius-logo-well-mobile, 12px);
+    padding: 20px 24px;
+  }
+}

package/dist/collection/components/af-logo-well/af-logo-well.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: 'b99aefd4635d21c0072b89923619b95a0497251e' }, h("div", { key: 'e35b23d12938521ba306c0499516434d25cd66f2', class: "logo-well" }, h("slot", { key: 'd1894aec9b2136b288de9e9c508bbaa12fd4a612' }))));
+        return (h(Host, { key: 'f64c4eb4974d71972365ba55c49b54bd1667d157' }, h("div", { key: '1192eb30a0dcb0426d15b23148f9f48b2ded06d4', class: "logo-well" }, h("slot", { key: 'f62638c5fab67512858baf0756c38ce45546dd0e' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,70 @@
+:host {
+  display: block;
+}
+
+.card-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+/* Card container */
+.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 {
+  transform: scale(1.02);
+}
+
+/* Image container */
+.image-container {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+/* Gradient overlay */
+.overlay {
+  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 */
+.heading {
+  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 .heading {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,138 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A navigation card component for featured article content in mega-menu dropdowns.
+ * Displays an image with a gradient overlay and headline text.
+ *
+ * **Usage:**
+ * - Place in the `sidebar` slot of NavMenuNest
+ * - Provide imageSrc, heading, and href props
+ *
+ * **Hover behavior:**
+ * - Slight scale effect (1.02)
+ * - Headline underline
+ */
+export class AfNavCard {
+    constructor() {
+        /**
+         * 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 is() { return "af-nav-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-nav-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-nav-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The headline text displayed over the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to navigate to when clicked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL for the background"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-src"
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+}
+//# sourceMappingURL=af-nav-card.js.map

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

@@ -0,0 +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"]}

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

@@ -39,6 +39,11 @@
   color: var(--colour-typography-nav-item-primary, #14343b);
 }
 
+/* Add transparent border to prevent layout shift on hover */
+.hierarchy-primary.variant-01 .label-container {
+  border-bottom: 1px solid transparent;
+}
+
 /* Primary variant 02 - lighter for light backgrounds */
 .hierarchy-primary.variant-02 {
   font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);
@@ -48,14 +53,16 @@
   color: var(--colour-typography-nav-item-secondary, #2b484f);
 }
 
-/* Hover state for primary variant-01 (dark backgrounds) - underline */
+/* Hover state for primary variant-01 - show underline */
 .hierarchy-primary.variant-01:hover .label-container {
-  border-bottom: 1px solid currentColor;
+  border-bottom-color: currentColor;
 }
 
 /* Active state for primary variant-01 - thicker border */
 .hierarchy-primary.variant-01.active .label-container {
-  border-bottom: 2px solid #8a7049;
+  border-bottom: 2px solid var(--colour-background-border-active, #8a7049);
+  /* Adjust margin to prevent shift from 1px to 2px border */
+  margin-bottom: -1px;
 }
 
 /* Hover and active states for variant-02 (light backgrounds) - no border */
@@ -79,68 +86,194 @@
   align-items: center;
   flex: 1;
   min-height: 24px;
-  gap: 8px;
+  gap: 10px;
 }
 
 /* Secondary variant 01 - medium weight */
 .hierarchy-secondary.variant-01 {
-  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
+  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: #14343b;
+  color: var(--colour-typography-body-dark, #14343b);
 }
 
 /* Secondary variant 02 - regular weight */
 .hierarchy-secondary.variant-02 {
-  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
+  font-family: var(--typography-bodyfont, 'NeuSans', 'Inter', system-ui, sans-serif);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-  color: #2b484f;
+  color: var(--colour-typography-body-default, #2b484f);
 }
 
 /* Hover state for secondary - underline text */
-.hierarchy-secondary:hover ::slotted(*) {
+.hierarchy-secondary:hover .label-container {
   text-decoration: underline;
 }
 
-/* Mobile styles */
-@media (max-width: 767px) {
-  .hierarchy-primary {
+/* Focus states for accessibility */
+.nav-item:focus-within {
+  outline: 2px solid var(--colour-background-border-active, #8a7049);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Remove default focus outline on link */
+.nav-link:focus {
+  outline: none;
+}
+
+.nav-link:focus-visible + .nav-item,
+:host(:focus-visible) .nav-item {
+  outline: 2px solid var(--colour-background-border-active, #8a7049);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Mobile breakpoint styles - explicit via prop */
+.hierarchy-primary.breakpoint-mobile {
+  padding: 20px 12px;
+  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.hierarchy-primary.breakpoint-mobile .label-container {
+  flex: 1;
+  justify-content: flex-start;
+}
+
+.hierarchy-primary.variant-01.breakpoint-mobile {
+  font-size: 20px;
+  line-height: 1.1;
+  letter-spacing: -0.4px;
+}
+
+.hierarchy-primary.variant-02.breakpoint-mobile {
+  font-size: 20px;
+  line-height: 1.1;
+  letter-spacing: -0.4px;
+  color: var(--colour-typography-body-subtle, #60767b);
+}
+
+/* Mobile breakpoint for secondary hierarchy */
+.hierarchy-secondary.breakpoint-mobile {
+  padding: 2px 0;
+  height: 40px;
+}
+
+.hierarchy-secondary.breakpoint-mobile .label-container {
+  min-height: 24px;
+}
+
+/* Mobile removes the hover underline effect */
+.hierarchy-primary.breakpoint-mobile.variant-01 .label-container {
+  border-bottom-color: transparent;
+}
+
+.hierarchy-primary.breakpoint-mobile.variant-01:hover .label-container {
+  border-bottom-color: transparent;
+}
+
+.hierarchy-primary.breakpoint-mobile.variant-01.active .label-container {
+  border-bottom-color: transparent;
+  margin-bottom: 0;
+}
+
+/* Icon sizing and styling */
+::slotted([slot="icon-left"]),
+::slotted([slot="icon-right"]) {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+/* Icon color inheritance for primary hierarchy */
+.hierarchy-primary.variant-01 ::slotted([slot="icon-left"]),
+.hierarchy-primary.variant-01 ::slotted([slot="icon-right"]) {
+  color: var(--colour-typography-nav-item-primary, #14343b);
+}
+
+.hierarchy-primary.variant-02 ::slotted([slot="icon-left"]),
+.hierarchy-primary.variant-02 ::slotted([slot="icon-right"]) {
+  color: var(--colour-typography-nav-item-secondary, #2b484f);
+}
+
+/* Icon rotation on hover for desktop primary with dropdown indicator */
+.hierarchy-primary.variant-01.breakpoint-desktop:hover ::slotted([slot="icon-right"]),
+.hierarchy-primary.variant-01.breakpoint-desktop.active ::slotted([slot="icon-right"]) {
+  transform: rotate(180deg);
+}
+
+/* Icon rotation on active for mobile primary with dropdown indicator */
+.hierarchy-primary.breakpoint-mobile.active ::slotted([slot="icon-right"]) {
+  transform: rotate(180deg);
+}
+
+/* Secondary hierarchy - smaller icons */
+.hierarchy-secondary ::slotted([slot="icon-right"]) {
+  width: 20px;
+  height: 20px;
+}
+
+/* Icon color inheritance for secondary hierarchy */
+.hierarchy-secondary.variant-01 ::slotted([slot="icon-right"]) {
+  color: var(--colour-typography-body-dark, #14343b);
+}
+
+.hierarchy-secondary.variant-02 ::slotted([slot="icon-right"]) {
+  color: var(--colour-typography-body-default, #2b484f);
+}
+
+/* Fallback media query for when breakpoint prop is not set */
+@media (max-width: 991px) {
+  :host([breakpoint="auto"]) .hierarchy-primary,
+  :host(:not([breakpoint])) .hierarchy-primary {
     padding: 20px 12px;
-    border-bottom: 1px solid #e8eeed;
+    border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
     width: 100%;
   }
 
-  .hierarchy-primary .label-container {
+  :host([breakpoint="auto"]) .hierarchy-primary .label-container,
+  :host(:not([breakpoint])) .hierarchy-primary .label-container {
     flex: 1;
     justify-content: flex-start;
   }
 
-  .hierarchy-primary.variant-01 {
+  :host([breakpoint="auto"]) .hierarchy-primary.variant-01,
+  :host(:not([breakpoint])) .hierarchy-primary.variant-01 {
     font-size: 20px;
     line-height: 1.1;
     letter-spacing: -0.4px;
   }
 
-  .hierarchy-primary.variant-02 {
+  :host([breakpoint="auto"]) .hierarchy-primary.variant-02,
+  :host(:not([breakpoint])) .hierarchy-primary.variant-02 {
     font-size: 20px;
     line-height: 1.1;
     letter-spacing: -0.4px;
-    color: #60767b;
+    color: var(--colour-typography-body-subtle, #60767b);
   }
-}
 
-/* Icon sizing */
-::slotted([slot="icon-left"]),
-::slotted([slot="icon-right"]) {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
+  /* Icon rotation on active for auto/responsive breakpoint */
+  :host([breakpoint="auto"]) .hierarchy-primary.active ::slotted([slot="icon-right"]),
+  :host(:not([breakpoint])) .hierarchy-primary.active ::slotted([slot="icon-right"]) {
+    transform: rotate(180deg);
+  }
 
-.hierarchy-secondary ::slotted([slot="icon-right"]) {
-  width: 20px;
-  height: 20px;
+  /* Disable desktop hover rotation in mobile view */
+  :host([breakpoint="auto"]) .hierarchy-primary:hover ::slotted([slot="icon-right"]),
+  :host(:not([breakpoint])) .hierarchy-primary:hover ::slotted([slot="icon-right"]) {
+    transform: none;
+  }
+
+  :host([breakpoint="auto"]) .hierarchy-primary.active:hover ::slotted([slot="icon-right"]),
+  :host(:not([breakpoint])) .hierarchy-primary.active:hover ::slotted([slot="icon-right"]) {
+    transform: rotate(180deg);
+  }
 }

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

@@ -17,6 +17,12 @@ export class AfNavItem {
          * - '02': Lighter/more subtle styling
          */
         this.variant = '01';
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Desktop-specific styles
+         * - 'mobile': Mobile-specific styles (larger text, different spacing)
+         */
+        this.breakpoint = 'desktop';
         /**
          * Whether this nav item is currently active/selected
          */
@@ -27,6 +33,7 @@ export class AfNavItem {
             'nav-item': true,
             [`hierarchy-${this.hierarchy}`]: true,
             [`variant-${this.variant}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
             'active': this.active
         };
         const content = (h("div", { class: classes }, h("slot", { name: "icon-left" }), h("div", { class: "label-container" }, h("slot", null)), h("slot", { name: "icon-right" })));
@@ -89,6 +96,26 @@ export class AfNavItem {
                 "attribute": "variant",
                 "defaultValue": "'01'"
             },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'desktop' | 'mobile'",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint variant for responsive styling\n- 'desktop': Desktop-specific styles\n- 'mobile': Mobile-specific styles (larger text, different spacing)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            },
             "href": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"af-nav-item.js","sourceRoot":"","sources":["../../../src/components/af-nav-item/af-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAME;;;;WAIG;QACK,cAAS,GAA4B,SAAS,CAAC;QAEvD;;;;WAIG;QACK,YAAO,GAAgB,IAAI,CAAC;QAOpC;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;KAgCjC;IA9BC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,QAAQ,EAAE,IAAI,CAAC,MAAM;SACtB,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,WAAK,KAAK,EAAE,OAAO;YACjB,YAAM,IAAI,EAAC,WAAW,GAAQ;YAC9B,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,eAAa,CACT;YACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,IACjC,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,OAAO,CAAQ,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: true\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"]}
+{"version":3,"file":"af-nav-item.js","sourceRoot":"","sources":["../../../src/components/af-nav-item/af-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAME;;;;WAIG;QACK,cAAS,GAA4B,SAAS,CAAC;QAEvD;;;;WAIG;QACK,YAAO,GAAgB,IAAI,CAAC;QAEpC;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAOrD;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;KAiCjC;IA/BC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACvC,QAAQ,EAAE,IAAI,CAAC,MAAM;SACtB,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,WAAK,KAAK,EAAE,OAAO;YACjB,YAAM,IAAI,EAAC,WAAW,GAAQ;YAC9B,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,eAAa,CACT;YACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,IACjC,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,OAAO,CAAQ,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: true\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"]}

package/dist/collection/components/af-nav-menu/af-nav-menu.css

@@ -0,0 +1,91 @@
+:host {
+  display: block;
+}
+
+.nav-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+/* Desktop styles */
+.nav-menu.breakpoint-desktop {
+  padding: 0;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+/* Border is now controlled by parent NavMenuNest via ::slotted()
+   Use showBorder prop only when NavMenu is used standalone */
+.nav-menu.breakpoint-desktop.has-border {
+  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  padding-right: 32px;
+  padding-top: 16px;
+}
+
+/* Mobile styles */
+.nav-menu.breakpoint-mobile {
+  padding: 32px 12px;
+  width: 100%;
+  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+}
+
+/* Menu header */
+.menu-header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+}
+
+.menu-heading {
+  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(--colour-typography-heading-secondary, #8a7049);
+  flex: 1 0 0;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+/* Mobile heading adjustments */
+.nav-menu.breakpoint-mobile .menu-heading {
+  line-height: 1.1;
+}
+
+/* Menu items container */
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* Mobile items with left padding */
+.nav-menu.breakpoint-mobile .menu-items {
+  padding-left: 24px;
+}
+
+/* Slot styling for nav-items */
+::slotted(af-nav-item) {
+  width: 100%;
+}
+
+/* Card style variant - adds background and rounded corners */
+.nav-menu.card-style {
+  background: var(--colour-background-level-1, #e8eeed);
+  border-radius: var(--radii-card-level-1, 32px);
+  padding: 40px;
+}
+
+.nav-menu.card-style.breakpoint-desktop {
+  flex: 1 0 0;
+  align-self: stretch;
+}
+