@affinda/wc 0.6.2 → 0.7.0

package/dist/components/p-CeWN48Eq.js

@@ -1,92 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.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 AfButton = /*@__PURE__*/ proxyCustomElement(class AfButton extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The visual variant of the button.
-         * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)
-         * - `secondary` - Supporting action with outlined style
-         * - `ghost` - Link-style with themed underline on the label; commonly paired
-         *   with a right-pointing icon. Matches Webflow's "button ghost" variant.
-         */
-        this.variant = 'primary';
-        /**
-         * The size of the button.
-         * - `default` - Standard size for primary CTAs (12/24px padding)
-         * - `thin` - Compact inline/secondary size (8/16px padding)
-         */
-        this.size = 'default';
-        /**
-         * Whether the button is disabled
-         */
-        this.disabled = false;
-        /**
-         * Button type (when not using href)
-         */
-        this.type = 'button';
-        this.hasIconLeft = false;
-        this.hasIconRight = false;
-        this.handleSlotChange = (slotName) => (event) => {
-            const slot = event.target;
-            const hasContent = slot.assignedNodes().length > 0;
-            if (slotName === 'icon-left') {
-                this.hasIconLeft = hasContent;
-            }
-            else {
-                this.hasIconRight = hasContent;
-            }
-        };
-    }
-    render() {
-        const classes = {
-            'button': true,
-            [`variant-${this.variant}`]: true,
-            [`size-${this.size}`]: true,
-            'disabled': this.disabled
-        };
-        const content = [
-            h("span", { class: { 'icon-left': true, 'has-content': this.hasIconLeft } }, h("slot", { name: "icon-left", onSlotchange: this.handleSlotChange('icon-left') })),
-            h("span", { class: "label" }, h("slot", null)),
-            h("span", { class: { 'icon-right': true, 'has-content': this.hasIconRight } }, h("slot", { name: "icon-right", onSlotchange: this.handleSlotChange('icon-right') }))
-        ];
-        // Render as anchor if href is provided (and not disabled)
-        if (this.href && !this.disabled) {
-            return (h(Host, null, h("a", { href: this.href, class: classes }, content)));
-        }
-        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes }, content)));
-    }
-    static get style() { return afButtonCss; }
-}, [257, "af-button", {
-        "variant": [513],
-        "size": [1],
-        "disabled": [4],
-        "type": [1],
-        "href": [1],
-        "hasIconLeft": [32],
-        "hasIconRight": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfButton);
-            }
-            break;
-    } });
-}
-
-export { AfButton as A, defineCustomElement as d };
-//# sourceMappingURL=p-CeWN48Eq.js.map
-
-//# sourceMappingURL=p-CeWN48Eq.js.map

package/dist/components/p-CeWN48Eq.js.map

@@ -1 +0,0 @@
-{"file":"p-CeWN48Eq.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0kMAA0kM;;MCgBjlM,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;;AAMG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAsC,SAAS;AAE/E;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAO7C,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;QAE9B,IAAgB,CAAA,gBAAA,GAAG,CAAC,QAAoC,KAAK,CAAC,KAAY,KAAI;AACpF,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB;YAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,YAAA,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC5B,gBAAA,IAAI,CAAC,WAAW,GAAG,UAAU;;iBACxB;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,UAAU;;AAElC,SAAC;AAyCF;IAvCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EACjE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;AACP,YAAA,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACR;AACP,YAAA,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS;SAErF;;QAGD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAC/B,EAAA,OAAO,CACN,CACC;;AAIX,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAA,EAC7D,OAAO,CACD,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button/af-button.css?tag=af-button&encapsulation=shadow","src/components/af-button/af-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Set color on host for slotted content (icons) inheritance */\n:host([variant=\"primary\"]) {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"secondary\"]) {\n  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"ghost\"]) {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n/* Full-width mode - when host is display: block */\n:host([full-width]),\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n:host([full-width]) .button,\n:host(.full-width) .button {\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  border-radius: 9999px;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  /* Motion — tokens fall back to the prior 0.2s ease so nothing drifts. */\n  transition:\n    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));\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  white-space: nowrap;\n  /* Allow width to be controlled from outside via CSS custom property */\n  width: var(--af-button-width, auto);\n  will-change: transform;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button {\n    transition-duration: 0.01ms;\n  }\n}\n\n/* Size variants */\n.size-default {\n  padding: 12px 24px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.size-thin {\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n/* Icon slots - only show when they have slotted content */\n.icon-left,\n.icon-right {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-left.has-content,\n.icon-right.has-content {\n  display: flex;\n}\n\n.size-default .icon-left,\n.size-default .icon-right {\n  width: 24px;\n  height: 24px;\n}\n\n.size-thin .icon-left,\n.size-thin .icon-right {\n  width: 20px;\n  height: 20px;\n}\n\n/* Add spacing between icon and label only when icon is present */\n.size-default .icon-left.has-content {\n  margin-right: 12px;\n}\n\n.size-default .icon-right.has-content {\n  margin-left: 12px;\n}\n\n.size-thin .icon-left.has-content {\n  margin-right: 8px;\n}\n\n.size-thin .icon-right.has-content {\n  margin-left: 8px;\n}\n\n/* Label styling */\n.label {\n  flex: 0 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.size-default .label {\n  height: 24px;\n}\n\n.size-thin .label {\n  height: 20px;\n}\n\n/* ==========================================================================\n   Primary Button\n   Filled background with ice color, inkwell text\n   ========================================================================== */\n\n.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary .icon-left,\n.variant-primary .icon-right {\n  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  border-color: var(--af-button-primary-stroke, #14343B);\n}\n\n.variant-primary:focus:not(.disabled),\n.variant-primary:focus-visible:not(.disabled) {\n  background: var(--af-button-primary-bg, #A6FFFB);\n  border-color: var(--af-button-primary-stroke, #14343B);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);\n  outline: none;\n}\n\n.variant-primary:active:not(.disabled) {\n  background: var(--af-button-primary-bg-hover, #95E6E2);\n  transform: translateY(1px);\n}\n\n/* ==========================================================================\n   Secondary Button\n   Transparent background with visible border\n   ========================================================================== */\n\n.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary .icon-left,\n.variant-secondary .icon-right {\n  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  border-color: var(--af-button-secondary-stroke, currentColor);\n}\n\n.variant-secondary:focus:not(.disabled),\n.variant-secondary:focus-visible:not(.disabled) {\n  background: var(--af-background-base, #FFF);\n  border-color: var(--af-button-secondary-stroke, currentColor);\n  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);\n  outline: none;\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n  transform: translateY(1px);\n}\n\n/* ==========================================================================\n   Tertiary Button\n   Text-only link style with underline, no border or background\n   ========================================================================== */\n\n.variant-ghost {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.variant-ghost .label {\n  border-bottom: 2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost .icon-left,\n.variant-ghost .icon-right {\n  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b));\n}\n\n.variant-ghost:hover:not(.disabled) {\n  opacity: 0.8;\n}\n\n.variant-ghost:focus:not(.disabled),\n.variant-ghost:focus-visible:not(.disabled) {\n  outline: none;\n}\n\n.variant-ghost:focus-visible:not(.disabled) .label {\n  box-shadow: 0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));\n}\n\n.variant-ghost:active:not(.disabled) {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Disabled states\n   ========================================================================== */\n\n.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.variant-primary.disabled {\n  border: 1px solid var(--af-button-primary-stroke, #14343B);\n  background: var(--af-button-primary-bg, #A6FFFB);\n  opacity: 0.6;\n}\n\n.variant-secondary.disabled {\n  border: 1px solid var(--af-button-secondary-stroke, currentColor);\n  opacity: 0.6;\n}\n\n.variant-ghost.disabled {\n  opacity: 0.6;\n}\n\n/* ==========================================================================\n   Reset button element styles\n   ========================================================================== */\n\nbutton.button {\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\nbutton.button.variant-ghost {\n  background: transparent;\n  border: none;\n}\n\n/* ==========================================================================\n   Reset anchor element styles (when using href prop)\n   ========================================================================== */\n\na.button {\n  text-decoration: none;\n  color: inherit;\n}\n\na.button.variant-primary {\n  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));\n  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-secondary {\n  background: var(--af-button-secondary-bg, transparent);\n  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\na.button.variant-ghost {\n  background: transparent;\n  border: none;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `ghost` - Link-style with themed underline on the label; commonly paired\n   *   with a right-pointing icon. Matches Webflow's \"button ghost\" variant.\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs (12/24px padding)\n   * - `thin` - Compact inline/secondary size (8/16px padding)\n   */\n  @Prop() size: 'default' | 'thin' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CixFE5Cu.js

@@ -1,140 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-Btpdr0Bi.js';
-
-const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.textarea-container{display:flex;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.textarea-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.textarea-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.textarea-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.textarea:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
-
-const AfTextarea = /*@__PURE__*/ proxyCustomElement(class AfTextarea extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.afInput = createEvent(this, "afInput");
-        this.afBlur = createEvent(this, "afBlur");
-        this.afFocus = createEvent(this, "afFocus");
-        this.afInfoClick = createEvent(this, "afInfoClick");
-        /**
-         * The current value of the textarea
-         */
-        this.value = '';
-        /**
-         * Whether the textarea is disabled
-         */
-        this.disabled = false;
-        /**
-         * Whether the textarea is required
-         */
-        this.required = false;
-        /**
-         * Whether the textarea is read-only
-         */
-        this.readonly = false;
-        /**
-         * Whether to show the info icon next to the label
-         */
-        this.showInfoIcon = false;
-        /**
-         * Number of visible rows (height)
-         */
-        this.rows = 4;
-        /**
-         * Whether the textarea is resizable
-         */
-        this.resize = 'vertical';
-        this.isFocused = false;
-        this.isHovered = false;
-        this.handleInput = (event) => {
-            const target = event.target;
-            this.value = target.value;
-            this.afInput.emit({ value: this.value });
-        };
-        this.handleFocus = () => {
-            this.isFocused = true;
-            this.afFocus.emit();
-        };
-        this.handleBlur = () => {
-            this.isFocused = false;
-            this.afBlur.emit();
-        };
-        this.handleMouseEnter = () => {
-            this.isHovered = true;
-        };
-        this.handleMouseLeave = () => {
-            this.isHovered = false;
-        };
-        this.handleInfoClick = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.afInfoClick.emit();
-        };
-    }
-    componentWillLoad() {
-        if (typeof console !== 'undefined' && !AfTextarea.deprecationWarned) {
-            AfTextarea.deprecationWarned = true;
-            // eslint-disable-next-line no-console
-            console.warn('[@affinda/wc] <af-textarea> is deprecated and will be removed in a ' +
-                'future major release. Use <af-input multiline> instead — same props ' +
-                '(label, description, placeholder, value, name, disabled, required, ' +
-                'readonly, error, showInfoIcon, rows, resize, maxlength, minlength) ' +
-                'and same rendered chrome. See @affinda/wc CHANGELOG for migration.');
-        }
-    }
-    render() {
-        const hasError = !!this.error;
-        const hasValue = !!(this.value && this.value.length > 0);
-        const wrapperClasses = {
-            'textarea-wrapper': true,
-            'disabled': this.disabled,
-            'error': hasError,
-            'focused': this.isFocused,
-            'hovered': this.isHovered && !this.disabled && !this.isFocused,
-            'populated': hasValue
-        };
-        const textareaContainerClasses = {
-            'textarea-container': true,
-            'disabled': this.disabled,
-            'error': hasError,
-            'focused': this.isFocused,
-            'hovered': this.isHovered && !this.disabled && !this.isFocused
-        };
-        return (h(Host, { key: '362cc1d8d9a12a1622a3a4368c1690af22242290' }, h("div", { key: '2b5193878afd041a2404e05628c8a2a27f070dd4', class: wrapperClasses }, this.label && (h("div", { key: 'a4786205092ce86aa5d2b13b2eefc068776bc73c', class: "label-row" }, h("label", { key: '9f674738598a0d8cd6ff3ca12d2eef1b82c683ab', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: 'e65cfaf5de0806fdaee3fd69fa142dbe80092377', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'b9c83365313296a885eced01f5e32d3880d0e6b6', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: 'f27bd125dad6258d48b27dce04ee3c91a9e765dd', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9bfaed8ee3d846caad4cf6841e3a9deb4a050686', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '0c733ab918ce62dac76ff223eb7a361e11b444f1', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9d2fd2885490c9563c48bdc40b988e6b6ed6d899', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'a488fc5ce906aa2c6d36e3d1c5c6dc20955dfa7e', name: "label-end" }))), this.description && (h("p", { key: '2b27b3f5362d87d9eef7a2261d324b7db03dbd7c', class: "description" }, this.description)), h("div", { key: 'f900a4a8d7231bc43c41a77c331e6c90f8772c67', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: 'f48df2967a6d72daa2b93c635882c72021af33e7', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '8793024cd9c7dec0a19a1acd789ecd8ed57f7168', class: "error-row", id: "error-message" }, h("span", { key: 'dc457887b83f8c9fea7daca0bf5a0690474c4f49', class: "error-icon" }, h("svg", { key: 'd8c6d985c7c219419072943adab3819217fb1ae4', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '75265f2e70dd27201b09033b4b5100df51d876f5', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'b4225c6f1ae0e3246ad143fe6f2157daa615fcb6', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '48735f9ef113826e43488e0491d34a3b549924e5', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '6a0a7e436977e6ecc37dd64db30aad7eb189e166', class: "error-text" }, this.error))))));
-    }
-    static get style() { return afTextareaCss; }
-}, [257, "af-textarea", {
-        "label": [1],
-        "description": [1],
-        "placeholder": [1],
-        "value": [1025],
-        "name": [1],
-        "disabled": [516],
-        "required": [4],
-        "readonly": [4],
-        "error": [1],
-        "showInfoIcon": [4, "show-info-icon"],
-        "rows": [2],
-        "maxlength": [2],
-        "minlength": [2],
-        "resize": [1],
-        "isFocused": [32],
-        "isHovered": [32]
-    }]);
-/** @internal */
-AfTextarea.deprecationWarned = false;
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-textarea"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-textarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfTextarea);
-            }
-            break;
-    } });
-}
-
-export { AfTextarea as A, defineCustomElement as d };
-//# sourceMappingURL=p-CixFE5Cu.js.map
-
-//# sourceMappingURL=p-CixFE5Cu.js.map

package/dist/components/p-CixFE5Cu.js.map

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

package/dist/components/p-CkaL7yIW.js

@@ -1,157 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Btpdr0Bi.js';
-
-const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup,.breakpoint-desktop.heading-card.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup,.breakpoint-mobile.heading-card.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-right{align-items:flex-end}.text-justify{align-items:stretch}.align-left{text-align:left;--af-text-align:left}.align-center{text-align:center;--af-text-align:center}.align-right{text-align:right;--af-text-align:right}.align-justify{text-align:justify;--af-text-align:justify}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy,.breakpoint-desktop.heading-card .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy,.breakpoint-mobile.heading-card .copy{gap:var(--space-2, 8px)}.heading{display:flex;flex-direction:column;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:normal}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-3, 38px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-4, 30px)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-5, 24px)}.breakpoint-desktop.heading-card .heading{font-size:var(--font-size-heading-card-desktop, 22px);line-height:var(--line-height-heading-card, 28px)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-card .heading{font-size:var(--font-size-heading-card-mobile, 20px);line-height:var(--line-height-heading-card, 28px)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:normal}.heading.heading-color-primary{color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B))}.heading.heading-color-secondary{color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670))}.description.description-color-default{color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F))}.description.description-color-secondary{color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670))}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description,.breakpoint-desktop.heading-card .description,.breakpoint-mobile.heading-card .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;flex-direction:row;gap:var(--space-3, 12px)}.buttons:empty{display:none}.layout-horizontal .buttons{align-items:center}.text-left.layout-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.layout-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.layout-horizontal.heading-3 .copy,.text-left.layout-horizontal.heading-4 .copy{max-width:840px}.text-left.layout-horizontal .buttons{flex-shrink:0}.layout-vertical .buttons{align-items:flex-start}.buttons.align-left{justify-content:flex-start}.buttons.align-center{justify-content:center}.buttons.align-right{justify-content:flex-end}.buttons.align-justify{justify-content:space-between}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile .buttons.align-center{align-items:center}.breakpoint-mobile .buttons.align-right{align-items:flex-end}.breakpoint-mobile .buttons.align-left{align-items:flex-start}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
-
-const AfTypographyLockup = /*@__PURE__*/ proxyCustomElement(class AfTypographyLockup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The heading size (1-5, or "card"; 1 is largest). Controls visual scale
-         * only — pair with a matching <h1>-<h5> slotted element for correct
-         * document outline (see component docblock). The `card` variant sits
-         * between 4 and 5 at 22/20px and is meant for card titles.
-         */
-        this.headingSize = 2;
-        /**
-         * The breakpoint for responsive typography
-         */
-        this.breakpoint = 'desktop';
-        /**
-         * Text alignment for the entire lockup (heading and description).
-         * Can be overridden individually with headingAlignment and descriptionAlignment.
-         */
-        this.textAlignment = 'left';
-        /**
-         * Button layout direction (horizontal or vertical stacking)
-         */
-        this.buttonLayout = 'vertical';
-        /**
-         * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs
-         * `h1.secondary`, where "secondary" renders in the theme's accent/heading-
-         * secondary colour (soft-clay on most themes).
-         * - `primary` (default) - uses `--af-typography-heading-primary`
-         * - `secondary` - uses `--af-typography-heading-secondary`
-         */
-        this.headingColor = 'primary';
-        /**
-         * Description colour variant. Same pattern as `headingColor`; useful for
-         * hero-style lockups where the description is rendered in the accent colour.
-         * - `default` (default) - uses `--af-typography-body-default`
-         * - `secondary` - uses `--af-typography-heading-secondary`
-         */
-        this.descriptionColor = 'default';
-        /**
-         * Whether the consumer passed anything into the description / buttons
-         * slots. The CSS `:empty` selector can't help here — the `<slot>`
-         * element itself counts as a child, so the wrapper divs would always
-         * render as empty-but-visible lines of gap. Tracked on mount and on
-         * any `slotchange` so wrappers collapse cleanly when there's nothing
-         * to show.
-         */
-        this.hasDescription = false;
-        this.hasButtons = false;
-        this.syncSlotState = () => {
-            this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
-            this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
-        };
-    }
-    componentDidLoad() {
-        this.syncSlotState();
-        this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);
-        this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);
-        // Dev-time check that the slotted semantic tag (h1-h6) is within one
-        // level of the visual headingSize. Pairs with the class-level docblock;
-        // silent in production unless the author explicitly turned on dev mode
-        // via `window.__AF_STRICT_HEADINGS__`.
-        if (typeof window === 'undefined')
-            return;
-        const strict = window
-            .__AF_STRICT_HEADINGS__;
-        if (!strict)
-            return;
-        const heading = Array.from(this.el.children).find((child) => !child.hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName));
-        if (!heading)
-            return;
-        const slottedLevel = Number(heading.tagName.slice(1));
-        const expected = this.headingSize;
-        // The `card` variant is a named scale (card-title), not a semantic level.
-        // Skip the numeric-proximity check entirely — convention is <h3>, but
-        // consumers may legitimately pair it with <h2>-<h4> depending on context.
-        if (expected === 'card')
-            return;
-        if (Math.abs(slottedLevel - expected) > 1) {
-            // eslint-disable-next-line no-console
-            console.warn(`[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +
-                `expected an <h${expected}> for document outline. Pass deliberately or align the two.`);
-        }
-    }
-    disconnectedCallback() {
-        this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);
-        this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);
-    }
-    render() {
-        const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;
-        const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;
-        const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;
-        const containerClasses = {
-            'lockup': true,
-            [`text-${this.textAlignment}`]: true,
-            [`layout-${this.buttonLayout}`]: true,
-            [`heading-${this.headingSize}`]: true,
-            [`breakpoint-${this.breakpoint}`]: true
-        };
-        const headingClasses = {
-            'heading': true,
-            [`align-${effectiveHeadingAlignment}`]: true,
-            [`heading-color-${this.headingColor}`]: true
-        };
-        const descriptionClasses = {
-            'description': true,
-            [`align-${effectiveDescriptionAlignment}`]: true,
-            [`description-color-${this.descriptionColor}`]: true
-        };
-        const buttonsClasses = {
-            'buttons': true,
-            [`align-${effectiveButtonsAlignment}`]: true
-        };
-        const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '0cd130764dedfa1bdc81c96efb6dc07881d4a73b' }, h("div", { key: '3a1c3813247f5729901fed6317761ee8e8bd3bce', class: containerClasses }, h("div", { key: '7e39a31d19f1e2ce5ba5bad248b9461bf9089931', class: "copy", style: copyStyle }, h("div", { key: 'db3c4253ab71421ceef7f8e0ad3c68503567a2ce', class: headingClasses, part: "heading" }, h("slot", { key: 'ee621dde4c0cb166b786b2aa30306276bcdf0866' })), h("div", { key: '2c336c4deac96cf97a9d1ef1d9d3f9b32cb4847a', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: '045895fd56acc215c75a1e4ee87f7755017d4bff', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: '03d873fd3502af1b1b9ad83f11a54b2c4c55fb9a', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: '638bad74073f1243804fd8bba5624c6f811f24c6', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
-    }
-    get el() { return this; }
-    static get style() { return afTypographyLockupCss; }
-}, [257, "af-typography-lockup", {
-        "headingSize": [8, "heading-size"],
-        "breakpoint": [1],
-        "textAlignment": [1, "text-alignment"],
-        "headingAlignment": [1, "heading-alignment"],
-        "descriptionAlignment": [1, "description-alignment"],
-        "buttonLayout": [1, "button-layout"],
-        "buttonsAlignment": [1, "buttons-alignment"],
-        "maxWidth": [2, "max-width"],
-        "headingColor": [1, "heading-color"],
-        "descriptionColor": [1, "description-color"],
-        "hasDescription": [32],
-        "hasButtons": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-typography-lockup"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-typography-lockup":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfTypographyLockup);
-            }
-            break;
-    } });
-}
-
-export { AfTypographyLockup as A, defineCustomElement as d };
-//# sourceMappingURL=p-CkaL7yIW.js.map
-
-//# sourceMappingURL=p-CkaL7yIW.js.map

package/dist/components/p-CkaL7yIW.js.map

@@ -1 +0,0 @@
-{"file":"p-CkaL7yIW.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.lockup {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1.lockup {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1.lockup {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop, card desktop: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup,\n.breakpoint-desktop.heading-card.lockup {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile, card mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup,\n.breakpoint-mobile.heading-card.lockup {\n  gap: var(--space-2, 8px);\n}\n\n/* Container alignment (affects flexbox positioning) */\n.text-left {\n  align-items: flex-start;\n}\n\n.text-center {\n  align-items: center;\n}\n\n.text-right {\n  align-items: flex-end;\n}\n\n.text-justify {\n  align-items: stretch;\n}\n\n/* Individual text alignment classes */\n.align-left {\n  text-align: left;\n  --af-text-align: left;\n}\n\n.align-center {\n  text-align: center;\n  --af-text-align: center;\n}\n\n.align-right {\n  text-align: right;\n  --af-text-align: right;\n}\n\n.align-justify {\n  text-align: justify;\n  --af-text-align: justify;\n}\n\n/* Copy section - base styles */\n.copy {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 840px;\n}\n\n/* Copy gap variations based on heading size and breakpoint */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1 .copy {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1 .copy {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop, card desktop: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy,\n.breakpoint-desktop.heading-card .copy {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile, card mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy,\n.breakpoint-mobile.heading-card .copy {\n  gap: var(--space-2, 8px);\n}\n\n/* Heading styles - font-weight 400 (regular) matches Webflow's NeuSans usage.\n * display: flex collapses any whitespace-only text nodes that Astro (and\n * other templating engines) leave between the slotted heading and the\n * following named-slot siblings — those stray text nodes get projected into\n * the default slot and, without flex layout, each one occupies a full line\n * of the heading's line-height (user-visible \"extra line break\" after the\n * heading). */\n.heading {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n  line-height: var(--line-height-heading-tight, 1);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  white-space: normal;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n  font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n  font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n/* Explicit px line-heights (38/30/24) for heading 3/4/5 replace the\n * previous ratio-based values (1.1/1.2) — renders identically within a\n * pixel but exposes a predictable token consumers can reference directly. */\n.breakpoint-desktop.heading-3 .heading {\n  font-size: var(--font-size-heading-3-desktop, 34px);\n  line-height: var(--line-height-heading-3, 38px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n  font-size: var(--font-size-heading-4-desktop, 24px);\n  line-height: var(--line-height-heading-4, 30px);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-5, 24px);\n}\n\n/* Card-title scale (22/20px): retires the bespoke heading sizes on\n * diff-card h3, NumberedStepper title, and expert-insights related-card h3\n * on the website. Sits between heading-4 (24px) and heading-5 (20px) at\n * desktop, and between heading-4 and heading-5 (both 20px→18px) at mobile. */\n.breakpoint-desktop.heading-card .heading {\n  font-size: var(--font-size-heading-card-desktop, 22px);\n  line-height: var(--line-height-heading-card, 28px);\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-card .heading {\n  font-size: var(--font-size-heading-card-mobile, 20px);\n  line-height: var(--line-height-heading-card, 28px);\n}\n\n/* Description/body text - default (body/large) */\n.description {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: var(--font-size-body-large, 18px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: var(--line-height-body-large, 26px);\n  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n  white-space: normal;\n}\n\n/* Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern */\n.heading.heading-color-primary {\n  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n}\n\n.heading.heading-color-secondary {\n  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/* Description colour variants */\n.description.description-color-default {\n  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n}\n\n.description.description-color-secondary {\n  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/* Description text size variations - smaller for heading 3 mobile, 4, 5, and card */\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description,\n.breakpoint-desktop.heading-card .description,\n.breakpoint-mobile.heading-card .description {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n  display: none;\n}\n\n/* Buttons section */\n.buttons {\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n  display: none;\n}\n\n/* Button layout - horizontal (inline with copy) */\n.layout-horizontal .buttons {\n  align-items: center;\n}\n\n.text-left.layout-horizontal {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n  flex: 1 0 0;\n  max-width: 950px;\n}\n\n/* Heading 3, 4 horizontal: different max-width */\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n  max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n  flex-shrink: 0;\n}\n\n/* Button layout - vertical (stacked below copy) */\n.layout-vertical .buttons {\n  align-items: flex-start;\n}\n\n/* Button position alignment */\n.buttons.align-left {\n  justify-content: flex-start;\n}\n\n.buttons.align-center {\n  justify-content: center;\n}\n\n.buttons.align-right {\n  justify-content: flex-end;\n}\n\n.buttons.align-justify {\n  justify-content: space-between;\n}\n\n/* Mobile button stacking - buttons stack vertically on mobile */\n.breakpoint-mobile .buttons {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n  align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n  align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n  align-items: flex-start;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n  max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  margin: 0;\n}\n","import { Component, Element, h, Prop, State, Host } from '@stencil/core';\nimport type { HeadingSize } from '../../types';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n/**\n * Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n *\n * **Semantic vs visual:** `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n *\n *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)\n *   headingSize=2 ↔ <h2>\n *   headingSize=3 ↔ <h3>\n *   headingSize=4 ↔ <h4>\n *   headingSize=5 ↔ <h5>\n *   headingSize=\"card\" ↔ <h3> (card-title scale: 22/20px)\n *\n * When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n *\n * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)\n * and targets card titles in dense grids (diff-card h3, NumberedStepper\n * title, expert-insights related-card h3 on the marketing site). It sits\n * between `4` and `5` in the type ladder.\n */\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The heading size (1-5, or \"card\"; 1 is largest). Controls visual scale\n   * only — pair with a matching <h1>-<h5> slotted element for correct\n   * document outline (see component docblock). The `card` variant sits\n   * between 4 and 5 at 22/20px and is meant for card titles.\n   */\n  @Prop() headingSize: HeadingSize = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment for the entire lockup (heading and description).\n   * Can be overridden individually with headingAlignment and descriptionAlignment.\n   */\n  @Prop() textAlignment: TextAlign = 'left';\n\n  /**\n   * Heading text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() headingAlignment?: TextAlign;\n\n  /**\n   * Description text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() descriptionAlignment?: TextAlign;\n\n  /**\n   * Button layout direction (horizontal or vertical stacking)\n   */\n  @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Buttons position alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() buttonsAlignment?: TextAlign;\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  /**\n   * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n   * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n   * secondary colour (soft-clay on most themes).\n   * - `primary` (default) - uses `--af-typography-heading-primary`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() headingColor: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Description colour variant. Same pattern as `headingColor`; useful for\n   * hero-style lockups where the description is rendered in the accent colour.\n   * - `default` (default) - uses `--af-typography-body-default`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() descriptionColor: 'default' | 'secondary' = 'default';\n\n  /**\n   * Whether the consumer passed anything into the description / buttons\n   * slots. The CSS `:empty` selector can't help here — the `<slot>`\n   * element itself counts as a child, so the wrapper divs would always\n   * render as empty-but-visible lines of gap. Tracked on mount and on\n   * any `slotchange` so wrappers collapse cleanly when there's nothing\n   * to show.\n   */\n  @State() hasDescription: boolean = false;\n  @State() hasButtons: boolean = false;\n\n  private descriptionSlot?: HTMLSlotElement;\n  private buttonsSlot?: HTMLSlotElement;\n\n  componentDidLoad() {\n    this.syncSlotState();\n    this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n    this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n    // Dev-time check that the slotted semantic tag (h1-h6) is within one\n    // level of the visual headingSize. Pairs with the class-level docblock;\n    // silent in production unless the author explicitly turned on dev mode\n    // via `window.__AF_STRICT_HEADINGS__`.\n    if (typeof window === 'undefined') return;\n    const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n      .__AF_STRICT_HEADINGS__;\n    if (!strict) return;\n    const heading = Array.from(this.el.children).find(\n      (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n    );\n    if (!heading) return;\n    const slottedLevel = Number(heading.tagName.slice(1));\n    const expected = this.headingSize;\n    // The `card` variant is a named scale (card-title), not a semantic level.\n    // Skip the numeric-proximity check entirely — convention is <h3>, but\n    // consumers may legitimately pair it with <h2>-<h4> depending on context.\n    if (expected === 'card') return;\n    if (Math.abs(slottedLevel - expected) > 1) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n          `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n    this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n  }\n\n  private syncSlotState = () => {\n    this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n    this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n  };\n\n  render() {\n    const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n    const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n    const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`layout-${this.buttonLayout}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const headingClasses = {\n      'heading': true,\n      [`align-${effectiveHeadingAlignment}`]: true,\n      [`heading-color-${this.headingColor}`]: true\n    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: true,\n      [`description-color-${this.descriptionColor}`]: true\n    };\n\n    const buttonsClasses = {\n      'buttons': true,\n      [`align-${effectiveButtonsAlignment}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"copy\" style={copyStyle}>\n            <div class={headingClasses} part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n              <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n            <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-D5-m35gX.js

@@ -1,44 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-Btpdr0Bi.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 AfColorSwatch = /*@__PURE__*/ proxyCustomElement(class AfColorSwatch extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Size variant */
-        this.size = 'default';
-    }
-    render() {
-        return (h("div", { key: '57a141b5af5c538c5cf842a61173dd391a91d59b', class: {
-                'swatch': true,
-                [`size-${this.size}`]: true
-            }, part: "base" }, h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
-    }
-    static get style() { return afColorSwatchCss; }
-}, [257, "af-color-swatch", {
-        "color": [1],
-        "name": [1],
-        "size": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-color-swatch"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-color-swatch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfColorSwatch);
-            }
-            break;
-    } });
-}
-
-export { AfColorSwatch as A, defineCustomElement as d };
-//# sourceMappingURL=p-D5-m35gX.js.map
-
-//# sourceMappingURL=p-D5-m35gX.js.map

package/dist/components/p-D5-m35gX.js.map

@@ -1 +0,0 @@
-{"file":"p-D5-m35gX.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,0gBAA0gB;;MCOthB,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaU,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;AAoB9C;IAlBC,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACV,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;aACxB,EAAE,IAAI,EAAC,MAAM,EAAA,EACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,EACjC,CAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,EACrD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAE,EAAA,IAAI,CAAC,KAAK,CAAO,CACpD,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-color-swatch/af-color-swatch.css?tag=af-color-swatch&encapsulation=shadow","src/components/af-color-swatch/af-color-swatch.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.swatch {\n  display: flex;\n  flex-direction: column;\n  border-radius: 8px;\n  overflow: hidden;\n  border: 1px solid #ece6f5;\n  background: white;\n}\n\n.color-preview {\n  width: 100%;\n  height: 120px;\n  flex-shrink: 0;\n}\n\n.size-large .color-preview {\n  height: 140px;\n}\n\n.color-info {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.color-name {\n  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 500;\n  color: #14343B;\n}\n\n.color-value {\n  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;\n  font-size: 14px;\n  color: #708380;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}