@affinda/wc 0.0.2 → 0.0.3

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

@@ -0,0 +1,122 @@
+import { r as registerInstance, h, H as Host } from './index-DxVtR6vj.js';
+
+const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;color:#14343b;letter-spacing:-0.02em}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:50px;line-height:1}@media (min-width: 768px){.level-xl{font-size:80px}}.level-1{font-size:38px;line-height:1}@media (min-width: 768px){.level-1{font-size:56px}}.level-2{font-size:32px;line-height:1}@media (min-width: 768px){.level-2{font-size:44px}}.level-3{font-size:25px;line-height:1}@media (min-width: 768px){.level-3{font-size:34px}}.level-4{font-size:20px;line-height:1.1}@media (min-width: 768px){.level-4{font-size:24px;line-height:1.2}}.level-5{font-size:18px;line-height:1.1}@media (min-width: 768px){.level-5{font-size:20px;line-height:1.2}}";
+
+const AfHeading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Heading level */
+        this.level = '1';
+        /** Visual alignment */
+        this.align = 'left';
+    }
+    getHeadingTag() {
+        // Map display levels to semantic HTML tags
+        const tagMap = {
+            'xl': 'h1',
+            '1': 'h1',
+            '2': 'h2',
+            '3': 'h3',
+            '4': 'h4',
+            '5': 'h5'
+        };
+        return tagMap[this.level] || 'h1';
+    }
+    render() {
+        const Tag = this.getHeadingTag();
+        return (h(Tag, { key: '1d3f37c8d067c3c9d0ec7f10422478ab41c990b2', class: {
+                'heading': true,
+                [`level-${this.level}`]: true,
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: 'dcba9d00393f818cfceeb5eba5cc2bd874927dfd' })));
+    }
+};
+AfHeading.style = afHeadingCss;
+
+const afTextCss = ":host{display:block}.text{margin:0;padding:0;font-family:'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:400;color:#14343b;letter-spacing:0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.variant-xlarge{font-size:22px;line-height:28px}.variant-large{font-size:18px;line-height:26px}.variant-medium{font-size:16px;line-height:24px}.variant-small{font-size:14px;line-height:20px}.variant-label-button{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:17px;line-height:20px}.variant-label-tag{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-weight:500;font-size:14px;line-height:1}";
+
+const AfText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Text variant */
+        this.variant = 'medium';
+        /** Visual alignment */
+        this.align = 'left';
+        /** Semantic element to render */
+        this.as = 'p';
+    }
+    render() {
+        const Tag = this.as;
+        return (h(Tag, { key: '778a86a185f2416dec867ca2457acb2fe1ad4bcb', class: {
+                'text': true,
+                [`variant-${this.variant}`]: true,
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: '2b3ee364c989ca8d233583946e24665df0192fb9' })));
+    }
+};
+AfText.style = afTextCss;
+
+const afNavItemCss = ":host{display:inline-block}.nav-link{text-decoration:none;color:inherit;display:block}.nav-item{display:flex;align-items:center;gap:8px;box-sizing:border-box;cursor:pointer}.hierarchy-primary{padding:12px;justify-content:center}.hierarchy-primary .label-container{display:flex;align-items:center;justify-content:center;height:24px;gap:10px}.hierarchy-primary.variant-01{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;line-height:20px;color:#14343b}.hierarchy-primary.variant-02{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:16px;font-weight:500;line-height:20px;color:#14343b}.hierarchy-primary.variant-01:hover .label-container{border-bottom:1px solid currentColor}.hierarchy-primary.variant-01.active .label-container{border-bottom:2px solid #8a7049}.hierarchy-primary.variant-02:hover{background-color:rgba(20, 52, 59, 0.04);border-radius:8px}.hierarchy-primary.variant-02.active{background-color:rgba(20, 52, 59, 0.08);border-radius:8px}.hierarchy-secondary{padding:4px 0}.hierarchy-secondary .label-container{display:flex;align-items:center;flex:1;min-height:24px;gap:8px}.hierarchy-secondary.variant-01{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#14343b}.hierarchy-secondary.variant-02{font-family:'NeuSans', 'Inter', system-ui, sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#2b484f}.hierarchy-secondary:hover ::slotted(*){text-decoration:underline}@media (max-width: 767px){.hierarchy-primary{padding:20px 12px;border-bottom:1px solid #e8eeed;width:100%}.hierarchy-primary .label-container{flex:1;justify-content:flex-start}.hierarchy-primary.variant-01{font-size:20px;line-height:1.1;letter-spacing:-0.4px}.hierarchy-primary.variant-02{font-size:20px;line-height:1.1;letter-spacing:-0.4px;color:#60767b}}::slotted([slot=\"icon-left\"]),::slotted([slot=\"icon-right\"]){width:24px;height:24px;flex-shrink:0}.hierarchy-secondary ::slotted([slot=\"icon-right\"]){width:20px;height:20px}";
+
+const AfNavItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Visual hierarchy level of the navigation item
+         * - 'primary': Bold, main navigation (larger text, prominent styling)
+         * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+         */
+        this.hierarchy = 'primary';
+        /**
+         * Visual variant within the hierarchy level
+         * - '01': Darker/more prominent styling
+         * - '02': Lighter/more subtle styling
+         */
+        this.variant = '01';
+        /**
+         * Whether this nav item is currently active/selected
+         */
+        this.active = false;
+    }
+    render() {
+        const classes = {
+            'nav-item': true,
+            [`hierarchy-${this.hierarchy}`]: true,
+            [`variant-${this.variant}`]: true,
+            'active': this.active
+        };
+        const content = (h("div", { class: classes }, h("slot", { name: "icon-left" }), h("div", { class: "label-container" }, h("slot", null)), h("slot", { name: "icon-right" })));
+        if (this.href) {
+            return (h(Host, null, h("a", { href: this.href, class: "nav-link" }, content)));
+        }
+        return h(Host, null, content);
+    }
+};
+AfNavItem.style = afNavItemCss;
+
+const afNavbarCss = ":host{display:block;width:100%}.navbar-container{padding:32px 80px 0;box-sizing:border-box}.navbar{background:#E8F1EF;border:1px solid rgba(0, 0, 0, 0.12);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;box-shadow:0 2px 8px rgba(0, 0, 0, 0.08)}.navbar-left{display:flex;align-items:center;gap:32px}.logo{display:flex;align-items:center;flex-shrink:0}.nav-links{display:flex;align-items:center;gap:8px}.navbar-right{display:flex;align-items:center;gap:20px}.nav-actions{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center}@media (max-width: 1024px){.navbar-container{padding:24px 40px 0}.navbar-left{gap:24px}.nav-links{gap:4px}}@media (max-width: 767px){.navbar-container{padding:16px 16px 0}.navbar{padding:8px 16px;flex-direction:column;border-radius:16px;gap:16px}.navbar-left{width:100%;flex-direction:column;gap:16px;align-items:flex-start}.nav-links{width:100%;flex-direction:column;align-items:stretch;gap:0}.navbar-right{width:100%;flex-direction:column;gap:12px;align-items:stretch}.nav-actions{width:100%;flex-direction:column;align-items:stretch;gap:0}.nav-button{width:100%}}";
+
+const AfNavbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "links" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: 'cbfecec0a3b95935f707a4bbded5ce8aae0e9270', name: "actions" })), h("div", { key: 'e8cd7adf6f5a537b9a2552b467f6671f312ab0c1', class: "nav-button" }, h("slot", { key: '9dd578f3d67b32642cc6fbd49a5f3736e55c04f1', name: "button" })))))));
+    }
+};
+AfNavbar.style = afNavbarCss;
+
+const afLogoCss = ":host{display:inline-block;color:#14343b}.logo-svg{display:block;height:22px;width:auto}";
+
+const AfLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '8a33b73d7a60054dde8a04327d94d78763552549' }, h("svg", { key: '7195b06d8ab5a335e70a1e7310fd753cb3887599', width: "141", height: "22", viewBox: "0 0 141 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "logo-svg" }, h("path", { key: '5bb4bb2f7f6063928c3cfc7938b85291e70bec27', d: "M20.8 9.6c0-1.5-.4-2.7-1.1-3.7-.8-1-1.8-1.5-3.2-1.5-1.3 0-2.4.5-3.2 1.5-.7 1-1.1 2.2-1.1 3.7 0 1.5.4 2.7 1.1 3.7.8 1 1.9 1.5 3.2 1.5 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zm4.2 0c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-2.2 0-4-.8-5.4-2.3-1.4-1.5-2.1-3.5-2.1-5.9 0-2.4.7-4.4 2.1-5.9C13.5 2.2 15.3 1.4 17.5 1.4c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.9zM29.1 17.5h-4.2V4.7h4.2v12.8zm0-14.9h-4.2V.2h4.2v2.4zM43.3 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4z", fill: "currentColor" }), h("path", { key: '7a5a7e54b69475ad6f9d1ddf240e668708a06ff2', d: "M56.9 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4zM68.3 5.9c-.7-.4-1.5-.6-2.4-.6-1.2 0-2.2.4-2.9 1.2-.8.8-1.1 1.9-1.1 3.3 0 1.4.4 2.5 1.1 3.3.8.8 1.7 1.2 2.9 1.2.9 0 1.7-.2 2.4-.6v3.5c-.9.3-1.9.5-2.9.5-2.3 0-4.2-.7-5.6-2.2-1.4-1.5-2.1-3.4-2.1-5.8 0-1.5.3-2.9.9-4.1.6-1.2 1.5-2.2 2.6-2.8 1.1-.7 2.4-1 3.8-1 1.1 0 2.1.2 3.1.6l.2 3.5z", fill: "currentColor" }), h("path", { key: '29ba5bc9bc4fc8068d77dd092f6fbf2dccc2caa2', d: "M80 4.7h4.2v1.6c.7-1.2 1.9-1.9 3.6-1.9 1.3 0 2.3.4 3.1 1.2.8.8 1.2 2 1.2 3.5v8.4h-4.2V9.4c0-1.7-.7-2.5-2-2.5-.7 0-1.2.2-1.6.7-.4.4-.6 1.1-.6 1.9v8h-4.2V4.7h.5zM105.3 17.5h-4.2v-1.1c-.8 1-2 1.5-3.6 1.5-1.4 0-2.6-.5-3.5-1.4-.9-.9-1.4-2.1-1.4-3.6V9.6c0-1.5.5-2.7 1.4-3.6.9-.9 2.1-1.4 3.5-1.4 1.6 0 2.8.5 3.6 1.5V.2h4.2v17.3zm-4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z", fill: "currentColor" }), h("path", { key: 'd528008c06633218db38e63f0605874f703d3165', d: "M115.8 17.5h-4.2V4.7h4.2v1.1c.8-1 2-1.5 3.6-1.5 1.4 0 2.6.5 3.5 1.4.9.9 1.4 2.1 1.4 3.6v3.3c0 1.5-.5 2.7-1.4 3.6-.9.9-2.1 1.4-3.5 1.4-1.6 0-2.8-.5-3.6-1.5v1.4zm4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z", fill: "currentColor" }), h("g", { key: 'e3c341f6286afc34b918924fe1ce7d147adcb09a', "clip-path": "url(#clip0)" }, h("path", { key: '1d8c3fbc8995e2017357ceaab53ffd66970fe017', d: "M4.9 9.6c0-1.5-.4-2.7-1.1-3.7C3 4.9 2 4.4.6 4.4c-.3 0-.6 0-.9.1v10.2c.3.1.6.1.9.1 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zM9.1 9.6c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-.7 0-1.4-.1-2.1-.2V.2C.2.1.9 0 1.6 0c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.3z", fill: "currentColor" })), h("defs", { key: 'b10859520274b6db85b3192b314f2a2bc6b41da7' }, h("clipPath", { key: '8834e78ed619077f26809a22f7130f6941f2ef5f', id: "clip0" }, h("path", { key: '5a01632b2fb3c6a6d630afaefc6489cb879f5116', fill: "#fff", d: "M0 0h9.1v17.8H0z" }))))));
+    }
+};
+AfLogo.style = afLogoCss;
+
+export { AfHeading as af_heading, AfLogo as af_logo, AfNavItem as af_nav_item, AfNavbar as af_navbar, AfText as af_text };
+//# sourceMappingURL=af-heading.af-logo.af-nav-item.af-navbar.af-text.entry.js.map

package/dist/esm/af-icon-button.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host } from './index-DxVtR6vj.js';
+
+const afIconButtonCss = ":host{display:inline-block}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon ::slotted(svg){width:100%;height:100%}.variant-primary{background:var(--colour-brand-ice, #A6FFFB);border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-primary:hover:not(.disabled){background:#8FEBE3;transform:translateY(-1px);box-shadow:0 2px 8px rgba(20, 52, 59, 0.15)}.variant-primary:active:not(.disabled){background:#7FE2D4;transform:translateY(0)}.variant-secondary{background:var(--colour-brand-white, #FFFFFF);border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-secondary:hover:not(.disabled){background:#F6FAF9;transform:translateY(-1px);box-shadow:0 2px 8px rgba(20, 52, 59, 0.15)}.variant-secondary:active:not(.disabled){background:#E8F1EF;transform:translateY(0)}.variant-outline{background:transparent;border-color:var(--colour-brand-inkwell, #14343B);color:var(--colour-brand-inkwell, #14343B)}.variant-outline:hover:not(.disabled){background:rgba(20, 52, 59, 0.04);transform:translateY(-1px)}.variant-outline:active:not(.disabled){background:rgba(20, 52, 59, 0.08);transform:translateY(0)}.variant-ghost{background:transparent;border-color:transparent;color:var(--colour-brand-inkwell, #14343B)}.variant-ghost:hover:not(.disabled){background:rgba(20, 52, 59, 0.04)}.variant-ghost:active:not(.disabled){background:rgba(20, 52, 59, 0.08)}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--colour-brand-ice, #A6FFFB);border:1px solid var(--colour-brand-inkwell, #14343B)}button.icon-button.variant-secondary{background:var(--colour-brand-white, #FFFFFF);border:1px solid var(--colour-brand-inkwell, #14343B)}button.icon-button.variant-outline{background:transparent;border:1px solid var(--colour-brand-inkwell, #14343B)}button.icon-button.variant-ghost{background:transparent;border:1px solid transparent}";
+
+const AfIconButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The visual variant of the button
+         */
+        this.variant = 'primary';
+        /**
+         * The size of the button
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
+    }
+    render() {
+        const classes = {
+            'icon-button': true,
+            [`variant-${this.variant}`]: true,
+            [`size-${this.size}`]: true,
+            'disabled': this.disabled
+        };
+        const content = (h("span", { class: "icon" }, h("slot", null)));
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes, "aria-label": this.ariaLabel }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes, "aria-label": this.ariaLabel }, content)));
+    }
+};
+AfIconButton.style = afIconButtonCss;
+
+export { AfIconButton as af_icon_button };
+//# sourceMappingURL=af-icon-button.entry.js.map

package/dist/esm/af-icon-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-icon-button.entry.js","sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  padding: 0;\n}\n\n/* Size variants */\n.size-large {\n  width: 72px;\n  height: 72px;\n  padding: 24px;\n}\n\n.size-large .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-medium {\n  width: 48px;\n  height: 48px;\n  padding: 12px;\n}\n\n.size-medium .icon {\n  width: 24px;\n  height: 24px;\n}\n\n.size-small {\n  width: 36px;\n  height: 36px;\n  padding: 8px;\n}\n\n.size-small .icon {\n  width: 20px;\n  height: 20px;\n}\n\n/* Icon slot */\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon ::slotted(svg) {\n  width: 100%;\n  height: 100%;\n}\n\n/* Primary variant (ice) */\n.variant-primary {\n  background: var(--colour-brand-ice, #A6FFFB);\n  border-color: var(--colour-brand-inkwell, #14343B);\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-primary:hover:not(.disabled) {\n  background: #8FEBE3;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-primary:active:not(.disabled) {\n  background: #7FE2D4;\n  transform: translateY(0);\n}\n\n/* Secondary variant (white) */\n.variant-secondary {\n  background: var(--colour-brand-white, #FFFFFF);\n  border-color: var(--colour-brand-inkwell, #14343B);\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-secondary:hover:not(.disabled) {\n  background: #F6FAF9;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);\n}\n\n.variant-secondary:active:not(.disabled) {\n  background: #E8F1EF;\n  transform: translateY(0);\n}\n\n/* Outline variant */\n.variant-outline {\n  background: transparent;\n  border-color: var(--colour-brand-inkwell, #14343B);\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-outline:hover:not(.disabled) {\n  background: rgba(20, 52, 59, 0.04);\n  transform: translateY(-1px);\n}\n\n.variant-outline:active:not(.disabled) {\n  background: rgba(20, 52, 59, 0.08);\n  transform: translateY(0);\n}\n\n/* Ghost variant */\n.variant-ghost {\n  background: transparent;\n  border-color: transparent;\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.variant-ghost:hover:not(.disabled) {\n  background: rgba(20, 52, 59, 0.04);\n}\n\n.variant-ghost:active:not(.disabled) {\n  background: rgba(20, 52, 59, 0.08);\n}\n\n/* Disabled state */\n.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Remove default button styles */\nbutton.icon-button {\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n  background: var(--colour-brand-ice, #A6FFFB);\n  border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.icon-button.variant-secondary {\n  background: var(--colour-brand-white, #FFFFFF);\n  border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.icon-button.variant-outline {\n  background: transparent;\n  border: 1px solid var(--colour-brand-inkwell, #14343B);\n}\n\nbutton.icon-button.variant-ghost {\n  background: transparent;\n  border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'large' | 'medium' | 'small' = 'medium';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-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\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,whFAAwhF;;MCOniF,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkD,SAAS;AAE1E;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,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;QAED,MAAM,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,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,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;"}

package/dist/esm/af-typography-lockup.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h, H as Host } from './index-DxVtR6vj.js';
+
+const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column;gap:40px}.text-left{align-items:flex-start}.text-center{align-items:center}.text-left .copy,.text-left .heading,.text-left .description{text-align:left}.text-center .copy,.text-center .heading,.text-center .description{text-align:center}.copy{display:flex;flex-direction:column;gap:16px;width:100%}.heading{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;color:var(--typography-heading-primary, #14343B);line-height:1;white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:56px;letter-spacing:-1.12px}.breakpoint-desktop.heading-2 .heading{font-size:44px;letter-spacing:-0.88px}.breakpoint-desktop.heading-3 .heading{font-size:34px;letter-spacing:-0.68px}.breakpoint-desktop.heading-4 .heading{font-size:24px;letter-spacing:-0.48px;line-height:1.2}.breakpoint-desktop.heading-5 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.2}.breakpoint-mobile.heading-1 .heading{font-size:38px;letter-spacing:-0.76px}.breakpoint-mobile.heading-2 .heading{font-size:32px;letter-spacing:-0.64px}.breakpoint-mobile.heading-3 .heading{font-size:25px;letter-spacing:-0.5px}.breakpoint-mobile.heading-4 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.1}.breakpoint-mobile.heading-5 .heading{font-size:18px;letter-spacing:-0.36px;line-height:1.1}.description{font-family:'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;font-size:18px;font-weight:400;line-height:26px;color:var(--typography-body-default, #2B484F);white-space:pre-wrap}.description:empty{display:none}.buttons{display:flex;gap:12px}.buttons:empty{display:none}.button-horizontal .buttons{flex-direction:row;align-items:center}.text-left.button-horizontal{flex-direction:row;align-items:center;gap:16px}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
+
+const AfTypographyLockup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The heading size (1-5, where 1 is largest)
+         */
+        this.headingSize = 2;
+        /**
+         * The breakpoint for responsive typography
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Text alignment
+         */
+        this.textAlignment = 'left';
+        /**
+         * Button alignment (horizontal or vertical stacking)
+         */
+        this.buttonAlignment = 'vertical';
+    }
+    render() {
+        const containerClasses = {
+            'lockup': true,
+            [`text-${this.textAlignment}`]: true,
+            [`button-${this.buttonAlignment}`]: true
+        };
+        const copyClasses = {
+            'copy': true,
+            [`heading-${this.headingSize}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true
+        };
+        const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
+        return (h(Host, { key: '7a748e23cc9262e4cf73abacf51951545228344c' }, h("div", { key: '443df8d7086ae8daf88f3827551219138dab43bb', class: containerClasses }, h("div", { key: 'efbf2467f36e2888bd4892524fb3d09b21b2ddfd', class: copyClasses, style: copyStyle }, h("div", { key: 'eb206a7d2e5c364a96295b11f83a87784c342ced', class: "heading" }, h("slot", { key: '360e15b14fbeeffd01fc55b2e0552bad530a337f' })), h("div", { key: '3b76ff5527eb52c382554f470991a05cbaf8e1e3', class: "description" }, h("slot", { key: '4e9f291edeac066abf2d1e416b846b9d1cbee2dc', name: "description" }))), h("div", { key: 'ff84e9ce823763b7570109d02b10d3039adefe61', class: "buttons" }, h("slot", { key: '36d0cc47a688c23c55d449a8f8e37b6f4be93d23', name: "buttons" })))));
+    }
+};
+AfTypographyLockup.style = afTypographyLockupCss;
+
+export { AfTypographyLockup as af_typography_lockup };
+//# sourceMappingURL=af-typography-lockup.entry.js.map

package/dist/esm/af-typography-lockup.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-typography-lockup.entry.js","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  gap: 40px;\n}\n\n/* Text alignment */\n.text-left {\n  align-items: flex-start;\n}\n\n.text-center {\n  align-items: center;\n}\n\n.text-left .copy,\n.text-left .heading,\n.text-left .description {\n  text-align: left;\n}\n\n.text-center .copy,\n.text-center .heading,\n.text-center .description {\n  text-align: center;\n}\n\n/* Copy section */\n.copy {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Heading styles */\n.heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  color: var(--typography-heading-primary, #14343B);\n  line-height: 1;\n  white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n  font-size: 56px;\n  letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n  font-size: 44px;\n  letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n  font-size: 34px;\n  letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n  font-size: 24px;\n  letter-spacing: -0.48px;\n  line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n  font-size: 20px;\n  letter-spacing: -0.4px;\n  line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n  font-size: 38px;\n  letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n  font-size: 32px;\n  letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n  font-size: 25px;\n  letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n  font-size: 20px;\n  letter-spacing: -0.4px;\n  line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n  font-size: 18px;\n  letter-spacing: -0.36px;\n  line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n  font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n  font-size: 18px;\n  font-weight: 400;\n  line-height: 26px;\n  color: var(--typography-body-default, #2B484F);\n  white-space: pre-wrap;\n}\n\n.description:empty {\n  display: none;\n}\n\n/* Buttons section */\n.buttons {\n  display: flex;\n  gap: 12px;\n}\n\n.buttons:empty {\n  display: none;\n}\n\n/* Button alignment - horizontal */\n.button-horizontal .buttons {\n  flex-direction: row;\n  align-items: center;\n}\n\n.text-left.button-horizontal {\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n}\n\n.text-left.button-horizontal .copy {\n  flex: 1 0 0;\n  max-width: 950px;\n}\n\n.text-left.button-horizontal .buttons {\n  flex-shrink: 0;\n}\n\n/* Button alignment - vertical */\n.button-vertical .buttons {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.text-center.button-vertical .buttons {\n  align-items: center;\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, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\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\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAEjD;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAA8B,UAAU;AAwChE;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,UAAU,IAAI,CAAC,eAAe,CAAE,CAAA,GAAG;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

package/dist/esm/affinda.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DIoXjiux.js';
-export { s as setNonce } from './index-DIoXjiux.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DxVtR6vj.js';
+export { s as setNonce } from './index-DxVtR6vj.js';
 
 /*
  Stencil Client Patch Browser v4.38.2 | MIT Licensed | https://stenciljs.com
@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["af-heading_3",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
+  return bootstrapLazy([["af-heading_5",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-typography-lockup",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 });
 //# sourceMappingURL=affinda.js.map

package/dist/esm/{index-DIoXjiux.js → index-DxVtR6vj.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'affinda';
 const BUILD = /* affinda */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = ":root{--af-color-brand-primary-500:#7c3aed;--af-color-brand-primary-600:#6d28d9;--af-color-fg-default:#120f1f;--af-color-fg-muted:#5b4b8a;--af-color-fg-inverse:#f7f5ff;--af-color-bg-surface:#ffffff;--af-color-bg-subtle:#f5f3ff;--af-color-bg-inverse:#2f165e;--af-radius-sm:6px;--af-radius-md:12px;--af-radius-pill:999px;--af-space-1:4px;--af-space-2:8px;--af-space-3:12px;--af-space-4:16px;--af-font-family-sans:'Inter', 'Segoe UI', system-ui, sans-serif;--af-font-weight-regular:400;--af-font-weight-semibold:600;--af-size-font-sm:0.875rem;--af-size-font-md:1rem;--af-size-font-lg:1.125rem}[data-theme=\"dark\"]{--af-color-fg-default:#f7f5ff;--af-color-fg-muted:#dcd1ff;--af-color-fg-inverse:#120f1f;--af-color-bg-surface:#1b1530;--af-color-bg-subtle:#241943;--af-color-bg-inverse:#f7f5ff}:root{font-family:var(--af-font-family-sans);font-weight:var(--af-font-weight-regular);background-color:var(--af-color-bg-surface);color:var(--af-color-fg-default)}body{font-size:var(--af-size-font-md);display:flex;flex-direction:column;min-height:100%}.af-focus-ring{outline:2px solid var(--af-color-brand-primary-500);outline-offset:2px}.af-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
+const globalStyles = ":root{--af-color-brand-primary-500:#7c3aed;--af-color-brand-primary-600:#6d28d9;--af-color-fg-default:#120f1f;--af-color-fg-muted:#5b4b8a;--af-color-fg-inverse:#f7f5ff;--af-color-bg-surface:#ffffff;--af-color-bg-subtle:#f5f3ff;--af-color-bg-inverse:#2f165e;--af-radius-sm:6px;--af-radius-md:12px;--af-radius-pill:999px;--af-space-1:4px;--af-space-2:8px;--af-space-3:12px;--af-space-4:16px;--af-font-family-sans:'Inter', 'Segoe UI', system-ui, sans-serif;--af-font-weight-regular:400;--af-font-weight-semibold:600;--af-size-font-sm:0.875rem;--af-size-font-md:1rem;--af-size-font-lg:1.125rem}[data-theme=\"dark\"]{--af-color-fg-default:#f7f5ff;--af-color-fg-muted:#dcd1ff;--af-color-fg-inverse:#120f1f;--af-color-bg-surface:#1b1530;--af-color-bg-subtle:#241943;--af-color-bg-inverse:#f7f5ff}";
 
 /*
  Stencil Client Platform v4.38.2 | MIT Licensed | https://stenciljs.com
@@ -13,6 +13,10 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/utils/constants.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HTML_NS = "http://www.w3.org/1999/xhtml";
+
 // src/client/client-host-ref.ts
 var getHostRef = (ref) => {
   if (ref.__stencil__getHostRef) {
@@ -464,6 +468,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
+    if (propType & 2 /* Number */) {
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -513,7 +520,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   } else if (memberName === "key") ; else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && true) {
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -604,14 +611,21 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else {
+    if (!isSvgMode) {
+      isSvgMode = newVNode2.$tag$ === "svg";
+    }
     if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = win.document.createElement(
+    elm = newVNode2.$elm$ = win.document.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
       newVNode2.$tag$
-    );
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -623,6 +637,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -754,8 +775,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
+  const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
+    {
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+    }
     {
       updateElement(oldVNode, newVNode2, isSvgMode);
     }
@@ -772,6 +797,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     } else ;
+    if (isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
   } else if (oldVNode.$text$ !== text) {
     elm.data = text;
   }
@@ -1403,6 +1431,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, bootstrapLazy as b, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-DIoXjiux.js.map
+//# sourceMappingURL=index-DxVtR6vj.js.map
 
-//# sourceMappingURL=index-DIoXjiux.js.map
+//# sourceMappingURL=index-DxVtR6vj.js.map