@affinda/wc 0.0.15 → 0.0.16

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

@@ -0,0 +1,46 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
+
+const afSwitchCss = ":host{display:inline-block}.switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));user-select:none}.switch.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.track{position:relative;display:flex;align-items:center;flex-shrink:0;width:52px;height:30px;border-radius:var(--radii-switch, 9999px);background:var(--forms-control-bg-default-disabled, #e8ebeb);transition:background 0.2s ease;box-sizing:border-box}.track.active{background:var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b))}.track.disabled{background:var(--forms-control-bg-default-disabled, #e8ebeb)}.switch:not(.disabled):hover .track:not(.active){background:#d0d6d8}.input:focus-visible+.track{box-shadow:0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);outline:none}.knob{position:absolute;width:26px;height:26px;border-radius:50%;background:#ffffff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.2s ease, background 0.2s ease;transform:translateX(2px)}.knob.active{transform:translateX(24px)}.knob.disabled{background:var(--forms-control-stroke-disabled, #a1aeb1);box-shadow:none}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+
+const AfSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afChange = createEvent(this, "afChange");
+        /**
+         * Whether the switch is active (on)
+         */
+        this.active = false;
+        /**
+         * Whether the switch is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.active = !this.active;
+            this.afChange.emit({ active: this.active });
+        };
+    }
+    render() {
+        const switchClasses = {
+            'switch': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const trackClasses = {
+            'track': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        const knobClasses = {
+            'knob': true,
+            'active': this.active,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '21c42503d55acd6e642e303fbb94ae46f061ae4a' }, h("label", { key: 'a01f3dc6b3bde4070afd1289115dd45c699baead', class: switchClasses }, h("input", { key: 'fc19c909701239fb40204eefa9b2754871db5e1b', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'b09ab35a5157959712e11b1fe336e9d2b3ede0d7', class: trackClasses }, h("span", { key: '51681ef5a21b06777a2dcd3f29ccaadcb8f6a0c6', class: knobClasses })), h("span", { key: 'f17194f5988bce168aa499413ecbe05f7c238b05', class: "label" }, h("slot", { key: 'a659c4750a0ccb3413290a461de82e5714e498a4' })))));
+    }
+};
+AfSwitch.style = afSwitchCss;
+
+export { AfSwitch as af_switch };
+//# sourceMappingURL=af-switch.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-switch.entry.js","sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.switch.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Switch track */\n.track {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 52px;\n  height: 30px;\n  border-radius: var(--radii-switch, 9999px);\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  transition: background 0.2s ease;\n  box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n  background: #d0d6d8;\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Switch knob */\n.knob {\n  position: absolute;\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease, background 0.2s ease;\n  transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n  transform: translateX(24px);\n}\n\n/* Knob disabled state */\n.knob.disabled {\n  background: var(--forms-control-stroke-disabled, #a1aeb1);\n  box-shadow: none;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,2+CAA2+C;;MCYl/C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}

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

@@ -0,0 +1,86 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BmU_CFQ4.js';
+
+const afTabBarCss = ":host{display:block;width:100%}.tab-bar{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda)}.tab-bar::-webkit-scrollbar{height:4px}.tab-bar::-webkit-scrollbar-track{background:var(--af-scrollbar-track, #d1ddda);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb{background:var(--af-scrollbar-thumb, #8a7049);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb:hover{background:var(--af-scrollbar-thumb-hover, #8d785a)}.tab-bar.shape-square{gap:0;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}.tab-bar.shape-pill{gap:0;padding:var(--space-2, 8px);background-color:var(--af-background-level-1, #e8eeed);border-radius:var(--radius-pill, 999px)}.tab-bar.breakpoint-mobile{}.tab-bar.breakpoint-mobile.shape-square{}.tab-bar.breakpoint-mobile.shape-pill{padding:var(--space-1, 4px)}.tab-bar.breakpoint-desktop{}.tab-bar.breakpoint-desktop.shape-square{}.tab-bar.breakpoint-desktop.shape-pill{padding:var(--space-2, 8px)}";
+
+const AfTabBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Visual shape variant for all tabs
+         * - `square` - Rectangular tabs with bottom border indicator
+         * - `pill` - Rounded pill tabs with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Responsive breakpoint mode
+         * - `mobile` - Compact layout with smaller padding
+         * - `desktop` - Larger layout with more generous spacing
+         */
+        this.breakpoint = 'desktop';
+    }
+    componentDidLoad() {
+        this.syncChildProps();
+    }
+    componentDidUpdate() {
+        this.syncChildProps();
+    }
+    /**
+     * Sync shape and breakpoint props to child af-tab elements
+     */
+    syncChildProps() {
+        const tabs = this.el.querySelectorAll('af-tab');
+        tabs.forEach((tab) => {
+            tab.setAttribute('shape', this.shape);
+            tab.setAttribute('data-breakpoint', this.breakpoint);
+        });
+    }
+    /**
+     * Handle keyboard navigation between tabs
+     */
+    handleKeyDown(event) {
+        const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])'));
+        const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);
+        if (currentIndex === -1)
+            return;
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        // Focus the button inside the shadow DOM of the tab
+        const targetTab = tabs[newIndex];
+        const button = targetTab.shadowRoot?.querySelector('button');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'tab-bar': true,
+            [`shape-${this.shape}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
+        };
+        return (h(Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
+    }
+    get el() { return getElement(this); }
+};
+AfTabBar.style = afTabBarCss;
+
+export { AfTabBar as af_tab_bar };
+//# sourceMappingURL=af-tab-bar.entry.js.map

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

@@ -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

@@ -0,0 +1,62 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.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,\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) {
+        registerInstance(this, hostRef);
+        this.afTabClick = createEvent(this, "afTabClick");
+        /**
+         * The text label for the tab
+         */
+        this.label = '';
+        /**
+         * Whether the tab is currently active/selected
+         */
+        this.active = false;
+        /**
+         * Whether the tab is disabled
+         */
+        this.disabled = false;
+        /**
+         * Visual shape variant
+         * - `square` - Rectangular tab with bottom border indicator
+         * - `pill` - Rounded pill shape with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Whether to show the icon slot
+         */
+        this.displayIcon = false;
+        /**
+         * Whether to show the number badge slot
+         */
+        this.displayNumber = false;
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.afTabClick.emit({ value: this.value });
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.afTabClick.emit({ value: this.value });
+            }
+        };
+    }
+    render() {
+        const tabClasses = {
+            'tab': true,
+            'active': this.active,
+            'disabled': this.disabled,
+            [`shape-${this.shape}`]: true,
+        };
+        return (h(Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', 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: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
+    }
+};
+AfTab.style = afTabCss;
+
+export { AfTab as af_tab };
+//# sourceMappingURL=af-tab.entry.js.map

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

@@ -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

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.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-sand{background-color:var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-sand:hover{background-color:var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d))}.tag.variant-light{background-color:var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));color:var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-light:hover{background-color:var(--af-tag-light-bg-hover, 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) {
+        registerInstance(this, hostRef);
+        /**
+         * The size of the tag
+         * - `x-small` - Compact tag with minimal padding
+         * - `small` - Small tag with moderate padding
+         * - `large` - Large tag with generous padding
+         */
+        this.size = 'small';
+        /**
+         * The visual variant of the tag
+         * - `sand` - Soft-clay/tan colored background (default)
+         * - `light` - Mist-green/light colored background
+         */
+        this.variant = 'sand';
+    }
+    render() {
+        const TagElement = this.href ? 'a' : 'span';
+        const linkProps = this.href ? { href: this.href } : {};
+        return (h(Host, { key: '82b1f25a939716973c927f59e82808572004e871' }, h(TagElement, { key: 'e4a524e0f4dd496ca5485d865549bd0b063bd4ac', class: {
+                'tag': true,
+                [`size-${this.size}`]: true,
+                [`variant-${this.variant}`]: true,
+            }, ...linkProps }, h("slot", { key: '07202b985638722997e8aff2bad13ed5d1aa8d2c' }))));
+    }
+};
+AfTag.style = afTagCss;
+
+export { AfTag as af_tag };
+//# sourceMappingURL=af-tag.entry.js.map

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

@@ -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\n/* Make links look clickable */\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: SAND (Soft-clay/tan colored - default)\n   ========================================================================== */\n\n.tag.variant-sand {\n  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-sand:hover {\n  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   VARIANT: LIGHT (Mist-green/light colored)\n   ========================================================================== */\n\n.tag.variant-light {\n  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));\n  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-light:hover {\n  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n/* Size: X-Small */\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Small */\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Large */\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/* Focus state */\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/* Focus visible for keyboard navigation */\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\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">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\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\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\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,2hDAA2hD;;MCqB/hD,KAAK,GAAA,MAAA;AALlB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,MAAM;AA0BrC;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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-DI7b0bCy.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BmU_CFQ4.js';
 
-const afTestimonialCarouselCss = ".sc-af-testimonial-carousel-h{display:block;width:100%;overflow:hidden}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%}.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}.testimonial-progress.sc-af-testimonial-carousel{display:flex;gap:12px;justify-content:center;margin-top:32px;padding:0 220px}.progress-dot.sc-af-testimonial-carousel{width:100%;max-width:840px;height:3px;background:var(--colour-background-border-default, #d1ddda);border-radius:2px;cursor:pointer;transition:background 0.3s ease;position:relative;overflow:hidden}.progress-dot.active.sc-af-testimonial-carousel{background:var(--colour-background-border-active, #8a7049)}.progress-dot.sc-af-testimonial-carousel:hover:not(.active){background:var(--colour-background-border-default, #c1cdc9)}.carousel-navigation.sc-af-testimonial-carousel{position:absolute;bottom:48px;left:50%;margin-left:48px;display:flex;gap:12px;align-items:center;z-index:10}.nav-button.sc-af-testimonial-carousel{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;color:var(--colour-brand-inkwell, #14343b)}.nav-button.sc-af-testimonial-carousel:hover:not(:disabled){background:rgba(255, 255, 255, 0.1);transform:translateY(-2px)}.nav-button.sc-af-testimonial-carousel:disabled{opacity:0.4;cursor:not-allowed;border-color:var(--colour-brand-inkwell, #14343b)}.nav-button.sc-af-testimonial-carousel svg.sc-af-testimonial-carousel{width:24px;height:24px}";
+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}.testimonial-progress.sc-af-testimonial-carousel{margin-top:32px;max-width:840px;margin-left:auto;margin-right:auto}";
 
 const AfTestimonialCarousel = class {
     constructor(hostRef) {
@@ -46,12 +46,20 @@ const AfTestimonialCarousel = class {
             this.observer.disconnect();
         }
     }
+    /**
+     * Listen for navigation events from testimonials
+     */
+    handleNavPrev() {
+        this.goToPrevious();
+    }
+    handleNavNext() {
+        this.goToNext();
+    }
     detectTestimonials() {
         const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial'));
         if (newTestimonials.length !== this.testimonials.length) {
             this.testimonials = newTestimonials;
             this.testimonialCount = newTestimonials.length;
-            console.log('Found testimonials:', this.testimonials.length);
             if (this.testimonials.length > 0) {
                 this.currentIndex = 0;
                 this.updateVisibleTestimonial();
@@ -59,26 +67,30 @@ const AfTestimonialCarousel = class {
         }
     }
     updateVisibleTestimonial() {
+        const hasPrev = this.currentIndex > 0;
+        const hasNext = this.currentIndex < this.testimonialCount - 1;
+        const showNav = this.testimonialCount > 1;
         this.testimonials.forEach((testimonial, index) => {
             const offset = (index - this.currentIndex) * 100;
             testimonial.style.transform = `translateX(${offset}%)`;
             testimonial.style.opacity = index === this.currentIndex ? '1' : '0';
             testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';
+            // Set navigation props on testimonials (directly on the element for Stencil)
+            testimonial.showNavigation = showNav;
+            testimonial.hasPrev = hasPrev;
+            testimonial.hasNext = hasNext;
         });
     }
+    /**
+     * Calculate progress value (0 to 1) based on current position
+     */
+    getProgress() {
+        if (this.testimonialCount <= 1)
+            return 0;
+        return (this.currentIndex + 1) / this.testimonialCount;
+    }
     render() {
-        const hasPrev = this.currentIndex > 0;
-        const hasNext = this.currentIndex < this.testimonialCount - 1;
-        return (h(Host, { key: '5fb510b14cc125949f4265e0b2b44ddd85a0fe82' }, h("div", { key: 'd40dc624996acb24689f47ccb108cd50791ba35c', class: "testimonial-carousel" }, h("div", { key: 'df0c0e42b475c652b14fafa3e3d96af543839eaa', class: "testimonial-slides" }, h("slot", { key: 'da7c0e18a5370b0b06526e86d5f482aa83fce08d' })), this.testimonialCount > 1 && (h("div", { key: '4988b2bbc14aa5d0b5ca8cbe1d26025bb4f59310', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
-                if (!this.isAnimating && index !== this.currentIndex) {
-                    this.isAnimating = true;
-                    this.currentIndex = index;
-                    this.updateVisibleTestimonial();
-                    setTimeout(() => {
-                        this.isAnimating = false;
-                    }, 500);
-                }
-            } }))))), this.testimonialCount > 1 && (h("div", { key: 'e7964cffbe873d8c4bfa80696137f09b451799ca', class: "carousel-navigation" }, h("button", { key: 'f2fc1864f48ecb72e2114af40a849ba6d779afb7', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: 'ac40cddba548d95f19b0e7729fea5d6fe923533e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '90071385affb9512188b583cbd3dd60da4e6d7b7', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'bd3095a3e9857c9fdd30a3f8cf78197b1890e9a2', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: 'dc2fd50a2c810c9af346cbb0432a44baf6c56219', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'de50488dc05d8fd669951d099376f65b9a7dfa26', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '57b9644d20de065d6274f35f0aeac5e525a7f994' }, h("div", { key: '69033a6db2cb6242abd737ec98a841109a88d443', class: "testimonial-carousel" }, h("div", { key: 'b94d5bbd634eb445737afe8c0dc8f5795be50b4c', class: "testimonial-slides" }, h("slot", { key: 'a8481aaeeb8b818aa9d0ae0eeff5c30b33288acd' })), this.testimonialCount > 1 && (h("div", { key: '496d86deca071afeacb0d8eb4c273eefa592430e', class: "testimonial-progress" }, h("af-progress-line", { key: 'bb9c74ab68bb2dc247556e81ec07e39b7934e5ee', progress: this.getProgress() }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1 +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  overflow: hidden;\n}\n\n.testimonial-carousel {\n  position: relative;\n  width: 100%;\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/* Progress indicator */\n.testimonial-progress {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n  margin-top: 32px;\n  padding: 0 220px;\n}\n\n.progress-dot {\n  width: 100%;\n  max-width: 840px;\n  height: 3px;\n  background: var(--colour-background-border-default, #d1ddda);\n  border-radius: 2px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-dot.active {\n  background: var(--colour-background-border-active, #8a7049);\n}\n\n.progress-dot:hover:not(.active) {\n  background: var(--colour-background-border-default, #c1cdc9);\n}\n\n/* Navigation buttons - positioned bottom left of content area (not on image) */\n.carousel-navigation {\n  position: absolute;\n  bottom: 48px;\n  left: 50%;\n  margin-left: 48px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  z-index: 10;\n}\n\n.nav-button {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.nav-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n  transform: translateY(-2px);\n}\n\n.nav-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: var(--colour-brand-inkwell, #14343b);\n}\n\n.nav-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n","import { Component, State, h, Host, Element } from '@stencil/core';\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  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      console.log('Found testimonials:', this.testimonials.length);\n      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\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  }\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  render() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              {Array.from({ length: this.testimonialCount }).map((_, index) => (\n                <div \n                  class={`progress-dot ${index === this.currentIndex ? 'active' : ''}`}\n                  onClick={() => {\n                    if (!this.isAnimating && index !== this.currentIndex) {\n                      this.isAnimating = true;\n                      this.currentIndex = index;\n                      this.updateVisibleTestimonial();\n                      setTimeout(() => {\n                        this.isAnimating = false;\n                      }, 500);\n                    }\n                  }}\n                />\n              ))}\n            </div>\n          )}\n\n          {/* Navigation buttons */}\n          {this.testimonialCount > 1 && (\n            <div class=\"carousel-navigation\">\n              <button \n                class=\"nav-button prev\" \n                disabled={!hasPrev}\n                onClick={this.goToPrevious}\n                aria-label=\"Previous testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M19 12H5M5 12L12 19M5 12L12 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n              <button \n                class=\"nav-button next\" \n                disabled={!hasNext}\n                onClick={this.goToNext}\n                aria-label=\"Next testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}
+{"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/* 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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-DI7b0bCy.js';
+import { r as registerInstance, h, H as Host } from './index-BmU_CFQ4.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(--colour-background-border-active, #8a7049);padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:44px;font-weight:400;line-height:1;letter-spacing:-0.88px;color:var(--colour-typography-heading-secondary, #8a7049);margin:0}.stat-description.sc-af-testimonial-stat{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:16px;font-weight:400;line-height:24px;color:var(--colour-typography-body-dark, #14343b);margin:0;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) {
@@ -11,7 +11,7 @@ const AfTestimonialStat = class {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: '7234425931dee2deff672a9e863b13eb5dd35c30' }, h("div", { key: '737dbdee95341fd7b8c213b6b9590f54c8039e7d', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: '8de1db6ce9dcaf5a94a4c11b7cfbebed8274be9f', class: "stat-value" }, this.value), h("p", { key: 'd34154c4bc709a3e023ca16b991b7dca95402621', class: "stat-description" }, this.description))));
+        return (h(Host, { key: 'e3dc86a0d0368680dc03ab1a7260ccabd48def13' }, h("div", { key: '97cefaa49ab9fad117d3c541d9b58461ad216566', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '49c03e5fe9c7ddbb31bb8d8a686cffa44517c176', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '3b931281953a7d23d0bdfb540d48635576f84e1d', variant: "medium", class: "stat-description" }, this.description))));
     }
 };
 AfTestimonialStat.style = afTestimonialStatCss;

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

@@ -1 +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  border-left: 2px solid var(--colour-background-border-active, #8a7049);\n  padding-left: 16px;\n  min-height: 76px;\n  justify-content: center;\n}\n\n.stat-value {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 44px;\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--colour-typography-heading-secondary, #8a7049);\n  margin: 0;\n}\n\n.stat-description {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  color: var(--colour-typography-body-dark, #14343b);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\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          <p class=\"stat-value\">{this.value}</p>\n          <p class=\"stat-description\">{this.description}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"names":[],"mappings":";;AAAA,MAAM,oBAAoB,GAAG,kxBAAkxB;;MCQlyB,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAYtC;IAVC,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,CAAA,KAAA,EAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAA,CAAE,EAAA,EAC3D,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAK,EACtC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,CACD;;;;;;;"}
+{"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

@@ -1,13 +1,37 @@
-import { r as registerInstance, h, H as Host } from './index-DI7b0bCy.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-BmU_CFQ4.js';
 
-const afTestimonialCss = ".sc-af-testimonial-h{display:block;width:100%}.testimonial-card.sc-af-testimonial{background:var(--colour-background-level-1, #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:519px;height:100%;background:#000000;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 rgba(255, 255, 255, 0.08);border-left:1px solid rgba(255, 255, 255, 0.08);box-sizing:border-box}.testimonial-quote-section.sc-af-testimonial{flex:1;display:flex;flex-direction:column;gap:12px}.testimonial-quote-icon.sc-af-testimonial{width:48px;height:48px;color:var(--colour-brand-inkwell, #14343b);flex-shrink:0}.testimonial-text.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-default, #2b484f);margin:0;max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:22px;font-weight:400;line-height:1.4;color:var(--colour-typography-body-dark, #14343b);margin:0}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%}.testimonial-footer.sc-af-testimonial{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--colour-background-border-default, #d1ddda);padding-top:32px}.testimonial-nav.sc-af-testimonial{display:flex;gap:12px}.testimonial-cta.sc-af-testimonial{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--colour-brand-inkwell, #14343b);border-radius:9999px;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:17px;font-weight:500;line-height:20px;color:var(--colour-brand-inkwell, #14343b);text-decoration:none;cursor:pointer;transition:all 0.2s ease}.testimonial-cta.sc-af-testimonial:hover{background:var(--colour-background-level-1, #e8eeed);transform:translateY(-1px)}.testimonial-cta.sc-af-testimonial svg.sc-af-testimonial{width:24px;height:24px}";
+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:40.5%;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{max-height:155px;overflow:hidden;text-overflow:ellipsis}.testimonial-attribution.sc-af-testimonial{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b))}.testimonial-stats.sc-af-testimonial{display:flex;gap:32px;width:100%;flex-shrink:0}.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) {
         registerInstance(this, hostRef);
+        this.navPrev = createEvent(this, "navPrev");
+        this.navNext = createEvent(this, "navNext");
+        /**
+         * Whether to show built-in navigation buttons (used when in a carousel)
+         */
+        this.showNavigation = false;
+        /**
+         * Whether the previous button is enabled
+         */
+        this.hasPrev = false;
+        /**
+         * Whether the next button is enabled
+         */
+        this.hasNext = false;
+        this.handlePrev = () => {
+            this.navPrev.emit();
+        };
+        this.handleNext = () => {
+            this.navNext.emit();
+        };
     }
     render() {
-        return (h(Host, { key: 'f913887a6afa873c7a3c36101270881bf66fbd62' }, h("div", { key: 'bf6f8f9f769a0086534a51f31bf605310ba96fcc', class: "testimonial-card" }, h("div", { key: '10101d05e22d08dacd8a55de8276a5b0bb582b65', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'f323a77de1dc85bd9ed8385a6dbefd65081c3afb', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '4fbd29c40e30700ba994372418f6c2be672124eb', class: "testimonial-logo" }, h("img", { key: '20871205ac3472a73e597737c9d0b72dc17f347e', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'b1e0702b8a274fc877eadc2ea951915225d0580d', class: "testimonial-content" }, h("div", { key: '978370df3c32658a253bc60a7cbed9488835b35f', class: "testimonial-quote-section" }, h("div", { key: 'e7dafdb960d1807c5451b7e836e18356f3d7f405', class: "testimonial-quote-icon" }, h("slot", { key: '20bc41c1ac125003cbcbb46b3ae5b01b019ea132', name: "quote-icon" }, h("svg", { key: '16131a28d752b5c376d7ecbdc10578c2a06f9b2d', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1b7a826418d6a2bd739061b7f9da2d7f70f55630', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '78e6829551712546f6c71245c9609eff3cc123bf', class: "testimonial-text" }, this.quote), h("p", { key: '2339374f5fe07cf2d5b2fb56978c1a1516c4fe92', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '72fd3dd7dbfee193916b3c7d3acaf03a7540bf2d', class: "testimonial-stats" }, h("slot", { key: '531f04e6dcdfbfb3acde67955561b175cdf3a00d', name: "stats" })), h("div", { key: 'b7caadc3a9de19fea9f5556e5c74c24a726c467f', class: "testimonial-footer" }, h("div", { key: 'c5160dcf171ca997e29346a2cbb0978a1bc88161', class: "testimonial-nav" }, h("slot", { key: 'bc85749aed00c9b9acc870a20b2ccf634fc34af8', name: "navigation" })), this.readMoreLink && (h("a", { key: '3e968d6ad981ad0d0dc8b3c47e5f64ff0374be74', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '14ca40ff2260d107a205623549839ede3212a6f4' }, "Read full story"), h("svg", { key: 'eb0d55ed8d4219efbee4c0125be4420bf5b23393', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '5ccafb8ab0b5af8050cb7a60a02667f3c0b92cb1', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
+        return (h(Host, { key: 'aa2ad6cdbcba23aac44ba04c80928c0f83a50903' }, h("div", { key: 'e9417c5451eb5c7118760b8b06b97a3debbb49af', class: "testimonial-card" }, h("div", { key: '14f69eda1e3a21202014d9ff92fb7898d4cd6250', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '6447edb4eb0e7d1dd05432038f717820b6053cae', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'd052c5613090c21d7eeed60dba77bcb3dbfbc21a', class: "testimonial-logo" }, h("img", { key: 'f8be04a27d969dffd59cf9bad3bd9bbc9ddeb1d3', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '25d578ea0f78abacdd42bf9edbcf925680069da5', class: "testimonial-content" }, h("div", { key: '92458d4319c9f311bbcb296a6422f63b5c90aae6', class: "testimonial-quote-section" }, h("div", { key: '9f0e3dd17d27211afb49b8257ce896bd63490825', class: "testimonial-quote-icon" }, h("slot", { key: 'fee068be75df3e19436cca1e340ac7b4abdc9b6a', name: "quote-icon" }, h("af-icon", { key: '54416234954357aaaf49864515b87017f45aa09d', name: "quote", size: 48 }))), h("af-text", { key: '3a15866eb88613a956bfcbf107a9da0d51d59526', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: '6c9a0dd1c16bbd8c76ca364bea329c2bf8ee0425', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '866aeb8fa8338d23354d5f4b7be63c5d9c0eaacb', class: "testimonial-stats" }, h("slot", { key: 'f7b559060fb9f9bbba39c2a67c23204d7cbf8bdd', name: "stats" })), h("div", { key: 'b19ad4b37a3ba6c85846732f991870e8312ef1d5', class: "testimonial-footer" }, h("div", { key: 'b1f64564c4dbd14347e32d782874be699d0745b0', class: "testimonial-nav" }, this.showNavigation ? (
+        // Render built-in navigation buttons
+        h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
+        // Allow custom navigation via slot
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '41adc9217b698b1df0f6075f5aa4ee0c2683632f', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '3cec7eb5a8514427a257cc6f228e1e5bde2cc713', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
 };
 AfTestimonial.style = afTestimonialCss;