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

@affinda/wc 0.0.26 → 0.0.27

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

Files changed (894) hide show

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-C7nUZsb8.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-C7nUZsb8.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-C7nUZsb8.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-C7nUZsb8.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-C7nUZsb8.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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"}

package/dist/esm/af-text-image-nest.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-C7nUZsb8.js';
-const afTextImageNestCss = () => `.sc-af-text-image-nest-h{display:block;width:100%}.text-image-nest.sc-af-text-image-nest{width:100%;position:relative}.nest__content.sc-af-text-image-nest{display:flex;flex-direction:column;align-items:center;gap:48px}.nest__grid.sc-af-text-image-nest{display:grid;gap:40px;width:100%}.grid-single.sc-af-text-image-nest{grid-template-columns:1fr}.grid-grid-2.sc-af-text-image-nest{grid-template-columns:repeat(2, 1fr)}.grid-grid-3.sc-af-text-image-nest{grid-template-columns:repeat(3, 1fr)}.grid-grid-4.sc-af-text-image-nest{grid-template-columns:repeat(4, 1fr)}.grid-stacked.sc-af-text-image-nest{grid-template-columns:1fr;gap:48px}.nest__footer.sc-af-text-image-nest{display:flex;justify-content:center;gap:12px}.nest__footer.sc-af-text-image-nest:empty{display:none}@media (max-width: 768px){.nest__content.sc-af-text-image-nest{gap:32px}.nest__grid.sc-af-text-image-nest{grid-template-columns:1fr;gap:32px}.grid-stacked.sc-af-text-image-nest{gap:40px}.nest__footer.sc-af-text-image-nest{flex-direction:column;align-items:center}}.sc-af-text-image-nest-s>*{margin:0}`;
+const afTextImageNestCss = ".sc-af-text-image-nest-h{display:block;width:100%}.text-image-nest.sc-af-text-image-nest{width:100%;position:relative}.nest__content.sc-af-text-image-nest{display:flex;flex-direction:column;align-items:center;gap:48px}.nest__grid.sc-af-text-image-nest{display:grid;gap:40px;width:100%}.grid-single.sc-af-text-image-nest{grid-template-columns:1fr}.grid-grid-2.sc-af-text-image-nest{grid-template-columns:repeat(2, 1fr)}.grid-grid-3.sc-af-text-image-nest{grid-template-columns:repeat(3, 1fr)}.grid-grid-4.sc-af-text-image-nest{grid-template-columns:repeat(4, 1fr)}.grid-stacked.sc-af-text-image-nest{grid-template-columns:1fr;gap:48px}.nest__footer.sc-af-text-image-nest{display:flex;justify-content:center;gap:12px}.nest__footer.sc-af-text-image-nest:empty{display:none}@media (max-width: 768px){.nest__content.sc-af-text-image-nest{gap:32px}.nest__grid.sc-af-text-image-nest{grid-template-columns:1fr;gap:32px}.grid-stacked.sc-af-text-image-nest{gap:40px}.nest__footer.sc-af-text-image-nest{flex-direction:column;align-items:center}}.sc-af-text-image-nest-s>*{margin:0}";
 const AfTextImageNest = class {
     constructor(hostRef) {
@@ -22,6 +22,7 @@ const AfTextImageNest = class {
         return (h(Host, { key: '016ac9532a42a1494490c49dcffa488f49d1d5c8' }, h("div", { key: '38e16d51c44d69323e0b66e51449564631cc9077', class: containerClasses }, h("div", { key: 'a4c596c73303dde115357b80ece979b1a383e6a8', class: "nest__content" }, h("div", { key: '8d097e97a0cf9149fc3f775b27010d6d6d6c50e4', class: gridClasses }, h("slot", { key: '25ae554ae7f9091e503f1692115e483e552c6170' })), h("div", { key: 'e6105ef43ed3438ee6cd7edc671fc627d60ffef0', class: "nest__footer" }, h("slot", { key: 'ede8c7fa69237042eea88a7d0ed54f3551764e68', name: "buttons" }))))));
     }
 };
-AfTextImageNest.style = afTextImageNestCss();
+AfTextImageNest.style = afTextImageNestCss;
 export { AfTextImageNest as af_text_image_nest };
+//# sourceMappingURL=af-text-image-nest.entry.js.map

package/dist/esm/af-text-image-nest.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-text-image-nest.entry.js","sources":["src/components/af-text-image-nest/af-text-image-nest.css?tag=af-text-image-nest&encapsulation=scoped","src/components/af-text-image-nest/af-text-image-nest.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Base Container\n ========================================================================== */\n\n.text-image-nest {\n width: 100%;\n position: relative;\n}\n\n/* ==========================================================================\n Content Layout\n ========================================================================== */\n\n.nest__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 48px;\n}\n\n/* ==========================================================================\n Content Grid\n ========================================================================== */\n\n.nest__grid {\n display: grid;\n gap: 40px;\n width: 100%;\n}\n\n/* Single layout - full width */\n.grid-single {\n grid-template-columns: 1fr;\n}\n\n/* 2-column grid */\n.grid-grid-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n/* 3-column grid */\n.grid-grid-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n/* 4-column grid */\n.grid-grid-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Stacked layout - full width with larger gap for alternating rows */\n.grid-stacked {\n grid-template-columns: 1fr;\n gap: 48px;\n}\n\n/* ==========================================================================\n Footer Buttons\n ========================================================================== */\n\n.nest__footer {\n display: flex;\n justify-content: center;\n gap: 12px;\n}\n\n.nest__footer:empty {\n display: none;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n /* Content gap */\n .nest__content {\n gap: 32px;\n }\n\n /* All grids collapse to single column on mobile */\n .nest__grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n /* Stacked layout gap on mobile */\n .grid-stacked {\n gap: 40px;\n }\n\n /* Footer buttons stack vertically on mobile */\n .nest__footer {\n flex-direction: column;\n align-items: center;\n }\n}\n\n/* ==========================================================================\n Slot Content Styling\n ========================================================================== */\n\n::slotted(*) {\n margin: 0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImageNest is a layout component that arranges multiple text-image content pieces\n * in various grid layouts with optional footer buttons.\n * \n * This component inherits theming from a parent Section or theme-providing container.\n * Wrap it in an af-section to apply themes.\n * \n * Supports multiple layout variants:\n * - `single`: Full-width single item (side-by-side image + text)\n * - `grid-2`: 2-column grid with stacked items\n * - `grid-3`: 3-column grid with stacked items\n * - `grid-4`: 4-column grid with stacked items\n * - `stacked`: Alternating rows of side-by-side content\n */\n@Component({\n tag: 'af-text-image-nest',\n styleUrl: 'af-text-image-nest.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTextImageNest {\n /**\n * Layout variant for the content grid\n */\n @Prop() layout: 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked' = 'grid-3';\n\n render() {\n const containerClasses = {\n 'text-image-nest': true,\n [`layout-${this.layout}`]: true,\n };\n\n const gridClasses = {\n 'nest__grid': true,\n [`grid-${this.layout}`]: true,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"nest__content\">\n {/* Content Grid */}\n <div class={gridClasses}>\n <slot></slot>\n </div>\n\n {/* Footer Buttons */}\n <div class=\"nest__footer\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,+iCAA+iC;;MCsB7jC,eAAe,GAAA,MAAA;AAN5B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAA0D,QAAQ;AA+BjF;IA7BC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,CAAC,UAAU,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;SAChC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;SAC9B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACF,CACD;;;;;;;"}

package/dist/esm/af-text-image.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-C7nUZsb8.js';
-const afTextImageCss = () => `.sc-af-text-image-h{display:block;width:100%}.text-image.sc-af-text-image{display:flex;width:100%}.text-image--side-by-side.sc-af-text-image{flex-direction:row;align-items:flex-start;gap:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image{flex-direction:row}.text-image--image-right.sc-af-text-image{flex-direction:row}.text-image--full-width.sc-af-text-image{flex-direction:column;gap:var(--space-8, 32px)}.text-image__content.sc-af-text-image{display:flex;flex-direction:column;gap:56px;flex:1;min-width:0}.text-image--proportion-1-2.sc-af-text-image .text-image__content.sc-af-text-image{flex:1}.text-image--proportion-1-3.sc-af-text-image .text-image__content.sc-af-text-image{flex:2}.text-image--proportion-1-4.sc-af-text-image .text-image__content.sc-af-text-image{flex:3}.text-image--proportion-100.sc-af-text-image .text-image__content.sc-af-text-image{flex:none;width:100%}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image{padding-right:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding-left:var(--space-8, 32px)}.text-image--full-width.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__lockup.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%}.text-image__copy.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);max-width:840px;width:100%}.text-image__heading.sc-af-text-image{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, #14343B);white-space:normal}.text-image__heading.sc-af-text-image:empty{display:none}.text-image__description.sc-af-text-image{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, #2B484F);white-space:normal}.text-image__description.sc-af-text-image:empty{display:none}.text-image__buttons.sc-af-text-image{display:block}.text-image__buttons.sc-af-text-image:empty{display:none}.text-image__image-wrapper.sc-af-text-image{flex-shrink:0;overflow:hidden;border-radius:var(--radius-md, 12px)}.text-image--proportion-1-2.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-3.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-4.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-100.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{width:100%}@media (max-width: 768px){.text-image--side-by-side.sc-af-text-image{flex-direction:column;gap:var(--space-6, 24px)}.text-image--image-left.sc-af-text-image,.text-image--image-right.sc-af-text-image{flex-direction:column}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image,.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__content.sc-af-text-image,.text-image__image-wrapper.sc-af-text-image{flex:none !important;width:100%}.text-image__heading.sc-af-text-image{font-size:var(--font-size-heading-3-mobile, 25px)}.text-image--proportion-100.sc-af-text-image .text-image__description.sc-af-text-image{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.text-image--proportion-100.sc-af-text-image .text-image__lockup.sc-af-text-image{gap:var(--space-3, 12px)}.text-image--proportion-100.sc-af-text-image .text-image__copy.sc-af-text-image{gap:var(--space-3, 12px)}.text-image__image-wrapper.sc-af-text-image{border-radius:var(--radius-sm, 8px)}}.sc-af-text-image-s>*{margin:0}.sc-af-text-image-s>p{margin:0}`;
+const afTextImageCss = ".sc-af-text-image-h{display:block;width:100%}.text-image.sc-af-text-image{display:flex;width:100%}.text-image--side-by-side.sc-af-text-image{flex-direction:row;align-items:flex-start;gap:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image{flex-direction:row}.text-image--image-right.sc-af-text-image{flex-direction:row}.text-image--full-width.sc-af-text-image{flex-direction:column;gap:var(--space-8, 32px)}.text-image__content.sc-af-text-image{display:flex;flex-direction:column;gap:56px;flex:1;min-width:0}.text-image--proportion-1-2.sc-af-text-image .text-image__content.sc-af-text-image{flex:1}.text-image--proportion-1-3.sc-af-text-image .text-image__content.sc-af-text-image{flex:2}.text-image--proportion-1-4.sc-af-text-image .text-image__content.sc-af-text-image{flex:3}.text-image--proportion-100.sc-af-text-image .text-image__content.sc-af-text-image{flex:none;width:100%}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image{padding-right:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding-left:var(--space-8, 32px)}.text-image--full-width.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__lockup.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%}.text-image__copy.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);max-width:840px;width:100%}.text-image__heading.sc-af-text-image{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, #14343B);white-space:normal}.text-image__heading.sc-af-text-image:empty{display:none}.text-image__description.sc-af-text-image{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, #2B484F);white-space:normal}.text-image__description.sc-af-text-image:empty{display:none}.text-image__buttons.sc-af-text-image{display:block}.text-image__buttons.sc-af-text-image:empty{display:none}.text-image__image-wrapper.sc-af-text-image{flex-shrink:0;overflow:hidden;border-radius:var(--radius-md, 12px)}.text-image--proportion-1-2.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-3.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-4.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-100.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{width:100%}@media (max-width: 768px){.text-image--side-by-side.sc-af-text-image{flex-direction:column;gap:var(--space-6, 24px)}.text-image--image-left.sc-af-text-image,.text-image--image-right.sc-af-text-image{flex-direction:column}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image,.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__content.sc-af-text-image,.text-image__image-wrapper.sc-af-text-image{flex:none !important;width:100%}.text-image__heading.sc-af-text-image{font-size:var(--font-size-heading-3-mobile, 25px)}.text-image--proportion-100.sc-af-text-image .text-image__description.sc-af-text-image{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.text-image--proportion-100.sc-af-text-image .text-image__lockup.sc-af-text-image{gap:var(--space-3, 12px)}.text-image--proportion-100.sc-af-text-image .text-image__copy.sc-af-text-image{gap:var(--space-3, 12px)}.text-image__image-wrapper.sc-af-text-image{border-radius:var(--radius-sm, 8px)}}.sc-af-text-image-s>*{margin:0}.sc-af-text-image-s>p{margin:0}";
 const AfTextImage = class {
     constructor(hostRef) {
@@ -56,6 +56,7 @@ const AfTextImage = class {
         return (h(Host, null, h("div", { class: containerClasses }, isImageLeft ? ([imageContent, textContent]) : ([textContent, imageContent]))));
     }
 };
-AfTextImage.style = afTextImageCss();
+AfTextImage.style = afTextImageCss;
 export { AfTextImage as af_text_image };
+//# sourceMappingURL=af-text-image.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-text-image.entry.js","sources":["src/components/af-text-image/af-text-image.css?tag=af-text-image&encapsulation=scoped","src/components/af-text-image/af-text-image.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Container Layout\n ========================================================================== */\n\n.text-image {\n display: flex;\n width: 100%;\n}\n\n/* Side-by-side layout (default for 1/3 and 1/4 proportions) */\n.text-image--side-by-side {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--space-8, 32px);\n}\n\n/* DOM order is controlled from the TSX (image first for image-left, text\n first for image-right), so both variants use plain row flow. */\n.text-image--image-left {\n flex-direction: row;\n}\n\n.text-image--image-right {\n flex-direction: row;\n}\n\n/* Full-width layout (100% proportion) */\n.text-image--full-width {\n flex-direction: column;\n gap: var(--space-8, 32px);\n}\n\n/* ==========================================================================\n Content Area (Typography Lockups Container)\n ========================================================================== */\n\n.text-image__content {\n display: flex;\n flex-direction: column;\n gap: 56px;\n flex: 1;\n min-width: 0;\n}\n\n/* Proportion-based content sizing for side-by-side */\n.text-image--proportion-1-2 .text-image__content {\n flex: 1;\n}\n\n.text-image--proportion-1-3 .text-image__content {\n flex: 2;\n}\n\n.text-image--proportion-1-4 .text-image__content {\n flex: 3;\n}\n\n.text-image--proportion-100 .text-image__content {\n flex: none;\n width: 100%;\n}\n\n/* Padding for content when image is on opposite side */\n.text-image--image-right .text-image__content {\n padding-right: var(--space-8, 32px);\n}\n\n.text-image--image-left .text-image__content {\n padding-left: var(--space-8, 32px);\n}\n\n.text-image--full-width .text-image__content {\n padding: 0;\n}\n\n/* ==========================================================================\n Typography Lockup\n ========================================================================== */\n\n.text-image__lockup {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n}\n\n.text-image__copy {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n max-width: 840px;\n width: 100%;\n}\n\n/* Heading styles - inherits color from theme context */\n.text-image__heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: var(--font-size-heading-3-desktop, 34px);\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n color: var(--af-typography-heading-primary, #14343B);\n white-space: normal;\n}\n\n.text-image__heading:empty {\n display: none;\n}\n\n/* Description/body text - inherits color from theme context */\n.text-image__description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: var(--font-size-body-large, 18px);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, #2B484F);\n white-space: normal;\n}\n\n.text-image__description:empty {\n display: none;\n}\n\n/* Buttons section - wrapper for slotted ButtonGroup */\n.text-image__buttons {\n display: block;\n}\n\n.text-image__buttons:empty {\n display: none;\n}\n\n/* ==========================================================================\n Image Area\n ========================================================================== */\n\n.text-image__image-wrapper {\n flex-shrink: 0;\n overflow: hidden;\n border-radius: var(--radius-md, 12px);\n}\n\n/* Proportion-based image sizing for side-by-side */\n.text-image--proportion-1-2 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-1-3 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-1-4 .text-image__image-wrapper {\n flex: 1;\n min-width: 0;\n}\n\n.text-image--proportion-100 .text-image__image-wrapper {\n width: 100%;\n}\n\n/* ==========================================================================\n Mobile Responsive Styles\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n /* Stack everything vertically on mobile */\n .text-image--side-by-side {\n flex-direction: column;\n gap: var(--space-6, 24px);\n }\n\n /* Reset order - text always first on mobile */\n .text-image--image-left,\n .text-image--image-right {\n flex-direction: column;\n }\n\n /* Remove side padding on mobile */\n .text-image--image-right .text-image__content,\n .text-image--image-left .text-image__content {\n padding: 0;\n }\n\n /* Full width for all proportions on mobile */\n .text-image__content,\n .text-image__image-wrapper {\n flex: none !important;\n width: 100%;\n }\n\n /* Smaller heading on mobile */\n .text-image__heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n }\n\n /* Smaller body text for full-width on mobile */\n .text-image--proportion-100 .text-image__description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n }\n\n /* On mobile, ButtonGroup handles its own responsive behavior */\n\n /* Smaller lockup gap on mobile for full-width */\n .text-image--proportion-100 .text-image__lockup {\n gap: var(--space-3, 12px);\n }\n\n .text-image--proportion-100 .text-image__copy {\n gap: var(--space-3, 12px);\n }\n\n /* Smaller border radius on mobile */\n .text-image__image-wrapper {\n border-radius: var(--radius-sm, 8px);\n }\n}\n\n/* ==========================================================================\n Slot Content Styling\n ========================================================================== */\n\n::slotted(*) {\n margin: 0;\n}\n\n::slotted(p) {\n margin: 0;\n}\n\n\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * TextImage composite component that combines typography content with an image.\n * Supports various layout configurations with image position and proportion options.\n */\n@Component({\n tag: 'af-text-image',\n styleUrl: 'af-text-image.css',\n shadow: false,\n scoped: true,\n})\nexport class AfTextImage {\n /**\n * Position of the image relative to the text content\n */\n @Prop() imagePosition: 'left' | 'right' = 'right';\n\n /**\n * Proportion of the image in the layout\n * - '1/2': Image and text each take half the width (50/50)\n * - '1/3': Image takes 1/3 of the width (text takes 2/3)\n * - '1/4': Image takes 1/4 of the width (text takes 3/4)\n * - '100%': Image takes full width below text\n */\n @Prop() imageProportion: '1/2' | '1/3' | '1/4' | '100%' = '1/3';\n\n /**\n * Image source URL\n */\n @Prop() src?: string;\n\n /**\n * Image alt text for accessibility\n */\n @Prop() alt: string = '';\n\n /**\n * Whether to show a second typography lockup section\n */\n @Prop() showSecondLockup: boolean = false;\n\n render() {\n const isFullWidth = this.imageProportion === '100%';\n const isImageLeft = this.imagePosition === 'left';\n\n const containerClasses = {\n 'text-image': true,\n 'text-image--full-width': isFullWidth,\n 'text-image--side-by-side': !isFullWidth,\n 'text-image--image-left': isImageLeft && !isFullWidth,\n 'text-image--image-right': !isImageLeft && !isFullWidth,\n [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,\n };\n\n const renderTypographyLockup = (isSecond: boolean = false) => {\n const prefix = isSecond ? 'second-' : '';\n return (\n <div class={`text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}`}>\n <div class=\"text-image__copy\">\n <div class=\"text-image__heading\">\n <slot name={isSecond ? 'second-heading' : undefined}></slot>\n </div>\n <div class=\"text-image__description\">\n <slot name={`${prefix}description`}></slot>\n </div>\n </div>\n <div class=\"text-image__buttons\">\n <slot name={`${prefix}buttons`}></slot>\n </div>\n </div>\n );\n };\n\n const renderImage = () => {\n if (!this.src) return null;\n return (\n <div class=\"text-image__image-wrapper\">\n <af-image src={this.src} alt={this.alt}></af-image>\n </div>\n );\n };\n\n // For full-width layout, text is always above image\n if (isFullWidth) {\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"text-image__content\">\n {renderTypographyLockup()}\n {this.showSecondLockup && renderTypographyLockup(true)}\n </div>\n {renderImage()}\n </div>\n </Host>\n );\n }\n\n // For side-by-side layouts\n const textContent = (\n <div class=\"text-image__content\">\n {renderTypographyLockup()}\n {this.showSecondLockup && renderTypographyLockup(true)}\n </div>\n );\n\n const imageContent = renderImage();\n\n return (\n <Host>\n <div class={containerClasses}>\n {isImageLeft ? (\n [imageContent, textContent]\n ) : (\n [textContent, imageContent]\n )}\n </div>\n </Host>\n );\n }\n}\n\n\n\n"],"names":[],"mappings":"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"}

package/dist/esm/af-textarea.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-C7nUZsb8.js';
-const afTextareaCss = () => `:host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.textarea-container{display:flex;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.textarea-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff),      0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.textarea-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.textarea-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.textarea:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}`;
+const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.textarea-container{display:flex;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.textarea-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.textarea-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.textarea-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.textarea:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
 const AfTextarea = class {
     constructor(hostRef) {
@@ -85,6 +85,7 @@ const AfTextarea = class {
         return (h(Host, { key: '88a61db3d3d625cb33566b0696ac7b7b3ac8d936' }, h("div", { key: '8648dea230fc9736ae3d37b65dc34e6e60fef966', class: wrapperClasses }, this.label && (h("div", { key: 'bb1a4c3d441623d6e57780f486d9b84b96197510', class: "label-row" }, h("label", { key: 'ef2bf25f44797127f45fe6db632678bfacf1bd58', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '8b844499eb020f76c526cd6be88695568f094315', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '76bbd8a0feb29ae8480228d155b78833e400da34', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: 'e9216ef96b54a2f6c6bb01f1e2d46a4483d0f37e', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6a5b3020e369ef4eb21dcb1147530db1223478af', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9ddd81bdf497d5589552d09fc54ddccfd69ca8bf', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'f6c12cb8e526e37ce99fe7f8993d4c79bdaba1d8', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'bccc36e8dfc14969b1e1133a3f6dc63a088ea85d', name: "label-end" }))), this.description && (h("p", { key: '996377a9fa9efb3e18339d5b4fcaa8fc71b2ab6f', class: "description" }, this.description)), h("div", { key: '3fedeb84278c68211e15915630bae5331a07a138', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '1a9d3873af28103d77ffda96d33db77caee1d72b', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '483e536c546f7b75d887827d070ea39af9932f0f', class: "error-row", id: "error-message" }, h("span", { key: 'caafe8df9d66a1fe32809a32f273347d56deeba5', class: "error-icon" }, h("svg", { key: '0ae4361974775f89a2f9ba69867e02465adcdfc4', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '098c189b4551f4714f40e4ebbba886dfcc9806f6', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'bb29173d7d17694493242b1742944fbbadb480a8', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '48a2fb783e0604e24f0c19ba9086cea72bc93b25', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '01ba2e635e379805f9505e1e7ac7c5dcdd0fa270', class: "error-text" }, this.error))))));
     }
 };
-AfTextarea.style = afTextareaCss();
+AfTextarea.style = afTextareaCss;
 export { AfTextarea as af_textarea };
+//# sourceMappingURL=af-textarea.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"af-textarea.entry.js","sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper */\n.textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/* Label row */\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/* Info icon button */\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/* Description */\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/* Textarea container */\n.textarea-container {\n display: flex;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n/* Hover state */\n.textarea-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/* Focus state */\n.textarea-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/* Error state */\n.textarea-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/* Disabled state */\n.textarea-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/* Native textarea */\n.textarea {\n flex: 1;\n min-width: 0;\n min-height: 108px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n resize: vertical;\n}\n\n.textarea::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n resize: none;\n}\n\n.textarea:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Error row */\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n tag: 'af-textarea',\n styleUrl: 'af-textarea.css',\n shadow: true\n})\nexport class AfTextarea {\n /**\n * The label text for the textarea\n */\n @Prop() label?: string;\n\n /**\n * Description text displayed below the label\n */\n @Prop() description?: string;\n\n /**\n * Placeholder text for the textarea\n */\n @Prop() placeholder?: string;\n\n /**\n * The current value of the textarea\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * The name of the textarea for form submission\n */\n @Prop() name?: string;\n\n /**\n * Whether the textarea is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether the textarea is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether the textarea is read-only\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Error message to display (also sets error state)\n */\n @Prop() error?: string;\n\n /**\n * Whether to show the info icon next to the label\n */\n @Prop() showInfoIcon: boolean = false;\n\n /**\n * Number of visible rows (height)\n */\n @Prop() rows: number = 4;\n\n /**\n * Maximum length of input value\n */\n @Prop() maxlength?: number;\n\n /**\n * Minimum length of input value\n */\n @Prop() minlength?: number;\n\n /**\n * Whether the textarea is resizable\n */\n @Prop() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n /**\n * Emitted when the textarea value changes\n */\n @Event() afInput!: EventEmitter<{ value: string }>;\n\n /**\n * Emitted when the textarea loses focus\n */\n @Event() afBlur!: EventEmitter<void>;\n\n /**\n * Emitted when the textarea gains focus\n */\n @Event() afFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the info icon is clicked\n */\n @Event() afInfoClick!: EventEmitter<void>;\n\n @State() private isFocused: boolean = false;\n @State() private isHovered: boolean = false;\n\n private textareaEl?: HTMLTextAreaElement;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.afInput.emit({ value: this.value });\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n this.afFocus.emit();\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n this.afBlur.emit();\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleInfoClick = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.afInfoClick.emit();\n };\n\n render() {\n const hasError = !!this.error;\n const hasValue = !!(this.value && this.value.length > 0);\n\n const wrapperClasses = {\n 'textarea-wrapper': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused,\n 'populated': hasValue\n };\n\n const textareaContainerClasses = {\n 'textarea-container': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n {/* Label */}\n {this.label && (\n <div class=\"label-row\">\n <label class=\"label\" htmlFor=\"textarea\">\n {this.label}\n {this.required && <span class=\"required\">*</span>}\n </label>\n {this.showInfoIcon && (\n <button \n type=\"button\" \n class=\"info-icon\" \n onClick={this.handleInfoClick}\n aria-label=\"More information\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n <slot name=\"label-end\"></slot>\n </div>\n )}\n\n {/* Description */}\n {this.description && (\n <p class=\"description\">{this.description}</p>\n )}\n\n {/* Textarea container */}\n <div \n class={textareaContainerClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n {/* Native textarea */}\n <textarea\n ref={(el) => this.textareaEl = el ?? undefined}\n id=\"textarea\"\n class=\"textarea\"\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n readonly={this.readonly}\n rows={this.rows}\n maxlength={this.maxlength}\n minlength={this.minlength}\n style={{ resize: this.resize }}\n aria-invalid={hasError ? 'true' : undefined}\n aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n\n {/* Error message */}\n {hasError && (\n <div class=\"error-row\" id=\"error-message\">\n <span class=\"error-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"error-text\">{this.error}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/esm/af-theme-override.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-C7nUZsb8.js';
-const afThemeOverrideCss = () => `.sc-af-theme-override-h{display:contents}.theme-override.sc-af-theme-override{display:contents}.theme-white.sc-af-theme-override{--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-theme-override{--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-theme-override{--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-theme-override{--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-theme-override{--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}`;
+const afThemeOverrideCss = ".sc-af-theme-override-h{display:contents}.theme-override.sc-af-theme-override{display:contents}.theme-white.sc-af-theme-override{--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-theme-override{--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-theme-override{--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-theme-override{--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-theme-override{--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}";
 const AfThemeOverride = class {
     constructor(hostRef) {
@@ -15,6 +15,7 @@ const AfThemeOverride = class {
         return (h(Host, { key: '67765126b10a933cf927169cab2c88135f9b9c9d' }, h("div", { key: '00e00242c786f339f93c30005e1bbdc2eb5cdae6', class: `theme-override theme-${this.theme}` }, h("slot", { key: '19b1cfc18e8d8218a2bc0e04fb70b2e2e3a68121' }))));
     }
 };
-AfThemeOverride.style = afThemeOverrideCss();
+AfThemeOverride.style = afThemeOverrideCss;
 export { AfThemeOverride as af_theme_override };
+//# sourceMappingURL=af-theme-override.entry.js.map