@affinda/wc 0.0.21 → 0.0.22

package/dist/components/p-Ws-qvw9w.js

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

package/dist/components/p-Ws-qvw9w.js.map

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

package/dist/components/p-nwZ2iAi9.js

@@ -1,100 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-import { d as defineCustomElement$1 } from './p-CLmCtN_R.js';
-
-const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:32px;left:0;right:0;z-index:10;padding:0 80px;box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:108px;left:0;right:0;padding:0 80px;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:0 4px 24px rgba(20, 52, 59, 0.12)}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:100px 16px 24px 16px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:24px;padding:0 40px}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:16px;padding:0 16px;z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:88px}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:16px;padding:0 16px;z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:88px}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
-
-const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.mobileMenuOpen = false;
-        /** The currently open dropdown identifier (null if none open) */
-        this.activeDropdown = null;
-        /** Whether to show the default Affinda logo when no logo slot content is provided */
-        this.showDefaultLogo = true;
-        /** Force mobile layout regardless of viewport size (useful for testing/stories) */
-        this.forceMobile = false;
-        this.toggleMobileMenu = () => {
-            this.mobileMenuOpen = !this.mobileMenuOpen;
-            // Close any open dropdown when toggling mobile menu
-            this.activeDropdown = null;
-        };
-        /**
-         * Opens a dropdown by its identifier
-         */
-        this.openDropdown = (dropdownId) => {
-            this.activeDropdown = dropdownId;
-        };
-        /**
-         * Closes the currently open dropdown
-         */
-        this.closeDropdown = () => {
-            this.activeDropdown = null;
-        };
-        /**
-         * Toggles a dropdown by its identifier
-         */
-        this.toggleDropdown = (dropdownId) => {
-            if (this.activeDropdown === dropdownId) {
-                this.activeDropdown = null;
-            }
-            else {
-                this.activeDropdown = dropdownId;
-            }
-        };
-    }
-    /**
-     * Handle clicks outside the navbar to close dropdowns
-     */
-    handleDocumentClick(event) {
-        const path = event.composedPath();
-        if (!path.includes(this.el)) {
-            this.closeDropdown();
-        }
-    }
-    /**
-     * Handle escape key to close dropdowns
-     */
-    handleKeyDown(event) {
-        if (event.key === 'Escape') {
-            this.closeDropdown();
-        }
-    }
-    render() {
-        const hasDropdown = this.activeDropdown !== null;
-        return (h(Host, { key: '92f8f346f85a3dc591a97bde173442b963b37e5c', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: '059a556fb84aadf47f5e5cc78adf39314f35e7cd', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: 'a724927e2b4e571efcc90baf2bc95047ee9e9e5b', class: "navbar-container" }, h("div", { key: '8459055c4d73dd08cf9e411e39b6a5efd281db33', class: "navbar theme-white" }, h("div", { key: '1672a840e29672b08bdd097decc5d3704f680b53', class: "navbar-left" }, h("div", { key: '6a7dd0e111b1afb93815d92c7ea401c6041b786e', class: "logo" }, h("slot", { key: '49706feeb1ffcf21bccb033baf717e29ed0f6809', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: 'c4894daec4529effc143cd015dc298e3fe68bde6' }))), h("button", { key: '5cc3605bfd31104a8357a270b71bae0d539d459c', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '37cb78db1c5385f069988d2236aca7c916d24ebe', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '446e40b871d0e9c689405b234d15e5a9043058bf', name: "start" }))), h("div", { key: '1112576571e29edaa6e6c33f083b1a058fdaef64', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '036a55766ab0e4bbc566b6cfbe6513ea0656ccb3', class: "nav-actions" }, h("slot", { key: '01b2df1708553d51475941e109c8f23652d7e0ff', name: "end" })), h("div", { key: '4429b2e026ec6b730d8c17cf9f716ad5a6a3c050', class: "nav-button" }, h("slot", { key: '0a290b167e6d32441770df9d4f6b3e6104552b77', name: "button" })))), h("div", { key: '08c1695708ddf0ef0a1a18bfbd1c45d66ef1bf4f', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'b54b6dbd58888e9a844b615337ba7ee62bca00c0', class: "dropdown-panel theme-white" }, h("slot", { key: '0f72aff472972bf323e1891518d99eb5d92d2916', name: "dropdown-solutions" }), h("slot", { key: '1f7bf6bb90b334d19737e011e759787105a91fa5', name: "dropdown-pricing" }), h("slot", { key: '52272d982908c702c3447d9b2b7bddcf2cc030df', name: "dropdown-resources" }), h("slot", { key: 'ba1ea577efa7b2a9af9b8a50253eae8eef661bd7', name: "dropdown" })))), h("div", { key: '21f14e04f0c351733f7452dc1c10b6abfb26e1ce', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '22565f6b52971a5fe4235c8f9e2fce4ee5a2d006', class: "mobile-button-container" }, h("slot", { key: '2b01297d62d6cca6a58b128701a5a14a02d91e2d', name: "mobile-button" }, h("slot", { key: 'd755113cabd174a46acd6d2d5b65d9454964b759', name: "button" }))), h("div", { key: '31f63fa53ae2c12b5f0f19e7b2235d94f09f50cb', class: "mobile-menu-content" }, h("slot", { key: '748e5a320fb5b5940f1134e332738dccf015748e', name: "mobile-menu" })))));
-    }
-    get el() { return this; }
-    static get style() { return afNavbarCss; }
-}, [262, "af-navbar", {
-        "showDefaultLogo": [4, "show-default-logo"],
-        "theme": [1],
-        "forceMobile": [516, "force-mobile"],
-        "mobileMenuOpen": [32],
-        "activeDropdown": [32]
-    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-navbar", "af-logo"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-navbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfNavbar);
-            }
-            break;
-        case "af-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { AfNavbar as A, defineCustomElement as d };
-//# sourceMappingURL=p-nwZ2iAi9.js.map
-
-//# sourceMappingURL=p-nwZ2iAi9.js.map

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

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

package/dist/components/p-pudFjW3W.js

@@ -1,94 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-import { d as defineCustomElement$2 } from './p-BfAQ7eko.js';
-import { d as defineCustomElement$1 } from './p-BIgPDyJK.js';
-
-const afFeatureCardCss = ".sc-af-feature-card-h{display:block;--af-card-padding:0;--af-card-gap:0}[card-size=\"default\"].sc-af-feature-card-h{width:544px}[card-size=\"large\"].sc-af-feature-card-h{width:777px}[card-size=\"flexible\"].sc-af-feature-card-h{display:flex;width:100%;height:100%}.feature-card.sc-af-feature-card{overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--border-radius-card-level-1, 32px);width:100%;height:100%;isolation:isolate}.feature-card--layout-full-bleed.sc-af-feature-card{background:var(--background-base, var(--colour-brand-inkwell, #14343b))}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:660px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:480px}.feature-card__background.sc-af-feature-card{position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:0}.feature-card__background-image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}.feature-card__overlay.sc-af-feature-card{position:absolute;bottom:0;left:0;right:0;border-radius:0;backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);z-index:1;padding:124px 32px 32px 32px;--af-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--af-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--af-typography-body-default:var(--typography-body-dark, #ffffff);--colour-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--colour-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--colour-typography-body-default:var(--typography-body-dark, #ffffff)}.feature-card--layout-standard.sc-af-feature-card{background:var(--background-level-1, var(--colour-mistgreen-200, #e8eeed))}.feature-card--layout-standard.sc-af-feature-card af-card.sc-af-feature-card{--border-radius-card-level-1:0}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:400px}.feature-card__content.sc-af-feature-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1;padding:40px 32px 12px 32px;flex:1 1 auto}[card-size=\"large\"].sc-af-feature-card-h .feature-card__content.sc-af-feature-card{padding:40px 40px 0 40px}.feature-card__image-area.sc-af-feature-card{position:relative;width:100%;height:160px;flex-shrink:0;overflow:hidden;border-radius:0}.feature-card__image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}.feature-card.sc-af-feature-card af-typography-lockup.sc-af-feature-card{--colour-typography-heading-primary:var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));--colour-typography-body-default:var(--af-typography-body-default, var(--typography-body-default, #2b484f))}@media (max-width: 768px){.feature-card.sc-af-feature-card{border-radius:var(--border-radius-card-level-1, 24px)}[card-size=\"default\"].sc-af-feature-card-h,[card-size=\"large\"].sc-af-feature-card-h{width:335px}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:442px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:340px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:380px}.feature-card__overlay.sc-af-feature-card{padding:80px 24px 28px 24px}.feature-card__content.sc-af-feature-card{padding:32px 24px 12px 24px}.feature-card__image-area.sc-af-feature-card{height:192px}}";
-
-const AfFeatureCard = /*@__PURE__*/ proxyCustomElement(class AfFeatureCard extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Theme variant - sets background color and provides theme context.
-         * Only applies to 'standard' layout mode. Defaults to 'mist-green'.
-         */
-        this.theme = 'mist-green';
-        /**
-         * Layout mode for the card.
-         * - 'standard': Theme background with text at top and image at bottom
-         * - 'full-bleed': Image covers entire card with text overlay at bottom
-         */
-        this.layout = 'standard';
-        /**
-         * Card size variant.
-         * - 'default': Fixed 544px × 420px
-         * - 'large': Fixed 777px × 480px
-         * - 'flexible': Fills container (for grid layouts)
-         */
-        this.cardSize = 'default';
-        /**
-         * Heading size for typography lockup (1-5, where 1 is largest).
-         */
-        this.headingSize = 3;
-        /**
-         * Image alt text for accessibility.
-         * Provide meaningful alt text for feature images.
-         * Only use empty string for purely decorative images.
-         */
-        this.imageAlt = '';
-    }
-    render() {
-        const hasImage = !!this.imageSrc;
-        const isFullBleed = this.layout === 'full-bleed';
-        const wrapperClasses = {
-            'feature-card': true,
-            [`feature-card--layout-${this.layout}`]: true,
-            [`feature-card--size-${this.cardSize}`]: true,
-        };
-        // Full-bleed mode: image background with overlay
-        if (isFullBleed) {
-            return (h(Host, null, h("div", { class: wrapperClasses }, hasImage && (h("div", { class: "feature-card__background" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__background-image" }))), h("div", { class: "feature-card__overlay" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "body" })))))));
-        }
-        // Standard mode: theme card with image at bottom
-        const isFlexible = this.cardSize === 'flexible';
-        return (h(Host, null, h("div", { class: wrapperClasses }, h("af-card", { theme: this.theme, stretch: isFlexible }, h("div", { class: "feature-card__content" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "body" })))), hasImage && (h("div", { class: "feature-card__image-area" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "feature-card__image" })))))));
-    }
-    static get style() { return afFeatureCardCss; }
-}, [262, "af-feature-card", {
-        "theme": [1],
-        "layout": [1],
-        "cardSize": [513, "card-size"],
-        "headingSize": [2, "heading-size"],
-        "imageSrc": [1, "image-src"],
-        "imageAlt": [1, "image-alt"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-feature-card", "af-card", "af-typography-lockup"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-feature-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfFeatureCard);
-            }
-            break;
-        case "af-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "af-typography-lockup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { AfFeatureCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-pudFjW3W.js.map
-
-//# sourceMappingURL=p-pudFjW3W.js.map

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

@@ -1 +0,0 @@
-{"file":"p-pudFjW3W.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n   Feature Card - Figma Specs\n   \n   Desktop Full-bleed: 544px × 660px, radius 32px\n   Desktop Standard default: 544px width, radius 32px\n   Desktop Standard large: 777px width, radius 32px\n   Mobile Full-bleed: 335px × 442px, radius 24px\n   Mobile Standard: 335px width, radius 24px\n   ========================================================================== */\n\n/* ==========================================================================\n   Host Element - Controls outer dimensions\n   ========================================================================== */\n\n:host {\n  display: block;\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* Fixed size hosts constrain to Figma dimensions */\n:host([card-size=\"default\"]) {\n  width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n  width: 777px;\n}\n\n/* Flexible cards fill their container */\n:host([card-size=\"flexible\"]) {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Base Feature Card Styles\n   ========================================================================== */\n\n.feature-card {\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: var(--border-radius-card-level-1, 32px);\n  width: 100%;\n  height: 100%;\n  /* Ensure proper clipping of absolutely positioned children with border-radius */\n  isolation: isolate;\n}\n\n/* ==========================================================================\n   Full Bleed Layout Mode\n   Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n   ========================================================================== */\n\n.feature-card--layout-full-bleed {\n  background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Full-bleed fixed sizes have explicit heights on host */\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n  height: 660px;\n}\n\n/* Full-bleed flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n  min-height: 480px;\n}\n\n.feature-card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  border-radius: 0;\n}\n\n.feature-card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 0;\n}\n\n/* Overlay gradient with text */\n.feature-card__overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-radius: 0;\n  backdrop-filter: blur(2px);\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n  z-index: 1;\n  /* Desktop: pt-124px px-32px pb-32px */\n  padding: 124px 32px 32px 32px;\n\n  /* White text on dark overlay */\n  --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-body-default: var(--typography-body-dark, #ffffff);\n  --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/* ==========================================================================\n   Standard Layout Mode\n   \n   Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n   \n   When cardSize=\"flexible\", af-card receives stretch prop which enables\n   the flex chain. Content grows to fill space, image stays at bottom.\n   ========================================================================== */\n\n.feature-card--layout-standard {\n  background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/* Remove border-radius from inner af-card - outer .feature-card handles rounding */\n.feature-card--layout-standard af-card {\n  --border-radius-card-level-1: 0;\n}\n\n/* Standard flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n  min-height: 400px;\n}\n\n/* Content area - grows to push image to bottom (when af-card has stretch) */\n.feature-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n  /* Desktop default: pt-40px px-32px pb-12px */\n  padding: 40px 32px 12px 32px;\n  flex: 1 1 auto;\n}\n\n/* Large card content padding: pt-40px px-40px pb-0 */\n:host([card-size=\"large\"]) .feature-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* ==========================================================================\n   Image Area (Standard Layout)\n   Figma: 160px height (desktop), 192px height (mobile)\n   ========================================================================== */\n\n.feature-card__image-area {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 0;\n}\n\n.feature-card__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center top;\n  border-radius: 0;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n.feature-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n  --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (max-width: 768px)\n   \n   Figma:\n   - Full-bleed: 335px × 442px, radius 24px\n   - Standard: 335px width, radius 24px\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .feature-card {\n    border-radius: var(--border-radius-card-level-1, 24px);\n  }\n\n  /* Mobile fixed widths on host */\n  :host([card-size=\"default\"]),\n  :host([card-size=\"large\"]) {\n    width: 335px;\n  }\n\n  /* Mobile full-bleed height: 442px */\n  :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n  :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n    height: 442px;\n  }\n\n  /* Mobile flexible minimum heights */\n  :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n    min-height: 340px;\n  }\n\n  :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n    min-height: 380px;\n  }\n\n  /* Mobile overlay padding: pt-80px px-24px pb-28px */\n  .feature-card__overlay {\n    padding: 80px 24px 28px 24px;\n  }\n\n  /* Mobile content padding: pt-32px px-24px pb-12px */\n  .feature-card__content {\n    padding: 32px 24px 12px 24px;\n  }\n\n  /* Mobile image area: 192px height */\n  .feature-card__image-area {\n    height: 192px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-zDoPXonz.js

@@ -1,58 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-
-const afFieldsetCss = ":host{display:block}.fieldset{display:flex;flex-direction:column;border:none;padding:0;margin:0;min-inline-size:0}.fieldset.disabled{opacity:0.5;pointer-events:none}.legend{display:block;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));padding:0;margin:0 0 12px 0;width:100%}.items{display:flex}.items.orientation-vertical{flex-direction:column;gap:8px;align-items:flex-start}.items.orientation-horizontal{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center}::slotted(*){flex-shrink:0}.items.orientation-vertical ::slotted(*){width:100%}";
-
-const AfFieldset = /*@__PURE__*/ proxyCustomElement(class AfFieldset extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The layout orientation of the fieldset items
-         * - `vertical` - Items stack vertically (default)
-         * - `horizontal` - Items are laid out horizontally
-         */
-        this.orientation = 'vertical';
-        /**
-         * Whether the fieldset is disabled (disables all child controls)
-         */
-        this.disabled = false;
-    }
-    render() {
-        const fieldsetClasses = {
-            'fieldset': true,
-            [`orientation-${this.orientation}`]: true,
-            'disabled': this.disabled
-        };
-        const itemsClasses = {
-            'items': true,
-            [`orientation-${this.orientation}`]: true
-        };
-        return (h(Host, { key: '60d884edafad36deb7c25a515523fcab744f8406' }, h("fieldset", { key: '252f9bda68649344d71938d40bdaa187bb5f5448', class: fieldsetClasses, disabled: this.disabled }, this.legend && (h("legend", { key: '09281657368ccdcc2f8773d08cb875316dc04a33', class: "legend" }, this.legend)), h("div", { key: '35b7536fc7c751d101119021bd31b59f19e76e9b', class: itemsClasses }, h("slot", { key: 'd278bfdc67820471928fafd8b5ba9127332db935' })))));
-    }
-    static get style() { return afFieldsetCss; }
-}, [257, "af-fieldset", {
-        "legend": [1],
-        "orientation": [1],
-        "disabled": [516]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-fieldset"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-fieldset":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfFieldset);
-            }
-            break;
-    } });
-}
-
-export { AfFieldset as A, defineCustomElement as d };
-//# sourceMappingURL=p-zDoPXonz.js.map
-
-//# sourceMappingURL=p-zDoPXonz.js.map

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

@@ -1 +0,0 @@
-{"file":"p-zDoPXonz.js","mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/esm/af-accordion-item.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"af-accordion-item.entry.js","sources":["src/components/af-accordion-item/af-accordion-item.css?tag=af-accordion-item&encapsulation=shadow","src/components/af-accordion-item/af-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion-item {\n  width: 100%;\n}\n\n/* Trigger button - clickable header */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 16px 0;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: background-color 0.2s ease;\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--af-background-base-hover, rgba(20, 52, 59, 0.02));\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--af-background-border-active, #8a7049);\n  outline-offset: -2px;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.trigger-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Chevron indicator */\n.chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--af-typography-body-dark, #14343b);\n  transition: transform 0.3s ease;\n}\n\n.chevron.is-open {\n  transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n}\n\n.content {\n  padding: 0;\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n  background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n  border-bottom-color: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A single collapsible accordion item with header and content.\n * Can be used standalone or within an af-accordion container.\n *\n * @slot trigger - The clickable header content\n * @slot - The collapsible content (default slot)\n */\n@Component({\n  tag: 'af-accordion-item',\n  styleUrl: 'af-accordion-item.css',\n  shadow: true,\n})\nexport class AfAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this accordion item.\n   * Used by parent af-accordion to track open state.\n   */\n  @Prop({ reflect: true }) itemId!: 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 (cannot be toggled)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ eventName: 'af-accordion-toggle' }) accordionToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n  @State() contentHeight: number = 0;\n\n  private contentRef?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\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    this.resizeObserver = new ResizeObserver(() => {\n      if (this.open && this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n\n    if (this.contentRef) {\n      this.resizeObserver.observe(this.contentRef);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  /**\n   * Programmatically toggle the accordion item\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled) {\n      this.open = !this.open;\n      this.accordionToggle.emit({ itemId: this.itemId, open: this.open });\n    }\n  }\n\n  private measureContent() {\n    requestAnimationFrame(() => {\n      if (this.contentRef) {\n        this.contentHeight = this.contentRef.scrollHeight;\n      }\n    });\n  }\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.toggle();\n    }\n  };\n\n  render() {\n    const contentStyle = {\n      maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n    };\n\n    return (\n      <Host class={{ 'is-open': this.open, 'is-disabled': this.disabled }}>\n        <div class=\"accordion-item\">\n          <button\n            class=\"trigger\"\n            onClick={this.handleTriggerClick}\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\"></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          <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"],"names":[],"mappings":"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"}

package/dist/esm/af-accordion.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"af-accordion.entry.js","sources":["src/components/af-accordion/af-accordion.css?tag=af-accordion&encapsulation=scoped","src/components/af-accordion/af-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.accordion {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Ensure proper stacking for accordion items */\n::slotted(af-accordion-item) {\n  display: block;\n}\n\n/* Remove bottom border from last item */\n::slotted(af-accordion-item:last-child) {\n  --accordion-item-border: transparent;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Listen } from '@stencil/core';\n\n/**\n * Accordion container that manages multiple accordion items.\n * Controls which items are open based on mode (independent or exclusive).\n * \n * @slot - Place af-accordion-item components here\n */\n@Component({\n  tag: 'af-accordion',\n  styleUrl: 'af-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfAccordion {\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\n   */\n  @Prop() mode: 'independent' | 'exclusive' = 'independent';\n\n  /**\n   * Currently open item(s) for controlled mode.\n   * In independent mode, can be an array of item IDs.\n   * In exclusive mode, should be a single item ID or null.\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Default open item(s) for uncontrolled mode.\n   * Used as initial state when value prop is not provided.\n   */\n  @Prop() defaultValue?: string | string[];\n\n  /**\n   * Emitted when the open state of items changes.\n   * Returns the new value (string[] for independent, string | null for exclusive).\n   */\n  @Event({ eventName: 'af-accordion-change' }) accordionChange!: EventEmitter<{ value: string | string[] | null }>;\n\n  @State() internalValue: string[] = [];\n\n  private isControlled(): boolean {\n    return this.value !== undefined;\n  }\n\n  componentWillLoad() {\n    // Initialize internal value from defaultValue or value\n    const initialValue = this.isControlled() ? this.value : this.defaultValue;\n    this.internalValue = this.normalizeValue(initialValue);\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string | string[] | undefined) {\n    if (this.isControlled()) {\n      this.internalValue = this.normalizeValue(newValue);\n      this.syncItems();\n    }\n  }\n\n  componentDidLoad() {\n    this.syncItems();\n  }\n\n  /**\n   * Listen for toggle events from child accordion items\n   */\n  @Listen('af-accordion-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      // In exclusive mode, only one item can be open\n      newValue = open ? [itemId] : [];\n    } else {\n      // In independent mode, toggle the item\n      if (open) {\n        newValue = [...this.internalValue, itemId];\n      } else {\n        newValue = this.internalValue.filter(id => id !== itemId);\n      }\n    }\n\n    if (!this.isControlled()) {\n      this.internalValue = newValue;\n      this.syncItems();\n    }\n\n    // Emit change event\n    const emitValue = this.mode === 'exclusive' \n      ? (newValue.length > 0 ? newValue[0] : null)\n      : newValue;\n    this.accordionChange.emit({ value: emitValue });\n  }\n\n  /**\n   * Normalize value prop to array format for internal use\n   */\n  private normalizeValue(value: string | string[] | undefined): string[] {\n    if (value === undefined || value === null) {\n      return [];\n    }\n    if (Array.isArray(value)) {\n      // In exclusive mode, only keep the first item\n      return this.mode === 'exclusive' ? value.slice(0, 1) : value;\n    }\n    return [value];\n  }\n\n  /**\n   * Sync the open state of all child accordion items\n   */\n  private syncItems() {\n    const items = this.el.querySelectorAll('af-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  render() {\n    return (\n      <Host class={{ [`mode-${this.mode}`]: true }}>\n        <div class=\"accordion\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/esm/af-aspect-ratio.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"af-aspect-ratio.entry.js","sources":["src/components/af-aspect-ratio/af-aspect-ratio.css?tag=af-aspect-ratio&encapsulation=shadow","src/components/af-aspect-ratio/af-aspect-ratio.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.aspect-ratio-container {\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Ensure slotted content fills the container */\n.aspect-ratio-container ::slotted(*) {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A container component that maintains a fixed aspect ratio for its content.\n * Useful for images, videos, or any content that needs to maintain specific proportions.\n */\n@Component({\n  tag: 'af-aspect-ratio',\n  styleUrl: 'af-aspect-ratio.css',\n  shadow: true\n})\nexport class AfAspectRatio {\n  /**\n   * The aspect ratio to maintain. Can be:\n   * - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc.\n   * - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.\n   *\n   * @example\n   * <af-aspect-ratio ratio=\"16:9\">Content</af-aspect-ratio>\n   * <af-aspect-ratio ratio=\"1.618 / 1\">Content</af-aspect-ratio>\n   */\n  @Prop() ratio: string = '1:1';\n\n  private getRatioValue(): string {\n    // Map common ratio shortcuts to actual CSS aspect-ratio values\n    const ratioMap: { [key: string]: string } = {\n      // Common ratios\n      '1:1': '1 / 1',\n      '1:2': '1 / 2',\n      '2:1': '2 / 1',\n      '2:3': '2 / 3',\n      '3:1': '3 / 1',\n      '3:2': '3 / 2',\n      '3:4': '3 / 4',\n      '4:1': '4 / 1',\n      '4:3': '4 / 3',\n      '4:5': '4 / 5',\n      '5:2': '5 / 2',\n      '5:4': '5 / 4',\n      '8:3': '8 / 3',\n      '8:5': '8 / 5',\n      // Screen ratios\n      '9:8': '9 / 8',\n      '9:16': '9 / 16',\n      '9:21': '9 / 21',\n      '10:16': '10 / 16',\n      '14:3': '14 / 3',\n      '16:5': '16 / 5',\n      '16:9': '16 / 9',\n      '16:10': '16 / 10',\n      '21:9': '21 / 9',\n      '32:9': '32 / 9',\n      // Golden ratio variants\n      'golden-portrait': '1 / 1.618',\n      'golden-landscape': '1.618 / 1',\n      'golden-portrait-half': '1 / 0.809',\n      'golden-landscape-half': '0.809 / 1',\n      // Paper sizes - A4\n      'a4-portrait': '1 / 1.414',\n      'a4-landscape': '1.414 / 1',\n      'a4-portrait-half': '1 / 0.707',\n      'a4-landscape-half': '0.707 / 1',\n      // Paper sizes - Letter\n      'letter-portrait': '1 / 1.294',\n      'letter-landscape': '1.294 / 1',\n      'letter-portrait-half': '1 / 0.647',\n      'letter-landscape-half': '0.647 / 1',\n      // Special\n      '6:7': '6 / 7'\n    };\n\n    // If it's a predefined ratio, return the mapped value\n    if (ratioMap[this.ratio]) {\n      return ratioMap[this.ratio];\n    }\n\n    // Otherwise, assume it's a custom ratio already in the correct format\n    return this.ratio;\n  }\n\n  render() {\n    const ratioValue = this.getRatioValue();\n\n    return (\n      <div\n        class=\"aspect-ratio-container\"\n        style={{ aspectRatio: ratioValue }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,6MAA6M;;MCWzN,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,KAAK;AAuE9B;IArES,aAAa,GAAA;;AAEnB,QAAA,MAAM,QAAQ,GAA8B;;AAE1C,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,KAAK,EAAE,OAAO;;AAEd,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,MAAM,EAAE,QAAQ;;AAEhB,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,aAAa,EAAE,WAAW;AAC1B,YAAA,cAAc,EAAE,WAAW;AAC3B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,mBAAmB,EAAE,WAAW;;AAEhC,YAAA,iBAAiB,EAAE,WAAW;AAC9B,YAAA,kBAAkB,EAAE,WAAW;AAC/B,YAAA,sBAAsB,EAAE,WAAW;AACnC,YAAA,uBAAuB,EAAE,WAAW;;AAEpC,YAAA,KAAK,EAAE;SACR;;AAGD,QAAA,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;;;QAI7B,OAAO,IAAI,CAAC,KAAK;;IAGnB,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AAEvC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,wBAAwB,EAC9B,KAAK,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EAAA,EAElC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}

package/dist/esm/af-button-group.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"af-button-group.entry.js","sources":["src/components/af-button-group/af-button-group.css?tag=af-button-group&encapsulation=shadow","src/components/af-button-group/af-button-group.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.button-group {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.direction-horizontal {\n  flex-direction: row;\n}\n\n.direction-vertical {\n  flex-direction: column;\n}\n\n/* Ensure slotted buttons align properly */\n::slotted(*) {\n  flex-shrink: 0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button-group',\n  styleUrl: 'af-button-group.css',\n  shadow: true\n})\nexport class AfButtonGroup {\n  /**\n   * Layout direction of the button group\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between buttons\n   */\n  @Prop() gap: string = '8px';\n\n  render() {\n    const classes = {\n      'button-group': true,\n      [`direction-${this.direction}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes} style={{ gap: this.gap }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,sNAAsN;;MCOlO,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAE3D;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,KAAK;AAgB5B;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG;SAClC;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAA,EAC3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

package/dist/esm/af-button.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"af-button.entry.js","sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"ghost\"]) {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n  /* Allow width to be controlled from outside via CSS custom property */\n  width: var(--af-button-width, auto);\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-thin {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n  display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-thin .icon-left,\n.size-thin .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n  margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n  margin-left: 12px;\n}\n\n.size-thin .icon-left.has-content {\n  margin-right: 8px;\n}\n\n.size-thin .icon-right.has-content {\n  margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.size-default .label {\n  height: 24px;\n}\n\n.size-thin .label {\n  height: 20px;\n}\n\n/* ==========================================================================\n   Primary Button\n   Filled background with ice color, inkwell text\n   ========================================================================== */\n\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n  background: var(--af-button-primary-bg, #A6FFFB);\n  border-color: var(--af-button-primary-stroke, #14343B);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n  outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n}\n\n/* ==========================================================================\n   Secondary Button\n   Transparent background with visible border\n   ========================================================================== */\n\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n  background: var(--af-background-base, #FFF);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n  outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/* ==========================================================================\n   Tertiary Button\n   Text-only link style with underline, no border or background\n   ========================================================================== */\n\n.variant-ghost {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-ghost .label {\n  border-bottom: 2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost .icon-left,\n.variant-ghost .icon-right {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-ghost:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-ghost:focus:not(.disabled),\n.variant-ghost:focus-visible:not(.disabled) {\n  outline: none;\n}\n\n.variant-ghost:focus-visible:not(.disabled) .label {\n  box-shadow: 0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Disabled states\n   ========================================================================== */\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.variant-primary.disabled {\n  border: 1px solid var(--af-button-primary-stroke, #14343B);\n  background: var(--af-button-primary-bg, #A6FFFB);\n  opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  opacity: 0.6;\n}\n\n.variant-ghost.disabled {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Reset button element styles\n   ========================================================================== */\n\nbutton.button {\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-ghost {\n  background: transparent;\n  border: none;\n}\n\n/* ==========================================================================\n   Reset anchor element styles (when using href prop)\n   ========================================================================== */\n\na.button {\n  text-decoration: none;\n  color: inherit;\n}\n\na.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-ghost {\n  background: transparent;\n  border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `ghost` - Link-style with themed underline on the label; commonly paired\n   *   with a right-pointing icon. Matches Webflow's \"button ghost\" variant.\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs (12/24px padding)\n   * - `thin` - Compact inline/secondary size (8/16px padding)\n   */\n  @Prop() size: 'default' | 'thin' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,s5KAAs5K;;MCgB75K,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsC,SAAS;AAE/E;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;"}