@affinda/wc 0.0.1 → 0.0.3

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-E2jkaTPt.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) {
+        index.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 (index.h(index.Host, { key: '7a748e23cc9262e4cf73abacf51951545228344c' }, index.h("div", { key: '443df8d7086ae8daf88f3827551219138dab43bb', class: containerClasses }, index.h("div", { key: 'efbf2467f36e2888bd4892524fb3d09b21b2ddfd', class: copyClasses, style: copyStyle }, index.h("div", { key: 'eb206a7d2e5c364a96295b11f83a87784c342ced', class: "heading" }, index.h("slot", { key: '360e15b14fbeeffd01fc55b2e0552bad530a337f' })), index.h("div", { key: '3b76ff5527eb52c382554f470991a05cbaf8e1e3', class: "description" }, index.h("slot", { key: '4e9f291edeac066abf2d1e416b846b9d1cbee2dc', name: "description" }))), index.h("div", { key: 'ff84e9ce823763b7570109d02b10d3039adefe61', class: "buttons" }, index.h("slot", { key: '36d0cc47a688c23c55d449a8f8e37b6f4be93d23', name: "buttons" })))));
+    }
+};
+AfTypographyLockup.style = afTypographyLockupCss;
+
+exports.af_typography_lockup = AfTypographyLockup;
+//# sourceMappingURL=af-typography-lockup.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-typography-lockup.entry.cjs.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":["h","Host"],"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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

package/dist/cjs/affinda.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-5BGpYleS.js');
+var index = require('./index-E2jkaTPt.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["af-badge_5.cjs",[[257,"af-badge",{"tone":[1]}],[257,"af-button",{"variant":[1],"size":[1],"disabled":[516],"loading":[516]}],[257,"af-card",{"variant":[1],"accent":[1]}],[257,"af-icon-button",{"variant":[1],"size":[1],"label":[1],"disabled":[516]}],[257,"af-input",{"label":[1],"description":[1],"type":[1],"placeholder":[1],"value":[1025],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["af-heading_5.cjs",[[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.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-5BGpYleS.js → index-E2jkaTPt.js}

@@ -4,7 +4,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
@@ -15,6 +15,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) {
@@ -382,6 +386,13 @@ var h = (nodeName, vnodeData, ...children) => {
       }
     }
   }
+  if (typeof nodeName === "function") {
+    return nodeName(
+      vnodeData === null ? {} : vnodeData,
+      vNodeChildren,
+      vdomFnUtils
+    );
+  }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
   if (vNodeChildren.length > 0) {
@@ -410,6 +421,36 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
+var vdomFnUtils = {
+  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+var convertToPublic = (node) => ({
+  vattrs: node.$attrs$,
+  vchildren: node.$children$,
+  vkey: node.$key$,
+  vname: node.$name$,
+  vtag: node.$tag$,
+  vtext: node.$text$
+});
+var convertToPrivate = (node) => {
+  if (typeof node.vtag === "function") {
+    const vnodeData = { ...node.vattrs };
+    if (node.vkey) {
+      vnodeData.key = node.vkey;
+    }
+    if (node.vname) {
+      vnodeData.name = node.vname;
+    }
+    return h(node.vtag, vnodeData, ...node.vchildren || []);
+  }
+  const vnode = newVNode(node.vtag, node.vtext);
+  vnode.$attrs$ = node.vattrs;
+  vnode.$children$ = node.vchildren;
+  vnode.$key$ = node.vkey;
+  vnode.$name$ = node.vname;
+  return vnode;
+};
 var createSupportsRuleRe = (selector) => {
   const safeSelector2 = escapeRegExpSpecialCharacters(selector);
   return new RegExp(
@@ -429,6 +470,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);
     }
@@ -436,25 +480,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
-var getElement = (ref) => {
-  var _a;
-  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
-};
-
-// src/runtime/event-emitter.ts
-var createEvent = (ref, name, flags) => {
-  const elm = getElement(ref);
-  return {
-    emit: (detail) => {
-      return emitEvent(elm, name, {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail
-      });
-    }
-  };
-};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -465,7 +490,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     return;
   }
   let isProp = isMemberInElement(elm, memberName);
-  let ln = memberName.toLowerCase();
+  memberName.toLowerCase();
   if (memberName === "class") {
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
@@ -474,27 +499,30 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
-    if (memberName[2] === "-") {
-      memberName = memberName.slice(3);
-    } else if (isMemberInElement(win, ln)) {
-      memberName = ln.slice(2);
-    } else {
-      memberName = ln[2] + memberName.slice(3);
-    }
-    if (oldValue || newValue) {
-      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-      if (oldValue) {
-        plt.rel(elm, memberName, oldValue, capture);
+  } else if (memberName === "style") {
+    {
+      for (const prop in oldValue) {
+        if (!newValue || newValue[prop] == null) {
+          if (prop.includes("-")) {
+            elm.style.removeProperty(prop);
+          } else {
+            elm.style[prop] = "";
+          }
+        }
       }
-      if (newValue) {
-        plt.ael(elm, memberName, newValue, capture);
+    }
+    for (const prop in newValue) {
+      if (!oldValue || newValue[prop] !== oldValue[prop]) {
+        if (prop.includes("-")) {
+          elm.style.setProperty(prop, newValue[prop]);
+        } else {
+          elm.style[prop] = newValue[prop];
+        }
       }
     }
-  } else {
+  } 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;
@@ -537,8 +565,6 @@ var parseClassList = (value) => {
   }
   return value.split(parseClassListRegex);
 };
-var CAPTURE_EVENT_SUFFIX = "Capture";
-var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
@@ -587,14 +613,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);
     }
@@ -606,6 +639,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;
@@ -737,8 +777,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);
     }
@@ -755,6 +799,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;
   }
@@ -766,19 +813,10 @@ var insertBefore = (parent, newNode, reference) => {
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
-  const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
-  if (cmpMeta.$attrsToReflect$) {
-    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
-      {
-        rootVnode.$attrs$[attribute] = hostElm[propName];
-      }
-    });
-  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1115,12 +1153,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
-            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
-            if (m[0] & 512 /* ReflectAttr */) {
-              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
-            }
             return attrName;
           })
         ])
@@ -1296,9 +1330,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
-      {
-        cmpMeta.$attrsToReflect$ = [];
-      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
@@ -1401,13 +1432,13 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
+exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
-exports.createEvent = createEvent;
 exports.globalScripts = globalScripts;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
-//# sourceMappingURL=index-5BGpYleS.js.map
+//# sourceMappingURL=index-E2jkaTPt.js.map
 
-//# sourceMappingURL=index-5BGpYleS.js.map
+//# sourceMappingURL=index-E2jkaTPt.js.map