npm - @affinda/wc - Versions diffs - 0.0.26 → 0.0.28 - Mend

@affinda/wc 0.0.26 → 0.0.28

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 (894) hide show

package/dist/esm/af-show.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afShowCss = () => `:host{display:contents}:host([hidden]){display:none !important}:host(.show-above-sm){display:none}@media (min-width: 480px){:host(.show-above-sm){display:contents}}:host(.show-above-md){display:none}@media (min-width: 768px){:host(.show-above-md){display:contents}}:host(.show-above-lg){display:none}@media (min-width: 1024px){:host(.show-above-lg){display:contents}}:host(.show-above-xl){display:none}@media (min-width: 1440px){:host(.show-above-xl){display:contents}}@media (min-width: 480px){:host(.show-below-sm){display:none}}@media (min-width: 768px){:host(.show-below-md){display:none}}@media (min-width: 1024px){:host(.show-below-lg){display:none}}@media (min-width: 1440px){:host(.show-below-xl){display:none}}`;
+const afShowCss = ":host{display:contents}:host([hidden]){display:none !important}:host(.show-above-sm){display:none}@media (min-width: 480px){:host(.show-above-sm){display:contents}}:host(.show-above-md){display:none}@media (min-width: 768px){:host(.show-above-md){display:contents}}:host(.show-above-lg){display:none}@media (min-width: 1024px){:host(.show-above-lg){display:contents}}:host(.show-above-xl){display:none}@media (min-width: 1440px){:host(.show-above-xl){display:contents}}@media (min-width: 480px){:host(.show-below-sm){display:none}}@media (min-width: 768px){:host(.show-below-md){display:none}}@media (min-width: 1024px){:host(.show-below-lg){display:none}}@media (min-width: 1440px){:host(.show-below-xl){display:none}}";
 const AfShow = class {
     constructor(hostRef) {
@@ -15,6 +15,7 @@ const AfShow = class {
         return (h(Host, { key: '0e1fa54d81a3a30c5547bd08f83bf43bf357038f', class: classes }, h("slot", { key: '52af3932d49d463f0d807bb7654ecbff02f7db8e' })));
     }
 };
-AfShow.style = afShowCss();
+AfShow.style = afShowCss;
 export { AfShow as af_show };
+//# sourceMappingURL=af-show.entry.js.map

package/dist/esm/af-show.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-show.entry.js","sources":["src/components/af-show/af-show.css?tag=af-show&encapsulation=shadow","src/components/af-show/af-show.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n/* Show above breakpoints (hidden below) */\n/* sm: 480px (small) */\n:host(.show-above-sm) {\n display: none;\n}\n@media (min-width: 480px) {\n :host(.show-above-sm) {\n display: contents;\n }\n}\n\n/* md: 768px */\n:host(.show-above-md) {\n display: none;\n}\n@media (min-width: 768px) {\n :host(.show-above-md) {\n display: contents;\n }\n}\n\n/* lg: 1024px */\n:host(.show-above-lg) {\n display: none;\n}\n@media (min-width: 1024px) {\n :host(.show-above-lg) {\n display: contents;\n }\n}\n\n/* xl: 1440px */\n:host(.show-above-xl) {\n display: none;\n}\n@media (min-width: 1440px) {\n :host(.show-above-xl) {\n display: contents;\n }\n}\n\n/* Show below breakpoints (hidden at or above) */\n/* sm: 480px (small) */\n@media (min-width: 480px) {\n :host(.show-below-sm) {\n display: none;\n }\n}\n\n/* md: 768px */\n@media (min-width: 768px) {\n :host(.show-below-md) {\n display: none;\n }\n}\n\n/* lg: 1024px */\n@media (min-width: 1024px) {\n :host(.show-below-lg) {\n display: none;\n }\n}\n\n/* xl: 1440px */\n@media (min-width: 1440px) {\n :host(.show-below-xl) {\n display: none;\n }\n}\n\n","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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,itBAAitB;;MCqBttB,MAAM,GAAA,MAAA;;;;IAajB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;YACZ,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;YAC1C,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SAC3C;QAED,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAClB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/af-social-link.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afSocialLinkCss = () => `.sc-af-social-link-h{display:inline-block}.social-link.sc-af-social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.social-link.sc-af-social-link:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}`;
+const afSocialLinkCss = ".sc-af-social-link-h{display:inline-block}.social-link.sc-af-social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.social-link.sc-af-social-link:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}";
 const AfSocialLink = class {
     constructor(hostRef) {
@@ -32,6 +32,7 @@ const AfSocialLink = class {
         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())));
     }
 };
-AfSocialLink.style = afSocialLinkCss();
+AfSocialLink.style = afSocialLinkCss;
 export { AfSocialLink as af_social_link };
+//# sourceMappingURL=af-social-link.entry.js.map

package/dist/esm/af-social-link.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-social-link.entry.js","sources":["src/components/af-social-link/af-social-link.css?tag=af-social-link&encapsulation=scoped","src/components/af-social-link/af-social-link.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border: 1px solid rgba(198, 213, 209, 0.3);\n border-radius: 50%;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n transition: all 0.2s ease;\n}\n\n.social-link:hover {\n background-color: rgba(198, 213, 209, 0.1);\n border-color: rgba(198, 213, 209, 0.5);\n}\n\n","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"],"names":[],"mappings":"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"}

package/dist/esm/af-spacer.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afSpacerCss = () => `:host{display:block;box-sizing:border-box;flex-shrink:0}:host([hidden]){display:none}`;
+const afSpacerCss = ":host{display:block;box-sizing:border-box;flex-shrink:0}:host([hidden]){display:none}";
 const AfSpacer = class {
     constructor(hostRef) {
@@ -37,6 +37,7 @@ const AfSpacer = class {
         return h(Host, { key: '667181ea8f243b47e0a54fbfc5441b7551d69082', style: style, "aria-hidden": "true" });
     }
 };
-AfSpacer.style = afSpacerCss();
+AfSpacer.style = afSpacerCss;
 export { AfSpacer as af_spacer };
+//# sourceMappingURL=af-spacer.entry.js.map

package/dist/esm/af-spacer.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-spacer.entry.js","sources":["src/components/af-spacer/af-spacer.css?tag=af-spacer&encapsulation=shadow","src/components/af-spacer/af-spacer.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n","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"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,uFAAuF;;MCa9F,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAaE;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE7B;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuC,MAAM;AAoB1D;IAlBC,MAAM,GAAA;QACJ,MAAM,KAAK,GAA2B,EAAE;AAExC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,KAAK,CAAC,IAAI,GAAG,GAAG;;AACX,aAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACpB,YAAA,MAAM,SAAS,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,GAAG;AAE7C,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACtD,gBAAA,KAAK,CAAC,KAAK,GAAG,SAAS;;AAEzB,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACpD,gBAAA,KAAK,CAAC,MAAM,GAAG,SAAS;;;AAI5B,QAAA,OAAO,CAAA,CAAC,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,aAAA,EAAc,MAAM,EAAA,CAAQ;;;;;;;"}

package/dist/esm/af-split-section.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afSplitSectionCss = () => `.sc-af-split-section-h{display:block;width:100%}.split-section.sc-af-split-section{position:relative;width:100%}.padding-none.sc-af-split-section{padding:0}.padding-tight.sc-af-split-section{padding:48px 0}.padding-default.sc-af-split-section{padding:96px 0}.padding-loose.sc-af-split-section{padding:120px 0 96px}@media (max-width: 768px){.padding-tight.sc-af-split-section{padding:32px 0}.padding-default.sc-af-split-section{padding:64px 0}.padding-loose.sc-af-split-section{padding:80px 0 64px}}`;
+const afSplitSectionCss = ".sc-af-split-section-h{display:block;width:100%}.split-section.sc-af-split-section{position:relative;width:100%}.padding-none.sc-af-split-section{padding:0}.padding-tight.sc-af-split-section{padding:48px 0}.padding-default.sc-af-split-section{padding:96px 0}.padding-loose.sc-af-split-section{padding:120px 0 96px}@media (max-width: 768px){.padding-tight.sc-af-split-section{padding:32px 0}.padding-default.sc-af-split-section{padding:64px 0}.padding-loose.sc-af-split-section{padding:80px 0 64px}}";
 // Map theme names to CSS color values
 const themeColors = {
@@ -33,6 +33,7 @@ const AfSplitSection = class {
         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)));
     }
 };
-AfSplitSection.style = afSplitSectionCss();
+AfSplitSection.style = afSplitSectionCss;
 export { AfSplitSection as af_split_section };
+//# sourceMappingURL=af-split-section.entry.js.map

package/dist/esm/af-split-section.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-split-section.entry.js","sources":["src/components/af-split-section/af-split-section.css?tag=af-split-section&encapsulation=scoped","src/components/af-split-section/af-split-section.tsx"],"sourcesContent":["/* Theme CSS custom properties are loaded globally from @affinda/css */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.split-section {\n position: relative;\n width: 100%;\n /* Background is set via inline style with linear-gradient */\n}\n\n/* ==========================================================================\n Padding Variants\n ========================================================================== */\n\n.padding-none {\n padding: 0;\n}\n\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n Mobile Adjustments\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,ofAAof;;ACI9gB;AACA,MAAM,WAAW,GAA0B;AACzC,IAAA,OAAO,EAAE,oCAAoC;AAC7C,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,YAAY,EAAE,yCAAyC;AACvD,IAAA,WAAW,EAAE,qCAAqC;AAClD,IAAA,aAAa,EAAE,0CAA0C;CAC1D;MAeY,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAU,YAAY;;AAG9B,QAAA,IAAW,CAAA,WAAA,GAAU,OAAO;;AAG5B,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAyBlC;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;;QAG7B,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC3C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;AACjD,QAAA,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,CAAA,KAAA,EAAQ,QAAQ,CAAS,MAAA,EAAA,WAAW,CAAS,MAAA,EAAA,WAAW,CAAQ,MAAA;SACnH;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,EACzE,KAAK,EAAE,eAAe,EAErB,EAAA,IAAI,CAAC,SAAS,IACb,wBAAe,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}

package/dist/esm/af-stack.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afStackCss = () => `:host{display:flex;box-sizing:border-box}:host([hidden]){display:none}`;
+const afStackCss = ":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";
 const AfStack = class {
     constructor(hostRef) {
@@ -56,6 +56,7 @@ const AfStack = class {
         return (h(Host, { key: '757fee5201ab0831e7dc51aa0f7dc2cad4279f95', style: style }, h("slot", { key: '06e94b64a308a3465e54d79e1a5ffb3758c6e626' })));
     }
 };
-AfStack.style = afStackCss();
+AfStack.style = afStackCss;
 export { AfStack as af_stack };
+//# sourceMappingURL=af-stack.entry.js.map

package/dist/esm/af-stack.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stack.entry.js","sources":["src/components/af-stack/af-stack.css?tag=af-stack&encapsulation=shadow","src/components/af-stack/af-stack.tsx"],"sourcesContent":[":host {\n display: flex;\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n","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"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,wEAAwE;;MCkB9E,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAAc,UAAU;AAEzC;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAmC9B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAK;AAC/D,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/esm/af-stepper-step.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afStepperStepCss = () => `.sc-af-stepper-step-h{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px;position:relative;z-index:1}.stepper-step__badge.sc-af-stepper-step{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:var(--colour-background-white, #ffffff);display:inline-flex;align-items:center;justify-content:center;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:500;font-size:20px;color:var(--colour-brand-inkwell, #14343b);margin-bottom:24px;flex-shrink:0}.stepper-step__content.sc-af-stepper-step{display:flex;flex-direction:column;gap:12px;max-width:320px}.stepper-step__heading.sc-af-stepper-step{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b))}.stepper-step__body.sc-af-stepper-step{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:1.5;color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.sc-af-stepper-step-h :where(h1,h2.sc-af-stepper-step,h3.sc-af-stepper-step,h4.sc-af-stepper-step,h5.sc-af-stepper-step,h6).sc-af-stepper-step,.sc-af-stepper-step-h .sc-af-stepper-step:where(p){font:inherit;color:inherit;margin:0}.stepper--vertical.sc-af-stepper-step-h,.stepper--vertical .sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper--vertical.sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step,.stepper--vertical .sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step{margin-bottom:0}@media (max-width: 767px){.sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper-step__badge.sc-af-stepper-step{margin-bottom:0}}`;
+const afStepperStepCss = ".sc-af-stepper-step-h{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px;position:relative;z-index:1}.stepper-step__badge.sc-af-stepper-step{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:var(--colour-background-white, #ffffff);display:inline-flex;align-items:center;justify-content:center;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:500;font-size:20px;color:var(--colour-brand-inkwell, #14343b);margin-bottom:24px;flex-shrink:0}.stepper-step__content.sc-af-stepper-step{display:flex;flex-direction:column;gap:12px;max-width:320px}.stepper-step__heading.sc-af-stepper-step{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b))}.stepper-step__body.sc-af-stepper-step{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:1.5;color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.sc-af-stepper-step-h :where(h1,h2.sc-af-stepper-step,h3.sc-af-stepper-step,h4.sc-af-stepper-step,h5.sc-af-stepper-step,h6).sc-af-stepper-step,.sc-af-stepper-step-h .sc-af-stepper-step:where(p){font:inherit;color:inherit;margin:0}.stepper--vertical.sc-af-stepper-step-h,.stepper--vertical .sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper--vertical.sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step,.stepper--vertical .sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step{margin-bottom:0}@media (max-width: 767px){.sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper-step__badge.sc-af-stepper-step{margin-bottom:0}}";
 const AfStepperStep = class {
     constructor(hostRef) {
@@ -15,6 +15,7 @@ const AfStepperStep = class {
         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" })))));
     }
 };
-AfStepperStep.style = afStepperStepCss();
+AfStepperStep.style = afStepperStepCss;
 export { AfStepperStep as af_stepper_step };
+//# sourceMappingURL=af-stepper-step.entry.js.map

package/dist/esm/af-stepper-step.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stepper-step.entry.js","sources":["src/components/af-stepper-step/af-stepper-step.css?tag=af-stepper-step&encapsulation=scoped","src/components/af-stepper-step/af-stepper-step.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n flex: 1 1 0;\n min-width: 0;\n padding: 0 16px;\n position: relative;\n z-index: 1;\n}\n\n.stepper-step__badge {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 1px solid var(--colour-brand-inkwell, #14343b);\n background: var(--colour-background-white, #ffffff);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 20px;\n color: var(--colour-brand-inkwell, #14343b);\n margin-bottom: 24px;\n flex-shrink: 0;\n}\n\n.stepper-step__content {\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 320px;\n}\n\n.stepper-step__heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 24px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n}\n\n.stepper-step__body {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 16px;\n line-height: 1.5;\n color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Normalize slotted heading/body tags */\n:host :where(h1, h2, h3, h4, h5, h6),\n:host :where(p) {\n font: inherit;\n color: inherit;\n margin: 0;\n}\n\n/* Vertical orientation — align left */\n:host-context(.stepper--vertical) {\n flex-direction: row;\n align-items: flex-start;\n text-align: left;\n gap: 24px;\n padding: 0;\n}\n\n:host-context(.stepper--vertical) .stepper-step__badge {\n margin-bottom: 0;\n}\n\n/* ≤ mobile */\n@media (max-width: 767px) {\n :host {\n flex-direction: row;\n align-items: flex-start;\n text-align: left;\n gap: 24px;\n padding: 0;\n }\n .stepper-step__badge {\n margin-bottom: 0;\n }\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,u4DAAu4D;;MCkBn5D,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAiB3C;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,CACF,CACD;;;;;;;"}

package/dist/esm/af-stepper.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-nb89SRN6.js';
-const afStepperCss = () => `.sc-af-stepper-h{display:flex;width:100%;position:relative;max-width:1120px;margin:0 auto;align-items:flex-start;justify-content:space-between;gap:24px}.stepper--vertical.sc-af-stepper-h{flex-direction:column;max-width:680px;gap:40px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:23px;left:8%;right:8%;height:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}.stepper--vertical.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:24px;bottom:24px;left:23px;width:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}@media (max-width: 767px){.stepper--horizontal.sc-af-stepper{flex-direction:column;gap:32px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}}`;
+const afStepperCss = ".sc-af-stepper-h{display:flex;width:100%;position:relative;max-width:1120px;margin:0 auto;align-items:flex-start;justify-content:space-between;gap:24px}.stepper--vertical.sc-af-stepper-h{flex-direction:column;max-width:680px;gap:40px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:23px;left:8%;right:8%;height:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}.stepper--vertical.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:24px;bottom:24px;left:23px;width:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}@media (max-width: 767px){.stepper--horizontal.sc-af-stepper{flex-direction:column;gap:32px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}}";
 const AfStepper = class {
     constructor(hostRef) {
@@ -26,6 +26,7 @@ const AfStepper = class {
     }
     get el() { return getElement(this); }
 };
-AfStepper.style = afStepperCss();
+AfStepper.style = afStepperCss;
 export { AfStepper as af_stepper };
+//# sourceMappingURL=af-stepper.entry.js.map

package/dist/esm/af-stepper.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stepper.entry.js","sources":["src/components/af-stepper/af-stepper.css?tag=af-stepper&encapsulation=scoped","src/components/af-stepper/af-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n position: relative;\n max-width: 1120px;\n margin: 0 auto;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n}\n\n:host(.stepper--vertical) {\n flex-direction: column;\n max-width: 680px;\n gap: 40px;\n}\n\n/* Horizontal connector — thin line running across the row of badges. */\n.stepper--horizontal .stepper__connector {\n position: absolute;\n top: 23px; /* aligned to badge centre (badge height 48px / 2 = 24, minus 1px for line) */\n left: 8%;\n right: 8%;\n height: 2px;\n background: var(--colour-brand-inkwell, #14343b);\n opacity: 0.25;\n z-index: 0;\n}\n\n.stepper--vertical .stepper__connector {\n position: absolute;\n top: 24px;\n bottom: 24px;\n left: 23px;\n width: 2px;\n background: var(--colour-brand-inkwell, #14343b);\n opacity: 0.25;\n z-index: 0;\n}\n\n/* ≤ mobile */\n@media (max-width: 767px) {\n .stepper--horizontal {\n flex-direction: column;\n gap: 32px;\n }\n .stepper--horizontal .stepper__connector {\n top: 24px;\n bottom: 24px;\n left: 23px;\n right: auto;\n width: 2px;\n height: auto;\n }\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,s1BAAs1B;;MC8B91B,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAyB9D;IAvBC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAU;QAC9E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;;AAGxB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,WAAW,CAAE,CAAA,EAAA,EACjD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,EACzD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

package/dist/esm/af-switch.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-nb89SRN6.js';
-const afSwitchCss = () => `:host{display:inline-block}.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--af-typography-body-dark, #14343b));user-select:none}.switch.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.track{position:relative;display:flex;align-items:center;flex-shrink:0;width:52px;height:30px;border-radius:var(--radii-switch, 9999px);background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));transition:background 0.2s ease;box-sizing:border-box}.track.active{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b))}.track.disabled{background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed))}.track.active.disabled{background:var(--af-form-control-bg-checked-disabled, #708380)}.switch:not(.disabled):hover .track:not(.active){background:var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3))}.input:focus-visible+.track{box-shadow:0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));outline:none}.knob{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.2s ease, background 0.2s ease;transform:translateX(2px)}.knob.active{transform:translateX(24px);background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.knob.disabled{background:var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));box-shadow:none}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}`;
+const afSwitchCss = ":host{display:inline-block}.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--af-typography-body-dark, #14343b));user-select:none}.switch.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.track{position:relative;display:flex;align-items:center;flex-shrink:0;width:52px;height:30px;border-radius:var(--radii-switch, 9999px);background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));transition:background 0.2s ease;box-sizing:border-box}.track.active{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b))}.track.disabled{background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed))}.track.active.disabled{background:var(--af-form-control-bg-checked-disabled, #708380)}.switch:not(.disabled):hover .track:not(.active){background:var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3))}.input:focus-visible+.track{box-shadow:0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));outline:none}.knob{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.2s ease, background 0.2s ease;transform:translateX(2px)}.knob.active{transform:translateX(24px);background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.knob.disabled{background:var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));box-shadow:none}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
 const AfSwitch = class {
     constructor(hostRef) {
@@ -40,6 +40,7 @@ const AfSwitch = class {
         return (h(Host, { key: '9d319d8029449a756153131636059690a9a68fa5' }, h("label", { key: '301299033334d52e22ed85572ae096290248b3a6', class: switchClasses }, h("input", { key: '2866ca995d02543294b95363b3dc2eb72df94d69', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '1ea8b8d63d7ba48d0d26419dd08d9463968560fe', class: trackClasses }, h("span", { key: '7f0888ef41bbf3d4ace36ef2c3ceadce7a531cc1', class: knobClasses })), h("span", { key: '7ba5088e7a6fe6e70bdb6dc0b91d2fb0912db5d5', class: "label" }, h("slot", { key: '2c55a31a722662c4bb8fef0eb771e72546e95e03' })))));
     }
 };
-AfSwitch.style = afSwitchCss();
+AfSwitch.style = afSwitchCss;
 export { AfSwitch as af_switch };
+//# sourceMappingURL=af-switch.entry.js.map

package/dist/esm/af-switch.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-switch.entry.js","sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n line-height: 20px;\n color: var(--af-form-control-label, var(--af-typography-body-dark, #14343b));\n user-select: none;\n}\n\n.switch.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Switch track */\n.track {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 52px;\n height: 30px;\n border-radius: var(--radii-switch, 9999px);\n background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n transition: background 0.2s ease;\n box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n}\n\n/* Track active + disabled state */\n.track.active.disabled {\n background: var(--af-form-control-bg-checked-disabled, #708380);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n background: var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3));\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n box-shadow: 0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n outline: none;\n}\n\n/* Switch knob */\n.knob {\n position: absolute;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s ease, background 0.2s ease;\n transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n transform: translateX(24px);\n /* When active, knob should contrast with the checked track */\n background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Knob disabled state */\n.knob.disabled {\n background: var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));\n box-shadow: none;\n}\n\n/* Label styling */\n.label {\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n display: none;\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,+3DAA+3D;;MCYt4D,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}

package/dist/esm/af-tab-bar.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-nb89SRN6.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 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 = class {
     constructor(hostRef) {
@@ -80,6 +80,7 @@ const AfTabBar = class {
     }
     get el() { return getElement(this); }
 };
-AfTabBar.style = afTabBarCss();
+AfTabBar.style = afTabBarCss;
 export { AfTabBar as af_tab_bar };
+//# sourceMappingURL=af-tab-bar.entry.js.map

package/dist/esm/af-tab-bar.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-tab-bar.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,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;;;;;;;;"}

package/dist/esm/af-tab.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-nb89SRN6.js';
-const afTabCss = () => `:host{display:inline-flex;flex-shrink:0}.tab{display:inline-flex;align-items:center;justify-content:center;gap:0;border:none;background:transparent;cursor:pointer;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-label-button, 17px);line-height:var(--line-height-label-button, 20px);text-align:center;transition:color 0.15s ease,     background-color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease}.tab:focus{outline:none}.tab:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, #ffffff),     0 0 0 5px var(--af-background-border-active, #8a7049)}.icon-slot,.number-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-slot{width:24px;height:24px}.number-slot{width:24px;height:24px}.label{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 var(--space-3, 12px)}.tab.shape-square{padding:var(--space-3, 12px);border-radius:0;overflow:hidden;border-bottom:3px solid transparent}.tab.shape-square:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);border-bottom-color:var(--af-background-border-subtle, #e8eeed)}.tab.shape-square:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-default, #d1ddda)}.tab.shape-square.active{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-active, #8a7049)}.tab.shape-square.disabled{color:var(--af-typography-body-subtle, #60767b);border-bottom-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-square:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-square:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-square.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px);border-radius:var(--radius-pill, 999px);overflow:hidden}.tab.shape-pill:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);background-color:transparent}.tab.shape-pill:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-level-1-hover, #dde6e3)}.tab.shape-pill.active{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-base, #ffffff);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.08)}.tab.shape-pill.disabled{color:var(--af-typography-body-subtle, #60767b);background-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-pill:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}:host([data-breakpoint="desktop"]) .tab.shape-square{padding:var(--space-6, 24px) var(--space-5, 20px);border-bottom-width:4px}:host([data-breakpoint="desktop"]) .tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px)}`;
+const afTabCss = ":host{display:inline-flex;flex-shrink:0}.tab{display:inline-flex;align-items:center;justify-content:center;gap:0;border:none;background:transparent;cursor:pointer;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-label-button, 17px);line-height:var(--line-height-label-button, 20px);text-align:center;transition:color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease}.tab:focus{outline:none}.tab:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049)}.icon-slot,.number-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-slot{width:24px;height:24px}.number-slot{width:24px;height:24px}.label{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 var(--space-3, 12px)}.tab.shape-square{padding:var(--space-3, 12px);border-radius:0;overflow:hidden;border-bottom:3px solid transparent}.tab.shape-square:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);border-bottom-color:var(--af-background-border-subtle, #e8eeed)}.tab.shape-square:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-default, #d1ddda)}.tab.shape-square.active{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-active, #8a7049)}.tab.shape-square.disabled{color:var(--af-typography-body-subtle, #60767b);border-bottom-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-square:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-square:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-square.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px);border-radius:var(--radius-pill, 999px);overflow:hidden}.tab.shape-pill:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);background-color:transparent}.tab.shape-pill:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-level-1-hover, #dde6e3)}.tab.shape-pill.active{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-base, #ffffff);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.08)}.tab.shape-pill.disabled{color:var(--af-typography-body-subtle, #60767b);background-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-pill:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}:host([data-breakpoint=\"desktop\"]) .tab.shape-square{padding:var(--space-6, 24px) var(--space-5, 20px);border-bottom-width:4px}:host([data-breakpoint=\"desktop\"]) .tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px)}";
 const AfTab = class {
     constructor(hostRef) {
@@ -56,6 +56,7 @@ const AfTab = class {
         return (h(Host, { key: '1f07a8b192e123bb4d053ef6910f45431ba2915a' }, h("button", { key: '6e56a2ca19222220a77096948fee53a4a88ffd54', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (h("span", { key: 'df9f4233d6ce7dd8ca4f9e65dc139bb878af294d', class: "number-slot" }, h("slot", { key: 'e41b64a2c9252a9f267a71e629ef5e2fe95e154c', name: "number" }))), this.displayIcon && (h("span", { key: '9df655a8da71ea036c0717fa56f5fdcdb5973945', class: "icon-slot" }, h("slot", { key: '5e7dda8a613a9829a5e9dff107152d436f56902e', name: "icon" }))), h("span", { key: 'c516e04e5acc82910c7f94e31e326fdeb9de3fe7', class: "label" }, this.label))));
     }
 };
-AfTab.style = afTabCss();
+AfTab.style = afTabCss;
 export { AfTab as af_tab };
+//# sourceMappingURL=af-tab.entry.js.map

package/dist/esm/af-tab.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-tab.entry.js","sources":["src/components/af-tab/af-tab.css?tag=af-tab&encapsulation=shadow","src/components/af-tab/af-tab.tsx"],"sourcesContent":["/* Tab component styles */\n:host {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-label-button, 17px);\n line-height: var(--line-height-label-button, 20px);\n text-align: center;\n transition: \n color 0.15s ease,\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease;\n}\n\n.tab:focus {\n outline: none;\n}\n\n.tab:focus-visible {\n outline: none;\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff),\n 0 0 0 5px var(--af-background-border-active, #8a7049);\n}\n\n/* ==========================================================================\n SLOTS\n ========================================================================== */\n\n.icon-slot,\n.number-slot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.icon-slot {\n width: 24px;\n height: 24px;\n}\n\n.number-slot {\n width: 24px;\n height: 24px;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n padding: 0 var(--space-3, 12px);\n}\n\n/* ==========================================================================\n SHAPE: SQUARE\n ========================================================================== */\n\n.tab.shape-square {\n padding: var(--space-3, 12px);\n border-radius: 0;\n overflow: hidden;\n border-bottom: 3px solid transparent;\n}\n\n/* Square - Default state */\n.tab.shape-square:not(.active):not(.disabled) {\n color: var(--af-typography-body-default, #2b484f);\n border-bottom-color: var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Square - Hover state */\n.tab.shape-square:not(.active):not(.disabled):hover {\n color: var(--af-typography-body-dark, #14343b);\n border-bottom-color: var(--af-background-border-default, #d1ddda);\n}\n\n/* Square - Active state */\n.tab.shape-square.active {\n color: var(--af-typography-body-dark, #14343b);\n border-bottom-color: var(--af-background-border-active, #8a7049);\n}\n\n/* Square - Disabled state */\n.tab.shape-square.disabled {\n color: var(--af-typography-body-subtle, #60767b);\n border-bottom-color: transparent;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Square - Icon colors */\n.tab.shape-square:not(.active):not(.disabled) .icon-slot {\n color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-square:not(.active):not(.disabled):hover .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-square.active .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n SHAPE: PILL\n ========================================================================== */\n\n.tab.shape-pill {\n padding: var(--space-3, 12px) var(--space-4, 16px);\n border-radius: var(--radius-pill, 999px);\n overflow: hidden;\n}\n\n/* Pill - Default state */\n.tab.shape-pill:not(.active):not(.disabled) {\n color: var(--af-typography-body-default, #2b484f);\n background-color: transparent;\n}\n\n/* Pill - Hover state */\n.tab.shape-pill:not(.active):not(.disabled):hover {\n color: var(--af-typography-body-dark, #14343b);\n background-color: var(--af-background-level-1-hover, #dde6e3);\n}\n\n/* Pill - Active state */\n.tab.shape-pill.active {\n color: var(--af-typography-body-dark, #14343b);\n background-color: var(--af-background-base, #ffffff);\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);\n}\n\n/* Pill - Disabled state */\n.tab.shape-pill.disabled {\n color: var(--af-typography-body-subtle, #60767b);\n background-color: transparent;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Pill - Icon colors */\n.tab.shape-pill:not(.active):not(.disabled) .icon-slot {\n color: var(--af-typography-body-default, #2b484f);\n}\n\n.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n.tab.shape-pill.active .icon-slot {\n color: var(--af-typography-body-dark, #14343b);\n}\n\n/* ==========================================================================\n DESKTOP BREAKPOINT ADJUSTMENTS\n Tabs in desktop mode get larger padding via the tab-bar parent\n These are applied via CSS custom properties set by af-tab-bar\n ========================================================================== */\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-square {\n padding: var(--space-6, 24px) var(--space-5, 20px);\n border-bottom-width: 4px;\n}\n\n:host([data-breakpoint=\"desktop\"]) .tab.shape-pill {\n padding: var(--space-3, 12px) var(--space-4, 16px);\n}\n\n","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"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,8nGAA8nG;;MC2BloG,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE1B;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAa,QAAQ;AAEnD;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAY9B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC7C,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAE/C,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;SAC9B;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,KAAK,EAAA,eAAA,EACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEtB,IAAI,CAAC,aAAa,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACjB,CACR,EACA,IAAI,CAAC,WAAW,KACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACf,CACR,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAChC,CACJ;;;;;;;"}

package/dist/esm/af-tag.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afTagCss = () => `:host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}`;
+const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";
 const AfTag = class {
     constructor(hostRef) {
@@ -28,6 +28,7 @@ const AfTag = class {
             }, ...linkProps }, h("slot", { key: 'cf622bef7dca7e64215e0e778f3893097e9e30d0' }))));
     }
 };
-AfTag.style = afTagCss();
+AfTag.style = afTagCss;
 export { AfTag as af_tag };
+//# sourceMappingURL=af-tag.entry.js.map

package/dist/esm/af-tag.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-tag.entry.js","sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n.tag {\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n border-radius: 4px;\n font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n font-weight: var(--font-weight-book, 500);\n line-height: 1;\n text-decoration: none;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n cursor: default;\n}\n\na.tag {\n cursor: pointer;\n}\n\n/* ==========================================================================\n VARIANT: DEFAULT (inherits from parent theme context)\n ========================================================================== */\n\n.tag.variant-default {\n background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));\n color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-default:hover {\n background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n EXPLICIT THEME VARIANTS\n ========================================================================== */\n\n.tag.variant-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n color: var(--colour-brand-white, #ffffff);\n}\n\n.tag.variant-inkwell:hover {\n background-color: var(--colour-tints-inkwell-500, #1e4a48);\n}\n\n.tag.variant-white {\n background-color: var(--colour-brand-white, #ffffff);\n color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-white:hover {\n background-color: var(--colour-tints-mist-green-100, #e1eee1);\n}\n\n.tag.variant-soft-clay {\n background-color: var(--colour-brand-soft-clay, #b09670);\n color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-soft-clay:hover {\n background-color: var(--colour-tints-soft-clay-400, #c0ab8d);\n}\n\n.tag.variant-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n color: var(--colour-brand-inkwell, #14343b);\n}\n\n.tag.variant-mist-green:hover {\n background-color: var(--colour-tints-mist-green-200, #d2e8e3);\n}\n\n/* ==========================================================================\n SIZES\n ========================================================================== */\n\n.tag.size-x-small {\n padding: 6px 10px;\n font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-small {\n padding: 8px 12px;\n font-size: var(--font-size-label-tag, 14px);\n}\n\n.tag.size-large {\n padding: 12px 16px;\n font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n FOCUS STATES\n ========================================================================== */\n\n.tag:focus {\n outline: none;\n box-shadow:\n 0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n 0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n 0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n tag: 'af-tag',\n styleUrl: 'af-tag.css',\n shadow: true\n})\nexport class AfTag {\n /**\n * The size of the tag\n * - `x-small` - Compact tag with minimal padding\n * - `small` - Small tag with moderate padding (default)\n * - `large` - Large tag with generous padding\n */\n @Prop() size: TagSize = 'small';\n\n /**\n * Visual variant of the tag. `default` inherits tag colors from the\n * parent theme context. Theme-named variants force a specific palette.\n */\n @Prop() variant: TagVariant = 'default';\n\n /**\n * The URL to navigate to when the tag is clicked (makes the tag a link)\n */\n @Prop() href?: string;\n\n render() {\n const TagElement = this.href ? 'a' : 'span';\n const linkProps = this.href ? { href: this.href } : {};\n\n return (\n <Host>\n <TagElement\n class={{\n 'tag': true,\n [`size-${this.size}`]: true,\n [`variant-${this.variant}`]: true,\n }}\n {...linkProps}\n >\n <slot />\n </TagElement>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,sjEAAsjE;;MCyB1jE,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,SAAS;AA0BxC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;"}

package/dist/esm/af-testimonial-carousel.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-nb89SRN6.js';
-const afTestimonialCarouselCss = () => `.sc-af-testimonial-carousel-h{display:block;width:100%}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel{position:relative;width:100%;min-height:544px;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out}@media (prefers-reduced-motion: reduce){.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{transition:none}}.testimonial-progress.sc-af-testimonial-carousel{margin-top:32px;max-width:840px;margin-left:auto;margin-right:auto}`;
+const afTestimonialCarouselCss = ".sc-af-testimonial-carousel-h{display:block;width:100%}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel{position:relative;width:100%;min-height:544px;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out}@media (prefers-reduced-motion: reduce){.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{transition:none}}.testimonial-progress.sc-af-testimonial-carousel{margin-top:32px;max-width:840px;margin-left:auto;margin-right:auto}";
 const AfTestimonialCarousel = class {
     constructor(hostRef) {
@@ -94,6 +94,7 @@ const AfTestimonialCarousel = class {
     }
     get host() { return getElement(this); }
 };
-AfTestimonialCarousel.style = afTestimonialCarouselCss();
+AfTestimonialCarousel.style = afTestimonialCarouselCss;
 export { AfTestimonialCarousel as af_testimonial_carousel };
+//# sourceMappingURL=af-testimonial-carousel.entry.js.map

package/dist/esm/af-testimonial-carousel.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-testimonial-carousel.entry.js","sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-carousel {\n position: relative;\n width: 100%;\n overflow: hidden;\n}\n\n.testimonial-slides {\n position: relative;\n width: 100%;\n min-height: 544px;\n overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Respect reduced motion: slides can auto-advance, so remove the\n * 500ms cross-fade/slide transition and swap instantly. */\n@media (prefers-reduced-motion: reduce) {\n .testimonial-slides ::slotted(af-testimonial) {\n transition: none;\n }\n}\n\n/* Progress indicator - wraps af-progress-line atom */\n/* Per Figma: centered below the card with horizontal padding */\n.testimonial-progress {\n margin-top: 32px;\n max-width: 840px;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* Navigation is now rendered inside each testimonial's footer via props */\n\n","import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n tag: 'af-testimonial-carousel',\n styleUrl: 'af-testimonial-carousel.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialCarousel {\n @Element() host!: HTMLElement;\n @State() currentIndex: number = 0;\n @State() isAnimating: boolean = false;\n @State() testimonialCount: number = 0;\n\n private testimonials: HTMLElement[] = [];\n private observer: MutationObserver | undefined;\n\n componentDidLoad() {\n this.detectTestimonials();\n \n // Watch for testimonials being added (for React async rendering)\n this.observer = new MutationObserver(() => {\n this.detectTestimonials();\n });\n \n this.observer.observe(this.host, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n /**\n * Listen for navigation events from testimonials\n */\n @Listen('navPrev')\n handleNavPrev() {\n this.goToPrevious();\n }\n\n @Listen('navNext')\n handleNavNext() {\n this.goToNext();\n }\n\n private detectTestimonials() {\n const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n \n if (newTestimonials.length !== this.testimonials.length) {\n this.testimonials = newTestimonials;\n this.testimonialCount = newTestimonials.length;\n \n if (this.testimonials.length > 0) {\n this.currentIndex = 0;\n this.updateVisibleTestimonial();\n }\n }\n }\n\n private updateVisibleTestimonial() {\n const hasPrev = this.currentIndex > 0;\n const hasNext = this.currentIndex < this.testimonialCount - 1;\n const showNav = this.testimonialCount > 1;\n\n this.testimonials.forEach((testimonial, index) => {\n const offset = (index - this.currentIndex) * 100;\n testimonial.style.transform = `translateX(${offset}%)`;\n testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n \n // Set navigation props on testimonials (directly on the element for Stencil)\n (testimonial as any).showNavigation = showNav;\n (testimonial as any).hasPrev = hasPrev;\n (testimonial as any).hasNext = hasNext;\n });\n }\n\n private goToPrevious = () => {\n if (this.isAnimating || this.currentIndex === 0) return;\n \n this.isAnimating = true;\n this.currentIndex = this.currentIndex - 1;\n this.updateVisibleTestimonial();\n \n setTimeout(() => {\n this.isAnimating = false;\n }, 500);\n };\n\n private goToNext = () => {\n if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n \n this.isAnimating = true;\n this.currentIndex = this.currentIndex + 1;\n this.updateVisibleTestimonial();\n \n setTimeout(() => {\n this.isAnimating = false;\n }, 500);\n };\n\n /**\n * Calculate progress value (0 to 1) based on current position\n */\n private getProgress(): number {\n if (this.testimonialCount <= 1) return 0;\n return (this.currentIndex + 1) / this.testimonialCount;\n }\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-carousel\">\n <div class=\"testimonial-slides\">\n <slot></slot>\n </div>\n \n {/* Progress indicator using af-progress-line atom */}\n {this.testimonialCount > 1 && (\n <div class=\"testimonial-progress\">\n <af-progress-line progress={this.getProgress()} />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/esm/af-testimonial-stat.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, h, H as Host } from './index-nb89SRN6.js';
-const afTestimonialStatCss = () => `.sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap}.stat-description.sc-af-testimonial-stat{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));overflow:hidden;text-overflow:ellipsis}`;
+const afTestimonialStatCss = ".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap}.stat-description.sc-af-testimonial-stat{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));overflow:hidden;text-overflow:ellipsis}";
 const AfTestimonialStat = class {
     constructor(hostRef) {
@@ -14,6 +14,7 @@ const AfTestimonialStat = class {
         return (h(Host, { key: '3854dc5e24bdfdfc96ff889f65231ed765f1cb2a' }, h("div", { key: 'bde58050e26a65197cf0d3cdb1de385c00f4ea14', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '37fc274547ef0bc7ff3c9e539f88b996c496ad52', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '83519d54647b39ac39649b22f93f21039e047d63', variant: "medium", class: "stat-description" }, this.description))));
     }
 };
-AfTestimonialStat.style = afTestimonialStatCss();
+AfTestimonialStat.style = afTestimonialStatCss;
 export { AfTestimonialStat as af_testimonial_stat };
+//# sourceMappingURL=af-testimonial-stat.entry.js.map

package/dist/esm/af-testimonial-stat.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-testimonial-stat.entry.js","sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.stat {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.stat--accent {\n /* Themed active/accent border color */\n border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n padding-left: 16px;\n min-height: 76px;\n justify-content: center;\n}\n\n/* Stat value - override af-heading to use secondary color */\n.stat-value {\n /* Override the heading color to use secondary (gold/ochre) instead of primary */\n --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n letter-spacing: -0.88px;\n white-space: nowrap;\n}\n\n/* Description - override af-text to use body-dark for emphasis */\n.stat-description {\n --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n overflow: hidden;\n text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-testimonial-stat',\n styleUrl: 'af-testimonial-stat.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonialStat {\n /**\n * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n */\n @Prop() value!: string;\n\n /**\n * Description text for the statistic\n */\n @Prop() description!: string;\n\n /**\n * Whether to show left accent border\n */\n @Prop() accentBorder: boolean = false;\n\n render() {\n return (\n <Host>\n <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n {/* Stat value uses secondary heading color via CSS override */}\n <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n {/* Description uses af-text for proper theming */}\n <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,+qBAA+qB;;MCQ/rB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;"}

package/dist/esm/af-testimonial.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CPfAC9fk.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-nb89SRN6.js';
-const afTestimonialCss = () => `.sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:50%;min-width:300px;max-width:519px;height:100%;background:var(--colour-brand-inkwell, #14343b);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));border-left:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:22px;line-height:1.4;font-weight:var(--font-weight-regular, 400);color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.testimonial-text.sc-af-testimonial-s>p,.testimonial-text .sc-af-testimonial-s>p,.testimonial-text.sc-af-testimonial p.sc-af-testimonial{font:inherit;color:inherit;margin:0 0 12px 0}.testimonial-text.sc-af-testimonial-s>p:last-child,.testimonial-text .sc-af-testimonial-s>p:last-child,.testimonial-text.sc-af-testimonial p.sc-af-testimonial:last-child{margin-bottom:0}.testimonial-text.sc-af-testimonial-s>ul,.testimonial-text .sc-af-testimonial-s>ul,.testimonial-text.sc-af-testimonial ul.sc-af-testimonial{margin:0 0 12px 0;padding-left:20px}.testimonial-attribution.sc-af-testimonial{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:24px;color:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));margin-top:12px}.testimonial-stats.sc-af-testimonial{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px;width:100%;flex-shrink:0}@media (min-width: 768px) and (max-width: 1023px){.testimonial-stats.sc-af-testimonial{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px){.testimonial-stats.sc-af-testimonial{grid-template-columns:1fr}}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));padding-top:32px;flex-shrink:0;min-height:48px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-nav-buttons.sc-af-testimonial{display:flex;gap:12px}`;
+const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;display:flex;height:544px;box-sizing:border-box}.testimonial-image.sc-af-testimonial{position:relative;width:50%;min-width:300px;max-width:519px;height:100%;background:var(--colour-brand-inkwell, #14343b);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.testimonial-bg-image.sc-af-testimonial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.7}.testimonial-logo.sc-af-testimonial{position:relative;z-index:1;padding:0 108px;max-width:100%}.testimonial-logo.sc-af-testimonial img.sc-af-testimonial{width:100%;height:auto;display:block}.testimonial-content.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:32px;padding:48px;border:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));border-left:1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:22px;line-height:1.4;font-weight:var(--font-weight-regular, 400);color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.testimonial-text.sc-af-testimonial-s>p,.testimonial-text .sc-af-testimonial-s>p,.testimonial-text.sc-af-testimonial p.sc-af-testimonial{font:inherit;color:inherit;margin:0 0 12px 0}.testimonial-text.sc-af-testimonial-s>p,.testimonial-text.sc-af-testimonial-s>p:last-child,.testimonial-text .sc-af-testimonial-s>p:last-child,.testimonial-text.sc-af-testimonial p.sc-af-testimonial:last-child{margin-bottom:0}.testimonial-text.sc-af-testimonial-s>ul,.testimonial-text .sc-af-testimonial-s>ul,.testimonial-text.sc-af-testimonial ul.sc-af-testimonial{margin:0 0 12px 0;padding-left:20px}.testimonial-attribution.sc-af-testimonial{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:24px;color:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));margin-top:12px}.testimonial-stats.sc-af-testimonial{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px;width:100%;flex-shrink:0}@media (min-width: 768px) and (max-width: 1023px){.testimonial-stats.sc-af-testimonial{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px){.testimonial-stats.sc-af-testimonial{grid-template-columns:1fr}}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));padding-top:32px;flex-shrink:0;min-height:48px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-nav-buttons.sc-af-testimonial{display:flex;gap:12px}";
 const AfTestimonial = class {
     constructor(hostRef) {
@@ -34,6 +34,7 @@ const AfTestimonial = class {
         h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '3764047858f6661077ec1a696c327c6dc80c5056', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'bd1cc25cf7e59c030fc4c2d94593e1437e57cd81', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
 };
-AfTestimonial.style = afTestimonialCss();
+AfTestimonial.style = afTestimonialCss;
 export { AfTestimonial as af_testimonial };
+//# sourceMappingURL=af-testimonial.entry.js.map

package/dist/esm/af-testimonial.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-testimonial.entry.js","sources":["src/components/af-testimonial/af-testimonial.css?tag=af-testimonial&encapsulation=scoped","src/components/af-testimonial/af-testimonial.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.testimonial-card {\n /* Uses themed level-1 background from parent Section */\n background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));\n border-radius: var(--border-radius-card-level-1, 32px);\n overflow: hidden;\n display: flex;\n height: 544px;\n box-sizing: border-box;\n}\n\n/* Image side - 40.5% of card width (519px of 1280px in Figma) */\n.testimonial-image {\n position: relative;\n width: 50%;\n min-width: 300px;\n /* Minimum for readability */\n max-width: 519px;\n /* Cap at Figma design width */\n height: 100%;\n /* Dark background for image overlay effect - always dark regardless of theme */\n background: var(--colour-brand-inkwell, #14343b);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.testimonial-bg-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.7;\n}\n\n.testimonial-logo {\n position: relative;\n z-index: 1;\n padding: 0 108px;\n max-width: 100%;\n}\n\n.testimonial-logo img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n/* Content side */\n.testimonial-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding: 48px;\n /* Subtle border using themed border token */\n border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));\n box-sizing: border-box;\n}\n\n.testimonial-quote-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-height: 0;\n /* Allow flex item to shrink */\n overflow: hidden;\n}\n\n.testimonial-quote-icon {\n width: 48px;\n height: 48px;\n /* Quote icon uses themed secondary heading color (gold/ochre accent) */\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n flex-shrink: 0;\n}\n\n/* Quote text — 22px / 140% per Webflow reference. Accepts either the\n `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */\n.testimonial-text {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 22px;\n line-height: 1.4;\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n.testimonial-text ::slotted(p),\n.testimonial-text p {\n font: inherit;\n color: inherit;\n margin: 0 0 12px 0;\n}\n.testimonial-text ::slotted(p:last-child),\n.testimonial-text p:last-child {\n margin-bottom: 0;\n}\n.testimonial-text ::slotted(ul),\n.testimonial-text ul {\n margin: 0 0 12px 0;\n padding-left: 20px;\n}\n\n/* Attribution uses body-dark color for emphasis */\n.testimonial-attribution {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n margin-top: 12px;\n}\n\n.testimonial-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n width: 100%;\n flex-shrink: 0;\n}\n\n/* ≥ mobile and ≤ tablet — 2-column intermediate layout so the stats row\n * doesn't snap straight from 4-across to 1-across on common iPad / narrow\n * laptop widths. */\n@media (min-width: 768px) and (max-width: 1023px) {\n .testimonial-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* ≤ mobile — single column stack */\n@media (max-width: 767px) {\n .testimonial-stats {\n grid-template-columns: 1fr;\n }\n}\n\n.testimonial-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n /* Themed border color */\n border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));\n padding-top: 32px;\n flex-shrink: 0;\n min-height: 48px;\n}\n\n.testimonial-nav {\n display: flex;\n gap: 12px;\n}\n\n.testimonial-nav-buttons {\n display: flex;\n gap: 12px;\n}\n\n/* CTA button is now handled by af-button atom component */","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n * `quote` string prop when provided. Use for testimonials that include\n * multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\n */\n@Component({\n tag: 'af-testimonial',\n styleUrl: 'af-testimonial.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTestimonial {\n /**\n * Background image URL for the testimonial card\n */\n @Prop() backgroundImage?: string;\n\n /**\n * Company logo URL\n */\n @Prop() logoImage?: string;\n\n /**\n * Testimonial quote text. Falls back to the `quote-body` slot if that\n * slot has content.\n */\n @Prop() quote?: string;\n\n /**\n * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n */\n @Prop() attribution!: string;\n\n /**\n * Link to full case study\n */\n @Prop() readMoreLink?: string;\n\n /**\n * Whether to show built-in navigation buttons (used when in a carousel)\n */\n @Prop({ mutable: true }) showNavigation: boolean = false;\n\n /**\n * Whether the previous button is enabled\n */\n @Prop({ mutable: true }) hasPrev: boolean = false;\n\n /**\n * Whether the next button is enabled\n */\n @Prop({ mutable: true }) hasNext: boolean = false;\n\n /**\n * Emitted when the previous button is clicked\n */\n @Event() navPrev!: EventEmitter<void>;\n\n /**\n * Emitted when the next button is clicked\n */\n @Event() navNext!: EventEmitter<void>;\n\n private handlePrev = () => {\n this.navPrev.emit();\n };\n\n private handleNext = () => {\n this.navNext.emit();\n };\n\n render() {\n return (\n <Host>\n <div class=\"testimonial-card\">\n {/* Image side */}\n <div class=\"testimonial-image\">\n {this.backgroundImage && (\n <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n )}\n {this.logoImage && (\n <div class=\"testimonial-logo\">\n <img src={this.logoImage} alt=\"Company logo\" />\n </div>\n )}\n </div>\n\n {/* Content side */}\n <div class=\"testimonial-content\">\n <div class=\"testimonial-quote-section\">\n {/* Quote icon - using af-icon atom with slot for flexibility */}\n <div class=\"testimonial-quote-icon\">\n <slot name=\"quote-icon\">\n <af-icon name=\"quote\" size={48} />\n </slot>\n </div>\n\n {/* Quote text — slot takes priority; falls back to prop. */}\n <div class=\"testimonial-text\">\n <slot name=\"quote-body\">{this.quote}</slot>\n </div>\n {/* Attribution */}\n <div class=\"testimonial-attribution\">{this.attribution}</div>\n </div>\n\n {/* Statistics slot */}\n <div class=\"testimonial-stats\">\n <slot name=\"stats\"></slot>\n </div>\n\n {/* Footer with navigation and CTA */}\n <div class=\"testimonial-footer\">\n <div class=\"testimonial-nav\">\n {this.showNavigation ? (\n // Render built-in navigation buttons\n <div class=\"testimonial-nav-buttons\">\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasPrev}\n onClick={this.handlePrev}\n ariaLabel=\"Previous testimonial\"\n >\n <af-icon name=\"arrow-left\" size={24} />\n </af-icon-button>\n <af-icon-button\n variant=\"secondary\"\n disabled={!this.hasNext}\n onClick={this.handleNext}\n ariaLabel=\"Next testimonial\"\n >\n <af-icon name=\"arrow-right\" size={24} />\n </af-icon-button>\n </div>\n ) : (\n // Allow custom navigation via slot\n <slot name=\"navigation\"></slot>\n )}\n </div>\n {this.readMoreLink && (\n <af-button variant=\"secondary\" href={this.readMoreLink}>\n Read full story\n <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n </af-button>\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n\n"],"names":[],"mappings":"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"}