@editora/ui-core 0.1.21 → 0.1.23

package/dist/{ui-button-rXQOS9QJ.js → ui-button-BPrzJScZ.js}

@@ -1,4 +1,4 @@
-"use strict";const D=require("./ElementBase-EV6mVBUV.js");require("./ui-icon-BzVNC_lr.js");const F=`
+"use strict";const P=require("./ElementBase-DxbvhLJs.js");require("./ui-icon-D3avtxX_.js");const I=`
   :host {
     --ui-btn-radius: var(--ui-control-radius, var(--ui-radius, 4px));
     --ui-btn-min-height: var(--ui-control-min-height, var(--base-button-height-md, 40px));
@@ -17,7 +17,7 @@
     --ui-btn-surface: var(--ui-color-surface, #ffffff);
     --ui-btn-surface-alt: var(--ui-color-surface-alt, #f8fafc);
     --ui-btn-text: var(--ui-color-text, #0f172a);
-    --ui-btn-muted: var(--ui-color-muted, #64748b);
+    --ui-btn-muted: var(--ui-color-muted, #526175);
     --ui-btn-ring: var(--ui-color-focus-ring, #2563eb);
 
     display: inline-flex;
@@ -33,7 +33,7 @@
   }
 
   :host([tone="neutral"]) {
-    --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+    --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #526175) 74%, var(--ui-color-text, #0f172a) 26%);
   }
 
   :host([tone="info"]) {
@@ -41,11 +41,11 @@
   }
 
   :host([tone="success"]) {
-    --ui-btn-accent: var(--ui-color-success, #16a34a);
+    --ui-btn-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-btn-accent: var(--ui-color-warning, #d97706);
+    --ui-btn-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -57,7 +57,7 @@
   }
 
   :host([state="success"]) {
-    --ui-btn-accent: var(--ui-color-success, #16a34a);
+    --ui-btn-accent: var(--ui-color-success, #15803d);
   }
 
   :host([theme="dark"]) {
@@ -85,8 +85,8 @@
   }
 
   :host([recipe="soft"]) {
-    --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, white);
-    --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, white);
+    --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, var(--ui-color-surface, #ffffff));
   }
 
   :host([recipe="soft"]) .btn--secondary {
@@ -229,7 +229,8 @@
 
   .btn--primary {
     background: var(--ui-btn-accent);
-    color: #ffffff;
+    /* The theme's text colour for a primary fill: the default theme's amber needs dark text. */
+    color: var(--ui-color-foreground-on-primary, #ffffff);
     border-color: color-mix(in srgb, var(--ui-btn-accent) 74%, #0f172a 26%);
     box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
   }
@@ -240,7 +241,7 @@
 
   .btn--secondary {
     background: var(--ui-btn-surface);
-    color: color-mix(in srgb, var(--ui-btn-accent) 78%, var(--ui-btn-text) 22%);
+    color: color-mix(in srgb, var(--ui-btn-accent) 50%, var(--ui-btn-text) 50%);
     border-color: color-mix(in srgb, var(--ui-btn-accent) 22%, var(--ui-btn-muted));
     box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
   }
@@ -251,7 +252,7 @@
 
   .btn--ghost {
     background: transparent;
-    color: color-mix(in srgb, var(--ui-btn-accent) 80%, var(--ui-btn-text) 20%);
+    color: color-mix(in srgb, var(--ui-btn-accent) 50%, var(--ui-btn-text) 50%);
     border-color: transparent;
     box-shadow: none;
   }
@@ -272,25 +273,25 @@
   }
 
   .btn--success {
-    background: var(--ui-color-success, #16a34a);
+    background: var(--ui-color-success, #15803d);
     color: #ffffff;
-    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 70%, #0f172a 30%);
-    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #16a34a) 20%, transparent);
+    border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 70%, #0f172a 30%);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #15803d) 20%, transparent);
   }
 
   .btn--success:hover:not([disabled]) {
-    background: color-mix(in srgb, var(--ui-color-success, #16a34a) 86%, #0f172a 14%);
+    background: color-mix(in srgb, var(--ui-color-success, #15803d) 86%, #0f172a 14%);
   }
 
   .btn--warning {
-    background: var(--ui-color-warning, #d97706);
+    background: var(--ui-color-warning, #b45309);
     color: #ffffff;
-    border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 70%, #0f172a 30%);
-    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #d97706) 18%, transparent);
+    border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, #0f172a 30%);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #b45309) 18%, transparent);
   }
 
   .btn--warning:hover:not([disabled]) {
-    background: color-mix(in srgb, var(--ui-color-warning, #d97706) 86%, #0f172a 14%);
+    background: color-mix(in srgb, var(--ui-color-warning, #b45309) 86%, #0f172a 14%);
   }
 
   :host([size="sm"]) {
@@ -318,7 +319,7 @@
   }
 
   :host([state="success"]) .btn:not([disabled]) {
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #15803d) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
   }
 
   :host([data-animation]) .btn:not([disabled]):hover {
@@ -501,21 +502,21 @@
       color: HighlightText;
     }
   }
-`;function _(t){return t!==null&&t.toLowerCase()!=="false"&&t!=="0"}function I(t){return t==="secondary"||t==="ghost"||t==="danger"||t==="success"||t==="warning"?t:"primary"}function U(t){return t==="sm"||t==="lg"?t:"md"}function S(t){return t==="scale"||t==="pulse"||t==="none"?t:null}function N(t){return t==="neutral"||t==="info"||t==="success"||t==="warning"||t==="danger"?t:null}function G(t){return t==="loading"||t==="error"||t==="success"?t:"idle"}function $(t){return t==="submit"||t==="reset"?t:"button"}function J(t){return t==="classic"||t==="solid"||t==="soft"||t==="surface"||t==="outline"||t==="ghost"?t:null}function K(t){return t==="none"||t==="sm"||t==="md"||t==="lg"||t==="full"?t:null}function Q(t){return t==="1"||t==="2"||t==="3"||t==="4"?t:null}function V(t){if(!t)return null;const n=t.trim();return n?n==="full"?"999px":/^-?\d+(\.\d+)?$/.test(n)?`${n}px`:n:null}function r(t,n){const e=t.getAttribute(n);if(e!=null)return e;const i=t[n];return typeof i=="string"&&i.length>0?i:null}function c(t,n){const e=t.getAttribute(n);if(e!=null)return _(e);const i=t[n];return typeof i=="boolean"?i:typeof i=="string"?_(i):!1}function u(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(t,n){return!!t.querySelector(`[slot="${n}"]`)}function W(t,n){if(n==="button")return;const e=t.closest("form");if(!e)return;if(n==="reset"){e.reset();return}if(typeof e.requestSubmit=="function"){e.requestSubmit();return}const i=new Event("submit",{bubbles:!0,cancelable:!0});e.dispatchEvent(i)}class E extends D.ElementBase{constructor(){super(),this._slots=[],this._contentObserver=null,this._onRootClick=this._onRootClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onContentMutations=this._onContentMutations.bind(this)}static get observedAttributes(){return["disabled","variant","size","headless","loading","icon","block","animation","theme","tone","state","type","recipe","shape","radius","scale","loading-label","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._contentObserver=new MutationObserver(this._onContentMutations),this._contentObserver.observe(this,{childList:!0,subtree:!1,characterData:!0})}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this._contentObserver?.disconnect(),this._contentObserver=null,this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(n,e,i){if(e!==i){if(n==="animation"){const o=S(i);o?this.setAttribute("data-animation",o):this.removeAttribute("data-animation")}this.isConnected&&this.requestRender()}}_onRootClick(n){const i=n.target?.closest('button[data-ui-button="true"]');if(!i||i.disabled)return;const o=$(i.getAttribute("data-request-type"));queueMicrotask(()=>{n.defaultPrevented||W(this,o)})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(n=>n.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(n=>n.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this.requestRender()}_onContentMutations(){this.requestRender()}render(){const n=c(this,"disabled"),e=c(this,"loading"),i=r(this,"state"),o=G(i),s=e||o==="loading",l=r(this,"icon"),q=I(r(this,"variant")),b=r(this,"size"),d=U(b),h=S(r(this,"animation")),a=r(this,"theme"),p=a==="dark"||a==="brand"?a:null,f=r(this,"tone"),g=N(f),R=c(this,"block"),T=c(this,"headless"),M=$(r(this,"type")),m=J(r(this,"recipe")),x=r(this,"shape"),v=K(x),B=r(this,"radius"),y=V(B),w=Q(r(this,"scale")),k=r(this,"aria-label"),j=r(this,"loading-label")||"Loading";h?this.setAttribute("data-animation",h):this.removeAttribute("data-animation"),R?this.setAttribute("block",""):this.removeAttribute("block"),T?this.setAttribute("headless",""):this.removeAttribute("headless"),f!=null&&(g?this.setAttribute("tone",g):this.removeAttribute("tone")),b!=null&&(d==="md"?this.removeAttribute("size"):this.setAttribute("size",d)),a!=null&&(p?this.setAttribute("theme",p):this.removeAttribute("theme")),i!=null&&(o==="idle"?this.removeAttribute("state"):this.setAttribute("state",o)),m?this.setAttribute("recipe",m):this.removeAttribute("recipe"),x!=null&&(v?this.setAttribute("shape",v):this.removeAttribute("shape")),y?this.style.setProperty("--ui-btn-radius",y):this.style.removeProperty("--ui-btn-radius"),w?this.setAttribute("scale",w):this.removeAttribute("scale");const z=n||s;z?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),s?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const H=L(this,"prefix"),O=L(this,"suffix"),A=!s&&l?`<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>`:"",C=s?'<span class="spinner" aria-hidden="true" part="spinner"></span>':"",Y=C||A||H?`<span class="slot slot--prefix" part="prefix">${C}${A}${s?"":'<slot name="prefix"></slot>'}</span>`:"",P=O?'<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>':"";this.setContent(`
-      <style>${F}</style>
+`;function S(t){return t!==null&&t.toLowerCase()!=="false"&&t!=="0"}function U(t){return t==="secondary"||t==="ghost"||t==="danger"||t==="success"||t==="warning"?t:"primary"}function N(t){return t==="sm"||t==="lg"?t:"md"}function C(t){return t==="scale"||t==="pulse"||t==="none"?t:null}function W(t){return t==="neutral"||t==="info"||t==="success"||t==="warning"||t==="danger"?t:null}function G(t){return t==="loading"||t==="error"||t==="success"?t:"idle"}function $(t){return t==="submit"||t==="reset"?t:"button"}function J(t){return t==="classic"||t==="solid"||t==="soft"||t==="surface"||t==="outline"||t==="ghost"?t:null}function K(t){return t==="none"||t==="sm"||t==="md"||t==="lg"||t==="full"?t:null}function Q(t){return t==="1"||t==="2"||t==="3"||t==="4"?t:null}function V(t){if(!t)return null;const n=t.trim();return n?n==="full"?"999px":/^-?\d+(\.\d+)?$/.test(n)?`${n}px`:n:null}function r(t,n){const e=t.getAttribute(n);if(e!=null)return e;const i=t[n];return typeof i=="string"&&i.length>0?i:null}function c(t,n){const e=t.getAttribute(n);if(e!=null)return S(e);const i=t[n];return typeof i=="boolean"?i:typeof i=="string"?S(i):!1}function u(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function E(t,n){return!!t.querySelector(`[slot="${n}"]`)}function X(t,n){if(n==="button")return;const e=t.closest("form");if(!e){const o=t.closest("ui-form");n==="reset"?o?.reset?.():o?.requestSubmit?.();return}if(n==="reset"){e.reset();return}if(typeof e.requestSubmit=="function"){e.requestSubmit();return}const i=new Event("submit",{bubbles:!0,cancelable:!0});e.dispatchEvent(i)}const T=["aria-expanded","aria-haspopup","aria-pressed"];class q extends P.ElementBase{constructor(){super(),this._slots=[],this._contentObserver=null,this._onRootClick=this._onRootClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this),this._onContentMutations=this._onContentMutations.bind(this)}static get observedAttributes(){return["disabled","variant","size","headless","loading","icon","block","animation","theme","tone","state","type","recipe","shape","radius","scale","loading-label","aria-label","aria-expanded","aria-haspopup","aria-pressed"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._contentObserver=new MutationObserver(this._onContentMutations),this._contentObserver.observe(this,{childList:!0,subtree:!1,characterData:!0})}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this._contentObserver?.disconnect(),this._contentObserver=null,this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(n,e,i){if(e!==i){if(n==="animation"){const o=C(i);o?this.setAttribute("data-animation",o):this.removeAttribute("data-animation")}if(T.includes(n)){this._syncForwardedState();return}this.isConnected&&this.requestRender()}}_syncForwardedState(){const n=this.root.querySelector('button[data-ui-button="true"]');if(n)for(const e of T){const i=this.getAttribute(e);i==null||i===""?n.removeAttribute(e):n.getAttribute(e)!==i&&n.setAttribute(e,i)}}_onRootClick(n){const i=n.target?.closest('button[data-ui-button="true"]');if(!i||i.disabled)return;const o=$(i.getAttribute("data-request-type"));queueMicrotask(()=>{n.defaultPrevented||X(this,o)})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(n=>n.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(n=>n.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this.requestRender()}_onContentMutations(){this.requestRender()}render(){const n=c(this,"disabled"),e=c(this,"loading"),i=r(this,"state"),o=G(i),s=e||o==="loading",l=r(this,"icon"),L=U(r(this,"variant")),b=r(this,"size"),d=N(b),h=C(r(this,"animation")),a=r(this,"theme"),f=a==="dark"||a==="brand"?a:null,p=r(this,"tone"),g=W(p),R=c(this,"block"),M=c(this,"headless"),B=$(r(this,"type")),m=J(r(this,"recipe")),x=r(this,"shape"),v=K(x),F=r(this,"radius"),y=V(F),w=Q(r(this,"scale")),k=r(this,"aria-label"),O=r(this,"loading-label")||"Loading";h?this.setAttribute("data-animation",h):this.removeAttribute("data-animation"),R?this.setAttribute("block",""):this.removeAttribute("block"),M?this.setAttribute("headless",""):this.removeAttribute("headless"),p!=null&&(g?this.setAttribute("tone",g):this.removeAttribute("tone")),b!=null&&(d==="md"?this.removeAttribute("size"):this.setAttribute("size",d)),a!=null&&(f?this.setAttribute("theme",f):this.removeAttribute("theme")),i!=null&&(o==="idle"?this.removeAttribute("state"):this.setAttribute("state",o)),m?this.setAttribute("recipe",m):this.removeAttribute("recipe"),x!=null&&(v?this.setAttribute("shape",v):this.removeAttribute("shape")),y?this.style.setProperty("--ui-btn-radius",y):this.style.removeProperty("--ui-btn-radius"),w?this.setAttribute("scale",w):this.removeAttribute("scale");const A=n||s;A?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),s?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const j=E(this,"prefix"),H=E(this,"suffix"),z=!s&&l?`<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>`:"",_=s?'<span class="spinner" aria-hidden="true" part="spinner"></span>':"",Y=_||z||j?`<span class="slot slot--prefix" part="prefix">${_}${z}${s?"":'<slot name="prefix"></slot>'}</span>`:"",D=H?'<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>':"";this.setContent(`
+      <style>${I}</style>
       <button
-        class="btn btn--${q}"
+        class="btn btn--${L}"
         part="button"
         type="button"
         data-ui-button="true"
-        data-request-type="${M}"
+        data-request-type="${B}"
         aria-busy="${s?"true":"false"}"
         ${k?`aria-label="${u(k)}"`:""}
-        ${z?"disabled":""}
+        ${A?"disabled":""}
       >
         ${Y}
         <span class="slot slot--label" part="label"><slot></slot></span>
-        ${P}
-        ${s?`<span class="sr-only">${u(j)}</span>`:""}
+        ${D}
+        ${s?`<span class="sr-only">${u(O)}</span>`:""}
       </button>
-    `),this._attachSlotListeners()}}typeof customElements<"u"&&!customElements.get("ui-button")&&customElements.define("ui-button",E);exports.UIButton=E;
+    `),this._syncForwardedState(),this._attachSlotListeners()}}typeof customElements<"u"&&!customElements.get("ui-button")&&customElements.define("ui-button",q);exports.UIButton=q;

package/dist/{ui-button-Q0GNNWKC.mjs → ui-button-Co8Sid6t.mjs}

@@ -1,6 +1,6 @@
-import { E as P } from "./ElementBase-YlTLMsGk.mjs";
-import "./ui-icon-YI6lyuqU.mjs";
-const D = `
+import { E as D } from "./ElementBase-BeZT54Hj.mjs";
+import "./ui-icon-DLhB08Fo.mjs";
+const P = `
   :host {
     --ui-btn-radius: var(--ui-control-radius, var(--ui-radius, 4px));
     --ui-btn-min-height: var(--ui-control-min-height, var(--base-button-height-md, 40px));
@@ -19,7 +19,7 @@ const D = `
     --ui-btn-surface: var(--ui-color-surface, #ffffff);
     --ui-btn-surface-alt: var(--ui-color-surface-alt, #f8fafc);
     --ui-btn-text: var(--ui-color-text, #0f172a);
-    --ui-btn-muted: var(--ui-color-muted, #64748b);
+    --ui-btn-muted: var(--ui-color-muted, #526175);
     --ui-btn-ring: var(--ui-color-focus-ring, #2563eb);
 
     display: inline-flex;
@@ -35,7 +35,7 @@ const D = `
   }
 
   :host([tone="neutral"]) {
-    --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+    --ui-btn-accent: color-mix(in srgb, var(--ui-color-muted, #526175) 74%, var(--ui-color-text, #0f172a) 26%);
   }
 
   :host([tone="info"]) {
@@ -43,11 +43,11 @@ const D = `
   }
 
   :host([tone="success"]) {
-    --ui-btn-accent: var(--ui-color-success, #16a34a);
+    --ui-btn-accent: var(--ui-color-success, #15803d);
   }
 
   :host([tone="warning"]) {
-    --ui-btn-accent: var(--ui-color-warning, #d97706);
+    --ui-btn-accent: var(--ui-color-warning, #b45309);
   }
 
   :host([tone="danger"]) {
@@ -59,7 +59,7 @@ const D = `
   }
 
   :host([state="success"]) {
-    --ui-btn-accent: var(--ui-color-success, #16a34a);
+    --ui-btn-accent: var(--ui-color-success, #15803d);
   }
 
   :host([theme="dark"]) {
@@ -87,8 +87,8 @@ const D = `
   }
 
   :host([recipe="soft"]) {
-    --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, white);
-    --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, white);
+    --ui-btn-surface: color-mix(in srgb, var(--ui-btn-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-btn-surface-alt: color-mix(in srgb, var(--ui-btn-accent) 14%, var(--ui-color-surface, #ffffff));
   }
 
   :host([recipe="soft"]) .btn--secondary {
@@ -231,7 +231,8 @@ const D = `
 
   .btn--primary {
     background: var(--ui-btn-accent);
-    color: #ffffff;
+    /* The theme's text colour for a primary fill: the default theme's amber needs dark text. */
+    color: var(--ui-color-foreground-on-primary, #ffffff);
     border-color: color-mix(in srgb, var(--ui-btn-accent) 74%, #0f172a 26%);
     box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-btn-accent) 22%, transparent);
   }
@@ -242,7 +243,7 @@ const D = `
 
   .btn--secondary {
     background: var(--ui-btn-surface);
-    color: color-mix(in srgb, var(--ui-btn-accent) 78%, var(--ui-btn-text) 22%);
+    color: color-mix(in srgb, var(--ui-btn-accent) 50%, var(--ui-btn-text) 50%);
     border-color: color-mix(in srgb, var(--ui-btn-accent) 22%, var(--ui-btn-muted));
     box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
   }
@@ -253,7 +254,7 @@ const D = `
 
   .btn--ghost {
     background: transparent;
-    color: color-mix(in srgb, var(--ui-btn-accent) 80%, var(--ui-btn-text) 20%);
+    color: color-mix(in srgb, var(--ui-btn-accent) 50%, var(--ui-btn-text) 50%);
     border-color: transparent;
     box-shadow: none;
   }
@@ -274,25 +275,25 @@ const D = `
   }
 
   .btn--success {
-    background: var(--ui-color-success, #16a34a);
+    background: var(--ui-color-success, #15803d);
     color: #ffffff;
-    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 70%, #0f172a 30%);
-    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #16a34a) 20%, transparent);
+    border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 70%, #0f172a 30%);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-success, #15803d) 20%, transparent);
   }
 
   .btn--success:hover:not([disabled]) {
-    background: color-mix(in srgb, var(--ui-color-success, #16a34a) 86%, #0f172a 14%);
+    background: color-mix(in srgb, var(--ui-color-success, #15803d) 86%, #0f172a 14%);
   }
 
   .btn--warning {
-    background: var(--ui-color-warning, #d97706);
+    background: var(--ui-color-warning, #b45309);
     color: #ffffff;
-    border-color: color-mix(in srgb, var(--ui-color-warning, #d97706) 70%, #0f172a 30%);
-    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #d97706) 18%, transparent);
+    border-color: color-mix(in srgb, var(--ui-color-warning, #b45309) 70%, #0f172a 30%);
+    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12), 0 8px 18px color-mix(in srgb, var(--ui-color-warning, #b45309) 18%, transparent);
   }
 
   .btn--warning:hover:not([disabled]) {
-    background: color-mix(in srgb, var(--ui-color-warning, #d97706) 86%, #0f172a 14%);
+    background: color-mix(in srgb, var(--ui-color-warning, #b45309) 86%, #0f172a 14%);
   }
 
   :host([size="sm"]) {
@@ -320,7 +321,7 @@ const D = `
   }
 
   :host([state="success"]) .btn:not([disabled]) {
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #16a34a) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-color-success, #15803d) 30%, transparent), 0 8px 18px rgba(22, 163, 74, 0.14);
   }
 
   :host([data-animation]) .btn:not([disabled]):hover {
@@ -504,22 +505,22 @@ const D = `
     }
   }
 `;
-function _(t) {
+function S(t) {
   return t !== null && t.toLowerCase() !== "false" && t !== "0";
 }
-function F(t) {
+function U(t) {
   return t === "secondary" || t === "ghost" || t === "danger" || t === "success" || t === "warning" ? t : "primary";
 }
-function U(t) {
+function I(t) {
   return t === "sm" || t === "lg" ? t : "md";
 }
-function S(t) {
+function C(t) {
   return t === "scale" || t === "pulse" || t === "none" ? t : null;
 }
-function I(t) {
+function N(t) {
   return t === "neutral" || t === "info" || t === "success" || t === "warning" || t === "danger" ? t : null;
 }
-function N(t) {
+function W(t) {
   return t === "loading" || t === "error" || t === "success" ? t : "idle";
 }
 function $(t) {
@@ -547,20 +548,24 @@ function r(t, n) {
 }
 function c(t, n) {
   const e = t.getAttribute(n);
-  if (e != null) return _(e);
+  if (e != null) return S(e);
   const i = t[n];
-  return typeof i == "boolean" ? i : typeof i == "string" ? _(i) : !1;
+  return typeof i == "boolean" ? i : typeof i == "string" ? S(i) : !1;
 }
 function u(t) {
   return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function L(t, n) {
+function E(t, n) {
   return !!t.querySelector(`[slot="${n}"]`);
 }
 function V(t, n) {
   if (n === "button") return;
   const e = t.closest("form");
-  if (!e) return;
+  if (!e) {
+    const o = t.closest("ui-form");
+    n === "reset" ? o?.reset?.() : o?.requestSubmit?.();
+    return;
+  }
   if (n === "reset") {
     e.reset();
     return;
@@ -572,7 +577,8 @@ function V(t, n) {
   const i = new Event("submit", { bubbles: !0, cancelable: !0 });
   e.dispatchEvent(i);
 }
-class W extends P {
+const T = ["aria-expanded", "aria-haspopup", "aria-pressed"];
+class X extends D {
   constructor() {
     super(), this._slots = [], this._contentObserver = null, this._onRootClick = this._onRootClick.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onContentMutations = this._onContentMutations.bind(this);
   }
@@ -595,7 +601,10 @@ class W extends P {
       "radius",
       "scale",
       "loading-label",
-      "aria-label"
+      "aria-label",
+      "aria-expanded",
+      "aria-haspopup",
+      "aria-pressed"
     ];
   }
   connectedCallback() {
@@ -607,12 +616,24 @@ class W extends P {
   attributeChangedCallback(n, e, i) {
     if (e !== i) {
       if (n === "animation") {
-        const o = S(i);
+        const o = C(i);
         o ? this.setAttribute("data-animation", o) : this.removeAttribute("data-animation");
       }
+      if (T.includes(n)) {
+        this._syncForwardedState();
+        return;
+      }
       this.isConnected && this.requestRender();
     }
   }
+  _syncForwardedState() {
+    const n = this.root.querySelector('button[data-ui-button="true"]');
+    if (n)
+      for (const e of T) {
+        const i = this.getAttribute(e);
+        i == null || i === "" ? n.removeAttribute(e) : n.getAttribute(e) !== i && n.setAttribute(e, i);
+      }
+  }
   _onRootClick(n) {
     const i = n.target?.closest('button[data-ui-button="true"]');
     if (!i || i.disabled) return;
@@ -634,32 +655,32 @@ class W extends P {
     this.requestRender();
   }
   render() {
-    const n = c(this, "disabled"), e = c(this, "loading"), i = r(this, "state"), o = N(i), s = e || o === "loading", l = r(this, "icon"), E = F(r(this, "variant")), b = r(this, "size"), d = U(b), h = S(r(this, "animation")), a = r(this, "theme"), p = a === "dark" || a === "brand" ? a : null, f = r(this, "tone"), g = I(f), q = c(this, "block"), R = c(this, "headless"), T = $(r(this, "type")), m = G(r(this, "recipe")), x = r(this, "shape"), v = J(x), M = r(this, "radius"), y = Q(M), w = K(r(this, "scale")), k = r(this, "aria-label"), B = r(this, "loading-label") || "Loading";
-    h ? this.setAttribute("data-animation", h) : this.removeAttribute("data-animation"), q ? this.setAttribute("block", "") : this.removeAttribute("block"), R ? this.setAttribute("headless", "") : this.removeAttribute("headless"), f != null && (g ? this.setAttribute("tone", g) : this.removeAttribute("tone")), b != null && (d === "md" ? this.removeAttribute("size") : this.setAttribute("size", d)), a != null && (p ? this.setAttribute("theme", p) : this.removeAttribute("theme")), i != null && (o === "idle" ? this.removeAttribute("state") : this.setAttribute("state", o)), m ? this.setAttribute("recipe", m) : this.removeAttribute("recipe"), x != null && (v ? this.setAttribute("shape", v) : this.removeAttribute("shape")), y ? this.style.setProperty("--ui-btn-radius", y) : this.style.removeProperty("--ui-btn-radius"), w ? this.setAttribute("scale", w) : this.removeAttribute("scale");
-    const z = n || s;
-    z ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), s ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
-    const j = L(this, "prefix"), H = L(this, "suffix"), A = !s && l ? `<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>` : "", C = s ? '<span class="spinner" aria-hidden="true" part="spinner"></span>' : "", O = C || A || j ? `<span class="slot slot--prefix" part="prefix">${C}${A}${s ? "" : '<slot name="prefix"></slot>'}</span>` : "", Y = H ? '<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>' : "";
+    const n = c(this, "disabled"), e = c(this, "loading"), i = r(this, "state"), o = W(i), s = e || o === "loading", l = r(this, "icon"), L = U(r(this, "variant")), b = r(this, "size"), d = I(b), h = C(r(this, "animation")), a = r(this, "theme"), f = a === "dark" || a === "brand" ? a : null, p = r(this, "tone"), g = N(p), R = c(this, "block"), q = c(this, "headless"), M = $(r(this, "type")), m = G(r(this, "recipe")), x = r(this, "shape"), v = J(x), B = r(this, "radius"), y = Q(B), w = K(r(this, "scale")), k = r(this, "aria-label"), F = r(this, "loading-label") || "Loading";
+    h ? this.setAttribute("data-animation", h) : this.removeAttribute("data-animation"), R ? this.setAttribute("block", "") : this.removeAttribute("block"), q ? this.setAttribute("headless", "") : this.removeAttribute("headless"), p != null && (g ? this.setAttribute("tone", g) : this.removeAttribute("tone")), b != null && (d === "md" ? this.removeAttribute("size") : this.setAttribute("size", d)), a != null && (f ? this.setAttribute("theme", f) : this.removeAttribute("theme")), i != null && (o === "idle" ? this.removeAttribute("state") : this.setAttribute("state", o)), m ? this.setAttribute("recipe", m) : this.removeAttribute("recipe"), x != null && (v ? this.setAttribute("shape", v) : this.removeAttribute("shape")), y ? this.style.setProperty("--ui-btn-radius", y) : this.style.removeProperty("--ui-btn-radius"), w ? this.setAttribute("scale", w) : this.removeAttribute("scale");
+    const A = n || s;
+    A ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), s ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
+    const O = E(this, "prefix"), j = E(this, "suffix"), z = !s && l ? `<ui-icon class="icon" name="${u(l)}" aria-hidden="true"></ui-icon>` : "", _ = s ? '<span class="spinner" aria-hidden="true" part="spinner"></span>' : "", H = _ || z || O ? `<span class="slot slot--prefix" part="prefix">${_}${z}${s ? "" : '<slot name="prefix"></slot>'}</span>` : "", Y = j ? '<span class="slot slot--suffix" part="suffix"><slot name="suffix"></slot></span>' : "";
     this.setContent(`
-      <style>${D}</style>
+      <style>${P}</style>
       <button
-        class="btn btn--${E}"
+        class="btn btn--${L}"
         part="button"
         type="button"
         data-ui-button="true"
-        data-request-type="${T}"
+        data-request-type="${M}"
         aria-busy="${s ? "true" : "false"}"
         ${k ? `aria-label="${u(k)}"` : ""}
-        ${z ? "disabled" : ""}
+        ${A ? "disabled" : ""}
       >
-        ${O}
+        ${H}
         <span class="slot slot--label" part="label"><slot></slot></span>
         ${Y}
-        ${s ? `<span class="sr-only">${u(B)}</span>` : ""}
+        ${s ? `<span class="sr-only">${u(F)}</span>` : ""}
       </button>
-    `), this._attachSlotListeners();
+    `), this._syncForwardedState(), this._attachSlotListeners();
   }
 }
-typeof customElements < "u" && !customElements.get("ui-button") && customElements.define("ui-button", W);
+typeof customElements < "u" && !customElements.get("ui-button") && customElements.define("ui-button", X);
 export {
-  W as U
+  X as U
 };

package/dist/{ui-icon-BzVNC_lr.js → ui-icon-D3avtxX_.js}

@@ -1,4 +1,4 @@
-"use strict";const k=require("./ElementBase-EV6mVBUV.js"),l=require("@editora/icons"),a=new Map,d=new Map;function c(i){return String(i||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function y(i,e){if(!e)return`${i}::default`;const r=e.variant||"outline",t=e.iconWeight||"",n=e.secondaryColor||"",o=e.strokeWidth==null?"":String(e.strokeWidth),s=e.absoluteStrokeWidth?"1":"0",b=e.strokeLinecap||"",f=e.strokeLinejoin||"",m=e.rotate==null?"":String(e.rotate),v=e.flip||"",x=e.rtl?"1":"0";return[i,r,t,n,o,s,b,f,m,v,x].join("::")}function z(i,e){const r=c(i);r&&a.set(r,e)}function w(i){const e=c(i);e&&a.delete(e)}function C(){a.clear()}function I(i){const e=c(i);return e?a.has(e)?!0:l.hasIcon(e):!1}function A(i,e){return u(i,{variant:e})}function u(i,e){const r=c(i);if(!r)return"";const t=a.get(r);if(t)return t;if(!l.hasIcon(r))return"";const n=y(r,e),o=d.get(n);if(o)return o;const s=l.renderIconSvg(r,{variant:e?.variant||"outline",iconWeight:e?.iconWeight,secondaryColor:e?.secondaryColor,strokeWidth:e?.strokeWidth,absoluteStrokeWidth:e?.absoluteStrokeWidth,strokeLinecap:e?.strokeLinecap,strokeLinejoin:e?.strokeLinejoin,rotate:e?.rotate,flip:e?.flip,rtl:e?.rtl,color:"currentColor",decorative:!0});return s&&d.set(n,s),s}const W=`
+"use strict";const k=require("./ElementBase-DxbvhLJs.js"),l=require("@editora/icons"),a=new Map,d=new Map;function c(i){return String(i||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function y(i,e){if(!e)return`${i}::default`;const r=e.variant||"outline",t=e.iconWeight||"",n=e.secondaryColor||"",o=e.strokeWidth==null?"":String(e.strokeWidth),s=e.absoluteStrokeWidth?"1":"0",g=e.strokeLinecap||"",f=e.strokeLinejoin||"",m=e.rotate==null?"":String(e.rotate),v=e.flip||"",x=e.rtl?"1":"0";return[i,r,t,n,o,s,g,f,m,v,x].join("::")}function z(i,e){const r=c(i);r&&a.set(r,e)}function w(i){const e=c(i);e&&a.delete(e)}function C(){a.clear()}function I(i){const e=c(i);return e?a.has(e)?!0:l.hasIcon(e):!1}function A(i,e){return u(i,{variant:e})}function u(i,e){const r=c(i);if(!r)return"";const t=a.get(r);if(t)return t;if(!l.hasIcon(r))return"";const n=y(r,e),o=d.get(n);if(o)return o;const s=l.renderIconSvg(r,{variant:e?.variant||"outline",iconWeight:e?.iconWeight,secondaryColor:e?.secondaryColor,strokeWidth:e?.strokeWidth,absoluteStrokeWidth:e?.absoluteStrokeWidth,strokeLinecap:e?.strokeLinecap,strokeLinejoin:e?.strokeLinejoin,rotate:e?.rotate,flip:e?.flip,rtl:e?.rtl,color:"currentColor",decorative:!0});return s&&d.set(n,s),s}const W=`
   :host {
     --ui-icon-size: 1em;
     --ui-icon-color: currentColor;
@@ -124,8 +124,8 @@
   }
 
   :host([tone="brand"]) { --ui-icon-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
-  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
-  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #15803d)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
   :host([tone="danger"]) { --ui-icon-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
 
   :host([shape="square"]) { --ui-icon-radius: 4px; }
@@ -195,7 +195,7 @@
       border-color: Canvas;
     }
   }
-`;function h(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(i){if(!i)return null;const e=i.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function p(i){if(!i)return;const e=Number(i);return Number.isFinite(e)?e:void 0}class g extends k.ElementBase{constructor(){super(),this._lastName=""}static get observedAttributes(){return["name","size","color","variant","icon-variant","icon-weight","secondary-color","tone","shape","spin","pulse","badge","label","decorative","stroke-width","absolute-stroke-width","stroke-linecap","stroke-linejoin","rotate","flip","rtl","headless"]}_syncDynamicVars(){const e=S(this.getAttribute("size"));e?this.style.setProperty("--ui-icon-size",e):this.style.removeProperty("--ui-icon-size");const r=this.getAttribute("color");r?this.style.setProperty("--ui-icon-color",r):this.style.removeProperty("--ui-icon-color");const t=this.getAttribute("stroke-width");t?this.style.setProperty("--ui-icon-stroke-width",t):this.style.removeProperty("--ui-icon-stroke-width")}render(){if(this._syncDynamicVars(),this.hasAttribute("headless")){this.setContent("<style></style><slot></slot>");return}const e=this.getAttribute("name")||"",r=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),n=e?u(e,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:p(this.getAttribute("stroke-width")),absoluteStrokeWidth:this.hasAttribute("absolute-stroke-width"),strokeLinecap:this.getAttribute("stroke-linecap")||void 0,strokeLinejoin:this.getAttribute("stroke-linejoin")||void 0,rotate:p(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",o=!!n,s=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${h(r||e||"icon")}"`;this.setContent(`
+`;function h(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(i){if(!i)return null;const e=i.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function p(i){if(!i)return;const e=Number(i);return Number.isFinite(e)?e:void 0}class b extends k.ElementBase{constructor(){super(),this._lastName=""}static get observedAttributes(){return["name","size","color","variant","icon-variant","icon-weight","secondary-color","tone","shape","spin","pulse","badge","label","decorative","stroke-width","absolute-stroke-width","stroke-linecap","stroke-linejoin","rotate","flip","rtl","headless"]}_syncDynamicVars(){const e=S(this.getAttribute("size"));e?this.style.setProperty("--ui-icon-size",e):this.style.removeProperty("--ui-icon-size");const r=this.getAttribute("color");r?this.style.setProperty("--ui-icon-color",r):this.style.removeProperty("--ui-icon-color");const t=this.getAttribute("stroke-width");t?this.style.setProperty("--ui-icon-stroke-width",t):this.style.removeProperty("--ui-icon-stroke-width")}render(){if(this._syncDynamicVars(),this.hasAttribute("headless")){this.setContent("<style></style><slot></slot>");return}const e=this.getAttribute("name")||"",r=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),n=e?u(e,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:p(this.getAttribute("stroke-width")),absoluteStrokeWidth:this.hasAttribute("absolute-stroke-width"),strokeLinecap:this.getAttribute("stroke-linecap")||void 0,strokeLinejoin:this.getAttribute("stroke-linejoin")||void 0,rotate:p(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",o=!!n,s=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${h(r||e||"icon")}"`;this.setContent(`
       <style>${W}</style>
       <span class="icon" part="icon" ${s}>
         <span class="glyph" part="glyph">
@@ -204,4 +204,4 @@
         </span>
         ${this.hasAttribute("badge")?'<span class="badge" part="badge" aria-hidden="true"></span>':""}
       </span>
-    `),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,r,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",g);exports.UIIcon=g;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=A;exports.hasIcon=I;exports.registerIcon=z;exports.unregisterIcon=w;
+    `),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,r,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",b);exports.UIIcon=b;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=A;exports.hasIcon=I;exports.registerIcon=z;exports.unregisterIcon=w;

package/dist/{ui-icon-YI6lyuqU.mjs → ui-icon-DLhB08Fo.mjs}

@@ -1,4 +1,4 @@
-import { E as x } from "./ElementBase-YlTLMsGk.mjs";
+import { E as x } from "./ElementBase-BeZT54Hj.mjs";
 import { hasIcon as h, renderIconSvg as k } from "@editora/icons";
 const a = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
 function c(i) {
@@ -189,8 +189,8 @@ const z = `
   }
 
   :host([tone="brand"]) { --ui-icon-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
-  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
-  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #15803d)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
   :host([tone="danger"]) { --ui-icon-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
 
   :host([shape="square"]) { --ui-icon-radius: 4px; }

package/dist/visually-hidden.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-EV6mVBUV.js"),a=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./ElementBase-DxbvhLJs.js"),a=`
   :host {
     display: contents;
     color-scheme: light dark;

package/dist/visually-hidden.esm.js

@@ -1,4 +1,4 @@
-import { E as i } from "./ElementBase-YlTLMsGk.mjs";
+import { E as i } from "./ElementBase-BeZT54Hj.mjs";
 const r = `
   :host {
     display: contents;