@editora/ui-core 0.1.18 → 0.1.20

package/dist/toast.esm.js

@@ -1,4 +1,4 @@
-import { E as l } from "./ElementBase-909688f3.mjs";
+import { E as l } from "./ElementBase-YlTLMsGk.mjs";
 const u = 3200, c = 170, d = `
   :host {
     display: block;
@@ -213,19 +213,19 @@ const u = 3200, c = 170, d = `
   }
 `;
 let h = 0;
-function p(a) {
-  return String(a).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function p(i) {
+  return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function m(a) {
-  const t = String(a || "").toLowerCase();
+function m(i) {
+  const t = String(i || "").toLowerCase();
   return t === "success" || t === "warning" || t === "error" || t === "loading" || t === "neutral" ? t : "info";
 }
-function g(a) {
-  const t = Number(a);
+function g(i) {
+  const t = Number(i);
   return Number.isFinite(t) ? Math.max(0, Math.trunc(t)) : u;
 }
-function f(a) {
-  const t = String(a || "polite").toLowerCase();
+function f(i) {
+  const t = String(i || "polite").toLowerCase();
   return t === "off" || t === "assertive" ? t : "polite";
 }
 class b extends l {
@@ -248,28 +248,27 @@ class b extends l {
     t ? this.setAttribute("headless", "") : this.removeAttribute("headless");
   }
   show(t, e = {}) {
-    const o = ++h, s = m(e.type), i = g(e.duration), r = f(e.ariaLive), n = {
+    const o = ++h, s = m(e.type), a = g(e.duration), r = f(e.ariaLive), n = {
       id: o,
       message: String(t ?? ""),
-      duration: i,
+      duration: a,
       tone: s,
       ariaLive: r,
       createdAt: Date.now(),
       closing: !1
     };
-    return this._toasts.push(n), this._trimVisibleToasts(), this.requestRender(), this.dispatchEvent(new CustomEvent("show", { detail: { id: o, message: n.message, type: s }, bubbles: !0 })), this._scheduleAutoHide(o, i), o;
+    return this._toasts.push(n), this._trimVisibleToasts(), this.requestRender(), this.dispatchEvent(new CustomEvent("show", { detail: { id: o, message: n.message, type: s }, bubbles: !0 })), this._scheduleAutoHide(o, a), o;
   }
   hide(t) {
-    const e = this._toasts.find((i) => i.id === t);
-    if (!e || e.closing)
-      return;
+    const e = this._toasts.find((a) => a.id === t);
+    if (!e || e.closing) return;
     e.closing = !0, this._clearToastTimer(t), this.requestRender();
     const o = this._exitMap.get(t);
     o && clearTimeout(o);
     const s = setTimeout(() => {
       this._exitMap.delete(t);
-      const i = this._toasts.length;
-      this._toasts = this._toasts.filter((r) => r.id !== t), this._toasts.length !== i && (this.requestRender(), this.dispatchEvent(new CustomEvent("hide", { detail: { id: t }, bubbles: !0 })));
+      const a = this._toasts.length;
+      this._toasts = this._toasts.filter((r) => r.id !== t), this._toasts.length !== a && (this.requestRender(), this.dispatchEvent(new CustomEvent("hide", { detail: { id: t }, bubbles: !0 })));
     }, c);
     this._exitMap.set(t, s);
   }
@@ -279,13 +278,11 @@ class b extends l {
   }
   _trimVisibleToasts() {
     const t = this._toasts.filter((s) => !s.closing), e = this._maxVisible();
-    if (t.length <= e)
-      return;
-    [...t].sort((s, i) => s.createdAt - i.createdAt).slice(0, t.length - e).forEach((s) => this.hide(s.id));
+    if (t.length <= e) return;
+    [...t].sort((s, a) => s.createdAt - a.createdAt).slice(0, t.length - e).forEach((s) => this.hide(s.id));
   }
   _scheduleAutoHide(t, e) {
-    if (this._clearToastTimer(t), e <= 0)
-      return;
+    if (this._clearToastTimer(t), e <= 0) return;
     const o = Date.now(), s = setTimeout(() => {
       this._timerMap.delete(t), this.hide(t);
     }, e);
@@ -293,16 +290,14 @@ class b extends l {
   }
   _pauseToast(t) {
     const e = this._timerMap.get(t);
-    if (!e || e.paused)
-      return;
+    if (!e || e.paused) return;
     clearTimeout(e.timeout);
     const o = Date.now() - e.startedAt;
     e.remaining = Math.max(0, e.remaining - o), e.paused = !0, this._timerMap.set(t, e);
   }
   _resumeToast(t) {
     const e = this._timerMap.get(t);
-    if (!e || !e.paused)
-      return;
+    if (!e || !e.paused) return;
     const o = Math.max(0, e.remaining);
     this._scheduleAutoHide(t, o);
   }
@@ -313,27 +308,22 @@ class b extends l {
     o && (clearTimeout(o), this._exitMap.delete(t));
   }
   _clearAllTimers() {
-    for (const t of this._timerMap.values())
-      clearTimeout(t.timeout);
+    for (const t of this._timerMap.values()) clearTimeout(t.timeout);
     this._timerMap.clear();
-    for (const t of this._exitMap.values())
-      clearTimeout(t);
+    for (const t of this._exitMap.values()) clearTimeout(t);
     this._exitMap.clear();
   }
   _closestToastId(t) {
-    const e = t instanceof HTMLElement ? t : null, o = e == null ? void 0 : e.closest(".toast[data-toast-id]");
-    if (!o)
-      return null;
+    const o = (t instanceof HTMLElement ? t : null)?.closest(".toast[data-toast-id]");
+    if (!o) return null;
     const s = Number(o.getAttribute("data-toast-id"));
     return Number.isFinite(s) ? s : null;
   }
   _handleRootClick(t) {
     const e = t.target;
-    if (!e)
-      return;
+    if (!e) return;
     const o = e.closest("button.close[data-toast-id]");
-    if (!o)
-      return;
+    if (!o) return;
     t.preventDefault();
     const s = Number(o.getAttribute("data-toast-id"));
     Number.isNaN(s) || this.hide(s);
@@ -343,24 +333,20 @@ class b extends l {
     e != null && this._pauseToast(e);
   }
   _handleRootMouseLeave(t) {
-    var i;
     const e = this._closestToastId(t.target);
-    if (e == null)
-      return;
-    const o = (i = t.target) == null ? void 0 : i.closest(".toast[data-toast-id]"), s = t.relatedTarget;
-    s && (o != null && o.contains(s)) || this._resumeToast(e);
+    if (e == null) return;
+    const o = t.target?.closest(".toast[data-toast-id]"), s = t.relatedTarget;
+    s && o?.contains(s) || this._resumeToast(e);
   }
   _handleRootFocusIn(t) {
     const e = this._closestToastId(t.target);
     e != null && this._pauseToast(e);
   }
   _handleRootFocusOut(t) {
-    var i;
     const e = this._closestToastId(t.target);
-    if (e == null)
-      return;
-    const o = t.relatedTarget, s = (i = t.target) == null ? void 0 : i.closest(".toast[data-toast-id]");
-    o && (s != null && s.contains(o)) || this._resumeToast(e);
+    if (e == null) return;
+    const o = t.relatedTarget, s = t.target?.closest(".toast[data-toast-id]");
+    o && s?.contains(o) || this._resumeToast(e);
   }
   render() {
     this.setContent(`

package/dist/toggle-group.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-1b301e7f.js"),d=require("./roving-focus-group-5c059bf9.js"),_=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-EV6mVBUV.js"),g=require("./roving-focus-group-BdJ_4Njm.js"),y=`
   :host {
     --ui-toggle-group-gap: 8px;
     --ui-toggle-group-padding: 6px;
@@ -115,17 +115,17 @@
       --ui-toggle-group-shadow: none;
     }
   }
-`,x=new Set(["multiple","orientation","aria-label","required","disabled"]);function S(n){return String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function w(n){try{return JSON.parse(n)}catch{return}}function I(n,t){if(!t)return n||"";if(!n)return[];const e=w(n);return Array.isArray(e)?Array.from(new Set(e.map(r=>String(r)).filter(Boolean))):n.includes(",")?Array.from(new Set(n.split(",").map(r=>r.trim()).filter(Boolean))):[n]}function m(n,t){return t?JSON.stringify(Array.isArray(n)?n:[String(n)]):String(n||"")}class A extends y.ElementBase{constructor(){super(),this._observer=null,this._isSyncing=!1,this._focusIndex=-1,this._onToggleEvent=this._onToggleEvent.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["value","multiple","disabled","headless","orientation","variant","size","density","shape","elevation","allow-empty","required","activation","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._onToggleEvent),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(t=>{this._isSyncing||(t.forEach(e=>{e.type!=="childList"||e.removedNodes.length===0||e.removedNodes.forEach(r=>this._clearGroupFlagsFromNode(r))}),this._syncChildren())}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["value","data-value","disabled","pressed","data-disabled"]}),this._syncChildren()}attributeChangedCallback(t,e,r){if(e!==r){if(x.has(t)){if(!this.root.querySelector(".group")){this.requestRender();return}this._syncGroupA11y()}this._syncChildren()}}disconnectedCallback(){this.removeEventListener("change",this._onToggleEvent),this.removeEventListener("keydown",this._onKeyDown),this._toggles().forEach(t=>this._clearGroupFlags(t)),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}get multiple(){return this.hasAttribute("multiple")}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get value(){return I(this.getAttribute("value"),this.multiple)}set value(t){const e=m(t,this.multiple);if(!this.multiple&&!e){this.hasAttribute("value")&&this.removeAttribute("value"),this._syncChildren();return}this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncChildren()}_toggles(){return Array.from(this.querySelectorAll("ui-toggle"))}_toggleValue(t,e){var r;return t.getAttribute("value")||t.getAttribute("data-value")||((r=t.textContent)==null?void 0:r.trim())||String(e)}_clearGroupFlags(t){var e;t.hasAttribute("data-group-item")&&t.removeAttribute("data-group-item"),t.hasAttribute("data-group-disabled")&&t.removeAttribute("data-group-disabled"),t.hasAttribute("role")&&t.removeAttribute("role"),t.hasAttribute("aria-checked")&&t.removeAttribute("aria-checked"),(e=t._syncAria)==null||e.call(t)}_clearGroupFlagsFromNode(t){if(!(t instanceof HTMLElement))return;t.matches("ui-toggle")&&this._clearGroupFlags(t),Array.from(t.querySelectorAll("ui-toggle")).forEach(r=>this._clearGroupFlags(r))}_selectedSet(){const t=this.value;return Array.isArray(t)?new Set(t.map(e=>String(e))):t?new Set([String(t)]):new Set}_setGroupValue(t,e=!0){const r=m(t,this.multiple),a=this.getAttribute("value")||"";if(!this.multiple&&!r&&!a||a===r){this._syncChildren();return}if(!this.multiple&&!r?this.removeAttribute("value"):this.setAttribute("value",r),this._syncChildren(),!e)return;const i={value:this.multiple?Array.isArray(t)?t:[String(t)]:String(t||""),values:this.multiple?Array.isArray(t)?t:[String(t)]:t?[String(t)]:[],multiple:this.multiple};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:i,bubbles:!0,composed:!0}))}_syncChildren(){const t=this._toggles(),e=this.hasAttribute("disabled"),r=this._selectedSet(),a=this.multiple,i=(u,s,l)=>{const f=u.hasAttribute(s);l&&!f&&u.setAttribute(s,""),!l&&f&&u.removeAttribute(s)},c=(u,s,l)=>{u.getAttribute(s)!==l&&u.setAttribute(s,l)};let h=-1,p=-1;this._isSyncing=!0;try{t.forEach((s,l)=>{const f=this._toggleValue(s,l),g=s.hasAttribute("data-disabled")||s.getAttribute("aria-disabled")==="true",o=e||g;i(s,"data-group-item",!0),o?(i(s,"disabled",!0),i(s,"data-group-disabled",e&&!g)):s.hasAttribute("data-group-disabled")&&(i(s,"disabled",!1),i(s,"data-group-disabled",!1));const b=r.has(f);i(s,"pressed",b),c(s,"role",a?"checkbox":"radio"),c(s,"aria-checked",b?"true":"false"),b&&p<0&&(p=l),!s.hasAttribute("disabled")&&h<0&&(h=l)});const u=d.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:p>=0?p:h,getDisabled:s=>s.hasAttribute("disabled")});this._focusIndex=u,d.syncRovingTabStops(t,t[u]||null,{activeAttribute:null})}finally{this._isSyncing=!1}}_onToggleEvent(t){var p;const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle"||this.hasAttribute("disabled"))return;const a=this._toggles().indexOf(e);if(a<0)return;const i=this._toggleValue(e,a),c=((p=t.detail)==null?void 0:p.pressed)??e.hasAttribute("pressed");if(this._focusIndex=a,this.multiple){const u=this._selectedSet();c?u.add(i):u.delete(i),this._setGroupValue(Array.from(u),!0);return}const h=this.hasAttribute("allow-empty")&&!this.hasAttribute("required");if(c){this._setGroupValue(i,!0);return}if(h)this._setGroupValue("",!0);else{const u=String(this.value||"");this._setGroupValue(u||i,!1)}}_onKeyDown(t){var l,f;const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle")return;const r=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",a=this.getAttribute("activation")==="manual"?"manual":"auto",i=this._toggles().filter(g=>!g.hasAttribute("disabled"));if(i.length<2)return;const c=i.indexOf(e);if(c<0)return;const h=this._isHorizontalRtl(),p=g=>{var v;const o=d.moveRovingFocusIndex(i,c,g,{wrap:!0,fallbackIndex:d.resolveRovingFocusIndex(i,{activeIndex:c,getDisabled:()=>!1}),getDisabled:()=>!1});if(o<0)return;const b=i[o];this._focusIndex=this._toggles().indexOf(b),d.syncRovingTabStops(i,b,{activeAttribute:null}),d.focusRovingItem(b),a==="auto"&&((v=b.toggle)==null||v.call(b,!0))},u=r==="horizontal"&&(t.key==="ArrowRight"&&!h||t.key==="ArrowLeft"&&h)||r==="vertical"&&t.key==="ArrowDown",s=r==="horizontal"&&(t.key==="ArrowLeft"&&!h||t.key==="ArrowRight"&&h)||r==="vertical"&&t.key==="ArrowUp";if(u){t.preventDefault(),p(1);return}if(s){t.preventDefault(),p(-1);return}if(t.key==="Home"){t.preventDefault();const g=d.getRovingFocusBoundaryIndex(i,"first",()=>!1);if(g<0)return;const o=i[g];this._focusIndex=this._toggles().indexOf(o),d.syncRovingTabStops(i,o,{activeAttribute:null}),d.focusRovingItem(o),a==="auto"&&((l=o.toggle)==null||l.call(o,!0));return}if(t.key==="End"){t.preventDefault();const g=d.getRovingFocusBoundaryIndex(i,"last",()=>!1);if(g<0)return;const o=i[g];this._focusIndex=this._toggles().indexOf(o),d.syncRovingTabStops(i,o,{activeAttribute:null}),d.focusRovingItem(o),a==="auto"&&((f=o.toggle)==null||f.call(o,!0))}}render(){const t=this.multiple?"group":"radiogroup",e=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",r=this.getAttribute("aria-label")||"Toggle group",a=this.hasAttribute("required"),i=this.hasAttribute("disabled");this.setContent(`
-      <style>${_}</style>
+`,_=new Set(["multiple","orientation","aria-label","required","disabled"]);function x(n){return String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(n){try{return JSON.parse(n)}catch{return}}function w(n,t){if(!t)return n||"";if(!n)return[];const e=S(n);return Array.isArray(e)?Array.from(new Set(e.map(i=>String(i)).filter(Boolean))):n.includes(",")?Array.from(new Set(n.split(",").map(i=>i.trim()).filter(Boolean))):[n]}function f(n,t){return t?JSON.stringify(Array.isArray(n)?n:[String(n)]):String(n||"")}class v extends A.ElementBase{constructor(){super(),this._observer=null,this._isSyncing=!1,this._focusIndex=-1,this._onToggleEvent=this._onToggleEvent.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["value","multiple","disabled","headless","orientation","variant","size","density","shape","elevation","allow-empty","required","activation","aria-label"]}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._onToggleEvent),this.addEventListener("keydown",this._onKeyDown),this._observer=new MutationObserver(t=>{this._isSyncing||(t.forEach(e=>{e.type!=="childList"||e.removedNodes.length===0||e.removedNodes.forEach(i=>this._clearGroupFlagsFromNode(i))}),this._syncChildren())}),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["value","data-value","disabled","pressed","data-disabled"]}),this._syncChildren()}attributeChangedCallback(t,e,i){if(e!==i){if(_.has(t)){if(!this.root.querySelector(".group")){this.requestRender();return}this._syncGroupA11y()}this._syncChildren()}}disconnectedCallback(){this.removeEventListener("change",this._onToggleEvent),this.removeEventListener("keydown",this._onKeyDown),this._toggles().forEach(t=>this._clearGroupFlags(t)),this._observer&&(this._observer.disconnect(),this._observer=null),super.disconnectedCallback()}get multiple(){return this.hasAttribute("multiple")}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}get value(){return w(this.getAttribute("value"),this.multiple)}set value(t){const e=f(t,this.multiple);if(!this.multiple&&!e){this.hasAttribute("value")&&this.removeAttribute("value"),this._syncChildren();return}this.getAttribute("value")!==e&&this.setAttribute("value",e),this._syncChildren()}_toggles(){return Array.from(this.querySelectorAll("ui-toggle"))}_toggleValue(t,e){return t.getAttribute("value")||t.getAttribute("data-value")||t.textContent?.trim()||String(e)}_clearGroupFlags(t){t.hasAttribute("data-group-item")&&t.removeAttribute("data-group-item"),t.hasAttribute("data-group-disabled")&&t.removeAttribute("data-group-disabled"),t.hasAttribute("role")&&t.removeAttribute("role"),t.hasAttribute("aria-checked")&&t.removeAttribute("aria-checked"),t._syncAria?.()}_clearGroupFlagsFromNode(t){if(!(t instanceof HTMLElement))return;t.matches("ui-toggle")&&this._clearGroupFlags(t),Array.from(t.querySelectorAll("ui-toggle")).forEach(i=>this._clearGroupFlags(i))}_selectedSet(){const t=this.value;return Array.isArray(t)?new Set(t.map(e=>String(e))):t?new Set([String(t)]):new Set}_setGroupValue(t,e=!0){const i=f(t,this.multiple),a=this.getAttribute("value")||"";if(!this.multiple&&!i&&!a||a===i){this._syncChildren();return}if(!this.multiple&&!i?this.removeAttribute("value"):this.setAttribute("value",i),this._syncChildren(),!e)return;const r={value:this.multiple?Array.isArray(t)?t:[String(t)]:String(t||""),values:this.multiple?Array.isArray(t)?t:[String(t)]:t?[String(t)]:[],multiple:this.multiple};this.dispatchEvent(new CustomEvent("input",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:r,bubbles:!0,composed:!0}))}_syncChildren(){const t=this._toggles(),e=this.hasAttribute("disabled"),i=this._selectedSet(),a=this.multiple,r=(c,s,o)=>{const u=c.hasAttribute(s);o&&!u&&c.setAttribute(s,""),!o&&u&&c.removeAttribute(s)},d=(c,s,o)=>{c.getAttribute(s)!==o&&c.setAttribute(s,o)};let h=-1,l=-1;this._isSyncing=!0;try{t.forEach((s,o)=>{const u=this._toggleValue(s,o),p=s.hasAttribute("data-disabled")||s.getAttribute("aria-disabled")==="true",m=e||p;r(s,"data-group-item",!0),m?(r(s,"disabled",!0),r(s,"data-group-disabled",e&&!p)):s.hasAttribute("data-group-disabled")&&(r(s,"disabled",!1),r(s,"data-group-disabled",!1));const b=i.has(u);r(s,"pressed",b),d(s,"role",a?"checkbox":"radio"),d(s,"aria-checked",b?"true":"false"),b&&l<0&&(l=o),!s.hasAttribute("disabled")&&h<0&&(h=o)});const c=g.resolveRovingFocusIndex(t,{activeIndex:this._focusIndex,selectedIndex:l>=0?l:h,getDisabled:s=>s.hasAttribute("disabled")});this._focusIndex=c,g.syncRovingTabStops(t,t[c]||null,{activeAttribute:null})}finally{this._isSyncing=!1}}_onToggleEvent(t){const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle"||this.hasAttribute("disabled"))return;const a=this._toggles().indexOf(e);if(a<0)return;const r=this._toggleValue(e,a),d=t.detail?.pressed??e.hasAttribute("pressed");if(this._focusIndex=a,this.multiple){const l=this._selectedSet();d?l.add(r):l.delete(r),this._setGroupValue(Array.from(l),!0);return}const h=this.hasAttribute("allow-empty")&&!this.hasAttribute("required");if(d){this._setGroupValue(r,!0);return}if(h)this._setGroupValue("",!0);else{const l=String(this.value||"");this._setGroupValue(l||r,!1)}}_onKeyDown(t){const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-toggle")return;const i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",a=this.getAttribute("activation")==="manual"?"manual":"auto",r=this._toggles().filter(o=>!o.hasAttribute("disabled"));if(r.length<2)return;const d=r.indexOf(e);if(d<0)return;const h=this._isHorizontalRtl(),l=o=>{const u=g.moveRovingFocusIndex(r,d,o,{wrap:!0,fallbackIndex:g.resolveRovingFocusIndex(r,{activeIndex:d,getDisabled:()=>!1}),getDisabled:()=>!1});if(u<0)return;const p=r[u];this._focusIndex=this._toggles().indexOf(p),g.syncRovingTabStops(r,p,{activeAttribute:null}),g.focusRovingItem(p),a==="auto"&&p.toggle?.(!0)},c=i==="horizontal"&&(t.key==="ArrowRight"&&!h||t.key==="ArrowLeft"&&h)||i==="vertical"&&t.key==="ArrowDown",s=i==="horizontal"&&(t.key==="ArrowLeft"&&!h||t.key==="ArrowRight"&&h)||i==="vertical"&&t.key==="ArrowUp";if(c){t.preventDefault(),l(1);return}if(s){t.preventDefault(),l(-1);return}if(t.key==="Home"){t.preventDefault();const o=g.getRovingFocusBoundaryIndex(r,"first",()=>!1);if(o<0)return;const u=r[o];this._focusIndex=this._toggles().indexOf(u),g.syncRovingTabStops(r,u,{activeAttribute:null}),g.focusRovingItem(u),a==="auto"&&u.toggle?.(!0);return}if(t.key==="End"){t.preventDefault();const o=g.getRovingFocusBoundaryIndex(r,"last",()=>!1);if(o<0)return;const u=r[o];this._focusIndex=this._toggles().indexOf(u),g.syncRovingTabStops(r,u,{activeAttribute:null}),g.focusRovingItem(u),a==="auto"&&u.toggle?.(!0)}}render(){const t=this.multiple?"group":"radiogroup",e=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",i=this.getAttribute("aria-label")||"Toggle group",a=this.hasAttribute("required"),r=this.hasAttribute("disabled");this.setContent(`
+      <style>${y}</style>
       <div
         class="group"
         part="group"
         role="${t}"
-        aria-label="${S(r)}"
+        aria-label="${x(i)}"
         aria-orientation="${e}"
-        aria-disabled="${i?"true":"false"}"
+        aria-disabled="${r?"true":"false"}"
         aria-required="${a?"true":"false"}"
       >
         <slot></slot>
       </div>
-    `),this._syncChildren()}_syncGroupA11y(){const t=this.root.querySelector(".group");if(!t)return;const e=this.multiple?"group":"radiogroup",r=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",a=this.getAttribute("aria-label")||"Toggle group",i=this.hasAttribute("required"),c=this.hasAttribute("disabled");t.getAttribute("role")!==e&&t.setAttribute("role",e),t.getAttribute("aria-label")!==a&&t.setAttribute("aria-label",a),t.getAttribute("aria-orientation")!==r&&t.setAttribute("aria-orientation",r),t.setAttribute("aria-disabled",c?"true":"false"),t.setAttribute("aria-required",i?"true":"false")}_isHorizontalRtl(){if(this.getAttribute("orientation")==="vertical")return!1;const t=this.getAttribute("dir");return t?t.toLowerCase()==="rtl":typeof window>"u"?!1:window.getComputedStyle(this).direction==="rtl"}shouldRenderOnAttributeChange(t,e,r){return!1}}typeof customElements<"u"&&!customElements.get("ui-toggle-group")&&customElements.define("ui-toggle-group",A);exports.UIToggleGroup=A;
+    `),this._syncChildren()}_syncGroupA11y(){const t=this.root.querySelector(".group");if(!t)return;const e=this.multiple?"group":"radiogroup",i=this.getAttribute("orientation")==="vertical"?"vertical":"horizontal",a=this.getAttribute("aria-label")||"Toggle group",r=this.hasAttribute("required"),d=this.hasAttribute("disabled");t.getAttribute("role")!==e&&t.setAttribute("role",e),t.getAttribute("aria-label")!==a&&t.setAttribute("aria-label",a),t.getAttribute("aria-orientation")!==i&&t.setAttribute("aria-orientation",i),t.setAttribute("aria-disabled",d?"true":"false"),t.setAttribute("aria-required",r?"true":"false")}_isHorizontalRtl(){if(this.getAttribute("orientation")==="vertical")return!1;const t=this.getAttribute("dir");return t?t.toLowerCase()==="rtl":typeof window>"u"?!1:window.getComputedStyle(this).direction==="rtl"}shouldRenderOnAttributeChange(t,e,i){return!1}}typeof customElements<"u"&&!customElements.get("ui-toggle-group")&&customElements.define("ui-toggle-group",v);exports.UIToggleGroup=v;

package/dist/toggle-group.esm.js

@@ -1,6 +1,6 @@
-import { E as x } from "./ElementBase-909688f3.mjs";
-import { r as A, s as f, g as y, f as m, m as w } from "./roving-focus-group-4350c9a7.mjs";
-const S = `
+import { E as _ } from "./ElementBase-YlTLMsGk.mjs";
+import { r as m, s as p, g as v, f, m as x } from "./roving-focus-group-Dbm1Jko_.mjs";
+const w = `
   :host {
     --ui-toggle-group-gap: 8px;
     --ui-toggle-group-padding: 6px;
@@ -117,29 +117,27 @@ const S = `
       --ui-toggle-group-shadow: none;
     }
   }
-`, E = /* @__PURE__ */ new Set(["multiple", "orientation", "aria-label", "required", "disabled"]);
-function C(n) {
+`, S = /* @__PURE__ */ new Set(["multiple", "orientation", "aria-label", "required", "disabled"]);
+function E(n) {
   return String(n).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function I(n) {
+function C(n) {
   try {
     return JSON.parse(n);
   } catch {
     return;
   }
 }
-function k(n, t) {
-  if (!t)
-    return n || "";
-  if (!n)
-    return [];
-  const e = I(n);
-  return Array.isArray(e) ? Array.from(new Set(e.map((r) => String(r)).filter(Boolean))) : n.includes(",") ? Array.from(new Set(n.split(",").map((r) => r.trim()).filter(Boolean))) : [n];
+function I(n, t) {
+  if (!t) return n || "";
+  if (!n) return [];
+  const e = C(n);
+  return Array.isArray(e) ? Array.from(new Set(e.map((i) => String(i)).filter(Boolean))) : n.includes(",") ? Array.from(new Set(n.split(",").map((i) => i.trim()).filter(Boolean))) : [n];
 }
-function _(n, t) {
+function A(n, t) {
   return t ? JSON.stringify(Array.isArray(n) ? n : [String(n)]) : String(n || "");
 }
-class z extends x {
+class k extends _ {
   constructor() {
     super(), this._observer = null, this._isSyncing = !1, this._focusIndex = -1, this._onToggleEvent = this._onToggleEvent.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
   }
@@ -164,7 +162,7 @@ class z extends x {
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("change", this._onToggleEvent), this.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver((t) => {
       this._isSyncing || (t.forEach((e) => {
-        e.type !== "childList" || e.removedNodes.length === 0 || e.removedNodes.forEach((r) => this._clearGroupFlagsFromNode(r));
+        e.type !== "childList" || e.removedNodes.length === 0 || e.removedNodes.forEach((i) => this._clearGroupFlagsFromNode(i));
       }), this._syncChildren());
     }), this._observer.observe(this, {
       childList: !0,
@@ -174,9 +172,9 @@ class z extends x {
       attributeFilter: ["value", "data-value", "disabled", "pressed", "data-disabled"]
     }), this._syncChildren();
   }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r) {
-      if (E.has(t)) {
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (S.has(t)) {
         if (!this.root.querySelector(".group")) {
           this.requestRender();
           return;
@@ -196,10 +194,10 @@ class z extends x {
     t ? this.setAttribute("multiple", "") : this.removeAttribute("multiple");
   }
   get value() {
-    return k(this.getAttribute("value"), this.multiple);
+    return I(this.getAttribute("value"), this.multiple);
   }
   set value(t) {
-    const e = _(t, this.multiple);
+    const e = A(t, this.multiple);
     if (!this.multiple && !e) {
       this.hasAttribute("value") && this.removeAttribute("value"), this._syncChildren();
       return;
@@ -210,149 +208,133 @@ class z extends x {
     return Array.from(this.querySelectorAll("ui-toggle"));
   }
   _toggleValue(t, e) {
-    var r;
-    return t.getAttribute("value") || t.getAttribute("data-value") || ((r = t.textContent) == null ? void 0 : r.trim()) || String(e);
+    return t.getAttribute("value") || t.getAttribute("data-value") || t.textContent?.trim() || String(e);
   }
   _clearGroupFlags(t) {
-    var e;
-    t.hasAttribute("data-group-item") && t.removeAttribute("data-group-item"), t.hasAttribute("data-group-disabled") && t.removeAttribute("data-group-disabled"), t.hasAttribute("role") && t.removeAttribute("role"), t.hasAttribute("aria-checked") && t.removeAttribute("aria-checked"), (e = t._syncAria) == null || e.call(t);
+    t.hasAttribute("data-group-item") && t.removeAttribute("data-group-item"), t.hasAttribute("data-group-disabled") && t.removeAttribute("data-group-disabled"), t.hasAttribute("role") && t.removeAttribute("role"), t.hasAttribute("aria-checked") && t.removeAttribute("aria-checked"), t._syncAria?.();
   }
   _clearGroupFlagsFromNode(t) {
-    if (!(t instanceof HTMLElement))
-      return;
-    t.matches("ui-toggle") && this._clearGroupFlags(t), Array.from(t.querySelectorAll("ui-toggle")).forEach((r) => this._clearGroupFlags(r));
+    if (!(t instanceof HTMLElement)) return;
+    t.matches("ui-toggle") && this._clearGroupFlags(t), Array.from(t.querySelectorAll("ui-toggle")).forEach((i) => this._clearGroupFlags(i));
   }
   _selectedSet() {
     const t = this.value;
     return Array.isArray(t) ? new Set(t.map((e) => String(e))) : t ? /* @__PURE__ */ new Set([String(t)]) : /* @__PURE__ */ new Set();
   }
   _setGroupValue(t, e = !0) {
-    const r = _(t, this.multiple), a = this.getAttribute("value") || "";
-    if (!this.multiple && !r && !a || a === r) {
+    const i = A(t, this.multiple), a = this.getAttribute("value") || "";
+    if (!this.multiple && !i && !a || a === i) {
       this._syncChildren();
       return;
     }
-    if (!this.multiple && !r ? this.removeAttribute("value") : this.setAttribute("value", r), this._syncChildren(), !e)
-      return;
-    const i = {
+    if (!this.multiple && !i ? this.removeAttribute("value") : this.setAttribute("value", i), this._syncChildren(), !e) return;
+    const r = {
       value: this.multiple ? Array.isArray(t) ? t : [String(t)] : String(t || ""),
       values: this.multiple ? Array.isArray(t) ? t : [String(t)] : t ? [String(t)] : [],
       multiple: this.multiple
     };
-    this.dispatchEvent(new CustomEvent("input", { detail: i, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: i, bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent("input", { detail: r, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: r, bubbles: !0, composed: !0 }));
   }
   _syncChildren() {
-    const t = this._toggles(), e = this.hasAttribute("disabled"), r = this._selectedSet(), a = this.multiple, i = (u, s, l) => {
-      const b = u.hasAttribute(s);
-      l && !b && u.setAttribute(s, ""), !l && b && u.removeAttribute(s);
-    }, g = (u, s, l) => {
-      u.getAttribute(s) !== l && u.setAttribute(s, l);
+    const t = this._toggles(), e = this.hasAttribute("disabled"), i = this._selectedSet(), a = this.multiple, r = (d, s, o) => {
+      const u = d.hasAttribute(s);
+      o && !u && d.setAttribute(s, ""), !o && u && d.removeAttribute(s);
+    }, g = (d, s, o) => {
+      d.getAttribute(s) !== o && d.setAttribute(s, o);
     };
-    let c = -1, h = -1;
+    let c = -1, l = -1;
     this._isSyncing = !0;
     try {
-      t.forEach((s, l) => {
-        const b = this._toggleValue(s, l), d = s.hasAttribute("data-disabled") || s.getAttribute("aria-disabled") === "true", o = e || d;
-        i(s, "data-group-item", !0), o ? (i(s, "disabled", !0), i(s, "data-group-disabled", e && !d)) : s.hasAttribute("data-group-disabled") && (i(s, "disabled", !1), i(s, "data-group-disabled", !1));
-        const p = r.has(b);
-        i(s, "pressed", p), g(s, "role", a ? "checkbox" : "radio"), g(s, "aria-checked", p ? "true" : "false"), p && h < 0 && (h = l), !s.hasAttribute("disabled") && c < 0 && (c = l);
+      t.forEach((s, o) => {
+        const u = this._toggleValue(s, o), h = s.hasAttribute("data-disabled") || s.getAttribute("aria-disabled") === "true", y = e || h;
+        r(s, "data-group-item", !0), y ? (r(s, "disabled", !0), r(s, "data-group-disabled", e && !h)) : s.hasAttribute("data-group-disabled") && (r(s, "disabled", !1), r(s, "data-group-disabled", !1));
+        const b = i.has(u);
+        r(s, "pressed", b), g(s, "role", a ? "checkbox" : "radio"), g(s, "aria-checked", b ? "true" : "false"), b && l < 0 && (l = o), !s.hasAttribute("disabled") && c < 0 && (c = o);
       });
-      const u = A(t, {
+      const d = m(t, {
         activeIndex: this._focusIndex,
-        selectedIndex: h >= 0 ? h : c,
+        selectedIndex: l >= 0 ? l : c,
         getDisabled: (s) => s.hasAttribute("disabled")
       });
-      this._focusIndex = u, f(t, t[u] || null, { activeAttribute: null });
+      this._focusIndex = d, p(t, t[d] || null, { activeAttribute: null });
     } finally {
       this._isSyncing = !1;
     }
   }
   _onToggleEvent(t) {
-    var h;
     const e = t.target;
-    if (!e || e.tagName.toLowerCase() !== "ui-toggle" || this.hasAttribute("disabled"))
-      return;
+    if (!e || e.tagName.toLowerCase() !== "ui-toggle" || this.hasAttribute("disabled")) return;
     const a = this._toggles().indexOf(e);
-    if (a < 0)
-      return;
-    const i = this._toggleValue(e, a), g = ((h = t.detail) == null ? void 0 : h.pressed) ?? e.hasAttribute("pressed");
+    if (a < 0) return;
+    const r = this._toggleValue(e, a), g = t.detail?.pressed ?? e.hasAttribute("pressed");
     if (this._focusIndex = a, this.multiple) {
-      const u = this._selectedSet();
-      g ? u.add(i) : u.delete(i), this._setGroupValue(Array.from(u), !0);
+      const l = this._selectedSet();
+      g ? l.add(r) : l.delete(r), this._setGroupValue(Array.from(l), !0);
       return;
     }
     const c = this.hasAttribute("allow-empty") && !this.hasAttribute("required");
     if (g) {
-      this._setGroupValue(i, !0);
+      this._setGroupValue(r, !0);
       return;
     }
-    if (c)
-      this._setGroupValue("", !0);
+    if (c) this._setGroupValue("", !0);
     else {
-      const u = String(this.value || "");
-      this._setGroupValue(u || i, !1);
+      const l = String(this.value || "");
+      this._setGroupValue(l || r, !1);
     }
   }
   _onKeyDown(t) {
-    var l, b;
     const e = t.target;
-    if (!e || e.tagName.toLowerCase() !== "ui-toggle")
-      return;
-    const r = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("activation") === "manual" ? "manual" : "auto", i = this._toggles().filter((d) => !d.hasAttribute("disabled"));
-    if (i.length < 2)
-      return;
-    const g = i.indexOf(e);
-    if (g < 0)
-      return;
-    const c = this._isHorizontalRtl(), h = (d) => {
-      var v;
-      const o = w(i, g, d, {
+    if (!e || e.tagName.toLowerCase() !== "ui-toggle") return;
+    const i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("activation") === "manual" ? "manual" : "auto", r = this._toggles().filter((o) => !o.hasAttribute("disabled"));
+    if (r.length < 2) return;
+    const g = r.indexOf(e);
+    if (g < 0) return;
+    const c = this._isHorizontalRtl(), l = (o) => {
+      const u = x(r, g, o, {
         wrap: !0,
-        fallbackIndex: A(i, { activeIndex: g, getDisabled: () => !1 }),
+        fallbackIndex: m(r, { activeIndex: g, getDisabled: () => !1 }),
         getDisabled: () => !1
       });
-      if (o < 0)
-        return;
-      const p = i[o];
-      this._focusIndex = this._toggles().indexOf(p), f(i, p, { activeAttribute: null }), m(p), a === "auto" && ((v = p.toggle) == null || v.call(p, !0));
-    }, u = r === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || r === "vertical" && t.key === "ArrowDown", s = r === "horizontal" && (t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c) || r === "vertical" && t.key === "ArrowUp";
-    if (u) {
-      t.preventDefault(), h(1);
+      if (u < 0) return;
+      const h = r[u];
+      this._focusIndex = this._toggles().indexOf(h), p(r, h, { activeAttribute: null }), f(h), a === "auto" && h.toggle?.(!0);
+    }, d = i === "horizontal" && (t.key === "ArrowRight" && !c || t.key === "ArrowLeft" && c) || i === "vertical" && t.key === "ArrowDown", s = i === "horizontal" && (t.key === "ArrowLeft" && !c || t.key === "ArrowRight" && c) || i === "vertical" && t.key === "ArrowUp";
+    if (d) {
+      t.preventDefault(), l(1);
       return;
     }
     if (s) {
-      t.preventDefault(), h(-1);
+      t.preventDefault(), l(-1);
       return;
     }
     if (t.key === "Home") {
       t.preventDefault();
-      const d = y(i, "first", () => !1);
-      if (d < 0)
-        return;
-      const o = i[d];
-      this._focusIndex = this._toggles().indexOf(o), f(i, o, { activeAttribute: null }), m(o), a === "auto" && ((l = o.toggle) == null || l.call(o, !0));
+      const o = v(r, "first", () => !1);
+      if (o < 0) return;
+      const u = r[o];
+      this._focusIndex = this._toggles().indexOf(u), p(r, u, { activeAttribute: null }), f(u), a === "auto" && u.toggle?.(!0);
       return;
     }
     if (t.key === "End") {
       t.preventDefault();
-      const d = y(i, "last", () => !1);
-      if (d < 0)
-        return;
-      const o = i[d];
-      this._focusIndex = this._toggles().indexOf(o), f(i, o, { activeAttribute: null }), m(o), a === "auto" && ((b = o.toggle) == null || b.call(o, !0));
+      const o = v(r, "last", () => !1);
+      if (o < 0) return;
+      const u = r[o];
+      this._focusIndex = this._toggles().indexOf(u), p(r, u, { activeAttribute: null }), f(u), a === "auto" && u.toggle?.(!0);
     }
   }
   render() {
-    const t = this.multiple ? "group" : "radiogroup", e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", r = this.getAttribute("aria-label") || "Toggle group", a = this.hasAttribute("required"), i = this.hasAttribute("disabled");
+    const t = this.multiple ? "group" : "radiogroup", e = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", i = this.getAttribute("aria-label") || "Toggle group", a = this.hasAttribute("required"), r = this.hasAttribute("disabled");
     this.setContent(`
-      <style>${S}</style>
+      <style>${w}</style>
       <div
         class="group"
         part="group"
         role="${t}"
-        aria-label="${C(r)}"
+        aria-label="${E(i)}"
         aria-orientation="${e}"
-        aria-disabled="${i ? "true" : "false"}"
+        aria-disabled="${r ? "true" : "false"}"
         aria-required="${a ? "true" : "false"}"
       >
         <slot></slot>
@@ -361,22 +343,20 @@ class z extends x {
   }
   _syncGroupA11y() {
     const t = this.root.querySelector(".group");
-    if (!t)
-      return;
-    const e = this.multiple ? "group" : "radiogroup", r = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("aria-label") || "Toggle group", i = this.hasAttribute("required"), g = this.hasAttribute("disabled");
-    t.getAttribute("role") !== e && t.setAttribute("role", e), t.getAttribute("aria-label") !== a && t.setAttribute("aria-label", a), t.getAttribute("aria-orientation") !== r && t.setAttribute("aria-orientation", r), t.setAttribute("aria-disabled", g ? "true" : "false"), t.setAttribute("aria-required", i ? "true" : "false");
+    if (!t) return;
+    const e = this.multiple ? "group" : "radiogroup", i = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal", a = this.getAttribute("aria-label") || "Toggle group", r = this.hasAttribute("required"), g = this.hasAttribute("disabled");
+    t.getAttribute("role") !== e && t.setAttribute("role", e), t.getAttribute("aria-label") !== a && t.setAttribute("aria-label", a), t.getAttribute("aria-orientation") !== i && t.setAttribute("aria-orientation", i), t.setAttribute("aria-disabled", g ? "true" : "false"), t.setAttribute("aria-required", r ? "true" : "false");
   }
   _isHorizontalRtl() {
-    if (this.getAttribute("orientation") === "vertical")
-      return !1;
+    if (this.getAttribute("orientation") === "vertical") return !1;
     const t = this.getAttribute("dir");
     return t ? t.toLowerCase() === "rtl" : typeof window > "u" ? !1 : window.getComputedStyle(this).direction === "rtl";
   }
-  shouldRenderOnAttributeChange(t, e, r) {
+  shouldRenderOnAttributeChange(t, e, i) {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-toggle-group") && customElements.define("ui-toggle-group", z);
+typeof customElements < "u" && !customElements.get("ui-toggle-group") && customElements.define("ui-toggle-group", k);
 export {
-  z as UIToggleGroup
+  k as UIToggleGroup
 };

package/dist/toggle.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),c=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-EV6mVBUV.js"),c=`
   :host {
     --ui-toggle-radius: 10px;
     --ui-toggle-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);

package/dist/toggle.esm.js

@@ -1,4 +1,4 @@
-import { E as g } from "./ElementBase-909688f3.mjs";
+import { E as g } from "./ElementBase-YlTLMsGk.mjs";
 const u = `
   :host {
     --ui-toggle-radius: 10px;
@@ -221,8 +221,7 @@ const u = `
   }
 `, l = /* @__PURE__ */ new Set(["icon-on", "icon-off", "aria-label"]);
 function c(o) {
-  if (o == null)
-    return !1;
+  if (o == null) return !1;
   const e = String(o).toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
@@ -281,8 +280,7 @@ class d extends g {
     e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   toggle(e) {
-    if (this.disabled)
-      return;
+    if (this.disabled) return;
     const t = typeof e == "boolean" ? e : !this.pressed;
     if (t === this.pressed) {
       this._syncAria();

package/dist/toolbar.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),i=require("./roving-focus-group-5c059bf9.js"),b=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-EV6mVBUV.js"),i=require("./roving-focus-group-BdJ_4Njm.js"),b=`
   :host {
     --ui-toolbar-gap: 8px;
     --ui-toolbar-padding: 8px;