npm - @affinda/wc - Versions diffs - 0.0.25 → 0.0.27 - Mend

@affinda/wc 0.0.25 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (910) hide show

package/dist/collection/components/af-nav-menu/af-nav-menu.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class AfNavMenu {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (h(Host, { key: '11f883b5cc420ee5cb99c723cc492b7346c3761d' }, h("div", { key: 'c3261a46a80fcbbdbfc3d82ee43e4cb31f6de4d8', class: classes }, this.heading && (h("div", { key: 'fd6f90c2bc9f34ef30efc22b49eb36bd6fd7ae52', class: "menu-header" }, h("h3", { key: '5e80c33bdd36dcc23d3445fd92af76f69f28a7c8', class: "menu-heading" }, this.heading))), h("div", { key: '6b62d13e30422c7f331350ec39ab2429f5a50294', class: "menu-items" }, h("slot", { key: '49740ab88d6c957395b902f98526b60353af4be5' })))));
+        return (h(Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -128,3 +128,4 @@ export class AfNavMenu {
         };
     }
 }
+//# sourceMappingURL=af-nav-menu.js.map

package/dist/collection/components/af-nav-menu/af-nav-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-menu.js","sourceRoot":"","sources":["../../../src/components/af-nav-menu/af-nav-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAYE;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;;WAIG;QACK,eAAU,GAAY,KAAK,CAAC;QAEpC;;;WAGG;QACsB,cAAS,GAAY,KAAK,CAAC;KAyBrD;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO;gBAChB,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAC,aAAa;oBACtB,2DAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP;gBACD,4DAAK,KAAK,EAAC,YAAY;oBACrB,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n tag: 'af-nav-menu',\n styleUrl: 'af-nav-menu.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavMenu {\n /**\n * The heading text displayed above the navigation items\n */\n @Prop() heading?: string;\n\n /**\n * Breakpoint variant for responsive styling\n * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n */\n @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n /**\n * Whether to show the right border separator.\n * When used inside NavMenuNest, borders are controlled by the parent.\n * Set to true only when using NavMenu standalone.\n */\n @Prop() showBorder: boolean = false;\n\n /**\n * Whether to display as a card with background color and rounded corners.\n * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n */\n @Prop({ reflect: true }) cardStyle: boolean = false;\n\n render() {\n const classes = {\n 'nav-menu': true,\n [`breakpoint-${this.breakpoint}`]: true,\n 'has-border': this.showBorder,\n 'card-style': this.cardStyle\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.heading && (\n <div class=\"menu-header\">\n <h3 class=\"menu-heading\">{this.heading}</h3>\n </div>\n )}\n <div class=\"menu-items\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js CHANGED Viewed

@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '8b256672578e162c65c1dd83b735f3fd8af8bb56' }, h("div", { key: '1f009f9f0986790e3b330eec97fa5e9f63604108', class: classes }, h("div", { key: 'db3540b0259d8474093e1d31c51e7ae1311700c0', class: "menu-columns" }, h("slot", { key: '06c90ac9305b96d64bc86fcf16ba639db31c4d08' })), h("div", { key: '5ad8cb59dd4c88c6dadf38aac88df6697541ad52', class: "menu-sidebar" }, h("slot", { key: '98a73cb259c755fa1efc70294772abf89d233581', name: "sidebar" })))));
+        return (h(Host, { key: '10f78b27ad9bb744415303815a0d332c521b97ce' }, h("div", { key: '1fd8d7624889e151a7051b0f8b2ee7c773ae4d60', class: classes }, h("div", { key: 'e2fefca6e151476e80c1b45d435bb72b623f8c15', class: "menu-columns" }, h("slot", { key: '321200c424b9e4b8b9f1f9cf101de1a2a4fdc742' })), h("div", { key: '8956a487218299d9735ece9a6ca9fe3a23828e0f', class: "menu-sidebar" }, h("slot", { key: '8cb04d5028ec97976d38b39a1b66f41600b7fa0f', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }
@@ -127,3 +127,4 @@ export class AfNavMenuNest {
         };
     }
 }
+//# sourceMappingURL=af-nav-menu-nest.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-nav-menu-nest.js","sourceRoot":"","sources":["../../../src/components/af-nav-menu-nest/af-nav-menu-nest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE;;;;;;WAMG;QACK,SAAI,GAA4D,WAAW,CAAC;QAEpF;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;;WAIG;QACsB,sBAAiB,GAAY,IAAI,CAAC;KAuB5D;IArBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;YACrB,aAAa,EAAE,IAAI;YACnB,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO;gBACjB,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A mega-menu dropdown panel component.\n * Acts as a container for NavMenu columns and optionally a sidebar.\n * Used as the dropdown content for navbar items.\n * \n * **Slots:**\n * - default: Place NavMenu components here - they will be displayed as columns\n * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)\n * \n * **Example:**\n * ```html\n * <af-nav-menu-nest type=\"solutions\" breakpoint=\"desktop\">\n * <af-nav-menu heading=\"Industries\">...</af-nav-menu>\n * <af-nav-menu heading=\"Use Cases\">...</af-nav-menu>\n * <af-nav-menu heading=\"Documents\">...</af-nav-menu>\n * <af-nav-menu slot=\"sidebar\" heading=\"Resume Parser\">...</af-nav-menu>\n * </af-nav-menu-nest>\n * ```\n */\n@Component({\n tag: 'af-nav-menu-nest',\n styleUrl: 'af-nav-menu-nest.css',\n shadow: false,\n scoped: true,\n})\nexport class AfNavMenuNest {\n /**\n * The type/variant of the mega-menu\n * - 'solutions': Multi-column layout (3 columns + sidebar)\n * - 'solutions-alt': Alternative solutions layout\n * - 'resources': Multi-column layout with optional featured card\n * - 'pricing': Simpler layout without sidebar\n */\n @Prop() type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing' = 'solutions';\n\n /**\n * Breakpoint variant for responsive styling\n * - 'desktop': Horizontal multi-column layout\n * - 'mobile': Vertical stacked layout\n */\n @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n /**\n * Whether to show the heavier border on the last column (before sidebar).\n * Set to `true` when sidebar has content, `false` when no sidebar.\n * When `false`, the last column has no border.\n */\n @Prop({ reflect: true }) showSidebarBorder: boolean = true;\n\n render() {\n const classes = {\n 'nav-menu-nest': true,\n 'theme-white': true,\n [`type-${this.type}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"menu-columns\">\n <slot></slot>\n </div>\n <div class=\"menu-sidebar\">\n <slot name=\"sidebar\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-navbar/af-navbar.js CHANGED Viewed

@@ -296,3 +296,4 @@ export class AfNavbar {
             }];
     }
 }
+//# sourceMappingURL=af-navbar.js.map

package/dist/collection/components/af-navbar/af-navbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["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 * - `dropdowns` - One or more dropdown panels, each a `<div data-for=\"id\">`\n * where `id` matches the `data-dropdown=\"id\"` attribute on the trigger.\n * Clicking a trigger toggles the matching panel; only one is visible at\n * a time.\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 /** Timer id used to debounce hover-driven closes. */\n private closeTimer?: number;\n\n /**\n * The trigger element that opened the currently active dropdown. Tracked\n * so an Esc keypress can close the dropdown and restore focus to the\n * trigger, matching WAI-ARIA menu-button guidance.\n */\n private lastActiveTrigger?: HTMLElement;\n\n /**\n * Open the dropdown matching a `[data-dropdown]` trigger on click —\n * acts as a toggle so keyboard/touch users can still dismiss it.\n */\n @Listen('click')\n handleTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement | null;\n const trigger = target?.closest?.('[data-dropdown]') as HTMLElement | null;\n if (!trigger || !this.el.contains(trigger)) return;\n const id = trigger.getAttribute('data-dropdown');\n if (!id) return;\n event.preventDefault();\n event.stopPropagation();\n this.cancelScheduledClose();\n this.lastActiveTrigger = trigger;\n this.toggleDropdown(id);\n }\n\n /**\n * Open the dropdown matching a `[data-dropdown]` trigger on hover.\n * Uses mouseover (which bubbles) and checks for the trigger ancestor.\n */\n @Listen('mouseover')\n handleHover(event: MouseEvent) {\n const target = event.target as HTMLElement | null;\n const trigger = target?.closest?.('[data-dropdown]') as HTMLElement | null;\n if (!trigger || !this.el.contains(trigger)) return;\n const id = trigger.getAttribute('data-dropdown');\n if (!id || this.activeDropdown === id) {\n this.cancelScheduledClose();\n return;\n }\n this.cancelScheduledClose();\n this.lastActiveTrigger = trigger;\n this.openDropdown(id);\n }\n\n /**\n * When the pointer leaves the navbar entirely (including any open\n * dropdown panel), schedule a close. Re-entering cancels it.\n */\n @Listen('mouseleave')\n handleHostLeave() {\n this.scheduleClose();\n }\n\n @Listen('mouseenter')\n handleHostEnter() {\n this.cancelScheduledClose();\n }\n\n private scheduleClose() {\n // Short 100ms debounce so the mouse has time to cross any tiny\n // dead-zone between the nav pill, the dropdown panel, and the\n // items inside it without accidentally closing the panel. A\n // re-entering mouseenter on the host cancels the pending close.\n this.cancelScheduledClose();\n this.closeTimer = window.setTimeout(() => {\n this.closeDropdown();\n this.closeTimer = undefined;\n }, 100);\n }\n\n private cancelScheduledClose() {\n if (this.closeTimer !== undefined) {\n clearTimeout(this.closeTimer);\n this.closeTimer = undefined;\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 * Keep the visibility of slotted dropdown panels, and the `data-active`\n * flag on their triggers, in sync with the currently active dropdown.\n * Each panel lives in the `dropdowns` slot and carries a `data-for`\n * attribute that matches its trigger's id.\n */\n componentDidLoad() {\n this.syncDropdownState();\n }\n\n componentDidUpdate() {\n this.syncDropdownState();\n }\n\n private syncDropdownState() {\n this.el.querySelectorAll<HTMLElement>('[data-for]').forEach((panel) => {\n if (!this.el.contains(panel)) return;\n panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;\n });\n this.el.querySelectorAll<HTMLElement>('[data-dropdown]').forEach((trigger) => {\n if (!this.el.contains(trigger)) return;\n const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;\n if (active) trigger.setAttribute('data-active', '');\n else trigger.removeAttribute('data-active');\n trigger.setAttribute('aria-expanded', active ? 'true' : 'false');\n });\n }\n\n /**\n * Handle escape key to close dropdowns. If a dropdown is open, restore\n * focus to the trigger that opened it so keyboard users don't lose\n * their place in the tab order.\n */\n @Listen('keydown', { target: 'document' })\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Escape' && this.activeDropdown !== null) {\n const toFocus = this.lastActiveTrigger;\n this.closeDropdown();\n toFocus?.focus?.();\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=\"dropdowns\"></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"]}

package/dist/collection/components/af-number-badge/af-number-badge.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: '9966db4536a1ce0b5e35a65aa63ea5c0771e8a9a', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'a963bb7feea690d898228a3a0d076e079994cdf4', class: {
+        return (h(Host, { key: '816770ea4351ba01a7c069b57558efad8015f5f8', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '33bd320ab7e56fbf29251035008e862b6a249258', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));
@@ -62,7 +62,7 @@ export class AfNumberBadge {
                     "references": {
                         "NumberBadgeNumber": {
                             "location": "local",
-                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
                             "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeNumber"
                         }
                     }
@@ -88,7 +88,7 @@ export class AfNumberBadge {
                     "references": {
                         "NumberBadgeVariant": {
                             "location": "local",
-                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
                             "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeVariant"
                         }
                     }
@@ -128,3 +128,4 @@ export class AfNumberBadge {
         };
     }
 }
+//# sourceMappingURL=af-number-badge.js.map

package/dist/collection/components/af-number-badge/af-number-badge.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-number-badge.js","sourceRoot":"","sources":["../../../src/components/af-number-badge/af-number-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;;;;;GASG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;WAEG;QACK,WAAM,GAAsB,CAAC,CAAC;QAEtC;;;;WAIG;QACK,YAAO,GAAuB,UAAU,CAAC;QAEjD;;WAEG;QACK,SAAI,GAAW,EAAE,CAAC;KA6B3B;IA3BC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAEhE,MAAM,UAAU,GAAG;YACjB,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACxB,QAAQ,EAAE,GAAG,QAAQ,IAAI;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,gBACE,UAAU,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE;YAEhE,6DACE,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;iBAClC,EACD,KAAK,EAAE,UAAU,IAEhB,IAAI,CAAC,MAAM,CACP,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\nexport type NumberBadgeVariant = 'inCircle' | 'outlined';\n\n/**\n * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.\n * Perfect for numbered lists, step indicators, or ordered content.\n * \n * @example\n * ```html\n * <af-number-badge number=\"1\" variant=\"inCircle\" size=\"48\"></af-number-badge>\n * <af-number-badge number=\"5\" variant=\"outlined\" size=\"32\"></af-number-badge>\n * ```\n */\n@Component({\n tag: 'af-number-badge',\n styleUrl: 'af-number-badge.css',\n shadow: true\n})\nexport class AfNumberBadge {\n /**\n * The number to display (1-10)\n */\n @Prop() number: NumberBadgeNumber = 1;\n\n /**\n * Visual variant of the badge\n * - `inCircle` - Number in filled soft-clay circle\n * - `outlined` - Number text only in mist-green\n */\n @Prop() variant: NumberBadgeVariant = 'inCircle';\n\n /**\n * Size of the badge in pixels\n */\n @Prop() size: number = 48;\n\n render() {\n const isInCircle = this.variant === 'inCircle';\n const fontSize = isInCircle ? this.size * 0.4 : this.size * 0.8;\n\n const badgeStyle = {\n width: `${this.size}px`,\n height: `${this.size}px`,\n fontSize: `${fontSize}px`,\n };\n\n return (\n <Host\n role=\"img\"\n aria-label={`Number ${this.number}${isInCircle ? ' badge' : ''}`}\n >\n <span\n class={{\n 'badge': true,\n [`variant-${this.variant}`]: true,\n }}\n style={badgeStyle}\n >\n {this.number}\n </span>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-progress-line/af-progress-line.js CHANGED Viewed

@@ -21,10 +21,10 @@ export class AfProgressLine {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: '9a6fac61d82f79f36a4cb60e929e96449de232a8' }, h("div", { key: '1d535263ab6274466280caebcaf52052adfbb4b5', class: {
+        return (h(Host, { key: 'ab4db165b98bbd164b87d65f2e013d6719a04f52' }, h("div", { key: 'ef6ffbf323aff182c9de107d07992f032606e422', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '6f479550cd91f8c4f5a256546ed80a09498d6bba', class: "progress-line__background" }), h("div", { key: 'b0f6e719cdede111f7a15651d9f5289456dbddf4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'e7e2ab3850a97dc4d37194132dcdd9c7f3d614e3', class: "progress-line__background" }), h("div", { key: '00c16c1a7eebbcd314db1f12ee4344d2b2bebc9d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }
@@ -83,3 +83,4 @@ export class AfProgressLine {
         };
     }
 }
+//# sourceMappingURL=af-progress-line.js.map

package/dist/collection/components/af-progress-line/af-progress-line.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-progress-line.js","sourceRoot":"","sources":["../../../src/components/af-progress-line/af-progress-line.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE;;WAEG;QACK,aAAQ,GAAW,CAAC,CAAC;QAE7B;;;WAGG;QACK,gBAAW,GAAiB,YAAY,CAAC;KA4BlD;IA1BC,MAAM;QACJ,iCAAiC;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAChE,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG,CAAC;QAE9C,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,CAAC,kBAAkB,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;iBAC7C,EACD,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,mBAC3B,CAAC,mBACD,GAAG;gBAElB,4DAAK,KAAK,EAAC,2BAA2B,GAAG;gBACzC,4DACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,GACvC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n */\n@Component({\n tag: 'af-progress-line',\n styleUrl: 'af-progress-line.css',\n shadow: false,\n scoped: true,\n})\nexport class AfProgressLine {\n /**\n * Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n */\n @Prop() progress: number = 0;\n\n /**\n * Orientation of the progress line.\n * Currently only horizontal is supported.\n */\n @Prop() orientation: 'horizontal' = 'horizontal';\n\n render() {\n // Clamp progress between 0 and 1\n const clampedProgress = Math.max(0, Math.min(1, this.progress));\n const progressPercent = clampedProgress * 100;\n\n return (\n <Host>\n <div\n class={{\n 'progress-line': true,\n [`progress-line--${this.orientation}`]: true,\n }}\n role=\"progressbar\"\n aria-valuenow={Math.round(progressPercent)}\n aria-valuemin={0}\n aria-valuemax={100}\n >\n <div class=\"progress-line__background\" />\n <div\n class=\"progress-line__active\"\n style={{ width: `${progressPercent}%` }}\n />\n </div>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-radio/af-radio.js CHANGED Viewed

@@ -157,3 +157,4 @@ export class AfRadio {
     }
     static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=af-radio.js.map

package/dist/collection/components/af-radio/af-radio.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-radio.js","sourceRoot":"","sources":["../../../src/components/af-radio/af-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAEvF;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;IALpB;QAQE;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAE1C,0CAA0C;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;gBAC5E,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,IAAK,KAAa,CAAC,OAAO,EAAE,CAAC;wBAC/C,KAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBACjC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACpF,CAAC,CAAC;KAoCH;IAlCC,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;gBACnD,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAChC;gBACF,6DAAM,KAAK,EAAE,cAAc;oBACzB,6DAAM,KAAK,EAAC,KAAK,GAAQ,CACpB;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Element } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * Radios with the same `name` prop are mutually exclusive.\n * \n * @slot - Radio label text\n */\n@Component({\n tag: 'af-radio',\n styleUrl: 'af-radio.css',\n shadow: true\n})\nexport class AfRadio {\n @Element() el!: HTMLElement;\n\n /**\n * Whether the radio is checked\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /**\n * Whether the radio is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the radio for form submission (radios with same name are grouped)\n */\n @Prop({ reflect: true }) name?: string;\n\n /**\n * The value of the radio for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the radio checked state changes\n */\n @Event() afChange!: EventEmitter<{ checked: boolean; value?: string; name?: string }>;\n\n private handleClick = () => {\n if (this.disabled || this.checked) return;\n \n // Uncheck other radios with the same name\n if (this.name) {\n const siblings = document.querySelectorAll(`af-radio[name=\"${this.name}\"]`);\n siblings.forEach((radio) => {\n if (radio !== this.el && (radio as any).checked) {\n (radio as any).checked = false;\n }\n });\n }\n \n this.checked = true;\n this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });\n };\n\n render() {\n const radioClasses = {\n 'radio': true,\n 'disabled': this.disabled\n };\n\n const controlClasses = {\n 'control': true,\n 'checked': this.checked,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={radioClasses} onClick={this.handleClick}>\n <input\n type=\"radio\"\n class=\"input\"\n checked={this.checked}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n tabindex={this.disabled ? -1 : 0}\n />\n <span class={controlClasses}>\n <span class=\"dot\"></span>\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-section/af-section.css CHANGED Viewed

@@ -74,9 +74,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -148,9 +148,9 @@
   --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
   /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
-  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
-  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);
+  --af-button-ghost-text: var(--colour-brand-white, #ffffff);
+  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);
+  --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -222,9 +222,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -296,9 +296,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -370,9 +370,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -403,6 +403,7 @@
 }
 /* Mobile adjustments */
+/* mobile-only */
 @media (max-width: 768px) {
   .padding-tight {
     padding: 32px 0;

package/dist/collection/components/af-section/af-section.js CHANGED Viewed

@@ -13,8 +13,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'ae8f8342af2711fb23030adbd27d08ce89578ecb' });
-        return (h(Host, { key: 'bc6fba7cc81e35662dfb68621021136065b6e198' }, h("div", { key: '46d1700bb966cafb88a78ecc750d558b16942e79', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: '9a5e38a56170b65a8bc88191fef5cfd0c7d37cda' });
+        return (h(Host, { key: '66fa1e6000cebdf1fa4ea850156ff54ec55f5952' }, h("div", { key: '883a3f086eab3b120afed962b2fff8986aaf0b25', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }
@@ -93,3 +93,4 @@ export class AfSection {
         };
     }
 }
+//# sourceMappingURL=af-section.js.map

package/dist/collection/components/af-section/af-section.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAA2C,SAAS,CAAC;QAEpE,2EAA2E;QACnE,UAAK,GAAqE,OAAO,CAAC;QAE1F,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n \n /** Theme - sets background color and provides theme context to children */\n @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} theme-${this.theme}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-show/af-show.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class AfShow {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: 'b88e3f6dedeb0a8cc4f69b3c9915a4fb0a115df7', class: classes }, h("slot", { key: '55f89874b70bbcc636e615556f11e99baeafad73' })));
+        return (h(Host, { key: '0e1fa54d81a3a30c5547bd08f83bf43bf357038f', class: classes }, h("slot", { key: '52af3932d49d463f0d807bb7654ecbff02f7db8e' })));
     }
     static get is() { return "af-show"; }
     static get encapsulation() { return "shadow"; }
@@ -85,3 +85,4 @@ export class AfShow {
         };
     }
 }
+//# sourceMappingURL=af-show.js.map

package/dist/collection/components/af-show/af-show.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-show.js","sourceRoot":"","sources":["../../../src/components/af-show/af-show.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,MAAM;IAajB,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;YAC1C,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC3C,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,OAAO;YAClB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Breakpoint = 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Show component for responsive visibility control.\n * Show or hide content based on viewport breakpoints.\n *\n * Breakpoints (from tokens):\n * - sm: 375px\n * - md: 768px\n * - lg: 1024px\n * - xl: 1440px\n *\n * @slot - Content to show/hide\n */\n@Component({\n tag: 'af-show',\n styleUrl: 'af-show.css',\n shadow: true,\n})\nexport class AfShow {\n /**\n * Show content only when viewport is at or above this breakpoint.\n * Content is hidden below this breakpoint.\n */\n @Prop() above?: Breakpoint;\n\n /**\n * Show content only when viewport is below this breakpoint.\n * Content is hidden at or above this breakpoint.\n */\n @Prop() below?: Breakpoint;\n\n render() {\n const classes = {\n 'show': true,\n [`show-above-${this.above}`]: !!this.above,\n [`show-below-${this.below}`]: !!this.below,\n };\n\n return (\n <Host class={classes}>\n <slot></slot>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-social-link/af-social-link.js CHANGED Viewed

@@ -29,7 +29,7 @@ export class AfSocialLink {
         }
     }
     render() {
-        return (h(Host, { key: 'd8875f8b62e560cd11e71f6c6b2baf219aef96d2' }, h("a", { key: 'a6e5c064945372150306b6aeb294b13659b565f4', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: '9cd9c78a4b964d2a43f9d85ff528abb63eea31e2' }, h("a", { key: '2fc0c44720aa6f58229a5ad285269ab7b73c07cc', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
     static get is() { return "af-social-link"; }
     static get encapsulation() { return "scoped"; }
@@ -108,3 +108,4 @@ export class AfSocialLink {
         };
     }
 }
+//# sourceMappingURL=af-social-link.js.map

package/dist/collection/components/af-social-link/af-social-link.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-social-link.js","sourceRoot":"","sources":["../../../src/components/af-social-link/af-social-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,YAAY;IANzB;QAOE,eAAe;QACP,SAAI,GAAW,GAAG,CAAC;QAE3B,oCAAoC;QAC5B,UAAK,GAAW,EAAE,CAAC;QAE3B,qFAAqF;QAC7E,SAAI,GAA0E,QAAQ,CAAC;KAyDhG;IAvDS,UAAU;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,UAAU;gBACb,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,KAAK;oBAClG,YAAM,CAAC,EAAC,gFAAgF,GAAE;oBAC1F,YAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,GAAE;oBACzC,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAE,CACzB,CACP,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,KAAK;oBAClG,YAAM,CAAC,EAAC,mQAAmQ,GAAE;oBAC7Q,eAAS,MAAM,EAAC,iCAAiC,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,GAAE,CACjF,CACP,CAAC;YACJ,KAAK,QAAQ;gBACX,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,KAAK;oBAClG,YAAM,CAAC,EAAC,qSAAqS,GAAE,CAC3S,CACP,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,KAAK;oBAClG,YAAM,CAAC,EAAC,6KAA6K,GAAE,CACnL,CACP,CAAC;YACJ,KAAK,UAAU;gBACb,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,KAAK;oBAClG,YAAM,CAAC,EAAC,mEAAmE,GAAE,CACzE,CACP,CAAC;YACJ;gBACE,OAAO,YAAM,IAAI,EAAC,MAAM,GAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,KAAK,EAAC,aAAa,gBACP,IAAI,CAAC,KAAK,IAErB,IAAI,CAAC,UAAU,EAAE,CAChB,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Social media link component\n * Circular bordered icon link for social media profiles\n */\n@Component({\n tag: 'af-social-link',\n styleUrl: 'af-social-link.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSocialLink {\n /** Link URL */\n @Prop() href: string = '#';\n\n /** Accessible label for the link */\n @Prop() label: string = '';\n\n /** Icon type: 'linkedin', 'youtube', 'github', 'twitter', 'facebook', or 'custom' */\n @Prop() icon: 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom' = 'custom';\n\n private renderIcon() {\n switch (this.icon) {\n case 'linkedin':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"/>\n <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"/>\n <circle cx=\"4\" cy=\"4\" r=\"2\"/>\n </svg>\n );\n case 'youtube':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z\"/>\n <polygon points=\"9.75,15.02 15.5,11.75 9.75,8.48\" fill=\"currentColor\" stroke=\"none\"/>\n </svg>\n );\n case 'github':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"/>\n </svg>\n );\n case 'twitter':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"/>\n </svg>\n );\n case 'facebook':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"/>\n </svg>\n );\n default:\n return <slot name=\"icon\"></slot>;\n }\n }\n\n render() {\n return (\n <Host>\n <a \n href={this.href} \n target=\"_blank\" \n rel=\"noopener noreferrer\" \n class=\"social-link\" \n aria-label={this.label}\n >\n {this.renderIcon()}\n </a>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-spacer/af-spacer.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class AfSpacer {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: 'e3d8bff163b92ef7caf5802947556444ce2f1a48', style: style, "aria-hidden": "true" });
+        return h(Host, { key: '667181ea8f243b47e0a54fbfc5441b7551d69082', style: style, "aria-hidden": "true" });
     }
     static get is() { return "af-spacer"; }
     static get encapsulation() { return "shadow"; }
@@ -117,3 +117,4 @@ export class AfSpacer {
         };
     }
 }
+//# sourceMappingURL=af-spacer.js.map

package/dist/collection/components/af-spacer/af-spacer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-spacer.js","sourceRoot":"","sources":["../../../src/components/af-spacer/af-spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAaE;;;WAGG;QACK,SAAI,GAAY,KAAK,CAAC;QAE9B;;;;;;;WAOG;QACK,SAAI,GAAuC,MAAM,CAAC;KAoB3D;IAlBC,MAAM;QACJ,MAAM,KAAK,GAA2B,EAAE,CAAC;QAEzC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QACnB,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,MAAM,SAAS,GAAG,eAAe,IAAI,CAAC,IAAI,GAAG,CAAC;YAE9C,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACvD,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC;YAC1B,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;gBACrD,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;YAC3B,CAAC;QACH,CAAC;QAED,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK,iBAAc,MAAM,GAAQ,CAAC;IACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Size = '1' | '2' | '3' | '4' | '5' | '6' | '8';\n\n/**\n * Spacer component for adding fixed or flexible space between elements.\n * Use within flex or grid layouts.\n */\n@Component({\n tag: 'af-spacer',\n styleUrl: 'af-spacer.css',\n shadow: true,\n})\nexport class AfSpacer {\n /**\n * Fixed size using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n * Ignored when `flex` is true.\n */\n @Prop() size?: Size;\n\n /**\n * When true, the spacer grows to fill available space (flex: 1).\n * Useful for pushing items apart in a flex container.\n */\n @Prop() flex: boolean = false;\n\n /**\n * Axis for the spacer sizing.\n * - 'horizontal': Width-based spacing\n * - 'vertical': Height-based spacing\n * - 'both': Both dimensions (square)\n *\n * Auto-detected based on parent flex direction when possible.\n */\n @Prop() axis: 'horizontal' | 'vertical' | 'both' = 'both';\n\n render() {\n const style: Record<string, string> = {};\n\n if (this.flex) {\n style.flex = '1';\n } else if (this.size) {\n const sizeValue = `var(--space-${this.size})`;\n\n if (this.axis === 'horizontal' || this.axis === 'both') {\n style.width = sizeValue;\n }\n if (this.axis === 'vertical' || this.axis === 'both') {\n style.height = sizeValue;\n }\n }\n\n return <Host style={style} aria-hidden=\"true\"></Host>;\n }\n}\n\n"]}

package/dist/collection/components/af-split-section/af-split-section.js CHANGED Viewed

@@ -26,14 +26,14 @@ export class AfSplitSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'bc307598c8f20de642f691d1bd02269cbd34738c' });
+        const content = h("slot", { key: 'de39e81b9bc88da7323663c248faf7a4faf20f7f' });
         // Create the split background using CSS gradient
         const topColor = themeColors[this.topTheme];
         const bottomColor = themeColors[this.bottomTheme];
         const backgroundStyle = {
             background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
         };
-        return (h(Host, { key: 'd96957b3dc7f8daea9f3480269fde7116c587461' }, h("div", { key: 'f274ae8e50c5b1fa9f59b54a1bce3dbb5408a77b', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+        return (h(Host, { key: '4b140cb28dd9ec3dd2a5148737aada241dbbfb1d' }, h("div", { key: '7eeb358bbae0e98e403e39020482505248c3bb69', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-split-section"; }
     static get encapsulation() { return "scoped"; }
@@ -142,3 +142,4 @@ export class AfSplitSection {
         };
     }
 }
+//# sourceMappingURL=af-split-section.js.map

package/dist/collection/components/af-split-section/af-split-section.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-split-section.js","sourceRoot":"","sources":["../../../src/components/af-split-section/af-split-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD,sCAAsC;AACtC,MAAM,WAAW,GAA0B;IACzC,OAAO,EAAE,oCAAoC;IAC7C,SAAS,EAAE,sCAAsC;IACjD,YAAY,EAAE,yCAAyC;IACvD,WAAW,EAAE,qCAAqC;IAClD,aAAa,EAAE,0CAA0C;CAC1D,CAAC;AAEF;;;;;;GAMG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,4CAA4C;QACpC,aAAQ,GAAU,YAAY,CAAC;QAEvC,+CAA+C;QACvC,gBAAW,GAAU,OAAO,CAAC;QAErC,sBAAsB;QACd,YAAO,GAA2C,SAAS,CAAC;QAEpE,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAyBnC;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,iDAAiD;QACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,QAAQ,QAAQ,SAAS,WAAW,SAAS,WAAW,QAAQ;SACnH,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,yBAAyB,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ,EAAE,EACzE,KAAK,EAAE,eAAe,IAErB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n// Map theme names to CSS color values\nconst themeColors: Record<Theme, string> = {\n 'white': 'var(--colour-brand-white, #FFFFFF)',\n 'inkwell': 'var(--colour-brand-inkwell, #14343B)',\n 'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',\n 'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',\n 'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',\n};\n\n/**\n * Split Section component for layouts with two-tone backgrounds.\n * Creates a vertical split with different themes for top and bottom halves.\n * Useful for content that visually spans across two themed areas.\n * \n * Uses a CSS linear-gradient for the split background effect.\n */\n@Component({\n tag: 'af-split-section',\n styleUrl: 'af-split-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSplitSection {\n /** Theme for the top half of the section */\n @Prop() topTheme: Theme = 'mist-green';\n\n /** Theme for the bottom half of the section */\n @Prop() bottomTheme: Theme = 'white';\n\n /** Padding variant */\n @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n\n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n // Create the split background using CSS gradient\n const topColor = themeColors[this.topTheme];\n const bottomColor = themeColors[this.bottomTheme];\n const backgroundStyle = {\n background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`\n };\n\n return (\n <Host>\n <div\n class={`split-section padding-${this.padding} top-theme-${this.topTheme}`}\n style={backgroundStyle}\n >\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-stack/af-stack.js CHANGED Viewed

@@ -55,7 +55,7 @@ export class AfStack {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '72e0cbdd57b5f300e1957549d225f72ae4cdc2d2', style: style }, h("slot", { key: '9f71bea28b78fa1fcb414e5f3e2b9f9e68d7962d' })));
+        return (h(Host, { key: '757fee5201ab0831e7dc51aa0f7dc2cad4279f95', style: style }, h("slot", { key: '06e94b64a308a3465e54d79e1a5ffb3758c6e626' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -194,3 +194,4 @@ export class AfStack {
         };
     }
 }
+//# sourceMappingURL=af-stack.js.map

package/dist/collection/components/af-stack/af-stack.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stack.js","sourceRoot":"","sources":["../../../src/components/af-stack/af-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;IALpB;QAME;;;;WAIG;QACK,cAAS,GAAc,UAAU,CAAC;QAE1C;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,SAAS,CAAC;QAEjC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,KAAK,CAAC;KAmC/B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YAC/D,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Direction = 'vertical' | 'horizontal';\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.\n * Uses design tokens for gap values.\n *\n * @slot - Content to stack\n */\n@Component({\n tag: 'af-stack',\n styleUrl: 'af-stack.css',\n shadow: true,\n})\nexport class AfStack {\n /**\n * Stack direction.\n * - 'vertical': Items stack top to bottom (flex-direction: column)\n * - 'horizontal': Items stack left to right (flex-direction: row)\n */\n @Prop() direction: Direction = 'vertical';\n\n /**\n * Gap between items using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n */\n @Prop() gap: Gap = '4';\n\n /**\n * Align items on the cross axis.\n */\n @Prop() align: Align = 'stretch';\n\n /**\n * Justify content on the main axis.\n */\n @Prop() justify: Justify = 'start';\n\n /**\n * Whether items should wrap to the next line.\n */\n @Prop() wrap: boolean = false;\n\n render() {\n const alignMap: Record<Align, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n\n const justifyMap: Record<Justify, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n around: 'space-around',\n evenly: 'space-evenly',\n };\n\n const style = {\n display: 'flex',\n flexDirection: this.direction === 'vertical' ? 'column' : 'row',\n gap: `var(--space-${this.gap})`,\n alignItems: alignMap[this.align],\n justifyContent: justifyMap[this.justify],\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n } as Record<string, string>;\n\n return (\n <Host style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-stepper/af-stepper.js CHANGED Viewed

@@ -40,7 +40,7 @@ export class AfStepper {
         });
     }
     render() {
-        return (h(Host, { key: 'a9c2328058c0495bbec34d3a08deb0375e2f6dae', class: `stepper stepper--${this.orientation}` }, h("div", { key: '91fb9864b86a9c2b44e84db1356099ebf5d119f3', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '680bf938f006e4696882aa55f7ca6fa02bcf4db4' })));
+        return (h(Host, { key: '0ca79e9f0006bfbe3ab6e18cceaafd0257f4defb', class: `stepper stepper--${this.orientation}` }, h("div", { key: '8682fe5e58f7df3fb9866966fb6c04715203fd87', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: 'ecdf79d87ee099666521dbb6f8e32375dd829fea' })));
     }
     static get is() { return "af-stepper"; }
     static get encapsulation() { return "scoped"; }
@@ -80,3 +80,4 @@ export class AfStepper {
     }
     static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=af-stepper.js.map

package/dist/collection/components/af-stepper/af-stepper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stepper.js","sourceRoot":"","sources":["../../../src/components/af-stepper/af-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,MAAM,OAAO,SAAS;IANtB;QASE,wEAAwE;QAChE,gBAAW,GAA8B,YAAY,CAAC;KAyB/D;IAvBC,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,aAAa;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAU,CAAC;QAC/E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACxB,+DAA+D;YAC/D,8DAA8D;YAC9D,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,EAAE;YACjD,4DAAK,KAAK,EAAC,oBAAoB,iBAAa,MAAM,GAAO;YACzD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Stepper composite for \"Sign up / Upload / See results\"-style marketing\n * flows. Renders children `af-stepper-step` elements in a horizontal row\n * (desktop) or vertical stack (mobile), with a connector line between badges.\n *\n * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine\n * connector, and centered step text.\n *\n * @example\n * ```html\n * <af-stepper>\n * <af-stepper-step>\n * <h3 slot=\"heading\">Sign up for free</h3>\n * <p slot=\"body\">No sales calls, no credit cards.</p>\n * </af-stepper-step>\n * <af-stepper-step>...</af-stepper-step>\n * <af-stepper-step>...</af-stepper-step>\n * </af-stepper>\n * ```\n *\n * @slot - `af-stepper-step` elements.\n */\n@Component({\n tag: 'af-stepper',\n styleUrl: 'af-stepper.css',\n shadow: false,\n scoped: true,\n})\nexport class AfStepper {\n @Element() el!: HTMLElement;\n\n /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n componentDidLoad() {\n this.assignIndices();\n }\n\n private assignIndices() {\n const steps = Array.from(this.el.querySelectorAll('af-stepper-step')) as any[];\n steps.forEach((step, i) => {\n // Set via property so Stencil reactively re-renders the badge.\n // Only overwrite when the consumer hasn't explicitly set one.\n if (step.index == null || step.index === 1) {\n step.index = i + 1;\n }\n });\n }\n\n render() {\n return (\n <Host class={`stepper stepper--${this.orientation}`}>\n <div class=\"stepper__connector\" aria-hidden=\"true\"></div>\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-stepper-step/af-stepper-step.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class AfStepperStep {
         this.index = 1;
     }
     render() {
-        return (h(Host, { key: 'b91b1f537b806fcd529fa52e67399f6be16bca5d' }, h("span", { key: '9622f4f96632b3ba69144afd82a6787e32eb7c2c', class: "stepper-step__badge" }, this.index), h("div", { key: '315447d305191d0b74116a486454c9b4b5f6dd22', class: "stepper-step__content" }, h("div", { key: 'fc838c36ffa5ca04d798faabb1c1fa6fd446ee2a', class: "stepper-step__heading" }, h("slot", { key: '24199d97434f81e1d635cdb3a06a9946d27f969b', name: "heading" })), h("div", { key: 'ad23f7a9e6459a9ac9459202901d144df44c2f03', class: "stepper-step__body" }, h("slot", { key: '66a4b92593430b057479e15b2a0d47f5a10eb229', name: "body" })))));
+        return (h(Host, { key: '36a45ffc037fb0efd1352fb1aa8482205faada04' }, h("span", { key: '93a75d705f40f920b3480607dfe2ed9f4ba37e55', class: "stepper-step__badge" }, this.index), h("div", { key: '2eb52b18397349da4fd3a9322fb7f1af0a271b4c', class: "stepper-step__content" }, h("div", { key: 'cf0fff2d73189a63e675017b1d431d2edc03e0c6', class: "stepper-step__heading" }, h("slot", { key: '6649a32664e82bc04e6f53c05d92050ad9b828d6', name: "heading" })), h("div", { key: '8f66cf21ff1b3e1bb4e817e6e85b418c1bdffd24', class: "stepper-step__body" }, h("slot", { key: 'a38c1c2c19d5d821ca513f098cd1b4fe6d007a92', name: "body" })))));
     }
     static get is() { return "af-stepper-step"; }
     static get encapsulation() { return "scoped"; }
@@ -57,3 +57,4 @@ export class AfStepperStep {
         };
     }
 }
+//# sourceMappingURL=af-stepper-step.js.map

package/dist/collection/components/af-stepper-step/af-stepper-step.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stepper-step.js","sourceRoot":"","sources":["../../../src/components/af-stepper-step/af-stepper-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE;;;WAGG;QACsB,UAAK,GAAW,CAAC,CAAC;KAiB5C;IAfC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACrD,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;gBACN,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an af-stepper. Renders a numbered circular badge\n * followed by slotted heading + body content.\n *\n * The parent af-stepper auto-assigns the `index` attribute based on DOM\n * order, so consumers don't need to hand-number the steps.\n *\n * @slot heading - Step title (h3/h4 recommended).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n tag: 'af-stepper-step',\n styleUrl: 'af-stepper-step.css',\n shadow: false,\n scoped: true,\n})\nexport class AfStepperStep {\n /**\n * Step number shown in the badge. Auto-assigned by the parent stepper if\n * not explicitly set.\n */\n @Prop({ reflect: true }) index: number = 1;\n\n render() {\n return (\n <Host>\n <span class=\"stepper-step__badge\">{this.index}</span>\n <div class=\"stepper-step__content\">\n <div class=\"stepper-step__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stepper-step__body\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/af-switch/af-switch.js CHANGED Viewed

@@ -152,3 +152,4 @@ export class AfSwitch {
             }];
     }
 }
+//# sourceMappingURL=af-switch.js.map

package/dist/collection/components/af-switch/af-switch.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-switch.js","sourceRoot":"","sources":["../../../src/components/af-switch/af-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACqC,WAAM,GAAY,KAAK,CAAC;QAEhE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,aAAa;gBACzB,8DACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;gBACF,6DAAM,KAAK,EAAE,YAAY;oBACvB,6DAAM,KAAK,EAAE,WAAW,GAAS,CAC5B;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n tag: 'af-switch',\n styleUrl: 'af-switch.css',\n shadow: true\n})\nexport class AfSwitch {\n /**\n * Whether the switch is active (on)\n */\n @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n /**\n * Whether the switch is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the switch for form submission\n */\n @Prop() name?: string;\n\n /**\n * The value of the switch for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the switch state changes\n */\n @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n private handleChange = () => {\n if (this.disabled) return;\n this.active = !this.active;\n this.afChange.emit({ active: this.active });\n };\n\n render() {\n const switchClasses = {\n 'switch': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n const trackClasses = {\n 'track': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n const knobClasses = {\n 'knob': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={switchClasses}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"input\"\n checked={this.active}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n onChange={this.handleChange}\n />\n <span class={trackClasses}>\n <span class={knobClasses}></span>\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-tab/af-tab.js CHANGED Viewed

@@ -151,7 +151,7 @@ export class AfTab {
                     "references": {
                         "TabShape": {
                             "location": "local",
-                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tab/af-tab.tsx",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tab/af-tab.tsx",
                             "id": "src/components/af-tab/af-tab.tsx::TabShape"
                         }
                     }
@@ -248,3 +248,4 @@ export class AfTab {
             }];
     }
 }
+//# sourceMappingURL=af-tab.js.map

package/dist/collection/components/af-tab/af-tab.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-tab.js","sourceRoot":"","sources":["../../../src/components/af-tab/af-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAI9E;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,KAAK;IALlB;QAME;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACsB,WAAM,GAAY,KAAK,CAAC;QAEjD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;;;WAIG;QACsB,UAAK,GAAa,QAAQ,CAAC;QAEpD;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;QAErC;;WAEG;QACK,kBAAa,GAAY,KAAK,CAAC;QAY/B,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC;KAqCH;IAnCC,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;SAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEtB,IAAI,CAAC,aAAa,IAAI,CACrB,6DAAM,KAAK,EAAC,aAAa;oBACvB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACR;gBACA,IAAI,CAAC,WAAW,IAAI,CACnB,6DAAM,KAAK,EAAC,WAAW;oBACrB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACf,CACR;gBACD,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\nexport type TabShape = 'square' | 'pill';\n\n/**\n * Tab component for use within a TabBar.\n * Represents an individual selectable tab with support for icons and number badges.\n * \n * @slot icon - Optional icon to display before the label\n * @slot number - Optional number badge to display\n * \n * @example\n * ```html\n * <af-tab label=\"Overview\" active></af-tab>\n * <af-tab label=\"Details\">\n * <af-icon slot=\"icon\" name=\"document\"></af-icon>\n * </af-tab>\n * <af-tab label=\"Step 1\">\n * <af-number-badge slot=\"number\" number=\"1\"></af-number-badge>\n * </af-tab>\n * ```\n */\n@Component({\n tag: 'af-tab',\n styleUrl: 'af-tab.css',\n shadow: true\n})\nexport class AfTab {\n /**\n * The text label for the tab\n */\n @Prop() label: string = '';\n\n /**\n * Whether the tab is currently active/selected\n */\n @Prop({ reflect: true }) active: boolean = false;\n\n /**\n * Whether the tab is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Visual shape variant\n * - `square` - Rectangular tab with bottom border indicator\n * - `pill` - Rounded pill shape with background for active state\n */\n @Prop({ reflect: true }) shape: TabShape = 'square';\n\n /**\n * Whether to show the icon slot\n */\n @Prop() displayIcon: boolean = false;\n\n /**\n * Whether to show the number badge slot\n */\n @Prop() displayNumber: boolean = false;\n\n /**\n * Unique value for the tab, used for programmatic selection\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the tab is clicked\n */\n @Event() afTabClick!: EventEmitter<{ value?: string }>;\n\n private handleClick = () => {\n if (this.disabled) return;\n this.afTabClick.emit({ value: this.value });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.afTabClick.emit({ value: this.value });\n }\n };\n\n render() {\n const tabClasses = {\n 'tab': true,\n 'active': this.active,\n 'disabled': this.disabled,\n [`shape-${this.shape}`]: true,\n };\n\n return (\n <Host>\n <button\n class={tabClasses}\n role=\"tab\"\n aria-selected={this.active ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n disabled={this.disabled}\n >\n {this.displayNumber && (\n <span class=\"number-slot\">\n <slot name=\"number\" />\n </span>\n )}\n {this.displayIcon && (\n <span class=\"icon-slot\">\n <slot name=\"icon\" />\n </span>\n )}\n <span class=\"label\">{this.label}</span>\n </button>\n </Host>\n );\n }\n}\n\n"]}

package/dist/collection/components/af-tab-bar/af-tab-bar.js CHANGED Viewed

@@ -112,7 +112,7 @@ export class AfTabBar {
                     "references": {
                         "TabBarShape": {
                             "location": "local",
-                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
                             "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarShape"
                         }
                     }
@@ -138,7 +138,7 @@ export class AfTabBar {
                     "references": {
                         "TabBarBreakpoint": {
                             "location": "local",
-                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
                             "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarBreakpoint"
                         }
                     }
@@ -168,3 +168,4 @@ export class AfTabBar {
             }];
     }
 }
+//# sourceMappingURL=af-tab-bar.js.map

package/dist/collection/components/af-tab-bar/af-tab-bar.js.map ADDED Viewed

@@ -0,0 +1 @@

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