@affinda/wc 0.0.26 → 0.0.27

package/dist/components/index.d.ts

@@ -31,5 +31,3 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export * from '../types';

package/dist/components/index.js

@@ -1 +1,27 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DsNqeD3z.js";export{A as AfHeading}from"./p-BvLGR36l.js";export{A as AfText}from"./p-DRm58pvc.js";export{A as AfColorSwatch}from"./p-BLzlyxBT.js";export{A as AfContainer}from"./p-C5_nFNYV.js";export{A as AfAspectRatio}from"./p-0KrQFK77.js";export{A as AfNavItem}from"./p-oawfHsaK.js";export{A as AfNavbar}from"./p-CYXTWxXF.js";export{A as AfLogo}from"./p-Dx31qPzk.js";export{A as AfButton}from"./p-BeVM-2kH.js";export{A as AfIconButton}from"./p-BzH2LxRQ.js";export{A as AfButtonGroup}from"./p--UJ_xE9Z.js";export{A as AfTypographyLockup}from"./p-CSpMqpfj.js";export{A as AfCheckbox}from"./p-BCCbAFc1.js";export{A as AfRadio}from"./p-BqUK0ZTO.js";export{A as AfSwitch}from"./p-HhMv1A3-.js";export{A as AfFieldset}from"./p-CDCZfKNt.js";export{A as AfInput}from"./p-CTFMTG3E.js";export{A as AfTextarea}from"./p-CVQiSujq.js";export{A as AfTag}from"./p-BUFbtjxU.js";export{A as AfTab}from"./p-DX19jO3u.js";export{A as AfTabBar}from"./p-C_BrhG1Q.js";export{A as AfFeatureCard}from"./p-Dvos4xtG.js";export{A as AfIllustratedCard}from"./p-vWuqpbX0.js";
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-BBpihWJI.js';
+export { A as AfHeading } from './p-Btsw1ple.js';
+export { A as AfText } from './p-BQ1El6-J.js';
+export { A as AfColorSwatch } from './p-DcLua_lK.js';
+export { A as AfContainer } from './p-BntvCg5H.js';
+export { A as AfAspectRatio } from './p-BjJS1_8G.js';
+export { A as AfNavItem } from './p-a9H_FzMp.js';
+export { A as AfNavbar } from './p-tiZXMu0t.js';
+export { A as AfLogo } from './p-0-_hX4o-.js';
+export { A as AfButton } from './p-CyTj19Yy.js';
+export { A as AfIconButton } from './p-CBrB-J4s.js';
+export { A as AfButtonGroup } from './p-D4YzNoal.js';
+export { A as AfTypographyLockup } from './p-287-nef9.js';
+export { A as AfCheckbox } from './p-DREa7k5l.js';
+export { A as AfRadio } from './p-DIIZN41O.js';
+export { A as AfSwitch } from './p-BgDSP0Qs.js';
+export { A as AfFieldset } from './p-BnX_qYj5.js';
+export { A as AfInput } from './p-DvXggVot.js';
+export { A as AfTextarea } from './p-D-Xf1-qQ.js';
+export { A as AfTag } from './p-CrftZP-C.js';
+export { A as AfTab } from './p-CkYQbs2f.js';
+export { A as AfTabBar } from './p-C8y3mc7N.js';
+export { A as AfFeatureCard } from './p-BJmoxr_I.js';
+export { A as AfIllustratedCard } from './p-noO3IF9V.js';
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/p-0-_hX4o-.js

@@ -0,0 +1,35 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+
+const afLogoCss = ":host{display:inline-block;color:var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b))}.logo-svg{display:block;width:auto;height:22px}";
+
+const AfLogo = /*@__PURE__*/ proxyCustomElement(class AfLogo extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '3828c961f43e8809c20cc404bac5507dec7677d6' }, h("svg", { key: 'ec8ca511aa4abbe4af8c27a38f3ee077dc2f3e4c', class: "logo-svg", viewBox: "0 0 9290 1432", "aria-label": "Affinda", role: "img" }, h("path", { key: 'ca0e7fa1511f645f1a7f17464695695e97579c95', fill: "currentColor", d: "M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z" }), h("path", { key: 'd599087578319b77085e12153cbc73f2735dc018', fill: "currentColor", d: "M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z" }), h("path", { key: '13867c603e95dd380f5b1dbda8d83b43e9698a7a', fill: "currentColor", d: "M5569.92,278.96h-269.66v1143.74h269.66V278.96Z" }), h("path", { key: '597a7d5d05d783de2a411c26bbe0a6ae2826e460', fill: "currentColor", d: "M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z" }), h("path", { key: '75e9b922503b5de37672583656228c77773d639f', fill: "currentColor", d: "M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z" }), h("path", { key: '553f70980ed227a436001625b2060986b23f83b6', fill: "currentColor", d: "M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z" }), h("path", { key: '10621f01848f0bee47d61ceb98c46cd0b76ed710', fill: "currentColor", d: "M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z" }), h("path", { key: 'ad7ae1ac53d954f6bc56af8819246f10d27b8074', fill: "currentColor", d: "M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z" }))));
+    }
+    static get style() { return afLogoCss; }
+}, [257, "af-logo"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-logo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfLogo);
+            }
+            break;
+    } });
+}
+
+export { AfLogo as A, defineCustomElement as d };
+//# sourceMappingURL=p-0-_hX4o-.js.map
+
+//# sourceMappingURL=p-0-_hX4o-.js.map

package/dist/components/p-0-_hX4o-.js.map

@@ -0,0 +1 @@
+{"file":"p-0-_hX4o-.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0JAA0J;;MCU/J,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;IACjB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,eAAe,EAAA,YAAA,EACZ,SAAS,EACpB,IAAI,EAAC,KAAK,EAAA,EAEV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6bAA6b,EAC/b,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4uBAA4uB,EAC9uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,gDAAgD,EAAE,CAAA,EAC9E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,udAAud,EACzd,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wuBAAwuB,EAC1uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0uBAA0uB,EAC5uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,EAAE,CAAA,EACpM,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,EAAE,CAAA,CAChM,CACD;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n}\n\n.logo-svg {\n  display: block;\n  /* Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) */\n  width: auto;\n  height: 22px;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <svg \n          class=\"logo-svg\" \n          viewBox=\"0 0 9290 1432\" \n          aria-label=\"Affinda\"\n          role=\"img\"\n        >\n          <path \n            fill=\"currentColor\" \n            d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n          <path \n            fill=\"currentColor\" \n            d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n          <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-287-nef9.js

@@ -0,0 +1,151 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.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{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.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{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .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)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.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)}.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{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, where 1 is largest). Controls visual scale
+         * only — pair with a matching <h1>-<h5> slotted element for correct
+         * document outline (see component docblock).
+         */
+        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;
+        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: '9b31ef730abc5e33919d32480e260937ae450529' }, h("div", { key: '95d33308deeb9c5488a89ef7161322a25b2e348f', class: containerClasses }, h("div", { key: '78cff6a371d382a9ff69d06d25180efd667958ab', class: "copy", style: copyStyle }, h("div", { key: '963e6233660bbe45084f42a70e0a1d54236c514e', class: headingClasses, part: "heading" }, h("slot", { key: 'b0b90701b673581cc08be3f79dea8068a85050ab' })), h("div", { key: 'db4b15e80e9bbe683b425e3cc8e92a2fa00774e1', class: descriptionClasses, part: "body", hidden: !this.hasDescription }, h("slot", { key: 'd581dab0571d6e400be15fa6a285d0774f5dc978', name: "description", ref: (el) => (this.descriptionSlot = el) }))), h("div", { key: 'fb160cbfc354f41eefe600f295c3d86146eb6065', class: buttonsClasses, part: "buttons", hidden: !this.hasButtons }, h("slot", { key: 'a801bbb9ac25136b0073f68ab05ae7738d6079e5', name: "buttons", ref: (el) => (this.buttonsSlot = el) })))));
+    }
+    get el() { return this; }
+    static get style() { return afTypographyLockupCss; }
+}, [257, "af-typography-lockup", {
+        "headingSize": [2, "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-287-nef9.js.map
+
+//# sourceMappingURL=p-287-nef9.js.map

package/dist/components/p-287-nef9.js.map

@@ -0,0 +1 @@
+{"file":"p-287-nef9.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: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.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: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .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.breakpoint-desktop.heading-3 .heading {\n  font-size: var(--font-size-heading-3-desktop, 34px);\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-relaxed, 1.2);\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-relaxed, 1.2);\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/* 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, and 5 */\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  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';\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}` 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 *\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@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, where 1 is largest). Controls visual scale\n   * only — pair with a matching <h1>-<h5> slotted element for correct\n   * document outline (see component docblock).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 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    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}