@affinda/wc 0.0.2 → 0.0.3

package/dist/components/p-BoU5qaPt.js

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CzaQ1fCu.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 = /*@__PURE__*/ proxyCustomElement(class AfIconButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * 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)));
+    }
+    static get style() { return afIconButtonCss; }
+}, [257, "af-icon-button", {
+        "variant": [1],
+        "size": [1],
+        "disabled": [4],
+        "href": [1],
+        "type": [1],
+        "ariaLabel": [1, "aria-label"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-icon-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-icon-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIconButton);
+            }
+            break;
+    } });
+}
+
+export { AfIconButton as A, defineCustomElement as d };
+//# sourceMappingURL=p-BoU5qaPt.js.map
+
+//# sourceMappingURL=p-BoU5qaPt.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BoU5qaPt.js","mappings":";;AAAA,MAAM,eAAe,GAAG,whFAAwhF;;MCOniF,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/dist/components/{p-BZ5_l5Q-.js → p-CT_9_xN3.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-TaHgCKVa.js';
+import { p as proxyCustomElement, H, h } from './p-CzaQ1fCu.js';
 
 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}";
 
@@ -45,6 +45,6 @@ function defineCustomElement() {
 }
 
 export { AfText as A, defineCustomElement as d };
-//# sourceMappingURL=p-BZ5_l5Q-.js.map
+//# sourceMappingURL=p-CT_9_xN3.js.map
 
-//# sourceMappingURL=p-BZ5_l5Q-.js.map
+//# sourceMappingURL=p-CT_9_xN3.js.map

package/dist/components/{p-BZ5_l5Q-.js.map → p-CT_9_xN3.js.map}

@@ -1 +1 @@
-{"file":"p-BZ5_l5Q-.js","mappings":";;AAAA,MAAM,SAAS,GAAG,osBAAosB;;MCOzsB,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA2E,QAAQ;;AAG1F,QAAA,IAAK,CAAA,KAAA,GAAgC,MAAM;;AAG3C,QAAA,IAAE,CAAA,EAAA,GAAmC,GAAG;AAkBjD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS;QAE1B,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n  font-family: 'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 400;\n  color: #14343b;\n  letter-spacing: 0;\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Body variants */\n.variant-xlarge {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.variant-large {\n  font-size: 18px;\n  line-height: 26px;\n}\n\n.variant-medium {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n.variant-small {\n  font-size: 14px;\n  line-height: 20px;\n}\n\n/* Label variants - use NeuSans Book */\n.variant-label-button {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.variant-label-tag {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 1;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CT_9_xN3.js","mappings":";;AAAA,MAAM,SAAS,GAAG,osBAAosB;;MCOzsB,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AALnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA2E,QAAQ;;AAG1F,QAAA,IAAK,CAAA,KAAA,GAAgC,MAAM;;AAG3C,QAAA,IAAE,CAAA,EAAA,GAAmC,GAAG;AAkBjD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS;QAE1B,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-text/af-text.css?tag=af-text&encapsulation=shadow","src/components/af-text/af-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n  font-family: 'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 400;\n  color: #14343b;\n  letter-spacing: 0;\n}\n\n/* Alignment */\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Body variants */\n.variant-xlarge {\n  font-size: 22px;\n  line-height: 28px;\n}\n\n.variant-large {\n  font-size: 18px;\n  line-height: 26px;\n}\n\n.variant-medium {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n.variant-small {\n  font-size: 14px;\n  line-height: 20px;\n}\n\n/* Label variants - use NeuSans Book */\n.variant-label-button {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.variant-label-tag {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 1;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-TaHgCKVa.js → p-CzaQ1fCu.js}

@@ -1,4 +1,4 @@
-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}";
 
 const NAMESPACE = 'affinda';
 const BUILD = /* affinda */ { hydratedSelectorName: "hydrated", lazyLoad: false, propChangeCallback: false, updatable: true};
@@ -12,6 +12,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) {
@@ -424,6 +428,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);
     }
@@ -473,7 +480,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;
@@ -564,14 +571,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);
     }
@@ -583,6 +597,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;
@@ -714,8 +735,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);
     }
@@ -732,6 +757,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;
   }
@@ -1203,6 +1231,6 @@ function render(vnode, container) {
 }
 
 export { H, setNonce as a, setPlatformOptions as b, Host as c, getAssetPath as g, h, proxyCustomElement as p, render as r, setAssetPath as s };
-//# sourceMappingURL=p-TaHgCKVa.js.map
+//# sourceMappingURL=p-CzaQ1fCu.js.map
 
-//# sourceMappingURL=p-TaHgCKVa.js.map
+//# sourceMappingURL=p-CzaQ1fCu.js.map