proto-daisy-ui 0.1.201 → 0.1.202

package/dist/cjs/{index-BGPKPYoe.js → index-H5EhhFIy.js}

@@ -5,7 +5,7 @@ const BUILD = /* proto-daisy-ui */ { allRenderFn: true, appendChildSlotFix: fals
 const Env = /* proto-daisy-ui */ {};
 
 /*
- Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 
 var Build = {
@@ -2114,6 +2114,31 @@ var getMode = (ref) => {
   return (_a = getHostRef(ref)) == null ? void 0 : _a.$modeName$;
 };
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -2210,11 +2235,19 @@ var RemoteValue = class _RemoteValue {
 };
 
 // src/utils/serialize.ts
+function decodeBase64Unicode(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i2 = 0; i2 < binary.length; i2++) {
+    bytes[i2] = binary.charCodeAt(i2);
+  }
+  return new TextDecoder().decode(bytes);
+}
 function deserializeProperty(value) {
   if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }
 
 // src/runtime/parse-property-value.ts
@@ -3512,7 +3545,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   if (BUILD.member && cmpMeta.$members$ || BUILD.propChangeCallback) {
     if (BUILD.propChangeCallback) {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -3690,11 +3723,13 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+          if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -3742,7 +3777,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (BUILD.member && !Cstr.isProxied) {
           if (BUILD.propChangeCallback) {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -3954,7 +3989,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       cmpMeta.$listeners$ = compactMeta[3];
     }
     if (BUILD.propChangeCallback) {
-      cmpMeta.$watchers$ = Cstr.$watchers$;
+      cmpMeta.$watchers$ = normalizeWatchers(Cstr.$watchers$);
       cmpMeta.$deserializers$ = Cstr.$deserializers$;
       cmpMeta.$serializers$ = Cstr.$serializers$;
     }
@@ -4110,7 +4145,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2, _b, _c;
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -4130,9 +4165,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpMeta.$attrsToReflect$ = [];
       }
       if (BUILD.propChangeCallback) {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
-        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
       }
       if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
@@ -4340,15 +4375,21 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
 // src/runtime/render.ts
+var hostRefCache = /* @__PURE__ */ new WeakMap();
 function render(vnode, container) {
-  const cmpMeta = {
-    $flags$: 0,
-    $tagName$: container.tagName
-  };
-  const ref = {
-    $cmpMeta$: cmpMeta,
-    $hostElement$: container
-  };
+  let ref = hostRefCache.get(container);
+  if (!ref) {
+    const cmpMeta = {
+      $flags$: 0,
+      $tagName$: container.tagName
+    };
+    ref = {
+      $flags$: 0,
+      $cmpMeta$: cmpMeta,
+      $hostElement$: container
+    };
+    hostRefCache.set(container, ref);
+  }
   renderVdom(ref, vnode);
 }
 
@@ -4604,6 +4645,7 @@ var StencilCore = /*#__PURE__*/Object.freeze({
   modeResolutionChain: modeResolutionChain,
   needsScopedSSR: needsScopedSSR,
   nextTick: nextTick,
+  normalizeWatchers: normalizeWatchers,
   parsePropertyValue: parsePropertyValue,
   plt: plt,
   postUpdateComponent: postUpdateComponent,

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
+var index = require('./index-H5EhhFIy.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/proto-daisy-ui.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
-var store = require('./store-DdlBAY0E.js');
+var index = require('./index-H5EhhFIy.js');
+var store = require('./store-BWDTpfEh.js');
 
 const shadowCss = () => ` @layer properties; @layer theme, base, components, utilities; @layer theme {   :root,   :host {     --font-sans:       ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',       'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';     --spacing: 0.25rem;     --container-md: 28rem;     --text-xl: 1.25rem;     --text-xl--line-height: calc(1.75 / 1.25);     --text-5xl: 3rem;     --text-5xl--line-height: 1;     --font-weight-bold: 700;     --radius-md: 0.375rem;   } } @layer utilities {   .tooltip {     @layer daisyui.l1.l2.l3 {       position: relative;       display: inline-block;       --tt-bg: var(--color-neutral);       --tt-off: calc(100% + 0.5rem);       --tt-tail: calc(100% + 1px + 0.25rem);       & > .tooltip-content,       &[data-tip]:before {         position: absolute;         max-width: 20rem;         border-radius: var(--radius-field);         padding-inline: calc(0.25rem * 2);         padding-block: calc(0.25rem * 1);         text-align: center;         white-space: normal;         color: var(--color-neutral-content);         opacity: 0%;         font-size: 0.875rem;         line-height: 1.25;         background-color: var(--tt-bg);         width: max-content;         pointer-events: none;         z-index: 2;         --tw-content: attr(data-tip);         content: var(--tw-content);       }       &:after {         opacity: 0%;         background-color: var(--tt-bg);         content: '';         pointer-events: none;         width: 0.625rem;         height: 0.25rem;         display: block;         position: absolute;         mask-repeat: no-repeat;         mask-position: -1px 0;         --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");         mask-image: var(--mask-tooltip);       }       @media (prefers-reduced-motion: no-preference) {         & > .tooltip-content,         &[data-tip]:before,         &:after {           transition:             opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,             transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;         }       }       &:is([data-tip]:not([data-tip='']), :has(.tooltip-content:not(:empty))) {         &.tooltip-open,         &:hover,         &:has(:focus-visible) {           & > .tooltip-content,           &[data-tip]:before,           &:after {             opacity: 100%;             --tt-pos: 0rem;             @media (prefers-reduced-motion: no-preference) {               transition:                 opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,                 transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;             }           }         }       }     }     @layer daisyui.l1.l2 {       > .tooltip-content,       &[data-tip]:before {         transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));         inset: auto auto var(--tt-off) 50%;       }       &:after {         transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));         inset: auto auto var(--tt-tail) 50%;       }     }   }   .menu {     @layer daisyui.l1.l2.l3 {       display: flex;       width: fit-content;       flex-direction: column;       flex-wrap: wrap;       padding: calc(0.25rem * 2);       --menu-active-fg: var(--color-neutral-content);       --menu-active-bg: var(--color-neutral);       font-size: 0.875rem;       :where(li ul) {         position: relative;         margin-inline-start: calc(0.25rem * 4);         padding-inline-start: calc(0.25rem * 2);         white-space: nowrap;         &:before {           position: absolute;           inset-inline-start: calc(0.25rem * 0);           top: calc(0.25rem * 3);           bottom: calc(0.25rem * 3);           background-color: var(--color-base-content);           opacity: 10%;           width: var(--border);           content: '';         }       }       :where(li > .menu-dropdown:not(.menu-dropdown-show)) {         display: none;       }       :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),       :where(li:not(.menu-title) > details > summary:not(.menu-title)) {         display: grid;         grid-auto-flow: column;         align-content: flex-start;         align-items: center;         gap: calc(0.25rem * 2);         border-radius: var(--radius-field);         padding-inline: calc(0.25rem * 3);         padding-block: calc(0.25rem * 1.5);         text-align: start;         transition-property: color, background-color, box-shadow;         transition-duration: 0.2s;         transition-timing-function: cubic-bezier(0, 0, 0.2, 1);         grid-auto-columns: minmax(auto, max-content) auto max-content;         text-wrap: balance;         user-select: none;       }       :where(li > details > summary) {         --tw-outline-style: none;         outline-style: none;         @media (forced-colors: active) {           outline: 2px solid transparent;           outline-offset: 2px;         }         &::-webkit-details-marker {           display: none;         }       }       :where(li > details > summary),       :where(li > .menu-dropdown-toggle) {         &:after {           justify-self: flex-end;           display: block;           height: 0.375rem;           width: 0.375rem;           rotate: -135deg;           translate: 0 -1px;           transition-property: rotate, translate;           transition-duration: 0.2s;           content: '';           transform-origin: 50% 50%;           box-shadow: 2px 2px inset;           pointer-events: none;         }       }       details {         overflow: hidden;         interpolate-size: allow-keywords;       }       details::details-content {         block-size: 0;         @media (prefers-reduced-motion: no-preference) {           transition-behavior: allow-discrete;           transition-property: block-size, content-visibility;           transition-duration: 0.2s;           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);         }       }       details[open]::details-content {         block-size: auto;       }       :where(li > details[open] > summary):after,       :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {         rotate: 45deg;         translate: 0 1px;       }       :where(         li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title),         li:not(.menu-title, .disabled) > details > summary:not(.menu-title)       ):not(.menu-active, :active, .btn) {         &.menu-focus,         &:focus-visible {           cursor: pointer;           background-color: var(--color-base-content);           @supports (color: color-mix(in lab, red, red)) {             background-color: color-mix(               in oklab,               var(--color-base-content) 10%,               transparent             );           }           color: var(--color-base-content);           --tw-outline-style: none;           outline-style: none;           @media (forced-colors: active) {             outline: 2px solid transparent;             outline-offset: 2px;           }         }       }       :where(         li:not(.menu-title, .disabled)           > *:not(ul, details, .menu-title):not(             .menu-active,             :active,             .btn           ):hover,         li:not(.menu-title, .disabled)           > details           > summary:not(.menu-title):not(.menu-active, :active, .btn):hover       ) {         cursor: pointer;         background-color: var(--color-base-content);         @supports (color: color-mix(in lab, red, red)) {           background-color: color-mix(             in oklab,             var(--color-base-content) 10%,             transparent           );         }         --tw-outline-style: none;         outline-style: none;         @media (forced-colors: active) {           outline: 2px solid transparent;           outline-offset: 2px;         }         box-shadow:           0 1px oklch(0% 0 0 / 0.01) inset,           0 -1px oklch(100% 0 0 / 0.01) inset;       }       :where(li:empty) {         background-color: var(--color-base-content);         opacity: 10%;         margin: 0.5rem 1rem;         height: 1px;       }       :where(li) {         position: relative;         display: flex;         flex-shrink: 0;         flex-direction: column;         flex-wrap: wrap;         align-items: stretch;         .badge {           justify-self: flex-end;         }         & > *:not(ul, .menu-title, details, .btn):active,         & > *:not(ul, .menu-title, details, .btn).menu-active,         & > details > summary:active {           --tw-outline-style: none;           outline-style: none;           @media (forced-colors: active) {             outline: 2px solid transparent;             outline-offset: 2px;           }           color: var(--menu-active-fg);           background-color: var(--menu-active-bg);           background-size: auto, calc(var(--noise) * 100%);           background-image: none, var(--fx-noise);           &:not(&:active) {             box-shadow: 0 2px calc(var(--depth) * 3px) -2px               var(--menu-active-bg);           }         }         &.menu-disabled {           pointer-events: none;           color: var(--color-base-content);           @supports (color: color-mix(in lab, red, red)) {             color: color-mix(               in oklab,               var(--color-base-content) 20%,               transparent             );           }         }       }       .dropdown:focus-within {         .menu-dropdown-toggle:after {           rotate: 45deg;           translate: 0 1px;         }       }       .dropdown-content {         margin-top: calc(0.25rem * 2);         padding: calc(0.25rem * 2);         &:before {           display: none;         }       }     }   }   .dropdown {     @layer daisyui.l1.l2.l3 {       position: relative;       display: inline-block;       position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);       & > *:not(:has(~ [class*='dropdown-content'])):focus {         --tw-outline-style: none;         outline-style: none;         @media (forced-colors: active) {           outline: 2px solid transparent;           outline-offset: 2px;         }       }       .dropdown-content {         position: absolute;       }       &.dropdown-close .dropdown-content,       &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within)         .dropdown-content,       &.dropdown-hover:not(:hover)         [tabindex]:first-child:focus:not(:focus-visible)         ~ .dropdown-content {         display: none;         transform-origin: top;         opacity: 0%;         scale: 95%;       }       &[popover],       .dropdown-content {         z-index: 999;         @media (prefers-reduced-motion: no-preference) {           animation: dropdown 0.2s;           transition-property: opacity, scale, display;           transition-behavior: allow-discrete;           transition-duration: 0.2s;           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);         }       }       @starting-style {         &[popover],         .dropdown-content {           scale: 95%;           opacity: 0;         }       }       &:not(.dropdown-close) {         &.dropdown-open,         &:not(.dropdown-hover):focus,         &:focus-within {           > [tabindex]:first-child {             pointer-events: none;           }           .dropdown-content {             opacity: 100%;             scale: 100%;           }         }         &.dropdown-hover:hover {           .dropdown-content {             opacity: 100%;             scale: 100%;           }         }       }       &:is(details) {         summary {           &::-webkit-details-marker {             display: none;           }         }       }       &:where([popover]) {         background: #0000;       }       &[popover] {         position: fixed;         color: inherit;         @supports not (position-area: bottom) {           margin: auto;           &.dropdown-close,           &.dropdown-open:not(:popover-open) {             display: none;             transform-origin: top;             opacity: 0%;             scale: 95%;           }           &::backdrop {             background-color: color-mix(in oklab, #000 30%, #0000);           }         }         &.dropdown-close,         &:not(.dropdown-open, :popover-open) {           display: none;           transform-origin: top;           opacity: 0%;           scale: 95%;         }       }     }   }   .btn {     :where(&) {       @layer daisyui.l1.l2.l3 {         width: unset;       }     }     .prose       :where(a&:not(.btn-link)):not(         :where([class~='not-prose'], [class~='not-prose'] *)       ) {       text-decoration-line: none;     }     @layer daisyui.l1.l2.l3 {       display: inline-flex;       flex-shrink: 0;       cursor: pointer;       flex-wrap: nowrap;       align-items: center;       justify-content: center;       gap: calc(0.25rem * 1.5);       text-align: center;       vertical-align: middle;       outline-offset: 2px;       webkit-user-select: none;       user-select: none;       padding-inline: var(--btn-p);       color: var(--btn-fg);       --tw-prose-links: var(--btn-fg);       height: var(--size);       font-size: var(--fontsize, 0.875rem);       font-weight: 600;       outline-color: var(--btn-color, var(--color-base-content));       transition-property: color, background-color, border-color, box-shadow;       transition-timing-function: cubic-bezier(0, 0, 0.2, 1);       transition-duration: 0.2s;       border-start-start-radius: var(--join-ss, var(--radius-field));       border-start-end-radius: var(--join-se, var(--radius-field));       border-end-start-radius: var(--join-es, var(--radius-field));       border-end-end-radius: var(--join-ee, var(--radius-field));       background-color: var(--btn-bg);       background-size: auto, calc(var(--noise) * 100%);       background-image: none, var(--btn-noise);       border-width: var(--border);       border-style: solid;       border-color: var(--btn-border);       text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));       touch-action: manipulation;       box-shadow:         0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset,         var(--btn-shadow);       --size: calc(var(--size-field, 0.25rem) * 10);       --btn-bg: var(--btn-color, var(--color-base-200));       --btn-fg: var(--color-base-content);       --btn-p: 1rem;       --btn-border: var(--btn-bg);       @supports (color: color-mix(in lab, red, red)) {         --btn-border: color-mix(           in oklab,           var(--btn-bg),           #000 calc(var(--depth) * 5%)         );       }       --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg);       @supports (color: color-mix(in lab, red, red)) {         --btn-shadow:           0 3px 2px -2px             color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),           0 4px 3px -2px             color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);       }       --btn-noise: var(--fx-noise);       @media (hover: hover) {         &:hover {           --btn-bg: var(--btn-color, var(--color-base-200));           @supports (color: color-mix(in lab, red, red)) {             --btn-bg: color-mix(               in oklab,               var(--btn-color, var(--color-base-200)),               #000 7%             );           }         }       }       &:focus-visible,       &:has(:focus-visible) {         outline-width: 2px;         outline-style: solid;         isolation: isolate;       }       &:active:not(.btn-active) {         translate: 0 0.5px;         --btn-bg: var(--btn-color, var(--color-base-200));         @supports (color: color-mix(in lab, red, red)) {           --btn-bg: color-mix(             in oklab,             var(--btn-color, var(--color-base-200)),             #000 5%           );         }         --btn-border: var(--btn-color, var(--color-base-200));         @supports (color: color-mix(in lab, red, red)) {           --btn-border: color-mix(             in oklab,             var(--btn-color, var(--color-base-200)),             #000 7%           );         }         --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);       }       &:is(input[type='checkbox'], input[type='radio']) {         appearance: none;         &[aria-label]::after {           --tw-content: attr(aria-label);           content: var(--tw-content);         }       }       &:where(input:checked:not(.filter .btn)) {         --btn-color: var(--color-primary);         --btn-fg: var(--color-primary-content);         isolation: isolate;       }     }     &:disabled {       @layer daisyui.l1.l2 {         &:not(.btn-link, .btn-ghost) {           background-color: var(--color-base-content);           @supports (color: color-mix(in lab, red, red)) {             background-color: color-mix(               in oklab,               var(--color-base-content) 10%,               transparent             );           }           box-shadow: none;         }         pointer-events: none;         --btn-border: #0000;         --btn-noise: none;         --btn-fg: var(--color-base-content);         @supports (color: color-mix(in lab, red, red)) {           --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);         }       }     }     &[disabled] {       @layer daisyui.l1.l2 {         &:not(.btn-link, .btn-ghost) {           background-color: var(--color-base-content);           @supports (color: color-mix(in lab, red, red)) {             background-color: color-mix(               in oklab,               var(--color-base-content) 10%,               transparent             );           }           box-shadow: none;         }         pointer-events: none;         --btn-border: #0000;         --btn-noise: none;         --btn-fg: var(--color-base-content);         @supports (color: color-mix(in lab, red, red)) {           --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);         }       }     }   }   .radial-progress {     @layer daisyui.l1.l2.l3 {       position: relative;       display: inline-grid;       height: var(--size);       width: var(--size);       place-content: center;       border-radius: calc(infinity * 1px);       background-color: transparent;       vertical-align: middle;       box-sizing: content-box;       --value: 0;       --size: 5rem;       --thickness: calc(var(--size) / 10);       --radialprogress: calc(var(--value) * 1%);       transition: --radialprogress 0.3s linear;       &:before {         position: absolute;         inset: calc(0.25rem * 0);         border-radius: calc(infinity * 1px);         content: '';         background:           radial-gradient(farthest-side, currentColor 98%, #0000)             top/var(--thickness) var(--thickness) no-repeat,           conic-gradient(currentColor var(--radialprogress), #0000 0);         webkit-mask: radial-gradient(           farthest-side,           #0000 calc(100% - var(--thickness)),           #000 calc(100% + 0.5px - var(--thickness))         );         mask: radial-gradient(           farthest-side,           #0000 calc(100% - var(--thickness)),           #000 calc(100% + 0.5px - var(--thickness))         );       }       &:after {         position: absolute;         border-radius: calc(infinity * 1px);         background-color: currentcolor;         transition: transform 0.3s linear;         content: '';         inset: calc(50% - var(--thickness) / 2);         transform: rotate(calc(var(--value) * 3.6deg - 90deg))           translate(calc(var(--size) / 2 - 50%));       }     }   }   .list {     @layer daisyui.l1.l2.l3 {       display: flex;       flex-direction: column;       font-size: 0.875rem;       .list-row {         --list-grid-cols: minmax(0, auto) 1fr;         position: relative;         display: grid;         grid-auto-flow: column;         gap: calc(0.25rem * 4);         border-radius: var(--radius-box);         padding: calc(0.25rem * 4);         word-break: break-word;         grid-template-columns: var(--list-grid-cols);       }       & > :not(:last-child) {         &.list-row,         .list-row {           &:after {             content: '';             border-bottom: var(--border) solid;             inset-inline: var(--radius-box);             position: absolute;             bottom: calc(0.25rem * 0);             border-color: var(--color-base-content);             @supports (color: color-mix(in lab, red, red)) {               border-color: color-mix(                 in oklab,                 var(--color-base-content) 5%,                 transparent               );             }           }         }       }     }     @layer daisyui.l1.l2 {       .list-row {         &:has(.list-col-grow:nth-child(1)) {           --list-grid-cols: 1fr;         }         &:has(.list-col-grow:nth-child(2)) {           --list-grid-cols: minmax(0, auto) 1fr;         }         &:has(.list-col-grow:nth-child(3)) {           --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;         }         &:has(.list-col-grow:nth-child(4)) {           --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;         }         &:has(.list-col-grow:nth-child(5)) {           --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto)             minmax(0, auto) 1fr;         }         &:has(.list-col-grow:nth-child(6)) {           --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto)             minmax(0, auto) minmax(0, auto) 1fr;         }         > * {           grid-row-start: 1;         }       }     }   }   .table {     @layer daisyui.l1.l2.l3 {       font-size: 0.875rem;       position: relative;       width: 100%;       border-collapse: separate;       --tw-border-spacing-x: calc(0.25rem * 0);       --tw-border-spacing-y: calc(0.25rem * 0);       border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);       border-radius: var(--radius-box);       text-align: left;       &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *) {         text-align: right;       }       tr.row-hover {         &,         &:nth-child(even) {           &:hover {             @media (hover: hover) {               background-color: var(--color-base-200);             }           }         }       }       :where(th, td) {         padding-inline: calc(0.25rem * 4);         padding-block: calc(0.25rem * 3);         vertical-align: middle;       }       :where(thead, tfoot) {         white-space: nowrap;         color: var(--color-base-content);         @supports (color: color-mix(in lab, red, red)) {           color: color-mix(             in oklab,             var(--color-base-content) 60%,             transparent           );         }         font-size: 0.875rem;         font-weight: 600;       }       :where(tfoot tr:first-child :is(td, th)) {         border-top: var(--border) solid var(--color-base-content);         @supports (color: color-mix(in lab, red, red)) {           border-top: var(--border) solid             color-mix(in oklch, var(--color-base-content) 5%, #0000);         }       }       :where(.table-pin-rows thead tr) {         position: sticky;         top: calc(0.25rem * 0);         z-index: 1;         background-color: var(--color-base-100);       }       :where(.table-pin-rows tfoot tr) {         position: sticky;         bottom: calc(0.25rem * 0);         z-index: 1;         background-color: var(--color-base-100);       }       :where(.table-pin-cols tr th) {         position: sticky;         right: calc(0.25rem * 0);         left: calc(0.25rem * 0);         background-color: var(--color-base-100);       }       :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {         border-bottom: var(--border) solid var(--color-base-content);         @supports (color: color-mix(in lab, red, red)) {           border-bottom: var(--border) solid             color-mix(in oklch, var(--color-base-content) 5%, #0000);         }       }     }   }   .navbar {     @layer daisyui.l1.l2.l3 {       display: flex;       width: 100%;       align-items: center;       padding: 0.5rem;       min-height: 4rem;     }     :where(&) {       @layer daisyui.l1.l2 {         position: relative;       }     }   }   .stats {     @layer daisyui.l1.l2.l3 {       position: relative;       display: inline-grid;       grid-auto-flow: column;       overflow-x: auto;       border-radius: var(--radius-box);     }   }   .progress {     @layer daisyui.l1.l2.l3 {       position: relative;       height: calc(0.25rem * 2);       width: 100%;       appearance: none;       overflow: hidden;       border-radius: var(--radius-box);       background-color: currentcolor;       @supports (color: color-mix(in lab, red, red)) {         background-color: color-mix(in oklab, currentcolor 20%, transparent);       }       color: var(--color-base-content);       &:indeterminate {         background-image: repeating-linear-gradient(           90deg,           currentColor -1%,           currentColor 10%,           #0000 10%,           #0000 90%         );         background-size: 200%;         background-position-x: 15%;         @media (prefers-reduced-motion: no-preference) {           animation: progress 5s ease-in-out infinite;         }         @supports (-moz-appearance: none) {           &::-moz-progress-bar {             background-color: transparent;             @media (prefers-reduced-motion: no-preference) {               animation: progress 5s ease-in-out infinite;               background-image: repeating-linear-gradient(                 90deg,                 currentColor -1%,                 currentColor 10%,                 #0000 10%,                 #0000 90%               );               background-size: 200%;               background-position-x: 15%;             }           }         }       }       @supports (-moz-appearance: none) {         &::-moz-progress-bar {           border-radius: var(--radius-box);           background-color: currentcolor;         }       }       @supports (-webkit-appearance: none) {         &::-webkit-progress-bar {           border-radius: var(--radius-box);           background-color: transparent;         }         &::-webkit-progress-value {           border-radius: var(--radius-box);           background-color: currentColor;         }       }     }   }   .tooltip-left {     @layer daisyui.l1.l2 {       > .tooltip-content,       &[data-tip]:before {         transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem))           translateY(-50%);         inset: 50% var(--tt-off) auto auto;       }       &:after {         transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%)           rotate(-90deg);         inset: 50% calc(var(--tt-tail) + 1px) auto auto;       }     }   }   .tooltip-right {     @layer daisyui.l1.l2 {       > .tooltip-content,       &[data-tip]:before {         transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem))           translateY(-50%);         inset: 50% auto auto var(--tt-off);       }       &:after {         transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%)           rotate(90deg);         inset: 50% auto auto calc(var(--tt-tail) + 1px);       }     }   }   .start {     inset-inline-start: var(--spacing);   }   .dropdown-end {     @layer daisyui.l1.l2 {       --anchor-h: span-left;       :where(.dropdown-content) {         inset-inline-end: calc(0.25rem * 0);         translate: 0 0;         [dir='rtl'] & {           translate: 0 0;         }       }       &.dropdown-left {         --anchor-h: left;         --anchor-v: span-top;         .dropdown-content {           top: auto;           bottom: calc(0.25rem * 0);         }       }       &.dropdown-right {         --anchor-h: right;         --anchor-v: span-top;         .dropdown-content {           top: auto;           bottom: calc(0.25rem * 0);         }       }     }   }   .hero-content {     @layer daisyui.l1.l2.l3 {       isolation: isolate;       display: flex;       max-width: 80rem;       align-items: center;       justify-content: center;       gap: calc(0.25rem * 4);       padding: calc(0.25rem * 4);     }   }   .hero {     @layer daisyui.l1.l2.l3 {       display: grid;       width: 100%;       place-items: center;       background-size: cover;       background-position: center;       & > * {         grid-column-start: 1;         grid-row-start: 1;       }     }   }   .stat-value {     @layer daisyui.l1.l2.l3 {       grid-column-start: 1;       white-space: nowrap;       font-size: 2rem;       font-weight: 800;     }   }   .stat-desc {     @layer daisyui.l1.l2.l3 {       grid-column-start: 1;       white-space: nowrap;       color: var(--color-base-content);       @supports (color: color-mix(in lab, red, red)) {         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);       }       font-size: 0.75rem;     }   }   .stat-title {     @layer daisyui.l1.l2.l3 {       grid-column-start: 1;       white-space: nowrap;       color: var(--color-base-content);       @supports (color: color-mix(in lab, red, red)) {         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);       }       font-size: 0.75rem;     }   }   .divider {     @layer daisyui.l1.l2.l3 {       display: flex;       height: calc(0.25rem * 4);       flex-direction: row;       align-items: center;       align-self: stretch;       white-space: nowrap;       margin: var(--divider-m, 1rem 0);       --divider-color: var(--color-base-content);       @supports (color: color-mix(in lab, red, red)) {         --divider-color: color-mix(           in oklab,           var(--color-base-content) 10%,           transparent         );       }       &:before,       &:after {         content: '';         height: calc(0.25rem * 0.5);         width: 100%;         flex-grow: 1;         background-color: var(--divider-color);       }       @media print {         &:before,         &:after {           border: 0.5px solid;         }       }       &:not(:empty) {         gap: calc(0.25rem * 4);       }     }   }   .m-1 {     margin: calc(var(--spacing) * 1);   }   .label {     @layer daisyui.l1.l2.l3 {       display: inline-flex;       align-items: center;       gap: calc(0.25rem * 1.5);       white-space: nowrap;       color: currentcolor;       @supports (color: color-mix(in lab, red, red)) {         color: color-mix(in oklab, currentcolor 60%, transparent);       }       &:has(input) {         cursor: pointer;       }       &:is(.input > *, .select > *) {         display: flex;         height: calc(100% - 0.5rem);         align-items: center;         padding-inline: calc(0.25rem * 3);         white-space: nowrap;         font-size: inherit;         &:first-child {           margin-inline-start: calc(0.25rem * -3);           margin-inline-end: calc(0.25rem * 3);           border-inline-end: var(--border) solid currentColor;           @supports (color: color-mix(in lab, red, red)) {             border-inline-end: var(--border) solid               color-mix(in oklab, currentColor 10%, #0000);           }         }         &:last-child {           margin-inline-start: calc(0.25rem * 3);           margin-inline-end: calc(0.25rem * -3);           border-inline-start: var(--border) solid currentColor;           @supports (color: color-mix(in lab, red, red)) {             border-inline-start: var(--border) solid               color-mix(in oklab, currentColor 10%, #0000);           }         }       }     }   }   .mt-0 {     margin-top: calc(var(--spacing) * 0);   }   .mt-1 {     margin-top: calc(var(--spacing) * 1);   }   .mt-4 {     margin-top: calc(var(--spacing) * 4);   }   .mr-8 {     margin-right: calc(var(--spacing) * 8);   }   .mb-4 {     margin-bottom: calc(var(--spacing) * 4);   }   .ml-auto {     margin-left: auto;   }   .badge {     @layer daisyui.l1.l2.l3 {       display: inline-flex;       align-items: center;       justify-content: center;       gap: calc(0.25rem * 2);       border-radius: var(--radius-selector);       vertical-align: middle;       color: var(--badge-fg);       border: var(--border) solid var(--badge-color, var(--color-base-200));       font-size: 0.875rem;       width: fit-content;       background-size: auto, calc(var(--noise) * 100%);       background-image: none, var(--fx-noise);       background-color: var(--badge-bg);       --badge-bg: var(--badge-color, var(--color-base-100));       --badge-fg: var(--color-base-content);       --size: calc(var(--size-selector, 0.25rem) * 6);       height: var(--size);       padding-inline: calc(var(--size) / 2 - var(--border));     }   }   .stat {     @layer daisyui.l1.l2.l3 {       display: inline-grid;       width: 100%;       column-gap: calc(0.25rem * 4);       padding-inline: calc(0.25rem * 6);       padding-block: calc(0.25rem * 4);       grid-template-columns: repeat(1, 1fr);       &:not(:last-child) {         border-inline-end: var(--border) dashed currentColor;         @supports (color: color-mix(in lab, red, red)) {           border-inline-end: var(--border) dashed             color-mix(in oklab, currentColor 10%, #0000);         }         border-block-end: none;       }     }   }   .alert {     border-width: var(--border);     border-color: var(--alert-border-color, var(--color-base-200));     @layer daisyui.l1.l2.l3 {       border-style: solid;       --alert-border-color: var(--color-base-200);       display: grid;       align-items: center;       gap: calc(0.25rem * 4);       border-radius: var(--radius-box);       padding-inline: calc(0.25rem * 4);       padding-block: calc(0.25rem * 3);       color: var(--color-base-content);       background-color: var(--alert-color, var(--color-base-200));       justify-content: start;       justify-items: start;       grid-auto-flow: column;       grid-template-columns: auto;       text-align: start;       font-size: 0.875rem;       line-height: 1.25rem;       background-size: auto, calc(var(--noise) * 100%);       background-image: none, var(--fx-noise);       box-shadow:         0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,         0 1px #000,         0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));       @supports (color: color-mix(in lab, red, red)) {         box-shadow:           0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset,           0 1px             color-mix(               in oklab,               color-mix(                   in oklab,                   #000 20%,                   var(--alert-color, var(--color-base-200))                 )                 calc(var(--depth) * 20%),               #0000             ),           0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));       }       &:has(:nth-child(2)) {         grid-template-columns: auto minmax(auto, 1fr);       }     }   }   .flex {     display: flex;   }   .hidden {     display: none;   }   .inline-block {     display: inline-block;   }   .table {     display: table;   }   .divider-horizontal {     @layer daisyui.l1.l2 {       --divider-m: 0 1rem;       &.divider {         height: auto;         width: calc(0.25rem * 4);         flex-direction: column;         &:before {           height: 100%;           width: calc(0.25rem * 0.5);         }         &:after {           height: 100%;           width: calc(0.25rem * 0.5);         }       }     }   }   .btn-square {     @layer daisyui.l1.l2 {       padding-inline: calc(0.25rem * 0);       width: var(--size);       height: var(--size);     }   }   .h-5 {     height: calc(var(--spacing) * 5);   }   .h-6 {     height: calc(var(--spacing) * 6);   }   .h-8 {     height: calc(var(--spacing) * 8);   }   .min-h-screen {     min-height: 100vh;   }   .w-5 {     width: calc(var(--spacing) * 5);   }   .w-6 {     width: calc(var(--spacing) * 6);   }   .w-8 {     width: calc(var(--spacing) * 8);   }   .w-40 {     width: calc(var(--spacing) * 40);   }   .w-52 {     width: calc(var(--spacing) * 52);   }   .w-auto {     width: auto;   }   .w-full {     width: 100%;   }   .max-w-md {     max-width: var(--container-md);   }   .flex-1 {     flex: 1;   }   .flex-auto {     flex: auto;   }   .flex-none {     flex: none;   }   .flex-shrink-0 {     flex-shrink: 0;   }   .stats-vertical {     @layer daisyui.l1.l2 {       grid-auto-flow: row;       overflow-y: auto;       .stat:not(:last-child) {         border-inline-end: none;         border-block-end: var(--border) dashed currentColor;         @supports (color: color-mix(in lab, red, red)) {           border-block-end: var(--border) dashed             color-mix(in oklab, currentColor 10%, #0000);         }       }     }   }   .flex-col {     flex-direction: column;   }   .flex-row {     flex-direction: row;   }   .flex-nowrap {     flex-wrap: nowrap;   }   .items-center {     align-items: center;   }   .items-start {     align-items: flex-start;   }   .justify-between {     justify-content: space-between;   }   .gap-1 {     gap: calc(var(--spacing) * 1);   }   .gap-2 {     gap: calc(var(--spacing) * 2);   }   .gap-4 {     gap: calc(var(--spacing) * 4);   }   .overflow-x-auto {     overflow-x: auto;   }   .rounded-md {     border-radius: var(--radius-md);   }   .bg-accent {     background-color: var(--color-accent);   }   .bg-base-100 {     background-color: var(--color-base-100);   }   .bg-base-200 {     background-color: var(--color-base-200);   }   .bg-clrs-slate {     background-color: var(--clrs-slate, #708090);   }   .bg-neutral {     background-color: var(--color-neutral);   }   .bg-secondary {     background-color: var(--color-secondary);   }   .fill-current {     fill: currentcolor;   }   .stroke-current {     stroke: currentcolor;   }   .p-2 {     padding: calc(var(--spacing) * 2);   }   .p-4 {     padding: calc(var(--spacing) * 4);   }   .py-6 {     padding-block: calc(var(--spacing) * 6);   }   .pt-0 {     padding-top: calc(var(--spacing) * 0);   }   .text-center {     text-align: center;   }   .font-sans {     font-family: var(--font-sans);   }   .text-5xl {     font-size: var(--text-5xl);     line-height: var(--tw-leading, var(--text-5xl--line-height));   }   .text-xl {     font-size: var(--text-xl);     line-height: var(--tw-leading, var(--text-xl--line-height));   }   .font-bold {     --tw-font-weight: var(--font-weight-bold);     font-weight: var(--font-weight-bold);   }   .alert-info {     @layer daisyui.l1.l2 {       color: var(--color-info-content);       --alert-border-color: var(--color-info);       --alert-color: var(--color-info);     }   }   .tooltip-warning {     @layer daisyui.l1.l2 {       --tt-bg: var(--color-warning);       > .tooltip-content,       &[data-tip]:before {         color: var(--color-warning-content);       }     }   }   .text-accent-content {     color: var(--color-accent-content);   }   .text-neutral-content {     color: var(--color-neutral-content);   }   .text-secondary {     color: var(--color-secondary);   }   .text-secondary-content {     color: var(--color-secondary-content);   }   .normal-case {     text-transform: none;   }   .shadow {     --tw-shadow:       0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),       0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));     box-shadow:       var(--tw-inset-shadow), var(--tw-inset-ring-shadow),       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);   }   .shadow-lg {     --tw-shadow:       0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),       0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));     box-shadow:       var(--tw-inset-shadow), var(--tw-inset-ring-shadow),       var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);   }   .btn-ghost {     @layer daisyui.l1 {       &:not(         .btn-active,         :hover,         :active:focus,         :focus-visible,         input:checked:not(.filter .btn)       ) {         --btn-shadow: '';         --btn-bg: #0000;         --btn-border: #0000;         --btn-noise: none;         &:not(:disabled, [disabled], .btn-disabled) {           outline-color: currentcolor;           --btn-fg: var(--btn-color, currentColor);         }       }       @media (hover: none) {         &:not(             .btn-active,             :active,             :focus-visible,             input:checked:not(.filter .btn)           ):hover {           outline-color: currentcolor;           --btn-shadow: '';           --btn-bg: #0000;           --btn-fg: var(--btn-color, currentColor);           --btn-border: #0000;           --btn-noise: none;         }       }     }   }   .btn-primary {     @layer daisyui.l1.l2.l3 {       --btn-color: var(--color-primary);       --btn-fg: var(--color-primary-content);     }   }   .lg\\:flex {     @media (width >= 64rem) {       display: flex;     }   }   .lg\\:inline-block {     @media (width >= 64rem) {       display: inline-block;     }   }   .lg\\:stats-horizontal {     @media (width >= 64rem) {       @layer daisyui.l1.l2 {         grid-auto-flow: column;         overflow-x: auto;         .stat:not(:last-child) {           border-inline-end: var(--border) dashed currentColor;           @supports (color: color-mix(in lab, red, red)) {             border-inline-end: var(--border) dashed               color-mix(in oklab, currentColor 10%, #0000);           }           border-block-end: none;         }       }     }   } } @layer base {   :where(:root),   :root:has(input.theme-controller[value='light']:checked),   [data-theme='light'] {     color-scheme: light;     --color-base-100: oklch(100% 0 0);     --color-base-200: oklch(98% 0 0);     --color-base-300: oklch(95% 0 0);     --color-base-content: oklch(21% 0.006 285.885);     --color-primary: oklch(45% 0.24 277.023);     --color-primary-content: oklch(93% 0.034 272.788);     --color-secondary: oklch(65% 0.241 354.308);     --color-secondary-content: oklch(94% 0.028 342.258);     --color-accent: oklch(77% 0.152 181.912);     --color-accent-content: oklch(38% 0.063 188.416);     --color-neutral: oklch(14% 0.005 285.823);     --color-neutral-content: oklch(92% 0.004 286.32);     --color-info: oklch(74% 0.16 232.661);     --color-info-content: oklch(29% 0.066 243.157);     --color-success: oklch(76% 0.177 163.223);     --color-success-content: oklch(37% 0.077 168.94);     --color-warning: oklch(82% 0.189 84.429);     --color-warning-content: oklch(41% 0.112 45.904);     --color-error: oklch(71% 0.194 13.428);     --color-error-content: oklch(27% 0.105 12.094);     --radius-selector: 0.5rem;     --radius-field: 0.25rem;     --radius-box: 0.5rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 1;     --noise: 0;   } } @layer base {   @media (prefers-color-scheme: dark) {     :root:not([data-theme]) {       color-scheme: dark;       --color-base-100: oklch(25.33% 0.016 252.42);       --color-base-200: oklch(23.26% 0.014 253.1);       --color-base-300: oklch(21.15% 0.012 254.09);       --color-base-content: oklch(97.807% 0.029 256.847);       --color-primary: oklch(58% 0.233 277.117);       --color-primary-content: oklch(96% 0.018 272.314);       --color-secondary: oklch(65% 0.241 354.308);       --color-secondary-content: oklch(94% 0.028 342.258);       --color-accent: oklch(77% 0.152 181.912);       --color-accent-content: oklch(38% 0.063 188.416);       --color-neutral: oklch(14% 0.005 285.823);       --color-neutral-content: oklch(92% 0.004 286.32);       --color-info: oklch(74% 0.16 232.661);       --color-info-content: oklch(29% 0.066 243.157);       --color-success: oklch(76% 0.177 163.223);       --color-success-content: oklch(37% 0.077 168.94);       --color-warning: oklch(82% 0.189 84.429);       --color-warning-content: oklch(41% 0.112 45.904);       --color-error: oklch(71% 0.194 13.428);       --color-error-content: oklch(27% 0.105 12.094);       --radius-selector: 0.5rem;       --radius-field: 0.25rem;       --radius-box: 0.5rem;       --size-selector: 0.25rem;       --size-field: 0.25rem;       --border: 1px;       --depth: 1;       --noise: 0;     }   } } @layer base {   :root:has(input.theme-controller[value='light']:checked),   [data-theme='light'] {     color-scheme: light;     --color-base-100: oklch(100% 0 0);     --color-base-200: oklch(98% 0 0);     --color-base-300: oklch(95% 0 0);     --color-base-content: oklch(21% 0.006 285.885);     --color-primary: oklch(45% 0.24 277.023);     --color-primary-content: oklch(93% 0.034 272.788);     --color-secondary: oklch(65% 0.241 354.308);     --color-secondary-content: oklch(94% 0.028 342.258);     --color-accent: oklch(77% 0.152 181.912);     --color-accent-content: oklch(38% 0.063 188.416);     --color-neutral: oklch(14% 0.005 285.823);     --color-neutral-content: oklch(92% 0.004 286.32);     --color-info: oklch(74% 0.16 232.661);     --color-info-content: oklch(29% 0.066 243.157);     --color-success: oklch(76% 0.177 163.223);     --color-success-content: oklch(37% 0.077 168.94);     --color-warning: oklch(82% 0.189 84.429);     --color-warning-content: oklch(41% 0.112 45.904);     --color-error: oklch(71% 0.194 13.428);     --color-error-content: oklch(27% 0.105 12.094);     --radius-selector: 0.5rem;     --radius-field: 0.25rem;     --radius-box: 0.5rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 1;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='dark']:checked),   [data-theme='dark'] {     color-scheme: dark;     --color-base-100: oklch(25.33% 0.016 252.42);     --color-base-200: oklch(23.26% 0.014 253.1);     --color-base-300: oklch(21.15% 0.012 254.09);     --color-base-content: oklch(97.807% 0.029 256.847);     --color-primary: oklch(58% 0.233 277.117);     --color-primary-content: oklch(96% 0.018 272.314);     --color-secondary: oklch(65% 0.241 354.308);     --color-secondary-content: oklch(94% 0.028 342.258);     --color-accent: oklch(77% 0.152 181.912);     --color-accent-content: oklch(38% 0.063 188.416);     --color-neutral: oklch(14% 0.005 285.823);     --color-neutral-content: oklch(92% 0.004 286.32);     --color-info: oklch(74% 0.16 232.661);     --color-info-content: oklch(29% 0.066 243.157);     --color-success: oklch(76% 0.177 163.223);     --color-success-content: oklch(37% 0.077 168.94);     --color-warning: oklch(82% 0.189 84.429);     --color-warning-content: oklch(41% 0.112 45.904);     --color-error: oklch(71% 0.194 13.428);     --color-error-content: oklch(27% 0.105 12.094);     --radius-selector: 0.5rem;     --radius-field: 0.25rem;     --radius-box: 0.5rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 1;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='aqua']:checked),   [data-theme='aqua'] {     color-scheme: dark;     --color-base-100: oklch(37% 0.146 265.522);     --color-base-200: oklch(28% 0.091 267.935);     --color-base-300: oklch(22% 0.091 267.935);     --color-base-content: oklch(90% 0.058 230.902);     --color-primary: oklch(85.661% 0.144 198.645);     --color-primary-content: oklch(40.124% 0.068 197.603);     --color-secondary: oklch(60.682% 0.108 309.782);     --color-secondary-content: oklch(96% 0.016 293.756);     --color-accent: oklch(93.426% 0.102 94.555);     --color-accent-content: oklch(18.685% 0.02 94.555);     --color-neutral: oklch(27% 0.146 265.522);     --color-neutral-content: oklch(80% 0.146 265.522);     --color-info: oklch(54.615% 0.215 262.88);     --color-info-content: oklch(90.923% 0.043 262.88);     --color-success: oklch(62.705% 0.169 149.213);     --color-success-content: oklch(12.541% 0.033 149.213);     --color-warning: oklch(66.584% 0.157 58.318);     --color-warning-content: oklch(27% 0.077 45.635);     --color-error: oklch(73.95% 0.19 27.33);     --color-error-content: oklch(14.79% 0.038 27.33);     --radius-selector: 1rem;     --radius-field: 0.5rem;     --radius-box: 1rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 1;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='business']:checked),   [data-theme='business'] {     color-scheme: dark;     --color-base-100: oklch(24.353% 0 0);     --color-base-200: oklch(22.648% 0 0);     --color-base-300: oklch(20.944% 0 0);     --color-base-content: oklch(84.87% 0 0);     --color-primary: oklch(41.703% 0.099 251.473);     --color-primary-content: oklch(88.34% 0.019 251.473);     --color-secondary: oklch(64.092% 0.027 229.389);     --color-secondary-content: oklch(12.818% 0.005 229.389);     --color-accent: oklch(67.271% 0.167 35.791);     --color-accent-content: oklch(13.454% 0.033 35.791);     --color-neutral: oklch(27.441% 0.013 253.041);     --color-neutral-content: oklch(85.488% 0.002 253.041);     --color-info: oklch(62.616% 0.143 240.033);     --color-info-content: oklch(12.523% 0.028 240.033);     --color-success: oklch(70.226% 0.094 156.596);     --color-success-content: oklch(14.045% 0.018 156.596);     --color-warning: oklch(77.482% 0.115 81.519);     --color-warning-content: oklch(15.496% 0.023 81.519);     --color-error: oklch(51.61% 0.146 29.674);     --color-error-content: oklch(90.322% 0.029 29.674);     --radius-selector: 0rem;     --radius-field: 0.25rem;     --radius-box: 0.25rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 0;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='corporate']:checked),   [data-theme='corporate'] {     color-scheme: light;     --color-base-100: oklch(100% 0 0);     --color-base-200: oklch(93% 0 0);     --color-base-300: oklch(86% 0 0);     --color-base-content: oklch(22.389% 0.031 278.072);     --color-primary: oklch(58% 0.158 241.966);     --color-primary-content: oklch(100% 0 0);     --color-secondary: oklch(55% 0.046 257.417);     --color-secondary-content: oklch(100% 0 0);     --color-accent: oklch(60% 0.118 184.704);     --color-accent-content: oklch(100% 0 0);     --color-neutral: oklch(0% 0 0);     --color-neutral-content: oklch(100% 0 0);     --color-info: oklch(60% 0.126 221.723);     --color-info-content: oklch(100% 0 0);     --color-success: oklch(62% 0.194 149.214);     --color-success-content: oklch(100% 0 0);     --color-warning: oklch(85% 0.199 91.936);     --color-warning-content: oklch(0% 0 0);     --color-error: oklch(70% 0.191 22.216);     --color-error-content: oklch(0% 0 0);     --radius-selector: 0.25rem;     --radius-field: 0.25rem;     --radius-box: 0.25rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 0;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='fantasy']:checked),   [data-theme='fantasy'] {     color-scheme: light;     --color-base-100: oklch(100% 0 0);     --color-base-200: oklch(93% 0 0);     --color-base-300: oklch(86% 0 0);     --color-base-content: oklch(27.807% 0.029 256.847);     --color-primary: oklch(37.45% 0.189 325.02);     --color-primary-content: oklch(87.49% 0.037 325.02);     --color-secondary: oklch(53.92% 0.162 241.36);     --color-secondary-content: oklch(90.784% 0.032 241.36);     --color-accent: oklch(75.98% 0.204 56.72);     --color-accent-content: oklch(15.196% 0.04 56.72);     --color-neutral: oklch(27.807% 0.029 256.847);     --color-neutral-content: oklch(85.561% 0.005 256.847);     --color-info: oklch(72.06% 0.191 231.6);     --color-info-content: oklch(0% 0 0);     --color-success: oklch(64.8% 0.15 160);     --color-success-content: oklch(0% 0 0);     --color-warning: oklch(84.71% 0.199 83.87);     --color-warning-content: oklch(0% 0 0);     --color-error: oklch(71.76% 0.221 22.18);     --color-error-content: oklch(0% 0 0);     --radius-selector: 1rem;     --radius-field: 0.5rem;     --radius-box: 1rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 1;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='night']:checked),   [data-theme='night'] {     color-scheme: dark;     --color-base-100: oklch(20.768% 0.039 265.754);     --color-base-200: oklch(19.314% 0.037 265.754);     --color-base-300: oklch(17.86% 0.034 265.754);     --color-base-content: oklch(84.153% 0.007 265.754);     --color-primary: oklch(75.351% 0.138 232.661);     --color-primary-content: oklch(15.07% 0.027 232.661);     --color-secondary: oklch(68.011% 0.158 276.934);     --color-secondary-content: oklch(13.602% 0.031 276.934);     --color-accent: oklch(72.36% 0.176 350.048);     --color-accent-content: oklch(14.472% 0.035 350.048);     --color-neutral: oklch(27.949% 0.036 260.03);     --color-neutral-content: oklch(85.589% 0.007 260.03);     --color-info: oklch(68.455% 0.148 237.251);     --color-info-content: oklch(0% 0 0);     --color-success: oklch(78.452% 0.132 181.911);     --color-success-content: oklch(15.69% 0.026 181.911);     --color-warning: oklch(83.242% 0.139 82.95);     --color-warning-content: oklch(16.648% 0.027 82.95);     --color-error: oklch(71.785% 0.17 13.118);     --color-error-content: oklch(14.357% 0.034 13.118);     --radius-selector: 1rem;     --radius-field: 0.5rem;     --radius-box: 1rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 0;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='winter']:checked),   [data-theme='winter'] {     color-scheme: light;     --color-base-100: oklch(100% 0 0);     --color-base-200: oklch(97.466% 0.011 259.822);     --color-base-300: oklch(93.268% 0.016 262.751);     --color-base-content: oklch(41.886% 0.053 255.824);     --color-primary: oklch(56.86% 0.255 257.57);     --color-primary-content: oklch(91.372% 0.051 257.57);     --color-secondary: oklch(42.551% 0.161 282.339);     --color-secondary-content: oklch(88.51% 0.032 282.339);     --color-accent: oklch(59.939% 0.191 335.171);     --color-accent-content: oklch(11.988% 0.038 335.171);     --color-neutral: oklch(19.616% 0.063 257.651);     --color-neutral-content: oklch(83.923% 0.012 257.651);     --color-info: oklch(88.127% 0.085 214.515);     --color-info-content: oklch(17.625% 0.017 214.515);     --color-success: oklch(80.494% 0.077 197.823);     --color-success-content: oklch(16.098% 0.015 197.823);     --color-warning: oklch(89.172% 0.045 71.47);     --color-warning-content: oklch(17.834% 0.009 71.47);     --color-error: oklch(73.092% 0.11 20.076);     --color-error-content: oklch(14.618% 0.022 20.076);     --radius-selector: 1rem;     --radius-field: 0.5rem;     --radius-box: 1rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 0;     --noise: 0;   } } @layer base {   :root:has(input.theme-controller[value='wireframe']:checked),   [data-theme='wireframe'] {     color-scheme: light;     --color-base-100: oklch(100% 0 0);     --color-base-200: oklch(97% 0 0);     --color-base-300: oklch(94% 0 0);     --color-base-content: oklch(20% 0 0);     --color-primary: oklch(87% 0 0);     --color-primary-content: oklch(26% 0 0);     --color-secondary: oklch(87% 0 0);     --color-secondary-content: oklch(26% 0 0);     --color-accent: oklch(87% 0 0);     --color-accent-content: oklch(26% 0 0);     --color-neutral: oklch(87% 0 0);     --color-neutral-content: oklch(26% 0 0);     --color-info: oklch(44% 0.11 240.79);     --color-info-content: oklch(90% 0.058 230.902);     --color-success: oklch(43% 0.095 166.913);     --color-success-content: oklch(90% 0.093 164.15);     --color-warning: oklch(47% 0.137 46.201);     --color-warning-content: oklch(92% 0.12 95.746);     --color-error: oklch(44% 0.177 26.899);     --color-error-content: oklch(88% 0.062 18.334);     --radius-selector: 0rem;     --radius-field: 0.25rem;     --radius-box: 0.25rem;     --size-selector: 0.25rem;     --size-field: 0.25rem;     --border: 1px;     --depth: 0;     --noise: 0;   } } @layer base {   :root {     --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");   } } @layer base {   :root {     scrollbar-color: currentColor #0000;     @supports (color: color-mix(in lab, red, red)) {       scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;     }   } } @layer base {   @property --radialprogress {     syntax: '<percentage>';     inherits: true;     initial-value: 0%;   } } @layer base {   :root:not(span) {     overflow: var(--page-overflow);   } } @layer base {   :root {     background: var(--page-scroll-bg, var(--root-bg));     --page-scroll-bg-on: linear-gradient(         var(--root-bg, #0000),         var(--root-bg, #0000)       )       var(--root-bg, #0000);     @supports (color: color-mix(in lab, red, red)) {       --page-scroll-bg-on: linear-gradient(           var(--root-bg, #0000),           var(--root-bg, #0000)         )         color-mix(           in srgb,           var(--root-bg, #0000),           oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)         );     }     --page-scroll-transition-on: background-color 0.3s ease-out;     transition: var(--page-scroll-transition);     scrollbar-gutter: var(--page-scroll-gutter, unset);     scrollbar-gutter: if(       style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ;         else: unset     );   }   @keyframes set-page-has-scroll {     0%,     to {       --page-has-scroll: 1;     }   } } @layer base {   :root,   [data-theme] {     background: var(--page-scroll-bg, var(--root-bg));     color: var(--color-base-content);   }   :where(:root, [data-theme]) {     --root-bg: var(--color-base-100);   } } @keyframes rating {   0%,   40% {     scale: 1.1;     filter: brightness(1.05) contrast(1.05);   } } @keyframes dropdown {   0% {     opacity: 0;   } } @keyframes radio {   0% {     padding: 5px;   }   50% {     padding: 3px;   } } @keyframes toast {   0% {     scale: 0.9;     opacity: 0;   }   100% {     scale: 1;     opacity: 1;   } } @keyframes rotator {   89.9999%,   100% {     --first-item-position: 0 0%;   }   90%,   99.9999% {     --first-item-position: 0 calc(var(--items) * 100%);   }   100% {     translate: 0 -100%;   } } @keyframes skeleton {   0% {     background-position: 150%;   }   100% {     background-position: -50%;   } } @keyframes menu {   0% {     opacity: 0;   } } @keyframes progress {   50% {     background-position-x: -115%;   } } `;
 

package/dist/cjs/proto-daisy-ui.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
+var index = require('./index-H5EhhFIy.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/proto-dial.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
+var index = require('./index-H5EhhFIy.js');
 
 const protoDialCss = () => ``;
 

package/dist/cjs/proto-hero.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
-var store = require('./store-DdlBAY0E.js');
+var index = require('./index-H5EhhFIy.js');
+var store = require('./store-BWDTpfEh.js');
 
 const protoHeroCss = () => `proto-hero{}`;
 

package/dist/cjs/proto-home.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
-var store = require('./store-DdlBAY0E.js');
+var index = require('./index-H5EhhFIy.js');
+var store = require('./store-BWDTpfEh.js');
 
 const protoHomeCss = () => ``;
 

package/dist/cjs/proto-list.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
-var store = require('./store-DdlBAY0E.js');
+var index = require('./index-H5EhhFIy.js');
+var store = require('./store-BWDTpfEh.js');
 
 const protoListCss = () => ``;
 

package/dist/cjs/proto-shell.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
-var store = require('./store-DdlBAY0E.js');
+var index = require('./index-H5EhhFIy.js');
+var store = require('./store-BWDTpfEh.js');
 
 const tw = (...classes) => {
     return classes.filter(Boolean).join(' ');

package/dist/cjs/proto-stats.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
-var store = require('./store-DdlBAY0E.js');
+var index = require('./index-H5EhhFIy.js');
+var store = require('./store-BWDTpfEh.js');
 
 const protoStatsCss = () => ``;
 

package/dist/cjs/{store-DdlBAY0E.js → store-BWDTpfEh.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BGPKPYoe.js');
+var index = require('./index-H5EhhFIy.js');
 
 const KEY = 'proto-daisy-ui:app-data';
 const promisedParseJSON = (json) => {

package/dist/collection/collection-manifest.json

@@ -11,7 +11,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.3",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/esm/{index-DfVczL5A.js → index-Dnj0d8vr.js}

@@ -3,7 +3,7 @@ const BUILD = /* proto-daisy-ui */ { allRenderFn: true, appendChildSlotFix: fals
 const Env = /* proto-daisy-ui */ {};
 
 /*
- Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 
 var Build = {
@@ -2112,6 +2112,31 @@ var getMode = (ref) => {
   return (_a = getHostRef(ref)) == null ? void 0 : _a.$modeName$;
 };
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -2208,11 +2233,19 @@ var RemoteValue = class _RemoteValue {
 };
 
 // src/utils/serialize.ts
+function decodeBase64Unicode(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i2 = 0; i2 < binary.length; i2++) {
+    bytes[i2] = binary.charCodeAt(i2);
+  }
+  return new TextDecoder().decode(bytes);
+}
 function deserializeProperty(value) {
   if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }
 
 // src/runtime/parse-property-value.ts
@@ -3510,7 +3543,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   if (BUILD.member && cmpMeta.$members$ || BUILD.propChangeCallback) {
     if (BUILD.propChangeCallback) {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -3688,11 +3721,13 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+          if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -3740,7 +3775,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (BUILD.member && !Cstr.isProxied) {
           if (BUILD.propChangeCallback) {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -3952,7 +3987,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       cmpMeta.$listeners$ = compactMeta[3];
     }
     if (BUILD.propChangeCallback) {
-      cmpMeta.$watchers$ = Cstr.$watchers$;
+      cmpMeta.$watchers$ = normalizeWatchers(Cstr.$watchers$);
       cmpMeta.$deserializers$ = Cstr.$deserializers$;
       cmpMeta.$serializers$ = Cstr.$serializers$;
     }
@@ -4108,7 +4143,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2, _b, _c;
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -4128,9 +4163,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpMeta.$attrsToReflect$ = [];
       }
       if (BUILD.propChangeCallback) {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
-        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
       }
       if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
@@ -4338,15 +4373,21 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
 // src/runtime/render.ts
+var hostRefCache = /* @__PURE__ */ new WeakMap();
 function render(vnode, container) {
-  const cmpMeta = {
-    $flags$: 0,
-    $tagName$: container.tagName
-  };
-  const ref = {
-    $cmpMeta$: cmpMeta,
-    $hostElement$: container
-  };
+  let ref = hostRefCache.get(container);
+  if (!ref) {
+    const cmpMeta = {
+      $flags$: 0,
+      $tagName$: container.tagName
+    };
+    ref = {
+      $flags$: 0,
+      $cmpMeta$: cmpMeta,
+      $hostElement$: container
+    };
+    hostRefCache.set(container, ref);
+  }
   renderVdom(ref, vnode);
 }
 
@@ -4602,6 +4643,7 @@ var StencilCore = /*#__PURE__*/Object.freeze({
   modeResolutionChain: modeResolutionChain,
   needsScopedSSR: needsScopedSSR,
   nextTick: nextTick,
+  normalizeWatchers: normalizeWatchers,
   parsePropertyValue: parsePropertyValue,
   plt: plt,
   postUpdateComponent: postUpdateComponent,

package/dist/esm/loader.js

@@ -1,5 +1,5 @@
-import { b as bootstrapLazy } from './index-DfVczL5A.js';
-export { s as setNonce } from './index-DfVczL5A.js';
+import { b as bootstrapLazy } from './index-Dnj0d8vr.js';
+export { s as setNonce } from './index-Dnj0d8vr.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {