@affinda/wc 0.0.15 → 0.0.16

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

@@ -1,20 +1,10 @@
 import { h, Host } from "@stencil/core";
 /**
- * Logo component with default Affinda branding
- * Can be customized with a custom logo URL or by using the slot
+ * Affinda logo component
  */
 export class AfLogo {
-    constructor() {
-        /** Alt text for the logo */
-        this.alt = 'Affinda';
-    }
     render() {
-        // If custom src is provided, use an img tag
-        if (this.src) {
-            return (h(Host, null, h("img", { src: this.src, alt: this.alt, class: "logo-img" })));
-        }
-        // Default: render the Affinda logo inline SVG
-        return (h(Host, null, h("svg", { class: "logo-svg", viewBox: "0 0 9290 1432", "aria-label": this.alt, role: "img" }, h("path", { fill: "currentColor", d: "M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z" }), h("path", { fill: "currentColor", d: "M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z" }), h("path", { fill: "currentColor", d: "M5569.92,278.96h-269.66v1143.74h269.66V278.96Z" }), h("path", { fill: "currentColor", d: "M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z" }), h("path", { fill: "currentColor", d: "M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z" }), h("path", { fill: "currentColor", d: "M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z" }), h("path", { fill: "currentColor", d: "M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z" }), h("path", { fill: "currentColor", d: "M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z" }))));
+        return (h(Host, { key: '6e315eac8e083807fb987237502d1bdaa06a579c' }, h("svg", { key: 'a837202d331f867eecd017d388d952cdbd09c0b0', class: "logo-svg", viewBox: "0 0 9290 1432", "aria-label": "Affinda", role: "img" }, h("path", { key: '425b4957d10c5427134caa67834ea5f306d23d14', fill: "currentColor", d: "M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z" }), h("path", { key: '3dbe122502fce7882967a8a77a04b38e61a9d30f', fill: "currentColor", d: "M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z" }), h("path", { key: 'e0f15cb4025c3fadcc740fc8f4b47e240f4497c3', fill: "currentColor", d: "M5569.92,278.96h-269.66v1143.74h269.66V278.96Z" }), h("path", { key: 'b7054c3fe019f0c42e8d56338c6034d9843a4a05', fill: "currentColor", d: "M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z" }), h("path", { key: 'abb1e667124d30d807c41ab1cd446c4568990a18', fill: "currentColor", d: "M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z" }), h("path", { key: '8cd032a3cb346e1e2bf41b33a8c888d366a9c634', fill: "currentColor", d: "M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z" }), h("path", { key: '3087e75a044032e2bf6ff1a49f78d18adb3a0688', fill: "currentColor", d: "M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z" }), h("path", { key: '3118ef825a1bc7640b1a49abddc5f0b6f1743bf0', fill: "currentColor", d: "M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z" }))));
     }
     static get is() { return "af-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -28,48 +18,5 @@ export class AfLogo {
             "$": ["af-logo.css"]
         };
     }
-    static get properties() {
-        return {
-            "src": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom logo image URL. If provided, displays this instead of the default Affinda logo"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "src"
-            },
-            "alt": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Alt text for the logo"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "alt",
-                "defaultValue": "'Affinda'"
-            }
-        };
-    }
 }
 //# sourceMappingURL=af-logo.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"af-logo.js","sourceRoot":"","sources":["../../../src/components/af-logo/af-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QASE,4BAA4B;QACpB,QAAG,GAAW,SAAS,CAAC;KAgDjC;IA9CC,MAAM;QACJ,4CAA4C;QAC5C,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,UAAU,GAAG,CACjD,CACR,CAAC;QACJ,CAAC;QAED,8CAA8C;QAC9C,OAAO,CACL,EAAC,IAAI;YACH,WACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,eAAe,gBACX,IAAI,CAAC,GAAG,EACpB,IAAI,EAAC,KAAK;gBAEV,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6bAA6b,GAC/b;gBACF,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4uBAA4uB,GAC9uB;gBACF,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,gDAAgD,GAAE;gBAC9E,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,udAAud,GACzd;gBACF,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wuBAAwuB,GAC1uB;gBACF,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0uBAA0uB,GAC5uB;gBACF,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,GAAE;gBACpM,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,GAAE,CAChM,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Logo component with default Affinda branding\n * Can be customized with a custom logo URL or by using the slot\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  /** Custom logo image URL. If provided, displays this instead of the default Affinda logo */\n  @Prop() src?: string;\n\n  /** Alt text for the logo */\n  @Prop() alt: string = 'Affinda';\n\n  render() {\n    // If custom src is provided, use an img tag\n    if (this.src) {\n      return (\n        <Host>\n          <img src={this.src} alt={this.alt} class=\"logo-img\" />\n        </Host>\n      );\n    }\n\n    // Default: render the Affinda logo inline SVG\n    return (\n      <Host>\n        <svg \n          class=\"logo-svg\" \n          viewBox=\"0 0 9290 1432\" \n          aria-label={this.alt}\n          role=\"img\"\n        >\n          <path \n            fill=\"currentColor\" \n            d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n          <path \n            fill=\"currentColor\" \n            d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n          <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-logo.js","sourceRoot":"","sources":["../../../src/components/af-logo/af-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,eAAe,gBACZ,SAAS,EACpB,IAAI,EAAC,KAAK;gBAEV,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6bAA6b,GAC/b;gBACF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4uBAA4uB,GAC9uB;gBACF,6DAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,gDAAgD,GAAE;gBAC9E,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,udAAud,GACzd;gBACF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wuBAAwuB,GAC1uB;gBACF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0uBAA0uB,GAC5uB;gBACF,6DAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,GAAE;gBACpM,6DAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,GAAE,CAChM,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <svg \n          class=\"logo-svg\" \n          viewBox=\"0 0 9290 1432\" \n          aria-label=\"Affinda\"\n          role=\"img\"\n        >\n          <path \n            fill=\"currentColor\" \n            d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n          <path \n            fill=\"currentColor\" \n            d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n          <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

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: '679e2499f882286319d238428fea12307fd7913e' }, h("div", { key: '7b6b0e3571f5e584939622077b2c9d861f6343e4', class: "logo-well" }, h("slot", { key: '07c6a572e394bc9e7f11e0b1c94c725a83ed312a' }))));
+        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);
+  }
 }