@editora/ui-core 0.1.25 → 0.2.0

package/dist/toggle.esm.js

@@ -1,20 +1,22 @@
 import { E as l } from "./ElementBase-BeZT54Hj.mjs";
 const g = `
   :host {
-    --ui-toggle-radius: 10px;
-    --ui-toggle-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
-    --ui-toggle-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-toggle-color: var(--ui-color-text, #0f172a);
+    --ui-toggle-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-toggle-border: var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
+    --ui-toggle-bg: transparent;
+    --ui-toggle-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
     --ui-toggle-active-bg: var(--ui-color-primary, #2563eb);
-    --ui-toggle-active-color: var(--ui-color-primary-foreground, var(--ui-color-foreground-on-primary, #ffffff));
-    --ui-toggle-active-border: color-mix(in srgb, var(--ui-toggle-active-bg) 72%, #0f172a 28%);
+    --ui-toggle-pressed-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-toggle-active-bg) 16%, transparent));
+    --ui-toggle-active-color: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-toggle-active-border: var(--ui-color-accent-line, color-mix(in srgb, var(--ui-toggle-active-bg) 40%, transparent));
     --ui-toggle-muted: var(--ui-color-muted, #526175);
     --ui-toggle-focus: var(--ui-color-focus-ring, #2563eb);
     --ui-toggle-shadow:
       none;
-    --ui-toggle-padding-x: 12px;
-    --ui-toggle-padding-y: 8px;
-    --ui-toggle-height: 36px;
+    --ui-toggle-padding-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-toggle-padding-y: 0px;
+    --ui-toggle-height: var(--ui-control-height-2, 32px);
+    --ui-toggle-font-size: var(--ui-control-font-size-2, 14px);
     --ui-toggle-gap: 8px;
 
     color-scheme: light dark;
@@ -24,6 +26,7 @@ const g = `
   }
 
   .control {
+    box-sizing: border-box;
     min-inline-size: 0;
     min-block-size: var(--ui-toggle-height);
     display: inline-flex;
@@ -40,7 +43,7 @@ const g = `
     user-select: none;
     outline: none;
     text-decoration: none;
-    font: 600 13px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font: 600 var(--ui-toggle-font-size)/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     letter-spacing: 0.01em;
     transition:
       background-color 150ms ease,
@@ -51,29 +54,27 @@ const g = `
   }
 
   .control:hover {
-    background: color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-toggle-bg));
-    border-color: color-mix(in srgb, var(--ui-toggle-active-bg) 30%, var(--ui-toggle-border));
-  }
-
-  .control:active {
-    transform: translateY(0.5px);
+    background: var(--ui-color-fill, color-mix(in srgb, var(--ui-toggle-active-bg) 8%, var(--ui-toggle-bg)));
   }
 
   :host(:focus-visible) .control {
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-toggle-focus) 28%, transparent),
-      var(--ui-toggle-shadow);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-toggle-focus));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   :host([pressed]) .control,
   .control[aria-pressed="true"] {
-    background: var(--ui-toggle-active-bg);
+    background: var(--ui-toggle-pressed-bg);
     border-color: var(--ui-toggle-active-border);
     color: var(--ui-toggle-active-color);
   }
 
   :host([pressed]) .control:hover {
-    background: color-mix(in srgb, var(--ui-toggle-active-bg) 82%, #0f172a 18%);
+    background: var(--ui-color-accent-fill-hover, var(--ui-toggle-pressed-bg));
+  }
+
+  .icon:empty {
+    display: none !important;
   }
 
   .icon {
@@ -107,17 +108,17 @@ const g = `
   }
 
   :host([size="sm"]) {
-    --ui-toggle-padding-x: 10px;
-    --ui-toggle-padding-y: 6px;
-    --ui-toggle-height: 32px;
-    --ui-toggle-radius: 9px;
+    --ui-toggle-padding-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-toggle-height: var(--ui-control-height-1, 24px);
+    --ui-toggle-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-toggle-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
   }
 
   :host([size="lg"]) {
-    --ui-toggle-padding-x: 14px;
-    --ui-toggle-padding-y: 10px;
-    --ui-toggle-height: 40px;
-    --ui-toggle-radius: 11px;
+    --ui-toggle-padding-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-toggle-height: var(--ui-control-height-3, 40px);
+    --ui-toggle-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-toggle-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
   }
 
   :host([shape="square"]) {
@@ -160,6 +161,14 @@ const g = `
     background: transparent;
   }
 
+  /* A tone tints the pressed state in its own colour (the default soft fill is the theme accent). */
+  :host([tone="success"]),
+  :host([tone="warning"]),
+  :host([tone="danger"]) {
+    --ui-toggle-pressed-bg: color-mix(in srgb, var(--ui-toggle-active-bg) 16%, transparent);
+    --ui-toggle-active-border: color-mix(in srgb, var(--ui-toggle-active-bg) 44%, transparent);
+  }
+
   :host([tone="success"]) {
     --ui-toggle-active-bg: var(--ui-color-success, #15803d);
   }
@@ -172,7 +181,16 @@ const g = `
     --ui-toggle-active-bg: var(--ui-color-danger, #dc2626);
   }
 
-  /* The contrast variant draws dark text on its pressed fill, so the tones need light fills there. */
+  /* The contrast variant draws dark text on a solid light pressed fill (not the soft theme tint). */
+  :host([variant="contrast"]) {
+    --ui-toggle-pressed-bg: var(--ui-toggle-active-bg);
+    --ui-toggle-active-border: var(--ui-toggle-active-bg);
+  }
+
+  :host([variant="contrast"][pressed]) .control:hover {
+    background: color-mix(in srgb, var(--ui-toggle-active-bg) 86%, #ffffff);
+  }
+
   :host([variant="contrast"][tone="success"]) { --ui-toggle-active-bg: #86efac; }
   :host([variant="contrast"][tone="warning"]) { --ui-toggle-active-bg: #fcd34d; }
   :host([variant="contrast"][tone="danger"]) { --ui-toggle-active-bg: #fca5a5; }
@@ -224,13 +242,13 @@ const g = `
       --ui-toggle-shadow: none;
     }
   }
-`, a = /* @__PURE__ */ new Set(["icon-on", "icon-off", "aria-label"]);
+`, n = /* @__PURE__ */ new Set(["icon-on", "icon-off", "aria-label"]);
 function c(o) {
   if (o == null) return !1;
-  const e = String(o).toLowerCase();
-  return e !== "false" && e !== "0" && e !== "off";
+  const t = String(o).toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
 }
-function n(o) {
+function a(o) {
   return String(o).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 class u extends l {
@@ -263,10 +281,10 @@ class u extends l {
   disconnectedCallback() {
     this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), super.disconnectedCallback();
   }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i) {
-      if (a.has(e)) {
-        super.attributeChangedCallback(e, t, i);
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (n.has(t)) {
+        super.attributeChangedCallback(t, e, i);
         return;
       }
       this._syncAria();
@@ -275,25 +293,25 @@ class u extends l {
   get pressed() {
     return this.hasAttribute("pressed");
   }
-  set pressed(e) {
-    e ? this.setAttribute("pressed", "") : this.removeAttribute("pressed");
+  set pressed(t) {
+    t ? this.setAttribute("pressed", "") : this.removeAttribute("pressed");
   }
   get disabled() {
     return this.hasAttribute("disabled") || this.hasAttribute("loading");
   }
-  set disabled(e) {
-    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
-  toggle(e) {
+  toggle(t) {
     if (this.disabled) return;
-    const t = typeof e == "boolean" ? e : !this.pressed;
-    if (t === this.pressed) {
+    const e = typeof t == "boolean" ? t : !this.pressed;
+    if (e === this.pressed) {
       this._syncAria();
       return;
     }
-    this.pressed = t, this._syncAria();
+    this.pressed = e, this._syncAria();
     const i = {
-      pressed: t,
+      pressed: e,
       value: this.getAttribute("value") || "",
       name: this.getAttribute("name") || "",
       required: c(this.getAttribute("required"))
@@ -301,42 +319,42 @@ class u extends l {
     this.dispatchEvent(new CustomEvent("input", { detail: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: i, bubbles: !0, composed: !0 }));
   }
   _syncAria() {
-    const e = this.pressed, t = this.disabled, i = this.hasAttribute("loading");
-    this.hasAttribute("data-group-item") ? this.hasAttribute("aria-pressed") && this.removeAttribute("aria-pressed") : (this.setAttribute("role", "button"), this.setAttribute("aria-pressed", e ? "true" : "false")), this.setAttribute("aria-disabled", t ? "true" : "false"), this.setAttribute("aria-busy", i ? "true" : "false");
+    const t = this.pressed, e = this.disabled, i = this.hasAttribute("loading");
+    this.hasAttribute("data-group-item") ? this.hasAttribute("aria-pressed") && this.removeAttribute("aria-pressed") : (this.setAttribute("role", "button"), this.setAttribute("aria-pressed", t ? "true" : "false")), this.setAttribute("aria-disabled", e ? "true" : "false"), this.setAttribute("aria-busy", i ? "true" : "false");
     const r = this.getAttribute("tabindex");
-    if (t)
+    if (e)
       this.hasAttribute("data-ui-prev-tabindex") || this.setAttribute("data-ui-prev-tabindex", r ?? ""), r !== "-1" && this.setAttribute("tabindex", "-1");
     else {
       const s = this.getAttribute("data-ui-prev-tabindex");
       s != null ? (s ? this.setAttribute("tabindex", s) : this.removeAttribute("tabindex"), this.removeAttribute("data-ui-prev-tabindex")) : r == null && this.setAttribute("tabindex", "0");
     }
-    this._control && this._control.toggleAttribute("data-disabled", t);
+    this._control && this._control.toggleAttribute("data-disabled", e);
   }
-  _onClick(e) {
-    const t = e.target;
-    t && t.closest(".control") && this.toggle();
+  _onClick(t) {
+    const e = t.target;
+    e && e.closest(".control") && this.toggle();
   }
-  _onKeyDown(e) {
-    this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+  _onKeyDown(t) {
+    this.disabled || (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.toggle());
   }
   render() {
     this.pressed;
-    const e = this.disabled, t = this.getAttribute("icon-on") || "●", i = this.getAttribute("icon-off") || "○";
+    const t = this.disabled, e = this.getAttribute("icon-on") || "", i = this.getAttribute("icon-off") || "";
     this.getAttribute("aria-label"), this.setContent(`
       <style>${g}</style>
       <span
         class="control"
         part="control"
-        ${e ? "data-disabled" : ""}
+        ${t ? "data-disabled" : ""}
       >
-        <span class="icon icon-off" part="icon-off" aria-hidden="true">${n(i)}</span>
-        <span class="icon icon-on" part="icon-on" aria-hidden="true">${n(t)}</span>
+        <span class="icon icon-off" part="icon-off" aria-hidden="true">${a(i)}</span>
+        <span class="icon icon-on" part="icon-on" aria-hidden="true">${a(e)}</span>
         <span class="label" part="label"><slot></slot></span>
       </span>
     `), this._control = this.root.querySelector(".control"), this._syncAria();
   }
-  shouldRenderOnAttributeChange(e, t, i) {
-    return a.has(e);
+  shouldRenderOnAttributeChange(t, e, i) {
+    return n.has(t);
   }
 }
 typeof customElements < "u" && !customElements.get("ui-toggle") && customElements.define("ui-toggle", u);

package/dist/toolbar.cjs.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),i=require("./roving-focus-group-BdJ_4Njm.js"),b=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),i=require("./roving-focus-group-BdJ_4Njm.js"),c=`
   :host {
     --ui-toolbar-gap: 8px;
-    --ui-toolbar-padding: 8px;
-    --ui-toolbar-radius: 12px;
-    --ui-toolbar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-toolbar-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-toolbar-padding: 4px;
+    --ui-toolbar-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-toolbar-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-toolbar-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-toolbar-shadow:
       none;
 
@@ -73,15 +73,15 @@
   }
 
   :host([size="sm"]) {
-    --ui-toolbar-gap: 6px;
-    --ui-toolbar-padding: 6px;
-    --ui-toolbar-radius: 10px;
+    --ui-toolbar-gap: 4px;
+    --ui-toolbar-padding: 2px;
+    --ui-toolbar-radius: var(--ui-radius, 6px);
   }
 
   :host([size="lg"]) {
-    --ui-toolbar-gap: 10px;
-    --ui-toolbar-padding: 10px;
-    --ui-toolbar-radius: 14px;
+    --ui-toolbar-gap: 6px;
+    --ui-toolbar-padding: 6px;
+    --ui-toolbar-radius: calc(var(--ui-radius, 6px) + 4px);
   }
 
   :host([density="compact"]) {
@@ -118,9 +118,9 @@
       --ui-toolbar-shadow: none;
     }
   }
-`;function c(s){if(!(s instanceof HTMLElement)||s.hasAttribute("disabled")||s.getAttribute("aria-disabled")==="true")return!1;const t=s.tagName.toLowerCase();return!!(["button","input","select","textarea","a"].includes(t)||s.hasAttribute("tabindex")||t.startsWith("ui-"))}class l extends u.ElementBase{static get observedAttributes(){return["orientation","headless","variant","size","density","wrap","loop","aria-label"]}constructor(){super(),this._onKeyDown=this._onKeyDown.bind(this)}connectedCallback(){super.connectedCallback(),this.root.addEventListener("keydown",this._onKeyDown),queueMicrotask(()=>this._syncRovingState())}disconnectedCallback(){this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}_focusables(){const t=this.root.querySelector("slot");if(!t)return[];const a=t.assignedElements({flatten:!0}),e=[],o=n=>{c(n)&&e.push(n)};a.forEach(n=>{o(n),n.querySelectorAll('button, [tabindex], a[href], input:not([type="hidden"]), select, textarea, ui-button, ui-toggle, ui-input, ui-select').forEach(o)});const r=new Set;return e.filter(n=>r.has(n)?!1:(r.add(n),!0))}_moveFocus(t,a){const e=this._focusables();if(e.length<2)return;const o=e.indexOf(t);if(o<0)return;const r=i.moveRovingFocusIndex(e,o,a,{wrap:this.hasAttribute("loop")||!this.hasAttribute("no-loop"),fallbackIndex:i.resolveRovingFocusIndex(e,{activeIndex:o,getDisabled:()=>!1}),getDisabled:()=>!1});if(r<0)return;const n=e[r];i.syncRovingTabStops(e,n,{activeAttribute:null}),i.focusRovingItem(n)}_syncRovingState(){const t=this._focusables();if(!t.length)return;const a=t.find(e=>e===document.activeElement)||t[i.resolveRovingFocusIndex(t,{getDisabled:()=>!1})];i.syncRovingTabStops(t,a||null,{activeAttribute:null})}_onKeyDown(t){const a=t.target;if(!a)return;const e=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal";if(e==="horizontal"&&t.key==="ArrowRight"||e==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),this._moveFocus(a,1);return}if(e==="horizontal"&&t.key==="ArrowLeft"||e==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),this._moveFocus(a,-1);return}if(t.key==="Home"){const o=this._focusables();if(!o.length)return;t.preventDefault();const r=i.getRovingFocusBoundaryIndex(o,"first",()=>!1);if(r<0)return;i.syncRovingTabStops(o,o[r],{activeAttribute:null}),i.focusRovingItem(o[r]);return}if(t.key==="End"){const o=this._focusables();if(!o.length)return;t.preventDefault();const r=i.getRovingFocusBoundaryIndex(o,"last",()=>!1);if(r<0)return;i.syncRovingTabStops(o,o[r],{activeAttribute:null}),i.focusRovingItem(o[r])}}shouldRenderOnAttributeChange(t,a,e){return!0}render(){const t=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",a=this.getAttribute("aria-label")||"Toolbar";this.setContent(`
-      <style>${b}</style>
-      <div class="toolbar" part="toolbar" role="toolbar" aria-label="${a}" aria-orientation="${t}">
+`;function b(s){if(!(s instanceof HTMLElement)||s.hasAttribute("disabled")||s.getAttribute("aria-disabled")==="true")return!1;const t=s.tagName.toLowerCase();return!!(["button","input","select","textarea","a"].includes(t)||s.hasAttribute("tabindex")||t.startsWith("ui-"))}class l extends u.ElementBase{static get observedAttributes(){return["orientation","headless","variant","size","density","wrap","loop","aria-label"]}constructor(){super(),this._onKeyDown=this._onKeyDown.bind(this)}connectedCallback(){super.connectedCallback(),this.root.addEventListener("keydown",this._onKeyDown),queueMicrotask(()=>this._syncRovingState())}disconnectedCallback(){this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}_focusables(){const t=this.root.querySelector("slot");if(!t)return[];const o=t.assignedElements({flatten:!0}),r=[],e=n=>{b(n)&&r.push(n)};o.forEach(n=>{e(n),n.querySelectorAll('button, [tabindex], a[href], input:not([type="hidden"]), select, textarea, ui-button, ui-toggle, ui-input, ui-select').forEach(e)});const a=new Set;return r.filter(n=>a.has(n)?!1:(a.add(n),!0))}_moveFocus(t,o){const r=this._focusables();if(r.length<2)return;const e=r.indexOf(t);if(e<0)return;const a=i.moveRovingFocusIndex(r,e,o,{wrap:this.hasAttribute("loop")||!this.hasAttribute("no-loop"),fallbackIndex:i.resolveRovingFocusIndex(r,{activeIndex:e,getDisabled:()=>!1}),getDisabled:()=>!1});if(a<0)return;const n=r[a];i.syncRovingTabStops(r,n,{activeAttribute:null}),i.focusRovingItem(n)}_inheritToggleVariant(){const t=this.getAttribute("variant")==="contrast";this.querySelectorAll("ui-toggle").forEach(o=>{t&&!o.hasAttribute("variant")?(o.setAttribute("variant","contrast"),o.setAttribute("data-inherited-variant","")):!t&&o.hasAttribute("data-inherited-variant")&&(o.removeAttribute("variant"),o.removeAttribute("data-inherited-variant"))})}_syncRovingState(){this._inheritToggleVariant();const t=this._focusables();if(!t.length)return;const o=t.find(r=>r===document.activeElement)||t[i.resolveRovingFocusIndex(t,{getDisabled:()=>!1})];i.syncRovingTabStops(t,o||null,{activeAttribute:null})}_onKeyDown(t){const o=t.target;if(!o)return;const r=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal";if(r==="horizontal"&&t.key==="ArrowRight"||r==="vertical"&&t.key==="ArrowDown"){t.preventDefault(),this._moveFocus(o,1);return}if(r==="horizontal"&&t.key==="ArrowLeft"||r==="vertical"&&t.key==="ArrowUp"){t.preventDefault(),this._moveFocus(o,-1);return}if(t.key==="Home"){const e=this._focusables();if(!e.length)return;t.preventDefault();const a=i.getRovingFocusBoundaryIndex(e,"first",()=>!1);if(a<0)return;i.syncRovingTabStops(e,e[a],{activeAttribute:null}),i.focusRovingItem(e[a]);return}if(t.key==="End"){const e=this._focusables();if(!e.length)return;t.preventDefault();const a=i.getRovingFocusBoundaryIndex(e,"last",()=>!1);if(a<0)return;i.syncRovingTabStops(e,e[a],{activeAttribute:null}),i.focusRovingItem(e[a])}}shouldRenderOnAttributeChange(t,o,r){return!0}render(){const t=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",o=this.getAttribute("aria-label")||"Toolbar";this.setContent(`
+      <style>${c}</style>
+      <div class="toolbar" part="toolbar" role="toolbar" aria-label="${o}" aria-orientation="${t}">
         <slot></slot>
       </div>
     `),queueMicrotask(()=>this._syncRovingState())}}typeof customElements<"u"&&!customElements.get("ui-toolbar")&&customElements.define("ui-toolbar",l);exports.UIToolbar=l;

package/dist/toolbar.esm.js

@@ -3,10 +3,10 @@ import { m as d, r as u, s, f as l, g as b } from "./roving-focus-group-Dbm1Jko_
 const f = `
   :host {
     --ui-toolbar-gap: 8px;
-    --ui-toolbar-padding: 8px;
-    --ui-toolbar-radius: 12px;
-    --ui-toolbar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
-    --ui-toolbar-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-toolbar-padding: 4px;
+    --ui-toolbar-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-toolbar-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-toolbar-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-toolbar-shadow:
       none;
 
@@ -75,15 +75,15 @@ const f = `
   }
 
   :host([size="sm"]) {
-    --ui-toolbar-gap: 6px;
-    --ui-toolbar-padding: 6px;
-    --ui-toolbar-radius: 10px;
+    --ui-toolbar-gap: 4px;
+    --ui-toolbar-padding: 2px;
+    --ui-toolbar-radius: var(--ui-radius, 6px);
   }
 
   :host([size="lg"]) {
-    --ui-toolbar-gap: 10px;
-    --ui-toolbar-padding: 10px;
-    --ui-toolbar-radius: 14px;
+    --ui-toolbar-gap: 6px;
+    --ui-toolbar-padding: 6px;
+    --ui-toolbar-radius: calc(var(--ui-radius, 6px) + 4px);
   }
 
   :host([density="compact"]) {
@@ -151,73 +151,81 @@ class h extends c {
   _focusables() {
     const t = this.root.querySelector("slot");
     if (!t) return [];
-    const a = t.assignedElements({ flatten: !0 }), e = [], o = (i) => {
+    const r = t.assignedElements({ flatten: !0 }), e = [], o = (i) => {
       p(i) && e.push(i);
     };
-    a.forEach((i) => {
+    r.forEach((i) => {
       o(i), i.querySelectorAll('button, [tabindex], a[href], input:not([type="hidden"]), select, textarea, ui-button, ui-toggle, ui-input, ui-select').forEach(o);
     });
-    const r = /* @__PURE__ */ new Set();
-    return e.filter((i) => r.has(i) ? !1 : (r.add(i), !0));
+    const a = /* @__PURE__ */ new Set();
+    return e.filter((i) => a.has(i) ? !1 : (a.add(i), !0));
   }
-  _moveFocus(t, a) {
+  _moveFocus(t, r) {
     const e = this._focusables();
     if (e.length < 2) return;
     const o = e.indexOf(t);
     if (o < 0) return;
-    const r = d(e, o, a, {
+    const a = d(e, o, r, {
       wrap: this.hasAttribute("loop") || !this.hasAttribute("no-loop"),
       fallbackIndex: u(e, { activeIndex: o, getDisabled: () => !1 }),
       getDisabled: () => !1
     });
-    if (r < 0) return;
-    const i = e[r];
+    if (a < 0) return;
+    const i = e[a];
     s(e, i, { activeAttribute: null }), l(i);
   }
+  /** A contrast toolbar is a dark surface: its toggles that set no variant of their own follow it. */
+  _inheritToggleVariant() {
+    const t = this.getAttribute("variant") === "contrast";
+    this.querySelectorAll("ui-toggle").forEach((r) => {
+      t && !r.hasAttribute("variant") ? (r.setAttribute("variant", "contrast"), r.setAttribute("data-inherited-variant", "")) : !t && r.hasAttribute("data-inherited-variant") && (r.removeAttribute("variant"), r.removeAttribute("data-inherited-variant"));
+    });
+  }
   _syncRovingState() {
+    this._inheritToggleVariant();
     const t = this._focusables();
     if (!t.length) return;
-    const a = t.find((e) => e === document.activeElement) || t[u(t, { getDisabled: () => !1 })];
-    s(t, a || null, { activeAttribute: null });
+    const r = t.find((e) => e === document.activeElement) || t[u(t, { getDisabled: () => !1 })];
+    s(t, r || null, { activeAttribute: null });
   }
   _onKeyDown(t) {
-    const a = t.target;
-    if (!a) return;
+    const r = t.target;
+    if (!r) return;
     const e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
     if (e === "horizontal" && t.key === "ArrowRight" || e === "vertical" && t.key === "ArrowDown") {
-      t.preventDefault(), this._moveFocus(a, 1);
+      t.preventDefault(), this._moveFocus(r, 1);
       return;
     }
     if (e === "horizontal" && t.key === "ArrowLeft" || e === "vertical" && t.key === "ArrowUp") {
-      t.preventDefault(), this._moveFocus(a, -1);
+      t.preventDefault(), this._moveFocus(r, -1);
       return;
     }
     if (t.key === "Home") {
       const o = this._focusables();
       if (!o.length) return;
       t.preventDefault();
-      const r = b(o, "first", () => !1);
-      if (r < 0) return;
-      s(o, o[r], { activeAttribute: null }), l(o[r]);
+      const a = b(o, "first", () => !1);
+      if (a < 0) return;
+      s(o, o[a], { activeAttribute: null }), l(o[a]);
       return;
     }
     if (t.key === "End") {
       const o = this._focusables();
       if (!o.length) return;
       t.preventDefault();
-      const r = b(o, "last", () => !1);
-      if (r < 0) return;
-      s(o, o[r], { activeAttribute: null }), l(o[r]);
+      const a = b(o, "last", () => !1);
+      if (a < 0) return;
+      s(o, o[a], { activeAttribute: null }), l(o[a]);
     }
   }
-  shouldRenderOnAttributeChange(t, a, e) {
+  shouldRenderOnAttributeChange(t, r, e) {
     return !0;
   }
   render() {
-    const t = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("aria-label") || "Toolbar";
+    const t = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", r = this.getAttribute("aria-label") || "Toolbar";
     this.setContent(`
       <style>${f}</style>
-      <div class="toolbar" part="toolbar" role="toolbar" aria-label="${a}" aria-orientation="${t}">
+      <div class="toolbar" part="toolbar" role="toolbar" aria-label="${r}" aria-orientation="${t}">
         <slot></slot>
       </div>
     `), queueMicrotask(() => this._syncRovingState());

package/dist/tooltip.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("./ElementBase-DxbvhLJs.js"),w=require("./portal-DgpQ3Jo1.js"),d=140,y=120,m=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("./ElementBase-DxbvhLJs.js"),y=require("./portal-XbYR3m_q.js"),d=require("./overlay-motion-B56x1GoY.js"),m=140,A=120,_=`
   .tooltip {
     color-scheme: light dark;
     --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 92%, #0b1220 8%);
@@ -23,7 +23,7 @@
     letter-spacing: 0.01em;
     opacity: 0;
     transform: translate3d(0, 4px, 0) scale(0.98);
-    transition: opacity ${d}ms ease, transform ${d}ms ease;
+    transition: opacity ${m}ms ease, transform ${m}ms ease;
     z-index: 3000;
     will-change: transform, opacity;
   }
@@ -156,4 +156,4 @@
       forced-color-adjust: none;
     }
   }
-`;function b(i){if(i==null)return!1;const t=String(i).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function a(i,t){const e=Number(i);return Number.isFinite(e)?e:t}function _(i){return i==="top"||i==="right"||i==="bottom"||i==="left"?i:"top"}function A(i){const t=(i||"hover focus").trim().toLowerCase();return t?new Set(t.split(/[\s,]+/).filter(Boolean)):new Set(["hover","focus"])}function l(i){return b(i)}class f extends E.ElementBase{constructor(){super(),this._portalEl=null,this._cleanup=null,this._id=`ui-tooltip-${Math.random().toString(36).slice(2,9)}`,this._isOpen=!1,this._syncingOpenAttr=!1,this._openTimer=null,this._closeTimer=null,this._exitTimer=null,this._pointerInsidePortal=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onPortalMouseEnter=this._handlePortalMouseEnter.bind(this),this._onPortalMouseLeave=this._handlePortalMouseLeave.bind(this),this._onDocumentPointerDown=this._handleDocumentPointerDown.bind(this)}static get observedAttributes(){return["text","placement","open","disabled","headless","variant","size","tone","delay","close-delay","trigger","offset","interactive","arrow","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this.hasAttribute("open")&&this._scheduleShow(0)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._clearTimers(),this.hide(!0),super.disconnectedCallback()}attributeChangedCallback(t,e,o){if(e!==o){if(t==="open"&&!this._syncingOpenAttr){this.hasAttribute("open")?this._scheduleShow(0):this._scheduleHide(0);return}if(t==="disabled"&&this.hasAttribute("disabled")){this.hide();return}if((t==="text"||t==="aria-label")&&this._isOpen&&!(this.getAttribute("text")||this.getAttribute("aria-label")||"").trim()){this.hide();return}if(this._isOpen&&["text","placement","variant","size","tone","headless","offset","arrow","aria-label","interactive"].includes(t)){this._renderPortalContent(),this._reposition();return}}}_clearTimers(){this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),this._exitTimer&&(clearTimeout(this._exitTimer),this._exitTimer=null)}_triggerEnabled(t){const e=A(this.getAttribute("trigger"));return e.has("manual")?t==="manual":e.has(t)}_scheduleShow(t){if(this.hasAttribute("disabled"))return;this._clearTimers();const e=typeof t=="number"?t:a(this.getAttribute("delay"),250);this._openTimer=setTimeout(()=>{this.show(),this._openTimer=null},Math.max(0,e))}_scheduleHide(t){this._clearTimers();const e=typeof t=="number"?t:a(this.getAttribute("close-delay"),120);this._closeTimer=setTimeout(()=>{if(l(this.getAttribute("interactive"))&&this._pointerInsidePortal){this._closeTimer=null;return}this.hide(),this._closeTimer=null},Math.max(0,e))}_ensurePortalEl(){if(this._portalEl)return this._portalEl;const t=document.createElement("div");if(t.className="tooltip",t.id=this._id,t.setAttribute("role","tooltip"),!this.hasAttribute("headless")){const o=document.createElement("style");o.setAttribute("data-ui-tooltip-style",""),o.textContent=m,t.appendChild(o)}const e=document.createElement("div");return e.className="tooltip-content",t.appendChild(e),t.addEventListener("mouseenter",this._onPortalMouseEnter),t.addEventListener("mouseleave",this._onPortalMouseLeave),this._portalEl=t,t}_handlePortalMouseEnter(){this._pointerInsidePortal=!0,this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null)}_handlePortalMouseLeave(){this._pointerInsidePortal=!1,l(this.getAttribute("interactive"))&&this._scheduleHide()}_renderPortalContent(){const t=this._ensurePortalEl(),e=this.getAttribute("text")||this.getAttribute("aria-label")||"",o=_(this.getAttribute("placement")),u=this.getAttribute("variant")||"default",v=this.getAttribute("size")||"md",g=this.getAttribute("tone")||"default",h=!this.hasAttribute("arrow")||b(this.getAttribute("arrow")),x=l(this.getAttribute("interactive")),c=this.hasAttribute("headless"),r=t.querySelector("style[data-ui-tooltip-style]");if(!c&&!r){const s=document.createElement("style");s.setAttribute("data-ui-tooltip-style",""),s.textContent=m,t.prepend(s)}else c&&r&&r.remove();t.setAttribute("data-variant",u),t.setAttribute("data-size",v),t.setAttribute("data-tone",g),t.setAttribute("data-placement",o),t.setAttribute("data-interactive",x?"true":"false");const p=t.querySelector(".tooltip-content");p&&(p.textContent=e);const n=t.querySelector(".arrow");if(h&&!n){const s=document.createElement("div");s.className="arrow",t.appendChild(s)}!h&&n&&n.remove()}_reposition(){if(!this._portalEl)return;this._cleanup&&(this._cleanup(),this._cleanup=null);const t=_(this.getAttribute("placement")),e=a(this.getAttribute("offset"),8);this._cleanup=w.showPortalFor(this,this._portalEl,{placement:t,offset:e,shift:!0,flip:!0})}_syncOpenAttr(t){this._syncingOpenAttr=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncingOpenAttr=!1}}show(){if(this.hasAttribute("disabled")||!(this.getAttribute("text")||this.getAttribute("aria-label")||"").trim())return;this._clearTimers(),this._renderPortalContent(),this._reposition(),this._portalEl&&(this._portalEl.classList.remove("closing"),this._portalEl.classList.add("show"),this.setAttribute("aria-describedby",this._id)),this._bindDocumentDismiss();const e=this._isOpen;this._isOpen=!0,this._syncOpenAttr(!0),e||(this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:!0},bubbles:!0,composed:!0})))}hide(t=!1){this._clearTimers(),this._unbindDocumentDismiss(),this._cleanup&&(this._cleanup(),this._cleanup=null);const e=this._portalEl;e&&(e.classList.remove("show"),e.classList.add("closing"),t?this._removePortal():this._exitTimer=setTimeout(()=>{this._removePortal(),this._exitTimer=null},y)),this._pointerInsidePortal=!1,this.removeAttribute("aria-describedby");const o=this._isOpen;this._isOpen=!1,this._syncOpenAttr(!1),o&&(this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:!1},bubbles:!0,composed:!0})))}_removePortal(){this._portalEl&&(this._portalEl.removeEventListener("mouseenter",this._onPortalMouseEnter),this._portalEl.removeEventListener("mouseleave",this._onPortalMouseLeave),this._portalEl.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null)}_bindDocumentDismiss(){this._triggerEnabled("click")&&document.addEventListener("pointerdown",this._onDocumentPointerDown)}_unbindDocumentDismiss(){document.removeEventListener("pointerdown",this._onDocumentPointerDown)}_handleDocumentPointerDown(t){if(!this._isOpen)return;const e=t.target;e&&(this.contains(e)||this._portalEl?.contains(e)||this.hide())}shouldRenderOnAttributeChange(t,e,o){return!1}_onMouseEnter(){this._triggerEnabled("hover")&&this._scheduleShow()}_onMouseLeave(){this._triggerEnabled("hover")&&this._scheduleHide()}_onFocusIn(){this._triggerEnabled("focus")&&this._scheduleShow(0)}_onFocusOut(t){if(!this._triggerEnabled("focus"))return;const e=t.relatedTarget;e&&this.contains(e)||e&&this._portalEl?.contains(e)||this._scheduleHide(0)}_onClick(){this._triggerEnabled("click")&&(this._isOpen?this.hide():this._scheduleShow(0))}_onKeyDown(t){t.key==="Escape"&&this._isOpen&&(t.preventDefault(),this.hide())}render(){this.setContent("<slot></slot>")}}typeof customElements<"u"&&!customElements.get("ui-tooltip")&&customElements.define("ui-tooltip",f);exports.UITooltip=f;
+`;function f(i){if(i==null)return!1;const t=String(i).toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function l(i,t){const e=Number(i);return Number.isFinite(e)?e:t}function b(i){return i==="top"||i==="right"||i==="bottom"||i==="left"?i:"top"}function T(i){const t=(i||"hover focus").trim().toLowerCase();return t?new Set(t.split(/[\s,]+/).filter(Boolean)):new Set(["hover","focus"])}function u(i){return f(i)}class v extends w.ElementBase{constructor(){super(),this._portalEl=null,this._cleanup=null,this._id=`ui-tooltip-${Math.random().toString(36).slice(2,9)}`,this._isOpen=!1,this._syncingOpenAttr=!1,this._openTimer=null,this._closeTimer=null,this._exitTimer=null,this._pointerInsidePortal=!1,this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onFocusOut=this._onFocusOut.bind(this),this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onPortalMouseEnter=this._handlePortalMouseEnter.bind(this),this._onPortalMouseLeave=this._handlePortalMouseLeave.bind(this),this._onDocumentPointerDown=this._handleDocumentPointerDown.bind(this)}static get observedAttributes(){return["text","placement","open","disabled","headless","variant","size","tone","delay","close-delay","trigger","offset","interactive","arrow","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave),this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut),this.addEventListener("click",this._onClick),this.addEventListener("keydown",this._onKeyDown),this.hasAttribute("open")&&this._scheduleShow(0)}disconnectedCallback(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),this.removeEventListener("keydown",this._onKeyDown),this._clearTimers(),this.hide(!0),super.disconnectedCallback()}attributeChangedCallback(t,e,o){if(e!==o){if(t==="open"&&!this._syncingOpenAttr){this.hasAttribute("open")?this._scheduleShow(0):this._scheduleHide(0);return}if(t==="disabled"&&this.hasAttribute("disabled")){this.hide();return}if((t==="text"||t==="aria-label")&&this._isOpen&&!(this.getAttribute("text")||this.getAttribute("aria-label")||"").trim()){this.hide();return}if(this._isOpen&&["text","placement","variant","size","tone","headless","offset","arrow","aria-label","interactive"].includes(t)){this._renderPortalContent(),this._reposition();return}}}_clearTimers(){this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),this._exitTimer&&(clearTimeout(this._exitTimer),this._exitTimer=null)}_triggerEnabled(t){const e=T(this.getAttribute("trigger"));return e.has("manual")?t==="manual":e.has(t)}_scheduleShow(t){if(this.hasAttribute("disabled"))return;this._clearTimers();const e=typeof t=="number"?t:l(this.getAttribute("delay"),250);this._openTimer=setTimeout(()=>{this.show(),this._openTimer=null},Math.max(0,e))}_scheduleHide(t){this._clearTimers();const e=typeof t=="number"?t:l(this.getAttribute("close-delay"),120);this._closeTimer=setTimeout(()=>{if(u(this.getAttribute("interactive"))&&this._pointerInsidePortal){this._closeTimer=null;return}this.hide(),this._closeTimer=null},Math.max(0,e))}_ensurePortalEl(){if(this._portalEl)return this._portalEl;const t=document.createElement("div");if(t.className="tooltip",t.id=this._id,t.setAttribute("role","tooltip"),!this.hasAttribute("headless")){const o=document.createElement("style");o.setAttribute("data-ui-tooltip-style",""),o.textContent=_,t.appendChild(o)}const e=document.createElement("div");return e.className="tooltip-content",t.appendChild(e),t.addEventListener("mouseenter",this._onPortalMouseEnter),t.addEventListener("mouseleave",this._onPortalMouseLeave),this._portalEl=t,t}_handlePortalMouseEnter(){this._pointerInsidePortal=!0,this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null)}_handlePortalMouseLeave(){this._pointerInsidePortal=!1,u(this.getAttribute("interactive"))&&this._scheduleHide()}_renderPortalContent(){const t=this._ensurePortalEl(),e=this.getAttribute("text")||this.getAttribute("aria-label")||"",o=b(this.getAttribute("placement")),r=this.getAttribute("variant")||"default",g=this.getAttribute("size")||"md",x=this.getAttribute("tone")||"default",h=!this.hasAttribute("arrow")||f(this.getAttribute("arrow")),E=u(this.getAttribute("interactive")),c=this.hasAttribute("headless"),n=t.querySelector("style[data-ui-tooltip-style]");if(!c&&!n){const s=document.createElement("style");s.setAttribute("data-ui-tooltip-style",""),s.textContent=_,t.prepend(s)}else c&&n&&n.remove();t.setAttribute("data-variant",r),t.setAttribute("data-size",g),t.setAttribute("data-tone",x),t.setAttribute("data-placement",o),t.setAttribute("data-interactive",E?"true":"false");const p=t.querySelector(".tooltip-content");p&&(p.textContent=e);const a=t.querySelector(".arrow");if(h&&!a){const s=document.createElement("div");s.className="arrow",t.appendChild(s)}!h&&a&&a.remove()}_reposition(){if(!this._portalEl)return;this._cleanup&&(this._cleanup(),this._cleanup=null);const t=b(this.getAttribute("placement")),e=l(this.getAttribute("offset"),8);this._cleanup=y.showPortalFor(this,this._portalEl,{placement:t,offset:e,shift:!0,flip:!0}),this._portalEl.getAttribute("data-state")==="open"&&d.liftToTopLayer(this._portalEl)}_syncOpenAttr(t){this._syncingOpenAttr=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncingOpenAttr=!1}}show(){if(this.hasAttribute("disabled")||!(this.getAttribute("text")||this.getAttribute("aria-label")||"").trim())return;this._clearTimers(),this._renderPortalContent(),this._reposition(),this._portalEl&&(this._portalEl.classList.remove("closing"),this._portalEl.classList.add("show"),this._portalEl.setAttribute("data-state","open"),d.liftToTopLayer(this._portalEl),this.setAttribute("aria-describedby",this._id)),this._bindDocumentDismiss();const e=this._isOpen;this._isOpen=!0,this._syncOpenAttr(!0),e||(this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:!0},bubbles:!0,composed:!0})))}hide(t=!1){this._clearTimers(),this._unbindDocumentDismiss(),this._cleanup&&(this._cleanup({remove:!1}),this._cleanup=null);const e=this._portalEl;if(e){e.classList.remove("show"),e.classList.add("closing"),e.setAttribute("data-state","closed");const r=typeof getComputedStyle=="function"?parseFloat(getComputedStyle(e).transitionDuration||"0"):0;t||!(r>0)?this._removePortal():this._exitTimer=setTimeout(()=>{this._removePortal(),this._exitTimer=null},A)}this._pointerInsidePortal=!1,this.removeAttribute("aria-describedby");const o=this._isOpen;this._isOpen=!1,this._syncOpenAttr(!1),o&&(this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{open:!1},bubbles:!0,composed:!0})))}_removePortal(){this._portalEl&&(this._portalEl.removeEventListener("mouseenter",this._onPortalMouseEnter),this._portalEl.removeEventListener("mouseleave",this._onPortalMouseLeave),this._portalEl.parentElement&&this._portalEl.parentElement.removeChild(this._portalEl),this._portalEl=null)}_bindDocumentDismiss(){this._triggerEnabled("click")&&document.addEventListener("pointerdown",this._onDocumentPointerDown)}_unbindDocumentDismiss(){document.removeEventListener("pointerdown",this._onDocumentPointerDown)}_handleDocumentPointerDown(t){if(!this._isOpen)return;const e=t.target;e&&(this.contains(e)||this._portalEl?.contains(e)||this.hide())}shouldRenderOnAttributeChange(t,e,o){return!1}_onMouseEnter(){this._triggerEnabled("hover")&&this._scheduleShow()}_onMouseLeave(){this._triggerEnabled("hover")&&this._scheduleHide()}_onFocusIn(){this._triggerEnabled("focus")&&this._scheduleShow(0)}_onFocusOut(t){if(!this._triggerEnabled("focus"))return;const e=t.relatedTarget;e&&this.contains(e)||e&&this._portalEl?.contains(e)||this._scheduleHide(0)}_onClick(){this._triggerEnabled("click")&&(this._isOpen?this.hide():this._scheduleShow(0))}_onKeyDown(t){t.key==="Escape"&&this._isOpen&&(t.preventDefault(),this.hide())}render(){this.setContent("<slot></slot>")}}typeof customElements<"u"&&!customElements.get("ui-tooltip")&&customElements.define("ui-tooltip",v);exports.UITooltip=v;