@threadlabs/looma 0.39.0 → 0.39.2

package/vue/UiButton.vue

@@ -904,10 +904,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       v-if="checkedProps.loading || checkedProps.pending"
       class="spinner-wrap"
       data-hn-ui-button
-    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<slot />{{ ' ' }}<span
-      class="badge"
+    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<span
+      class="label"
       data-hn-ui-button
-    ><slot name="badge" /></span></a>
+    ><slot /></span>{{ ' ' }}<span class="badge" data-hn-ui-button><slot name="badge" /></span></a>
   <button
     v-else
     class="ui-button"
@@ -944,10 +944,10 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       v-if="checkedProps.loading || checkedProps.pending"
       class="spinner-wrap"
       data-hn-ui-button
-    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<slot />{{ ' ' }}<span
-      class="badge"
+    ><UiSpinner class="ui-spinner" size="sm" /></span>{{ ' ' }}<span
+      class="label"
       data-hn-ui-button
-    ><slot name="badge" /></span>
+    ><slot /></span>{{ ' ' }}<span class="badge" data-hn-ui-button><slot name="badge" /></span>
   </button>
 </template>
 
@@ -1031,6 +1031,8 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 /* 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.
@@ -1125,6 +1127,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
 
   :global(: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;
@@ -1166,6 +1169,19 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   :global(:scope:not([data-appearance="link"]):has(.badge:not(:empty)):where([data-hn-ui-button])) {
     padding-block: var(--ui-space-0-5) !important;
   }
+  :global(.label:where([data-hn-ui-button])) {
+    display: block !important;
+    align-content: center !important;
+    min-inline-size: 0 !important;
+    min-block-size: 1lh !important;
+  }
+
+  :global(.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;
+  }
 
   :global(.badge:where([data-hn-ui-button])) {
     display: inline-flex !important;
@@ -1178,7 +1194,7 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
   }
 
   @supports (text-box-trim: trim-both) {
-    :global(:scope:where([data-hn-ui-button])) {
+    :global(.label:not(:has(svg)):where([data-hn-ui-button])) {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
     }
@@ -1499,6 +1515,11 @@ useComponentHost(() => import('../components/ui-button/ui-button.js'), {
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
+  :global(:scope[data-appearance="link"] .label:where([data-hn-ui-button])) {
+    display: inline !important;
+    text-box-trim: none;
+  }
+
   :global(: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;

package/vue/UiCheckbox.vue

@@ -377,20 +377,21 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 
 /* 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. */
 
 @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;
   }
 }
 
@@ -484,7 +485,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 
   :global(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);
   }
@@ -497,29 +499,28 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     box-shadow: var(--ui-control-inset);
   }
   :global(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);
+    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;
   }
 
   :global(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) {
@@ -529,6 +530,20 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     }
   }
 
+  @media (forced-colors: active) {
+    :global(input:checked:where([data-hn-ui-checkbox])),
+    :global(input:indeterminate:where([data-hn-ui-checkbox])) {
+      forced-color-adjust: none;
+      background: Highlight;
+      border-color: Highlight;
+    }
+    :global(input:checked:where([data-hn-ui-checkbox])::after),
+    :global(input:indeterminate:where([data-hn-ui-checkbox])::after) {
+      forced-color-adjust: none;
+      background: HighlightText;
+    }
+  }
+
   :global(input:hover:enabled:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-accent-solid);
   }

package/vue/UiLightEditor.vue

@@ -23,6 +23,7 @@ import {
   vPropValidity,
   vuePropInputs,
 } from './props'
+import UiDisclosure from './UiDisclosure.vue'
 import UiIcon from './UiIcon.vue'
 import UiNumberInput from './UiNumberInput.vue'
 
@@ -262,46 +263,45 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
               class="ui-icon"
               name="lightbulb"
             /></span>
-        </button></span></span>{{ ' ' }}<span
-      class="coordinates"
-      data-hn-ui-light-editor
-    ><UiNumberInput
-        class="ui-number-input"
-        data-coordinate="x"
-        :min="0"
-        :max="100"
-        :step="1"
-        unit="%"
-        label="Light horizontal position"
-        :value="horizontal"
-        :size="checkedProps.size"
-        :disabled="checkedProps.disabled"
-        v-bind="{
-          [BINDING_INPUTS_PROP]: {
-            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
-            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
-          },
-        }"
-      />{{ ' ' }}<UiNumberInput
-        class="ui-number-input"
-        data-coordinate="y"
-        :min="0"
-        :max="100"
-        :step="1"
-        unit="%"
-        label="Light vertical position"
-        :value="vertical"
-        :size="checkedProps.size"
-        :disabled="checkedProps.disabled"
-        v-bind="{
-          [BINDING_INPUTS_PROP]: {
-            size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
-            disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
-          },
-        }"
-      /></span>{{ ' ' }}<span class="hint" data-hn-ui-light-editor
-    >Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a
-      drag. Top centre is 50%, 0%.</span></span>
+        </button></span></span>{{ ' ' }}<span class="hint" data-hn-ui-light-editor
+    >Drag or tap to move the light. Arrow keys adjust; Escape cancels.</span>{{ ' ' }}<UiDisclosure
+      class="ui-disclosure"
+      summary="Exact position"
+    ><span class="coordinates" data-slotted="ui-light-editor" data-hn-ui-light-editor><UiNumberInput
+          class="ui-number-input"
+          data-coordinate="x"
+          :min="0"
+          :max="100"
+          :step="1"
+          unit="%"
+          label="Light horizontal position"
+          :value="horizontal"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        />{{ ' ' }}<UiNumberInput
+          class="ui-number-input"
+          data-coordinate="y"
+          :min="0"
+          :max="100"
+          :step="1"
+          unit="%"
+          label="Light vertical position"
+          :value="vertical"
+          :size="checkedProps.size"
+          :disabled="checkedProps.disabled"
+          v-bind="{
+            [BINDING_INPUTS_PROP]: {
+              size: () => ({ value: checkedProps.size, status: inputStatus('size', true) }),
+              disabled: () => ({ value: checkedProps.disabled, status: inputStatus('disabled', true) }),
+            },
+          }"
+        /></span></UiDisclosure></span>
 </template>
 
 <style scoped>
@@ -418,4 +418,120 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
     }
   }
 }
+@scope ([data-slotted~="ui-light-editor"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(: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;
+  }
+  :global(.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));
+  }
+  :global(.plane:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :global(svg:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :global(path:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    fill: none;
+    stroke: var(--ui-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+  }
+  :global(.specimen:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    position: absolute;
+    inset: 0;
+    display: grid !important;
+    place-items: center !important;
+  }
+  :global(.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;
+  }
+  :global(.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);
+  }
+  :global(.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);
+  }
+  :global(.source:active:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    cursor: grabbing;
+  }
+  :global(.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);
+  }
+  :global(.source:disabled:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+    cursor: not-allowed;
+  }
+  :global(.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;
+  }
+  :global(.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;
+  }
+  :global(.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) {
+    :global(.source-glyph:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+      color: CanvasText;
+    }
+    :global(.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;
+    }
+    :global(.source:focus-visible:where(:scope, :scope *):where([data-hn-ui-light-editor])) {
+      outline-color: Highlight;
+    }
+  }
+}
 </style>

package/vue/UiSkeleton.vue

@@ -1,13 +1,20 @@
 <!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, watchSyncEffect } from 'vue'
+import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import {
   BINDING_INPUTS_PROP,
   checkedProp,
   checkPropInput,
   type InputBindings,
+  propValidityState,
   READY_INPUT,
   requireInputStatus,
   UNRESOLVED_INPUT,
@@ -24,8 +31,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'animated' },
       description:
-        'Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.',
-      default: false,
+        'Moves a subtle highlight from left to right. On by default; pass false to keep it static. Reduced-motion preferences always disable the shimmer.',
+      default: true,
     },
     height: {
       type: { kind: 'terminal', name: 'string' },
@@ -62,13 +69,13 @@ const props = defineProps({
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
-  animated: false,
+  animated: true,
   height: '',
   shape: 'text',
   width: '',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
-  animated: false,
+  animated: true,
   height: '',
   shape: 'text',
   width: '',
@@ -124,7 +131,9 @@ watchSyncEffect(() => {
   void checkedProps.value
 })
 const reflectedProp = useReflectedProp()
+const hydrationInstance = getCurrentInstance()
 
+const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('span', 'ui-skeleton')
 
 /** The values the styles' :host() and :state() rules test. */
@@ -135,6 +144,31 @@ const hostState = computed(() =>
     checkedProps.value.animated && 'animated',
   ].filter(Boolean).join(' ')
 )
+
+const dispatch = createDispatch(root)
+
+useComponentHost(() => import('../components/ui-skeleton/ui-skeleton.js'), {
+  root,
+  module: true,
+  dispatch,
+  controllerSource: {
+    specifier: '../components/ui-skeleton/ui-skeleton.js',
+    definition: './components/ui-skeleton/ui-skeleton.html',
+  },
+  props: checkedProps,
+  inputs: propInputs,
+  inputTracking,
+  propInputs: (name: string) => {
+    const incoming = hydrationInstance?.vnode.props
+    const kebab = name.replace(/[A-Z]/g, (letter) => '-' + letter.toLowerCase())
+    return incoming !== null && incoming !== undefined
+      ? (incoming[name] ?? incoming[kebab] ?? null)
+      : null
+  },
+  propNames: ['animated', 'height', 'shape', 'width'],
+  propValidity: (name: string) =>
+    propValidityState({ contract: propValidityContract, values: { ...props } }, name),
+})
 </script>
 
 <template>
@@ -153,6 +187,7 @@ const hostState = computed(() =>
     :data-ui-skeleton-prop-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
     :data-ui-skeleton-prop-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
     :data-ui-skeleton-state="hostState || undefined"
+    ref="root"
   ></span>
 </template>
 
@@ -166,13 +201,26 @@ const hostState = computed(() =>
   syntax: "*";
   inherits: false;
 }
-@keyframes ui-skeleton-pulse {
-  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 {
+  to {
+    background-position: calc(100vw / var(--_ui-skeleton-paint-scale) - var(--_ui-skeleton-paint-x))
+      0;
   }
 }
 @scope (.ui-skeleton) to ([data-hn]) {
   :global(: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;
@@ -214,18 +262,31 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-skeleton-state~="animated"]::before) {
-    animation: ui-skeleton-pulse 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 3s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     :global(:scope[data-ui-skeleton-state~="animated"]::before) {
       animation: none;
+      background-image: none;
     }
   }
   @media (forced-colors: active) {
     :global(:scope::before) {
       background: CanvasText;
       opacity: 0.2;
+    }
+    :global(:scope[data-ui-skeleton-state~="animated"]::before) {
       animation: none;
+      background-image: none;
     }
   }
   :global(:scope[hidden]) {

package/vue/chunks/UiButton.js

@@ -113,10 +113,14 @@ var _hoisted_10 = {
 	"data-hn-ui-button": ""
 };
 var _hoisted_11 = {
+	class: "label",
+	"data-hn-ui-button": ""
+};
+var _hoisted_12 = {
 	class: "badge",
 	"data-hn-ui-button": ""
 };
-var _hoisted_12 = [
+var _hoisted_13 = [
 	"data-appearance",
 	"data-tone",
 	"type",
@@ -141,12 +145,16 @@ var _hoisted_12 = [
 	"data-ui-button-prop-variant",
 	"data-ui-button-state"
 ];
-var _hoisted_13 = {
+var _hoisted_14 = {
 	key: 0,
 	class: "spinner-wrap",
 	"data-hn-ui-button": ""
 };
-var _hoisted_14 = {
+var _hoisted_15 = {
+	class: "label",
+	"data-hn-ui-button": ""
+};
+var _hoisted_16 = {
 	class: "badge",
 	"data-hn-ui-button": ""
 };
@@ -843,9 +851,9 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					size: "sm"
 				})])) : createCommentVNode("v-if", true),
 				_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
-				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("span", _hoisted_11, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_cache[5] || (_cache[5] = createTextVNode(toDisplayString(" "), -1)),
-				createElementVNode("span", _hoisted_11, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
+				createElementVNode("span", _hoisted_12, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
 			], 16, _hoisted_9)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
@@ -880,20 +888,20 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
 			}), [
-				checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_13, [createVNode(UiSpinner_default, {
+				checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_14, [createVNode(UiSpinner_default, {
 					class: "ui-spinner",
 					size: "sm"
 				})])) : createCommentVNode("v-if", true),
 				_cache[6] || (_cache[6] = createTextVNode(toDisplayString(" "), -1)),
-				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("span", _hoisted_15, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_cache[7] || (_cache[7] = createTextVNode(toDisplayString(" "), -1)),
-				createElementVNode("span", _hoisted_14, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
-			], 16, _hoisted_12)), [[unref(vPropValidity), {
+				createElementVNode("span", _hoisted_16, [renderSlot(_ctx.$slots, "badge", {}, void 0, true)])
+			], 16, _hoisted_13)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-1eb598b9"]]);
+}), [["__scopeId", "data-v-290745d7"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -356,6 +356,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d551a32f"]]);
+}), [["__scopeId", "data-v-570a9f0b"]]);
 //#endregion
 export { UiCheckbox_default as t };