@threadlabs/looma 0.39.0 → 0.39.2

package/vue/components.css

@@ -1115,6 +1115,8 @@ svg,.arc {
 /* A count is an adornment, not another line of label text. Keep the standard control height
    with enough inset for a 24px mark; large content can still grow the button naturally. */
 
+/* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+
 /* Short numeric and icon actions share a minimum box; large values remain readable. */
 
 /* Card actions inherit Button's palette and behavior; only their shared layout changes.
@@ -1204,6 +1206,7 @@ svg,.arc {
 }
 :scope:where([data-hn-ui-button]) {
     --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+    box-sizing: border-box !important;
     appearance: none;
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
@@ -1244,6 +1247,18 @@ svg,.arc {
 :scope:not([data-appearance="link"]):has(.badge:not(:empty)):where([data-hn-ui-button]) {
     padding-block: var(--ui-space-0-5) !important;
 }
+.label:where([data-hn-ui-button]) {
+    display: block !important;
+    align-content: center !important;
+    min-inline-size: 0 !important;
+    min-block-size: 1lh !important;
+}
+.label:has(svg):where([data-hn-ui-button]) {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    text-box-trim: none;
+}
 .badge:where([data-hn-ui-button]) {
     display: inline-flex !important;
     align-items: center !important;
@@ -1253,7 +1268,7 @@ svg,.arc {
     display: none !important;
 }
 @supports (text-box-trim: trim-both) {
-:scope:where([data-hn-ui-button]) {
+.label:not(:has(svg)):where([data-hn-ui-button]) {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
 }
@@ -1545,6 +1560,10 @@ html[data-ui-input-modality="touch"]
       color var(--ui-motion-fast) var(--ui-motion-ease),
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
+:scope[data-appearance="link"] .label:where([data-hn-ui-button]) {
+    display: inline !important;
+    text-box-trim: none;
+}
 :scope[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     color: var(--ui-button-link-hover-text, var(--ui-text-primary));
     text-decoration-color: currentColor;
@@ -1908,19 +1927,20 @@ html[data-ui-input-modality="touch"]
 
 /* The label, and under it an optional line saying what the choice means. */
 
-/* Centre the tick's box and lift it slightly for the rotated check shape. */
-@keyframes ui-checkbox-check-d551a32f {
+/* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+   Centre that box directly; rotated border boxes do not centre the visible check. */
+@keyframes ui-checkbox-check-570a9f0b {
 from {
     opacity: 0;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
+    scale: 0.55;
 }
 65% {
     opacity: 1;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
+    scale: 1.12;
 }
 to {
     opacity: 1;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
+    scale: 1;
 }
 }
 
@@ -2008,7 +2028,8 @@ input:where([data-hn-ui-checkbox]) {
 }
 input:where([data-hn-ui-checkbox])::after {
     content: "";
-    position: absolute;
+    position: absolute !important;
+    transform: none !important;
     opacity: 0;
     transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
@@ -2019,27 +2040,26 @@ input:checked:where([data-hn-ui-checkbox]),input:indeterminate:where([data-hn-ui
     box-shadow: var(--ui-control-inset);
 }
 input:checked:where([data-hn-ui-checkbox])::after {
-    inset: 0;
-    margin: auto !important;
-    inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
-    block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
-    /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
-       component, which left the tick with no style and no colour. */
-    border-style: solid;
-    border-color: var(--ui-text-on-accent);
-    border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125)
-      calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
+    inset: 50% auto auto 50% !important;
+    inline-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+    block-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+    background: var(--ui-text-on-accent);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 11.5 5 5 9-9'/%3E%3C/svg%3E")
+      center / contain no-repeat;
     opacity: 1;
-    transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
-    animation: ui-checkbox-check-d551a32f var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    translate: -50% -50% !important;
+    animation: ui-checkbox-check-570a9f0b var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
-    inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
-    block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
+    mask: none;
+    animation: none;
+    inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto !important;
+    inline-size: auto !important;
+    block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125) !important;
     border-radius: var(--ui-radius-round);
     background: var(--ui-text-on-accent);
     opacity: 1;
-    transform: translateY(-50%);
+    translate: 0 -50% !important;
 }
 @media (prefers-reduced-motion: reduce) {
 input:where([data-hn-ui-checkbox])::after {
@@ -2047,6 +2067,17 @@ input:where([data-hn-ui-checkbox])::after {
       animation: none;
 }
 }
+@media (forced-colors: active) {
+input:checked:where([data-hn-ui-checkbox]),input:indeterminate:where([data-hn-ui-checkbox]) {
+      forced-color-adjust: none;
+      background: Highlight;
+      border-color: Highlight;
+}
+input:checked:where([data-hn-ui-checkbox])::after,input:indeterminate:where([data-hn-ui-checkbox])::after {
+      forced-color-adjust: none;
+      background: HighlightText;
+}
+}
 input:hover:enabled:where([data-hn-ui-checkbox]) {
     border-color: var(--ui-accent-solid);
 }
@@ -8746,6 +8777,122 @@ path:where([data-hn-ui-light-editor]) {
 }
 }
 }
+@scope ([data-slotted~="ui-light-editor"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-light-editor):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where([data-hn-ui-light-editor]) {
+    display: grid !important;
+    gap: var(--ui-space-3) !important;
+    min-inline-size: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.stage:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    box-sizing: border-box !important;
+    display: block !important;
+    block-size: 13rem;
+    padding: calc(var(--ui-control-min-block-size) / 2) !important;
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-field-radius, var(--ui-radius-md));
+    background: var(--ui-neutral-surface, var(--ui-surface));
+}
+.plane:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+}
+svg:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+}
+path:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    fill: none;
+    stroke: var(--ui-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+.specimen:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    position: absolute;
+    inset: 0;
+    display: grid !important;
+    place-items: center !important;
+}
+.source:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    translate: -50% -50%;
+    display: grid !important;
+    place-items: center !important;
+    inline-size: max(2rem, var(--ui-control-min-block-size));
+    block-size: max(2rem, var(--ui-control-min-block-size));
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    cursor: grab;
+    touch-action: none;
+}
+.source-glyph:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex !important;
+    color: var(--ui-accent);
+    font-size: var(--ui-font-size-lg);
+}
+.source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+    *):where([data-hn-ui-light-editor])::after {
+    content: "";
+    position: absolute;
+    inline-size: 2rem;
+    block-size: 2rem;
+    border: var(--ui-border-width) solid var(--ui-accent);
+    border-radius: 50%;
+    background: var(--ui-surface-raised);
+    box-shadow:
+      0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent),
+      var(--ui-shadow-sm);
+}
+.source:active:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    cursor: grabbing;
+}
+.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-space-1);
+}
+.source:disabled:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    cursor: not-allowed;
+}
+.source:disabled:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+    *):where([data-hn-ui-light-editor])::after {
+    background: var(--ui-disabled-surface);
+    border-color: var(--ui-disabled-border);
+    box-shadow: none;
+}
+.coordinates:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: var(--ui-space-2) !important;
+}
+.hint:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+}
+@media (forced-colors: active) {
+.source-glyph:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+      color: CanvasText;
+}
+.source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
+      *):where([data-hn-ui-light-editor])::after {
+      background: Canvas;
+      border-color: CanvasText;
+}
+.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
+      outline-color: Highlight;
+}
+}
+}
 
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-list-gap {
@@ -10486,13 +10633,26 @@ dialog:where([data-hn-ui-search-shell]) {
   syntax: "*";
   inherits: false;
 }
-@keyframes ui-skeleton-pulse-ee40410c {
-50% {
-    opacity: 0.45;
+@property --_ui-skeleton-viewport-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --_ui-skeleton-viewport-scale {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@keyframes ui-skeleton-shimmer-908ae327 {
+to {
+    background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x))
+      0;
 }
 }
 @scope (.ui-skeleton) to ([data-hn]) {
 :scope {
+    --_ui-skeleton-paint-x: var(--_ui-skeleton-viewport-x);
+    --_ui-skeleton-paint-scale: var(--_ui-skeleton-viewport-scale);
     display: block !important;
     position: relative;
     box-sizing: border-box !important;
@@ -10529,18 +10689,31 @@ dialog:where([data-hn-ui-search-shell]) {
     border-radius: var(--ui-radius-md);
 }
 :scope[data-ui-skeleton-state~="animated"]::before {
-    animation: ui-skeleton-pulse-ee40410c 1.6s ease-in-out infinite;
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.14)) 50%,
+      transparent
+    );
+    background-size: calc(100vw / var(--_ui-skeleton-paint-scale)) 100%;
+    background-position: calc(0vw - var(--_ui-skeleton-paint-x)) 0;
+    background-repeat: repeat-x;
+    animation: ui-skeleton-shimmer-908ae327 3s linear infinite;
 }
 @media (prefers-reduced-motion: reduce) {
 :scope[data-ui-skeleton-state~="animated"]::before {
       animation: none;
+      background-image: none;
 }
 }
 @media (forced-colors: active) {
 :scope::before {
       background: CanvasText;
       opacity: 0.2;
+}
+:scope[data-ui-skeleton-state~="animated"]::before {
       animation: none;
+      background-image: none;
 }
 }
 :scope[hidden] {
@@ -13688,6 +13861,7 @@ html[data-ui-input-modality="touch"]
 
     :scope:where([data-component~="ui-button"]) {
       --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+      box-sizing: border-box !important;
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
@@ -13734,6 +13908,21 @@ html[data-ui-input-modality="touch"]
       padding-block: var(--ui-space-0-5) !important;
     }
 
+    /* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+    .label {
+      display: block !important;
+      align-content: center !important;
+      min-inline-size: 0 !important;
+      min-block-size: 1lh !important;
+    }
+
+    .label:has(svg) {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      text-box-trim: none;
+    }
+
     .badge {
       display: inline-flex !important;
       align-items: center !important;
@@ -13745,7 +13934,7 @@ html[data-ui-input-modality="touch"]
     }
 
     @supports (text-box-trim: trim-both) {
-      :scope:where([data-component~="ui-button"]) {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -14073,6 +14262,11 @@ html[data-ui-input-modality="touch"]
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :scope:where([data-component~="ui-button"])[data-appearance="link"] .label {
+      display: inline !important;
+      text-box-trim: none;
+    }
+
     :scope:where([data-component~="ui-button"])[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
@@ -14110,6 +14304,8 @@ html[data-ui-input-modality="touch"]
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
 
+    /* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+
     @supports (text-box-trim: trim-both) {
     }
 
@@ -16448,7 +16644,8 @@ html[data-ui-input-modality="touch"]
 
     input:where(:not([data-component], [data-slotted]))::after {
       content: "";
-      position: absolute;
+      position: absolute !important;
+      transform: none !important;
       opacity: 0;
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
     }
@@ -16461,43 +16658,44 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--ui-control-inset);
     }
 
-    /* Centre the tick's box and lift it slightly for the rotated check shape. */
+    /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+       Centre that box directly; rotated border boxes do not centre the visible check. */
     input:checked:where(:not([data-component], [data-slotted]))::after {
-      inset: 0;
-      margin: auto !important;
-      inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
-      block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
-      /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
-         component, which left the tick with no style and no colour. */
-      border-style: solid;
-      border-color: var(--ui-text-on-accent);
-      border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125) calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
+      inset: 50% auto auto 50% !important;
+      inline-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+      block-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+      background: var(--ui-text-on-accent);
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 11.5 5 5 9-9'/%3E%3C/svg%3E")
+        center / contain no-repeat;
       opacity: 1;
-      transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
+      translate: -50% -50% !important;
       animation: ui-checkbox-check var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     input:indeterminate:where(:not([data-component], [data-slotted]))::after {
-      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
-      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
+      mask: none;
+      animation: none;
+      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto !important;
+      inline-size: auto !important;
+      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125) !important;
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-on-accent);
       opacity: 1;
-      transform: translateY(-50%);
+      translate: 0 -50% !important;
     }
 
     @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
+        scale: 0.55;
       }
       65% {
         opacity: 1;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
+        scale: 1.12;
       }
       to {
         opacity: 1;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
+        scale: 1;
       }
     }
 
@@ -16508,6 +16706,20 @@ html[data-ui-input-modality="touch"]
       }
     }
 
+    @media (forced-colors: active) {
+      input:checked,
+      input:indeterminate {
+        forced-color-adjust: none;
+        background: Highlight;
+        border-color: Highlight;
+      }
+      input:checked:where(:not([data-component], [data-slotted]))::after, 
+      input:indeterminate:where(:not([data-component], [data-slotted]))::after {
+        forced-color-adjust: none;
+        background: HighlightText;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }
@@ -16565,11 +16777,15 @@ html[data-ui-input-modality="touch"]
 
     /* The label, and under it an optional line saying what the choice means. */
 
-    /* Centre the tick's box and lift it slightly for the rotated check shape. */
+    /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+       Centre that box directly; rotated border boxes do not centre the visible check. */
 
     @media (prefers-reduced-motion: reduce) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */

package/vue/editor/index.js

@@ -3418,7 +3418,11 @@ var T12$1 = [
 	"\n      ",
 	1,
 	"\n      ",
-	4,
+	[
+		"span",
+		["class", "label"],
+		4
+	],
 	"\n      ",
 	[
 		"span",
@@ -3440,7 +3444,11 @@ var T16$1 = [
 	"\n      ",
 	1,
 	"\n      ",
-	4,
+	[
+		"span",
+		["class", "label"],
+		4
+	],
 	"\n      ",
 	[
 		"span",
@@ -4325,7 +4333,8 @@ function createUiButton(options = {}, html) {
 		n.append((P12$1 ??= buildTemplate(T12$1)).cloneNode(true));
 		const t0 = n.firstChild.nextSibling;
 		const t1 = t0.nextSibling.nextSibling.nextSibling;
-		const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
+		const t2 = t1.firstChild;
+		const t3 = t1.nextSibling.nextSibling.firstChild;
 		const r = {
 			n,
 			v0: void 0,
@@ -4340,12 +4349,12 @@ function createUiButton(options = {}, html) {
 			a1: t0,
 			e0: t0.nextSibling,
 			b0: void 0,
-			a2: t1,
-			e1: t1.nextSibling,
+			a2: t2,
+			e1: t2.nextSibling,
 			b1: void 0,
 			f1: void 0,
-			a3: t2,
-			e2: t2.nextSibling,
+			a3: t3,
+			e2: t3.nextSibling,
 			b2: void 0,
 			f2: void 0
 		};
@@ -4439,18 +4448,6 @@ function createUiButton(options = {}, html) {
 				r.e0.before(r.b0.n);
 			}
 		} else if (r.b0 !== void 0) r.b0;
-		if (r.f2 === void 0) {
-			r.f2 = 1;
-			const at = fillSlot(r.a3, r.e2, "badge", J, false, void 0, d);
-			if (Array.isArray(at)) (r.z ??= []).push(() => {
-				at[0].l.delete(at[1]);
-				dispose(at[1]);
-			});
-			else if (at !== void 0) {
-				r.b2 = m15(d);
-				at.before(r.b2.n);
-			}
-		} else if (r.b2 !== void 0) r.b2;
 		if (r.f1 === void 0) {
 			r.f1 = 1;
 			const at = fillSlot(r.a2, r.e1, "", J, false, void 0, d);
@@ -4463,12 +4460,25 @@ function createUiButton(options = {}, html) {
 				at.before(r.b1.n);
 			}
 		} else if (r.b1 !== void 0) r.b1;
+		if (r.f2 === void 0) {
+			r.f2 = 1;
+			const at = fillSlot(r.a3, r.e2, "badge", J, false, void 0, d);
+			if (Array.isArray(at)) (r.z ??= []).push(() => {
+				at[0].l.delete(at[1]);
+				dispose(at[1]);
+			});
+			else if (at !== void 0) {
+				r.b2 = m15(d);
+				at.before(r.b2.n);
+			}
+		} else if (r.b2 !== void 0) r.b2;
 	};
 	const m16 = (n, d) => {
 		n.append((P16$1 ??= buildTemplate(T16$1)).cloneNode(true));
 		const t0 = n.firstChild.nextSibling;
 		const t1 = t0.nextSibling.nextSibling.nextSibling;
-		const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
+		const t2 = t1.firstChild;
+		const t3 = t1.nextSibling.nextSibling.firstChild;
 		const r = {
 			n,
 			v0: void 0,
@@ -4481,12 +4491,12 @@ function createUiButton(options = {}, html) {
 			a1: t0,
 			e0: t0.nextSibling,
 			b0: void 0,
-			a2: t1,
-			e1: t1.nextSibling,
+			a2: t2,
+			e1: t2.nextSibling,
 			b1: void 0,
 			f1: void 0,
-			a3: t2,
-			e2: t2.nextSibling,
+			a3: t3,
+			e2: t3.nextSibling,
 			b2: void 0,
 			f2: void 0
 		};
@@ -4560,18 +4570,6 @@ function createUiButton(options = {}, html) {
 				r.e0.before(r.b0.n);
 			}
 		} else if (r.b0 !== void 0) r.b0;
-		if (r.f2 === void 0) {
-			r.f2 = 1;
-			const at = fillSlot(r.a3, r.e2, "badge", J, false, void 0, d);
-			if (Array.isArray(at)) (r.z ??= []).push(() => {
-				at[0].l.delete(at[1]);
-				dispose(at[1]);
-			});
-			else if (at !== void 0) {
-				r.b2 = m19(d);
-				at.before(r.b2.n);
-			}
-		} else if (r.b2 !== void 0) r.b2;
 		if (r.f1 === void 0) {
 			r.f1 = 1;
 			const at = fillSlot(r.a2, r.e1, "", J, false, void 0, d);
@@ -4584,6 +4582,18 @@ function createUiButton(options = {}, html) {
 				at.before(r.b1.n);
 			}
 		} else if (r.b1 !== void 0) r.b1;
+		if (r.f2 === void 0) {
+			r.f2 = 1;
+			const at = fillSlot(r.a3, r.e2, "badge", J, false, void 0, d);
+			if (Array.isArray(at)) (r.z ??= []).push(() => {
+				at[0].l.delete(at[1]);
+				dispose(at[1]);
+			});
+			else if (at !== void 0) {
+				r.b2 = m19(d);
+				at.before(r.b2.n);
+			}
+		} else if (r.b2 !== void 0) r.b2;
 	};
 	const M = [
 		m0,