@affinda/wc 0.6.1 → 0.7.0

package/dist/cjs/af-button-group.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afButtonGroupCss = ":host{display:inline-block}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}";
+const afButtonGroupCss = () => `:host{display:inline-block}:host(.stack-mobile){max-width:100%}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}@media (max-width: 767px){:host(.stack-mobile){display:block;width:min(100%, 342px)}:host(.stack-mobile) .button-group{display:flex;flex-direction:column;width:100%;gap:var(--af-button-group-mobile-gap, 12px) !important}:host(.stack-mobile) ::slotted(af-button){width:100%;--af-button-width:100%}}`;
 
 const AfButtonGroup = class {
     constructor(hostRef) {
@@ -24,7 +24,6 @@ const AfButtonGroup = class {
         return (index.h(index.Host, { key: '28faa5610144730bd66361b304167a0fb64be5d5' }, index.h("div", { key: 'a4bcc27d77f421dff083f5cccfe261be34a9b8f1', class: classes, style: { gap: this.gap } }, index.h("slot", { key: '365862ea727b18cfa0a96f0b99d9fb338c0be91a' }))));
     }
 };
-AfButtonGroup.style = afButtonGroupCss;
+AfButtonGroup.style = afButtonGroupCss();
 
 exports.af_button_group = AfButtonGroup;
-//# sourceMappingURL=af-button-group.entry.cjs.js.map

package/dist/cjs/af-button.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afButtonCss = ":host{display:inline-block}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"ghost\"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}:host([full-width]),:host(.full-width){display:block;width:100%}:host([full-width]) .button,:host(.full-width) .button{width:100%}.button{display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:9999px;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;text-decoration:none;cursor:pointer;transition:background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:var(--af-button-width, auto);will-change:transform}@media (prefers-reduced-motion: reduce){.button{transition-duration:0.01ms}}.size-default{padding:12px 24px;font-size:17px;line-height:20px}.size-thin{padding:8px 16px;font-size:14px;line-height:16px}.icon-left,.icon-right{display:none;align-items:center;justify-content:center;flex-shrink:0}.icon-left.has-content,.icon-right.has-content{display:flex}.size-default .icon-left,.size-default .icon-right{width:24px;height:24px}.size-thin .icon-left,.size-thin .icon-right{width:20px;height:20px}.size-default .icon-left.has-content{margin-right:12px}.size-default .icon-right.has-content{margin-left:12px}.size-thin .icon-left.has-content{margin-right:8px}.size-thin .icon-right.has-content{margin-left:8px}.label{flex:0 1 auto;display:flex;align-items:center;justify-content:center}.size-default .label{height:24px}.size-thin .label{height:20px}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b))}.variant-primary .icon-left,.variant-primary .icon-right{color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95E6E2);border-color:var(--af-button-primary-stroke, #14343B)}.variant-primary:focus:not(.disabled),.variant-primary:focus-visible:not(.disabled){background:var(--af-button-primary-bg, #A6FFFB);border-color:var(--af-button-primary-stroke, #14343B);box-shadow:0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);outline:none}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95E6E2);transform:translateY(1px)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));color:var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b))}.variant-secondary .icon-left,.variant-secondary .icon-right{color:var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));border-color:var(--af-button-secondary-stroke, currentColor)}.variant-secondary:focus:not(.disabled),.variant-secondary:focus-visible:not(.disabled){background:var(--af-background-base, #FFF);border-color:var(--af-button-secondary-stroke, currentColor);box-shadow:0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);outline:none}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));transform:translateY(1px)}.variant-ghost{background:transparent;border-color:transparent;border-radius:0;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));padding-left:0;padding-right:0}.variant-ghost .label{border-bottom:2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670))}.variant-ghost .icon-left,.variant-ghost .icon-right{color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b))}.variant-ghost:hover:not(.disabled){opacity:0.8}.variant-ghost:focus:not(.disabled),.variant-ghost:focus-visible:not(.disabled){outline:none}.variant-ghost:focus-visible:not(.disabled) .label{box-shadow:0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670))}.variant-ghost:active:not(.disabled){opacity:0.6}.disabled{cursor:not-allowed;pointer-events:none}.variant-primary.disabled{border:1px solid var(--af-button-primary-stroke, #14343B);background:var(--af-button-primary-bg, #A6FFFB);opacity:0.6}.variant-secondary.disabled{border:1px solid var(--af-button-secondary-stroke, currentColor);opacity:0.6}.variant-ghost.disabled{opacity:0.6}button.button{font:inherit;cursor:pointer}button.button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b))}button.button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}button.button.variant-ghost{background:transparent;border:none}a.button{text-decoration:none;color:inherit}a.button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b))}a.button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}a.button.variant-ghost{background:transparent;border:none}";
+const afButtonCss = () => `:host{display:inline-block}:host([variant="primary"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant="secondary"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant="ghost"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}:host([full-width]),:host(.full-width){display:block;width:100%}:host([full-width]) .button,:host(.full-width) .button{width:100%}.button{display:inline-flex;align-items:center;justify-content:center;gap:0;border-radius:9999px;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;text-decoration:none;cursor:pointer;transition:background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),     border-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),     color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),     box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),     transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:var(--af-button-width, auto);will-change:transform}@media (prefers-reduced-motion: reduce){.button{transition-duration:0.01ms}}.size-default{padding:12px 24px;font-size:17px;line-height:20px}.size-thin{padding:8px 16px;font-size:14px;line-height:16px}.icon-left,.icon-right{display:none;align-items:center;justify-content:center;flex-shrink:0}.icon-left.has-content,.icon-right.has-content{display:flex}.size-default .icon-left,.size-default .icon-right{width:24px;height:24px}.size-thin .icon-left,.size-thin .icon-right{width:20px;height:20px}.size-default .icon-left.has-content{margin-right:12px}.size-default .icon-right.has-content{margin-left:12px}.size-thin .icon-left.has-content{margin-right:8px}.size-thin .icon-right.has-content{margin-left:8px}.label{flex:0 1 auto;display:flex;align-items:center;justify-content:center}.size-default .label{height:24px}.size-thin .label{height:20px}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b))}.variant-primary .icon-left,.variant-primary .icon-right{color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95E6E2);border-color:var(--af-button-primary-stroke, #14343B)}.variant-primary:focus:not(.disabled),.variant-primary:focus-visible:not(.disabled){background:var(--af-button-primary-bg, #A6FFFB);border-color:var(--af-button-primary-stroke, #14343B);box-shadow:0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);outline:none}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95E6E2);transform:translateY(1px)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));color:var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b))}.variant-secondary .icon-left,.variant-secondary .icon-right{color:var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));border-color:var(--af-button-secondary-stroke, currentColor)}.variant-secondary:focus:not(.disabled),.variant-secondary:focus-visible:not(.disabled){background:var(--af-background-base, #FFF);border-color:var(--af-button-secondary-stroke, currentColor);box-shadow:0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);outline:none}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));transform:translateY(1px)}.variant-ghost{background:transparent;border-color:transparent;border-radius:0;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));padding-left:0;padding-right:0}.variant-ghost .label{border-bottom:2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670))}.variant-ghost .icon-left,.variant-ghost .icon-right{color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b))}.variant-ghost:hover:not(.disabled){opacity:0.8}.variant-ghost:focus:not(.disabled),.variant-ghost:focus-visible:not(.disabled){outline:none}.variant-ghost:focus-visible:not(.disabled) .label{box-shadow:0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670))}.variant-ghost:active:not(.disabled){opacity:0.6}.disabled{cursor:not-allowed;pointer-events:none}.variant-primary.disabled{border:1px solid var(--af-button-primary-stroke, #14343B);background:var(--af-button-primary-bg, #A6FFFB);opacity:0.6}.variant-secondary.disabled{border:1px solid var(--af-button-secondary-stroke, currentColor);opacity:0.6}.variant-ghost.disabled{opacity:0.6}button.button{font:inherit;cursor:pointer}button.button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b))}button.button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}button.button.variant-ghost{background:transparent;border:none}a.button{text-decoration:none;color:inherit}a.button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b))}a.button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}a.button.variant-ghost{background:transparent;border:none}`;
 
 const AfButton = class {
     constructor(hostRef) {
@@ -49,10 +49,11 @@ const AfButton = class {
             [`size-${this.size}`]: true,
             'disabled': this.disabled
         };
+        const showDefaultRightIcon = this.variant === 'ghost';
         const content = [
             index.h("span", { class: { 'icon-left': true, 'has-content': this.hasIconLeft } }, index.h("slot", { name: "icon-left", onSlotchange: this.handleSlotChange('icon-left') })),
             index.h("span", { class: "label" }, index.h("slot", null)),
-            index.h("span", { class: { 'icon-right': true, 'has-content': this.hasIconRight } }, index.h("slot", { name: "icon-right", onSlotchange: this.handleSlotChange('icon-right') }))
+            index.h("span", { class: { 'icon-right': true, 'has-content': this.hasIconRight || showDefaultRightIcon } }, index.h("slot", { name: "icon-right", onSlotchange: this.handleSlotChange('icon-right') }, showDefaultRightIcon ? index.h("af-icon", { name: "arrow-right", size: 18 }) : null))
         ];
         // Render as anchor if href is provided (and not disabled)
         if (this.href && !this.disabled) {
@@ -61,7 +62,6 @@ const AfButton = class {
         return (index.h(index.Host, null, index.h("button", { type: this.type, disabled: this.disabled, class: classes }, content)));
     }
 };
-AfButton.style = afButtonCss;
+AfButton.style = afButtonCss();
 
 exports.af_button = AfButton;
-//# sourceMappingURL=af-button.entry.cjs.js.map

package/dist/cjs/af-callout.cjs.entry.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afCalloutCss = () => `.sc-af-callout-h{display:block;width:100%}.callout.sc-af-callout{display:flex;align-items:flex-start;gap:16px;padding:24px;border-radius:var(--radius-lg, 20px);position:relative}.callout__icon.sc-af-callout{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md, 12px)}.callout__content.sc-af-callout{flex:1;min-width:0;display:flex;flex-direction:column}.callout__heading.sc-af-callout{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:18px;line-height:24px;min-height:40px;display:flex;align-items:center;color:var(--colour-brand-inkwell, #14343b)}.callout__description.sc-af-callout{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;margin-top:8px;color:var(--colour-inkwell-400, #2b484f)}.callout__description.sc-af-callout:empty{display:none;margin-top:0}.callout__dismiss.sc-af-callout{position:absolute;top:16px;right:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;border-radius:var(--radius-sm, 6px);cursor:pointer;color:var(--colour-inkwell-300, #60767b);transition:background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard)}.callout__dismiss.sc-af-callout:hover{background-color:rgba(0, 0, 0, 0.05)}.callout__dismiss.sc-af-callout:focus-visible{outline:2px solid var(--colour-brand-ice, #a6fffb);outline-offset:2px}.callout--success.sc-af-callout{background-color:var(--af-callout-success-bg, #e6f4ed);--callout-icon-bg:rgba(62, 143, 110, 0.15);--callout-icon-color:var(--status-ok, #3e8f6e)}.callout--success.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--error.sc-af-callout{background-color:var(--af-callout-error-bg, #fbeae8);--callout-icon-bg:rgba(185, 74, 59, 0.15);--callout-icon-color:var(--status-issue, #b94a3b)}.callout--error.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--warning.sc-af-callout{background-color:var(--colour-tints-soft-clay-100, #efeae2);--callout-icon-bg:rgba(158, 135, 101, 0.15);--callout-icon-color:var(--status-warning, #9e8765)}.callout--warning.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--info.sc-af-callout{background-color:var(--colour-tints-ice-100, #edfffe);--callout-icon-bg:rgba(127, 226, 212, 0.2);--callout-icon-color:var(--status-info, #7fe2d4)}.callout--info.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--inkwell.sc-af-callout{background-color:var(--af-callout-inkwell-bg, var(--colour-inkwell-50, #e8ebeb));--callout-icon-bg:rgba(20, 52, 59, 0.1);--callout-icon-color:var(--colour-brand-inkwell, #14343b)}.callout--inkwell.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--mist-green.sc-af-callout{background-color:var(--af-callout-mist-green-bg, var(--colour-tints-mist-green-100, #f4f7f6));--callout-icon-bg:rgba(198, 213, 209, 0.5);--callout-icon-color:var(--colour-brand-inkwell, #14343b)}.callout--mist-green.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--soft-clay.sc-af-callout{background-color:var(--af-callout-soft-clay-bg, var(--colour-tints-soft-clay-100, #efeae2));--callout-icon-bg:rgba(176, 150, 112, 0.2);--callout-icon-color:var(--colour-brand-inkwell, #14343b)}.callout--soft-clay.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout--ice.sc-af-callout{background-color:var(--af-callout-ice-bg, var(--colour-tints-ice-100, #edfffe));--callout-icon-bg:rgba(166, 255, 251, 0.4);--callout-icon-color:var(--colour-brand-inkwell, #14343b)}.callout--ice.sc-af-callout .callout__icon.sc-af-callout{background-color:var(--callout-icon-bg);color:var(--callout-icon-color)}.callout.sc-af-callout:has(.callout__dismiss) .callout__heading.sc-af-callout{padding-right:40px}@media (max-width: 768px){.callout.sc-af-callout{padding:20px;gap:12px}.callout__icon.sc-af-callout{width:36px;height:36px}.callout__heading.sc-af-callout{font-size:16px;line-height:22px;min-height:36px}.callout__description.sc-af-callout{font-size:14px;line-height:20px;margin-top:6px}.callout__dismiss.sc-af-callout{top:14px;right:14px}.callout.sc-af-callout:has(.callout__dismiss) .callout__heading.sc-af-callout{padding-right:32px}}@media (max-width: 480px){.callout.sc-af-callout{padding:16px;gap:10px}.callout__icon.sc-af-callout{width:32px;height:32px}.callout__icon.sc-af-callout af-icon.sc-af-callout{--af-icon-size:20px}.callout__heading.sc-af-callout{font-size:15px;line-height:20px;min-height:32px}.callout__description.sc-af-callout{font-size:13px;line-height:18px;margin-top:4px}.callout__dismiss.sc-af-callout{top:10px;right:10px;width:36px;height:36px}.callout.sc-af-callout:has(.callout__dismiss) .callout__heading.sc-af-callout{padding-right:28px}}`;
+
+const SEMANTIC_VARIANTS = ['info', 'warning', 'success', 'error'];
+const AUTO_ICONS = {
+    info: 'info',
+    warning: 'info',
+    success: 'check-circle',
+    error: 'info',
+    inkwell: 'info',
+    'mist-green': 'info',
+    'soft-clay': 'info',
+    ice: 'info',
+};
+const AfCallout = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calloutDismiss = index.createEvent(this, "af-callout-dismiss");
+        /**
+         * Visual variant of the callout.
+         * - Semantic: `info`, `warning`, `success`, `error` (status colors)
+         * - Themed: `inkwell`, `mist-green`, `soft-clay`, `ice` (brand colors)
+         */
+        this.variant = 'info';
+        /**
+         * Icon to display. Set to 'auto' to pick based on variant, or 'none' to hide.
+         */
+        this.icon = 'auto';
+        /**
+         * Whether the callout can be dismissed by the user.
+         */
+        this.dismissible = false;
+        this.dismissed = false;
+        this.handleDismiss = () => {
+            this.dismissed = true;
+            this.calloutDismiss.emit();
+        };
+    }
+    get resolvedIcon() {
+        if (this.icon === 'none')
+            return null;
+        if (this.icon === 'auto')
+            return AUTO_ICONS[this.variant] || 'info';
+        return this.icon;
+    }
+    get isSemantic() {
+        return SEMANTIC_VARIANTS.includes(this.variant);
+    }
+    render() {
+        if (this.dismissed)
+            return null;
+        const iconName = this.resolvedIcon;
+        return (index.h(index.Host, null, index.h("div", { class: {
+                callout: true,
+                [`callout--${this.variant}`]: true,
+                'callout--semantic': this.isSemantic,
+                'callout--themed': !this.isSemantic,
+            }, role: "alert" }, iconName && (index.h("div", { class: "callout__icon" }, index.h("af-icon", { name: iconName, size: 24 }))), index.h("div", { class: "callout__content" }, index.h("div", { class: "callout__heading" }, index.h("slot", null)), index.h("div", { class: "callout__description" }, index.h("slot", { name: "description" }))), this.dismissible && (index.h("button", { type: "button", class: "callout__dismiss", onClick: this.handleDismiss, "aria-label": "Dismiss" }, index.h("af-icon", { name: "close", size: 16 }))))));
+    }
+};
+AfCallout.style = afCalloutCss();
+
+exports.af_callout = AfCallout;

package/dist/cjs/af-card.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afCardCss = ".sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--af-card-radius, var(--radius-lg, 20px));overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}[interactive].sc-af-card-h .card.sc-af-card{transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));will-change:transform}[interactive].sc-af-card-h:hover .card.sc-af-card,[interactive].sc-af-card-h:focus-within .card.sc-af-card{transform:translateY(-2px);box-shadow:var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08))}@media (prefers-reduced-motion: reduce){[interactive].sc-af-card-h .card.sc-af-card{transition-duration:0.01ms}[interactive].sc-af-card-h:hover .card.sc-af-card,[interactive].sc-af-card-h:focus-within .card.sc-af-card{transform:none}}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--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-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)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}";
+const afCardCss = () => `.sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--af-card-radius, var(--radius-lg, 20px));overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}[interactive].sc-af-card-h .card.sc-af-card{transition:transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),     box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));will-change:transform}[interactive].sc-af-card-h:hover .card.sc-af-card,[interactive].sc-af-card-h:focus-within .card.sc-af-card{transform:translateY(-2px);box-shadow:var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08))}@media (prefers-reduced-motion: reduce){[interactive].sc-af-card-h .card.sc-af-card{transition-duration:0.01ms}[interactive].sc-af-card-h:hover .card.sc-af-card,[interactive].sc-af-card-h:focus-within .card.sc-af-card{transform:none}}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--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-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)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}`;
 
 const AfCard = class {
     constructor(hostRef) {
@@ -33,10 +33,9 @@ const AfCard = class {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (index.h(index.Host, { key: '8e58ce6e72f8c93f96661f56677a8ac861966e4b' }, index.h("div", { key: '5ad157ce904665fcd07f847b2851a8c269f04dce', class: classes }, index.h("div", { key: 'd662a3f05b9779d548a1393ce84ffa9d78be9646', class: "card__content" }, index.h("slot", { key: 'eb52c38a4b17a88bdabc74a1ebe3a0e9c1ad287c' })))));
+        return (index.h(index.Host, { key: 'fd767f800a7177b2231596eaf41f906f0bdc29ae' }, index.h("div", { key: '1c0432706445a66dad1afaecb0dd1d7e696752a0', class: classes }, index.h("div", { key: '327e92a575b73f2c66a679c750ca2548151081f5', class: "card__content" }, index.h("slot", { key: 'b8e40ef939226b89dc762c8a932c23cddf33bb2f' })))));
     }
 };
-AfCard.style = afCardCss;
+AfCard.style = afCardCss();
 
 exports.af_card = AfCard;
-//# sourceMappingURL=af-card.entry.cjs.js.map

package/dist/cjs/af-center.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afCenterCss = ":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";
+const afCenterCss = () => `:host{display:flex;box-sizing:border-box}:host([hidden]){display:none}`;
 
 const AfCenter = class {
     constructor(hostRef) {
@@ -33,10 +33,9 @@ const AfCenter = class {
         if (this.minHeight) {
             style.minHeight = this.minHeight;
         }
-        return (index.h(index.Host, { key: 'e91358ecc8de26481c2360e73043316ac63bf7bd', style: style }, index.h("slot", { key: 'e9d407b9a70103b215536cbab3a2a196d841f762' })));
+        return (index.h(index.Host, { key: '254f2bdac06cfff9069c0fd6e96356ca1586ca0c', style: style }, index.h("slot", { key: '8065217df655c40a888748fae7382b525e0fb047' })));
     }
 };
-AfCenter.style = afCenterCss;
+AfCenter.style = afCenterCss();
 
 exports.af_center = AfCenter;
-//# sourceMappingURL=af-center.entry.cjs.js.map

package/dist/cjs/af-chart-legend.cjs.entry.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afChartLegendCss = () => `:host{display:block;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif)}.chart-legend__list{display:flex;flex-wrap:wrap;gap:12px 16px;margin:0;padding:0;list-style:none}:host(.chart-legend--vertical) .chart-legend__list{flex-direction:column;gap:8px}:host(.chart-legend--align-start) .chart-legend__list{justify-content:flex-start}:host(.chart-legend--align-center) .chart-legend__list{justify-content:center}:host(.chart-legend--align-end) .chart-legend__list{justify-content:flex-end}.chart-legend__item{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;transition:background-color 0.15s ease, opacity 0.15s ease}:host(.chart-legend--interactive) .chart-legend__item{cursor:pointer;user-select:none}:host(.chart-legend--interactive) .chart-legend__item:hover,.chart-legend__item--hovered{background-color:var(--af-background-level-1, #f4f7f6)}:host(.chart-legend--interactive) .chart-legend__item:focus-visible{outline:2px solid var(--af-chart-palette-1, #c6d5d1);outline-offset:2px}.chart-legend__item--inactive{opacity:0.4}.chart-legend__item--inactive:hover{opacity:0.7}.chart-legend__swatch{flex-shrink:0;width:12px;height:12px}.chart-legend__swatch--square{border-radius:2px}.chart-legend__swatch--circle{border-radius:50%}.chart-legend__swatch--line{width:16px;height:3px;border-radius:2px}.chart-legend__swatch--0{background-color:var(--af-chart-palette-1, #c6d5d1)}.chart-legend__swatch--1{background-color:var(--af-chart-palette-2, #dde6e3)}.chart-legend__swatch--2{background-color:var(--af-chart-palette-3, #c0ab8d)}.chart-legend__swatch--3{background-color:var(--af-chart-palette-4, #dfd5c6)}.chart-legend__swatch--4{background-color:var(--af-chart-palette-5, #14343b)}.chart-legend__swatch--5{background-color:var(--af-chart-palette-1, #c6d5d1);opacity:0.7}.chart-legend__swatch--6{background-color:var(--af-chart-palette-2, #dde6e3);opacity:0.7}.chart-legend__swatch--7{background-color:var(--af-chart-palette-3, #c0ab8d);opacity:0.7}.chart-legend__label{font-size:13px;color:var(--af-chart-text, #2b484f)}.chart-legend__value{font-size:12px;color:var(--af-chart-text-muted, #6b8085);font-variant-numeric:tabular-nums;margin-left:4px}:host(.chart-legend--empty){display:none}`;
+
+const AfChartLegend = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.legendItemClick = index.createEvent(this, "legendItemClick");
+        this.legendItemHover = index.createEvent(this, "legendItemHover");
+        /**
+         * Legend items as JSON string.
+         */
+        this.items = '[]';
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Layout direction.
+         */
+        this.direction = 'horizontal';
+        /**
+         * Enable interactive hover/click behavior.
+         */
+        this.interactive = false;
+        /**
+         * Swatch shape.
+         */
+        this.swatchShape = 'square';
+        /**
+         * Alignment.
+         */
+        this.align = 'center';
+        this.parsedItems = [];
+        this.hoveredIndex = null;
+        this.activeIndices = new Set();
+        this.handleItemClick = (index) => {
+            if (!this.interactive)
+                return;
+            const item = this.parsedItems[index];
+            const newActive = new Set(this.activeIndices);
+            if (newActive.has(index)) {
+                // Don't allow deactivating if it's the last active item
+                if (newActive.size > 1) {
+                    newActive.delete(index);
+                }
+            }
+            else {
+                newActive.add(index);
+            }
+            this.activeIndices = newActive;
+            this.legendItemClick.emit({ index, item });
+        };
+        this.handleItemEnter = (index) => {
+            if (!this.interactive)
+                return;
+            this.hoveredIndex = index;
+            this.legendItemHover.emit({ index, item: this.parsedItems[index] });
+        };
+        this.handleItemLeave = () => {
+            if (!this.interactive)
+                return;
+            this.hoveredIndex = null;
+            this.legendItemHover.emit({ index: null, item: null });
+        };
+    }
+    parseItems() {
+        try {
+            const parsed = JSON.parse(this.items);
+            if (Array.isArray(parsed)) {
+                this.parsedItems = parsed;
+                // Initialize active state
+                this.activeIndices = new Set(this.parsedItems
+                    .map((item, i) => (item.active !== false ? i : -1))
+                    .filter((i) => i >= 0));
+            }
+            else {
+                this.parsedItems = [];
+            }
+        }
+        catch {
+            this.parsedItems = [];
+        }
+    }
+    componentWillLoad() {
+        this.parseItems();
+    }
+    render() {
+        const { parsedItems, direction, interactive, swatchShape, align, hoveredIndex, activeIndices } = this;
+        if (parsedItems.length === 0) {
+            return index.h(index.Host, { class: "chart-legend chart-legend--empty" });
+        }
+        return (index.h(index.Host, { class: {
+                'chart-legend': true,
+                [`chart-legend--${direction}`]: true,
+                [`chart-legend--align-${align}`]: true,
+                'chart-legend--interactive': interactive,
+            } }, index.h("ul", { class: "chart-legend__list", role: "list" }, parsedItems.map((item, i) => {
+            const isActive = activeIndices.has(i);
+            const isHovered = hoveredIndex === i;
+            return (index.h("li", { key: i, class: {
+                    'chart-legend__item': true,
+                    'chart-legend__item--active': isActive,
+                    'chart-legend__item--inactive': !isActive,
+                    'chart-legend__item--hovered': isHovered,
+                }, onClick: () => this.handleItemClick(i), onMouseEnter: () => this.handleItemEnter(i), onMouseLeave: this.handleItemLeave, role: interactive ? 'button' : 'listitem', tabIndex: interactive ? 0 : undefined, "aria-pressed": interactive ? isActive : undefined }, index.h("span", { class: {
+                    'chart-legend__swatch': true,
+                    [`chart-legend__swatch--${swatchShape}`]: true,
+                    [`chart-legend__swatch--${i}`]: !item.color,
+                }, style: item.color ? { backgroundColor: item.color } : {}, "aria-hidden": "true" }), index.h("span", { class: "chart-legend__label" }, item.label), item.value !== undefined && (index.h("span", { class: "chart-legend__value" }, item.value))));
+        })), index.h("slot", null)));
+    }
+    static get watchers() { return {
+        "items": [{
+                "parseItems": 0
+            }]
+    }; }
+};
+AfChartLegend.style = afChartLegendCss();
+
+exports.af_chart_legend = AfChartLegend;

package/dist/cjs/af-chart-section.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afChartSectionCss = () => `.sc-af-chart-section-h{display:block;width:100%;background-color:var(--af-background-base, #ffffff)}.padding-none.sc-af-chart-section{padding-top:0;padding-bottom:0}.padding-tight.sc-af-chart-section{padding-top:var(--space-6, 24px);padding-bottom:var(--space-6, 24px)}.padding-default.sc-af-chart-section{padding-top:var(--space-8, 32px);padding-bottom:var(--space-8, 32px)}.padding-loose.sc-af-chart-section{padding-top:48px;padding-bottom:48px}.chart-section__container.sc-af-chart-section{max-width:1280px;margin:0 auto;padding:0 var(--space-6, 24px)}.chart-section__chart.sc-af-chart-section{position:relative;width:100%;border-radius:var(--radius-md, 12px);overflow:visible;padding:var(--space-4, 16px);box-sizing:border-box}.chart-section__chart.sc-af-chart-section canvas.sc-af-chart-section{display:block;width:100%;height:100%}.chart-section__caption.sc-af-chart-section{margin-top:var(--space-3, 12px);font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-typography-body-subtle, #60767b);text-align:center}@media (max-width: 768px){.padding-tight.sc-af-chart-section{padding-top:var(--space-4, 16px);padding-bottom:var(--space-4, 16px)}.padding-default.sc-af-chart-section{padding-top:var(--space-6, 24px);padding-bottom:var(--space-6, 24px)}.padding-loose.sc-af-chart-section{padding-top:var(--space-8, 32px);padding-bottom:var(--space-8, 32px)}.chart-section__container.sc-af-chart-section{padding:0 var(--space-3, 12px)}.chart-section__chart.sc-af-chart-section{padding:var(--space-2, 8px);aspect-ratio:4/3 !important}}@media (max-width: 480px){.chart-section__chart.sc-af-chart-section{border-radius:var(--radius-sm, 6px)}.chart-section__caption.sc-af-chart-section{font-size:13px}}`;
+
+const AfChartSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Theme for the section background and chart color tokens.
+         */
+        this.theme = 'white';
+        /**
+         * Vertical padding variant.
+         */
+        this.padding = 'default';
+        /**
+         * Aspect ratio for the chart container (CSS aspect-ratio syntax).
+         */
+        this.aspectRatio = '16/9';
+    }
+    render() {
+        return (index.h(index.Host, { key: '55d1a0976642afc36d1b58e455375f47de397d33', class: {
+                'chart-section': true,
+                [`theme-${this.theme}`]: true,
+                [`padding-${this.padding}`]: true,
+            } }, index.h("div", { key: '3d29973f7e7f92bccd3c20fab220aa4ec8fe908b', class: "chart-section__container" }, index.h("div", { key: '5a05c3246cca7ff13d448480fd25057f78db25e7', class: "chart-section__chart", style: { aspectRatio: this.aspectRatio } }, index.h("slot", { key: '46646fb937db0080cf05a3b4ce3234671aed0287' })), this.caption && (index.h("div", { key: 'c93505c8a1740f4e8c4403f898d10157dd33707e', class: "chart-section__caption" }, this.caption)))));
+    }
+};
+AfChartSection.style = afChartSectionCss();
+
+exports.af_chart_section = AfChartSection;

package/dist/cjs/af-chart-tooltip.cjs.entry.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afChartTooltipCss = () => `:host{position:absolute;z-index:100;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 0.15s ease, visibility 0.15s ease;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif)}:host(.chart-tooltip--visible){opacity:1;visibility:visible}.chart-tooltip__content{background:var(--af-chart-tooltip-bg, #ffffff);border:1px solid var(--af-chart-tooltip-border, #e8ebeb);border-radius:6px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);padding:8px 12px;min-width:80px;max-width:240px;white-space:nowrap}.chart-tooltip__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--af-chart-text-muted, #6b8085);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--af-chart-tooltip-border, #e8ebeb)}.chart-tooltip__row{display:flex;align-items:center;gap:8px;padding:2px 0}.chart-tooltip__row--primary{padding-bottom:4px}.chart-tooltip__rows{border-top:1px solid var(--af-chart-tooltip-border, #e8ebeb);margin-top:4px;padding-top:6px}.chart-tooltip__rows .chart-tooltip__row{font-size:12px}.chart-tooltip__swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}.chart-tooltip__label{flex:1;font-size:13px;color:var(--af-chart-text, #2b484f)}.chart-tooltip__value{font-size:14px;font-weight:600;color:var(--af-chart-tooltip-text, #2b484f);font-variant-numeric:tabular-nums}.chart-tooltip__rows .chart-tooltip__label{font-size:12px;color:var(--af-chart-text-muted, #6b8085)}.chart-tooltip__rows .chart-tooltip__value{font-size:12px;font-weight:500}:host(.chart-tooltip--top) .chart-tooltip__content::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--af-chart-tooltip-bg, #ffffff)}:host(.chart-tooltip--bottom) .chart-tooltip__content::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--af-chart-tooltip-bg, #ffffff)}:host(.chart-tooltip--left) .chart-tooltip__content::after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--af-chart-tooltip-bg, #ffffff)}:host(.chart-tooltip--right) .chart-tooltip__content::after{content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--af-chart-tooltip-bg, #ffffff)}`;
+
+const AfChartTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Tooltip placement relative to the anchor point.
+         */
+        this.placement = 'top';
+        /**
+         * Offset from anchor point in pixels.
+         */
+        this.offset = 8;
+        this.visible = false;
+        this.content = null;
+        this.position = { x: 0, y: 0 };
+    }
+    /**
+     * Show the tooltip at the specified position with content.
+     *
+     * @param content - Tooltip content
+     * @param x - X position (relative to parent container)
+     * @param y - Y position (relative to parent container)
+     */
+    async show(content, x, y) {
+        this.content = content;
+        this.position = { x, y };
+        this.visible = true;
+    }
+    /**
+     * Hide the tooltip.
+     */
+    async hide() {
+        this.visible = false;
+    }
+    /**
+     * Update the tooltip position without changing content.
+     */
+    async updatePosition(x, y) {
+        this.position = { x, y };
+    }
+    getTransform() {
+        const { placement, offset } = this;
+        switch (placement) {
+            case 'top':
+                return `translate(-50%, calc(-100% - ${offset}px))`;
+            case 'bottom':
+                return `translate(-50%, ${offset}px)`;
+            case 'left':
+                return `translate(calc(-100% - ${offset}px), -50%)`;
+            case 'right':
+                return `translate(${offset}px, -50%)`;
+            default:
+                return `translate(-50%, calc(-100% - ${offset}px))`;
+        }
+    }
+    render() {
+        const { visible, content, position, placement } = this;
+        return (index.h(index.Host, { key: 'ac03b19db3735fe538048be6255856c0f2f6cea9', class: {
+                'chart-tooltip': true,
+                'chart-tooltip--visible': visible,
+                [`chart-tooltip--${placement}`]: true,
+            }, style: {
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                transform: this.getTransform(),
+            }, role: "tooltip", "aria-hidden": !visible }, content && (index.h("div", { key: '3ee349b78216db0a350603331b2a25c7b4dc7c19', class: "chart-tooltip__content" }, content.title && (index.h("div", { key: '44646cddb3338c75781185ae70f4f7864ddf7ac7', class: "chart-tooltip__title" }, content.title)), index.h("div", { key: '80937eed20255012e2b42d77a899e610341735a9', class: "chart-tooltip__row chart-tooltip__row--primary" }, content.color && (index.h("span", { key: '4c2b6639344413329d8da2653ef3dae0b5a00e6a', class: "chart-tooltip__swatch", style: { backgroundColor: content.color } })), index.h("span", { key: '4768ece290fdc6fffdf90b51070707fbb2d871a9', class: "chart-tooltip__label" }, content.label), index.h("span", { key: 'd7b87295d447b521f3c917801f4320038504d2ed', class: "chart-tooltip__value" }, content.value)), content.rows && content.rows.length > 0 && (index.h("div", { key: 'ea869ea38271a85fe7e98bced0d0265b90d73b0c', class: "chart-tooltip__rows" }, content.rows.map((row, i) => (index.h("div", { key: i, class: "chart-tooltip__row" }, row.color && (index.h("span", { class: "chart-tooltip__swatch", style: { backgroundColor: row.color } })), index.h("span", { class: "chart-tooltip__label" }, row.label), index.h("span", { class: "chart-tooltip__value" }, row.value)))))))), index.h("slot", { key: 'e1d2da37d159a1d0cea50d361e484d2e84e2095e' })));
+    }
+    get el() { return index.getElement(this); }
+};
+AfChartTooltip.style = afChartTooltipCss();
+
+exports.af_chart_tooltip = AfChartTooltip;

package/dist/cjs/af-checkbox.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afCheckboxCss = ":host{display:inline-block}.checkbox{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));user-select:none}.checkbox.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}.control{position:relative;display:block;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-checkbox, 4px);border:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));box-shadow:none}.control.disabled{background:var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8))}.control.checked.disabled{background:var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));box-shadow:none}.checkbox:not(.disabled):hover .control:not(.checked){box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{outline:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control.checked{box-shadow:0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:16px;height:16px;color:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+const afCheckboxCss = () => `:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));user-select:none}.checkbox.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}.control{position:relative;display:block;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-checkbox, 4px);border:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));box-shadow:none}.control.disabled{background:var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8))}.control.checked.disabled{background:var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));box-shadow:none}.checkbox:not(.disabled):hover .control:not(.checked){box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{outline:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),     0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)),      0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control.checked{box-shadow:0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)),      0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:16px;height:16px;color:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}`;
 
 const AfCheckbox = class {
     constructor(hostRef) {
@@ -52,7 +52,6 @@ const AfCheckbox = class {
         return (index.h(index.Host, { key: '704dbd9106798984fcbd46e56f8a9baca515bdbf' }, index.h("label", { key: '81ca6ce4e7a75eb371670a3dda2020e2b0b964fa', class: checkboxClasses }, index.h("input", { key: 'eb1b53e57dcbdb642d27980059e193d91ecfe926', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), index.h("span", { key: 'de52fa18c14faf38a40aff2a5d99c679efabcfa3', class: controlClasses }, this.checked && !this.indeterminate && (index.h("svg", { key: '4e8d59f891090221798d9aae19156ccf51d1b297', class: "icon", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { key: 'c53cce8b04e2c4c5e08744bc184add29a3e808b5', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (index.h("svg", { key: '420a6222b098df08f66a84e3f92734f7d9a7fc43', class: "icon", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { key: '8ff3b3d01c6db33f2eb753caea38f0a1feeab717', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("span", { key: '9513888140fbe087a71ef79b4c80a66f6a8e49ec', class: "label" }, index.h("slot", { key: '4fd9ddb4b6e25ded5f806ad7682a553fba119671' })))));
     }
 };
-AfCheckbox.style = afCheckboxCss;
+AfCheckbox.style = afCheckboxCss();
 
 exports.af_checkbox = AfCheckbox;
-//# sourceMappingURL=af-checkbox.entry.cjs.js.map

package/dist/cjs/af-client-carousel.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afClientCarouselCss = ".sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}.sc-af-client-carousel-h:hover .logo-track.sc-af-client-carousel{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.logo-track.sc-af-client-carousel,.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel,.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;transform:translateX(0)}}.client-carousel.mode-static.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;justify-content:center;flex-wrap:wrap;width:100%}.client-carousel.mode-static.sc-af-client-carousel .carousel-row.sc-af-client-carousel{justify-content:center;overflow:visible}.client-carousel.mode-static.sc-af-client-carousel .carousel-container.sc-af-client-carousel{overflow:visible}.client-carousel.mode-static.sc-af-client-carousel{overflow:hidden}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}.logo-track.sc-af-client-carousel>*.sc-af-client-carousel{display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}.theme-inkwell.sc-af-client-carousel-h,.client-carousel.theme-inkwell.sc-af-client-carousel{background-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-well-bg:var(--colour-background-level1-dark, #203e45);--af-carousel-logo-color:white;--af-carousel-logo-filter:brightness(0) invert(1)}.theme-white.sc-af-client-carousel-h,.client-carousel.theme-white.sc-af-client-carousel{background-color:var(--colour-brand-white, #FFFFFF);--af-carousel-logo-well-bg:var(--colour-background-level1, #e8eeed);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-mist-green.sc-af-client-carousel-h,.client-carousel.theme-mist-green.sc-af-client-carousel{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-carousel-logo-well-bg:var(--colour-mistgreen-300, #dde6e3);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-soft-clay.sc-af-client-carousel-h,.client-carousel.theme-soft-clay.sc-af-client-carousel{background-color:var(--colour-softclay-400, #c0ab8d);--af-carousel-logo-well-bg:var(--colour-softclay-200, #d5c5b0);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}.theme-white-ivory.sc-af-client-carousel-h,.client-carousel.theme-white-ivory.sc-af-client-carousel{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-carousel-logo-well-bg:var(--colour-softclay-100, #f2eadc);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none}@media (max-width: 1024px){.client-carousel.sc-af-client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel.sc-af-client-carousel{padding:24px 0}.carousel-container.sc-af-client-carousel{gap:var(--space-3, 12px)}.logo-track.sc-af-client-carousel{gap:var(--space-3, 12px)}.sc-af-client-carousel-s>*{gap:var(--space-3, 12px)}}";
+const afClientCarouselCss = () => `.sc-af-client-carousel-h{display:block;width:100%}.client-carousel.sc-af-client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden;box-sizing:border-box;border-top:1px solid var(--af-carousel-border-subtle, rgba(20, 52, 59, 0.12))}.carousel-container.sc-af-client-carousel{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row.sc-af-client-carousel{display:flex;width:100%;overflow:hidden;position:relative}.logo-track.sc-af-client-carousel{display:flex;gap:var(--space-4, 16px);animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-left;animation-duration:40s}.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation-name:scroll-right;animation-duration:40s}.carousel-row.sc-af-client-carousel:hover .logo-track.sc-af-client-carousel,.carousel-row.sc-af-client-carousel:focus-within .logo-track.sc-af-client-carousel{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.logo-track.sc-af-client-carousel,.scroll-left.sc-af-client-carousel .logo-track.sc-af-client-carousel,.scroll-right.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;transform:translateX(0)}}.client-carousel.mode-static.sc-af-client-carousel .logo-track.sc-af-client-carousel{animation:none;justify-content:center;flex-wrap:wrap;width:100%}.client-carousel.mode-static.sc-af-client-carousel .carousel-row.sc-af-client-carousel{justify-content:center;overflow:visible}.client-carousel.mode-static.sc-af-client-carousel .carousel-container.sc-af-client-carousel{overflow:visible}.client-carousel.mode-static.sc-af-client-carousel{overflow:hidden}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}.logo-track.sc-af-client-carousel>*.sc-af-client-carousel{display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}.theme-inkwell.sc-af-client-carousel-h,.client-carousel.theme-inkwell.sc-af-client-carousel{background-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-well-bg:var(--colour-background-level1-dark, #203e45);--af-carousel-logo-color:white;--af-carousel-logo-filter:brightness(0) invert(1);--af-carousel-border-subtle:var(--colour-background-level1-dark, #203e45)}.theme-white.sc-af-client-carousel-h,.client-carousel.theme-white.sc-af-client-carousel{background-color:var(--colour-brand-white, #FFFFFF);--af-carousel-logo-well-bg:var(--colour-background-level1, #e8eeed);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none;--af-carousel-border-subtle:rgba(20, 52, 59, 0.12)}.theme-mist-green.sc-af-client-carousel-h,.client-carousel.theme-mist-green.sc-af-client-carousel{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-carousel-logo-well-bg:var(--colour-mistgreen-300, #dde6e3);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none;--af-carousel-border-subtle:rgba(20, 52, 59, 0.14)}.theme-soft-clay.sc-af-client-carousel-h,.client-carousel.theme-soft-clay.sc-af-client-carousel{background-color:var(--colour-softclay-400, #c0ab8d);--af-carousel-logo-well-bg:var(--colour-softclay-200, #d5c5b0);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none;--af-carousel-border-subtle:rgba(20, 52, 59, 0.14)}.theme-white-ivory.sc-af-client-carousel-h,.client-carousel.theme-white-ivory.sc-af-client-carousel{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-carousel-logo-well-bg:var(--colour-softclay-100, #f2eadc);--af-carousel-logo-color:var(--colour-brand-inkwell, #14343B);--af-carousel-logo-filter:none;--af-carousel-border-subtle:rgba(20, 52, 59, 0.12)}@media (max-width: 1024px){.client-carousel.sc-af-client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel.sc-af-client-carousel{padding:24px 0}.carousel-container.sc-af-client-carousel{gap:var(--space-3, 12px)}.logo-track.sc-af-client-carousel{gap:var(--space-3, 12px)}.sc-af-client-carousel-s>*{gap:var(--space-3, 12px)}}`;
 
 const AfClientCarousel = class {
     constructor(hostRef) {
@@ -32,6 +32,28 @@ const AfClientCarousel = class {
         // skipping it avoids rendering every logo twice.
         if (this.mode === 'static')
             return;
+        this.scheduleTrackPreparation();
+    }
+    disconnectedCallback() {
+        if (this.resizeFrame !== undefined) {
+            cancelAnimationFrame(this.resizeFrame);
+        }
+    }
+    handleWindowResize() {
+        if (this.mode === 'static')
+            return;
+        this.scheduleTrackPreparation();
+    }
+    scheduleTrackPreparation() {
+        if (this.resizeFrame !== undefined) {
+            cancelAnimationFrame(this.resizeFrame);
+        }
+        this.resizeFrame = requestAnimationFrame(() => {
+            this.resizeFrame = undefined;
+            this.prepareTracks();
+        });
+    }
+    prepareTracks() {
         this.duplicateTrackContent(this.row1TrackRef);
         if (Number(this.rows) === 2) {
             this.duplicateTrackContent(this.row2TrackRef);
@@ -50,24 +72,37 @@ const AfClientCarousel = class {
     duplicateTrackContent(track) {
         if (!track)
             return;
+        Array.from(track.querySelectorAll('[data-carousel-clone]')).forEach((clone) => clone.remove());
         const originals = Array.from(track.children).filter((child) => !child.hasAttribute('data-carousel-clone'));
-        originals.forEach((el) => {
-            const clone = el.cloneNode(true);
-            clone.setAttribute('data-carousel-clone', '');
-            clone.setAttribute('aria-hidden', 'true');
-            track.appendChild(clone);
-        });
+        if (!originals.length)
+            return;
+        const rowWidth = track.parentElement?.getBoundingClientRect().width ||
+            this.el.getBoundingClientRect().width ||
+            0;
+        const targetWidth = rowWidth > 0 ? rowWidth * 2 : track.scrollWidth * 2;
+        let setCount = 1;
+        const appendSet = () => {
+            originals.forEach((el) => {
+                const clone = el.cloneNode(true);
+                clone.setAttribute('data-carousel-clone', '');
+                clone.setAttribute('aria-hidden', 'true');
+                track.appendChild(clone);
+            });
+            setCount += 1;
+        };
+        while ((track.scrollWidth < targetWidth || setCount % 2 !== 0) && setCount < 8) {
+            appendSet();
+        }
     }
     render() {
         const rows = Number(this.rows);
         // Direction classes are left on in static mode too — the `.mode-static`
         // CSS rule overrides `animation` to `none`, so the direction is a no-op
         // visually but keeps the markup shape consistent across modes.
-        return (index.h(index.Host, { key: 'de2ab8e013b602bae7f3a7ec86f46008271017df', class: `theme-${this.theme} mode-${this.mode}` }, index.h("div", { key: '2a7f391b7f2821cc2b1fd22c4fecee8db49993eb', class: `client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}` }, index.h("div", { key: 'a050be7df00baa8f606edaaffaf80bf66d2745a5', class: "carousel-container" }, index.h("div", { key: '652ebd5057f104456d327ea0741676d4c5f365c1', class: "carousel-row scroll-left" }, index.h("div", { key: '115c61cf864eafef5de415cf47d5e7ad78326f49', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, index.h("slot", { key: '16d1001521b3950fbf24868df8f2f3141571ab9d', name: "row-1" }, index.h("slot", { key: 'b939997a0c782911cc46b68d6a2ea14cb3a85018' })))), rows === 2 && (index.h("div", { key: '3490957a149d49dbbf37571efb27663c64bd39ea', class: "carousel-row scroll-right" }, index.h("div", { key: '46944607b424071fc97864601f4392a649f1a890', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, index.h("slot", { key: 'ec1be2a0b81dccfeda6a29650242808fcc67b214', name: "row-2" }))))))));
+        return (index.h(index.Host, { key: '7534e7d63dc4c24bb168028203bcf6f82c04d171', class: `theme-${this.theme} mode-${this.mode}` }, index.h("div", { key: '70b14e516c6a3256ca7826b763da7c98e5ae562f', class: `client-carousel theme-${this.theme} rows-${rows} mode-${this.mode}` }, index.h("div", { key: '55cbf4feab63b26e982f4c3911890eefff879f1c', class: "carousel-container" }, index.h("div", { key: '5a444fb1c225c4d716c3c8f7b0d7ae7a757c0f7d', class: "carousel-row scroll-left" }, index.h("div", { key: '0c226b896f7faf85f5a510e6fb4ca3ee92b01687', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, index.h("slot", { key: '4aaf8f3ca06b90008885106baa2df40730278d11', name: "row-1" }, index.h("slot", { key: 'e56d75ff50f42dd23653b12af888b5fcef9bf197' })))), rows === 2 && (index.h("div", { key: '810fca22375f5144095b2a058a36dc9561c5984b', class: "carousel-row scroll-right" }, index.h("div", { key: '4838eb88311f7df4b8b9eb0a529913b288af8811', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, index.h("slot", { key: 'e1c9b1d2a49df2f0c0a2466b56c40476387b59d4', name: "row-2" }))))))));
     }
     get el() { return index.getElement(this); }
 };
-AfClientCarousel.style = afClientCarouselCss;
+AfClientCarousel.style = afClientCarouselCss();
 
 exports.af_client_carousel = AfClientCarousel;
-//# sourceMappingURL=af-client-carousel.entry.cjs.js.map

package/dist/cjs/af-color-swatch.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afColorSwatchCss = ":host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}";
+const afColorSwatchCss = () => `:host{display:block}.swatch{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;border:1px solid #ece6f5;background:white}.color-preview{width:100%;height:120px;flex-shrink:0}.size-large .color-preview{height:140px}.color-info{padding:16px;display:flex;flex-direction:column;gap:4px}.color-name{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;color:#14343B}.color-value{font-family:'Helvetica', 'Inter', monospace, system-ui, sans-serif;font-size:14px;color:#708380}`;
 
 const AfColorSwatch = class {
     constructor(hostRef) {
@@ -17,7 +17,6 @@ const AfColorSwatch = class {
             }, part: "base" }, index.h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), index.h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, index.h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), index.h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
     }
 };
-AfColorSwatch.style = afColorSwatchCss;
+AfColorSwatch.style = afColorSwatchCss();
 
 exports.af_color_swatch = AfColorSwatch;
-//# sourceMappingURL=af-color-swatch.entry.cjs.js.map