@threadlabs/looma 0.39.1 → 0.39.3

package/vue/UiDialog.vue

@@ -22,6 +22,8 @@ import {
   vPropValidity,
   vuePropInputs,
 } from './props'
+import UiIcon from './UiIcon.vue'
+import UiIconButton from './UiIconButton.vue'
 import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
@@ -320,10 +322,16 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     ref="root"
   >
     <header data-hn-ui-dialog ref="headerElement">
-      <h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>{{
-        ' '
-      }}<button class="close" type="button" aria-label="Close" data-hn-ui-dialog ref="closeElement">
-      </button>
+      <h2 v-if="checkedProps.label" class="title" data-hn-ui-dialog>{{ checkedProps.label }}</h2>
+      <div class="close" data-hn-ui-dialog>
+        <UiIconButton
+          class="ui-icon-button"
+          size="sm"
+          :round="true"
+          label="Close"
+          ref="closeElement"
+        ><UiIcon class="ui-icon" name="x" /></UiIconButton>
+      </div>
     </header>
     <div class="body" data-hn-ui-dialog ref="bodyElement">
       <UiScrollArea class="ui-scroll-area" :trim="true"><slot /></UiScrollArea>
@@ -372,10 +380,6 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 
-/* A CSS-drawn X. */
-
-/* A touch target, like Button on coarse pointers. */
-
 @keyframes ui-dialog-enter {
   from {
     opacity: 0;
@@ -574,56 +578,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(.close:where([data-hn-ui-dialog])) {
-    display: inline-grid !important;
-    place-items: center;
-    flex: none;
+    display: flex !important;
+    align-items: center !important;
+    flex: none !important;
     margin-inline-start: auto !important;
-    inline-size: var(--ui-control-size-sm);
-    block-size: var(--ui-control-size-sm);
-    padding: 0 !important;
-    border: 0;
-    border-radius: var(--ui-radius-round);
-    background: transparent;
-    color: var(--ui-text-secondary);
-    cursor: pointer;
-    transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
-      color var(--ui-motion-fast) var(--ui-motion-ease);
-  }
-  :global(.close:where([data-hn-ui-dialog])::before),
-  :global(.close:where([data-hn-ui-dialog])::after) {
-    content: "";
-    grid-area: 1 / 1;
-    inline-size: 0.875rem;
-    block-size: 1.5px;
-    border-radius: 1px;
-    background: currentColor;
-    transform: rotate(45deg);
-  }
-
-  :global(.close:where([data-hn-ui-dialog])::after) {
-    transform: rotate(-45deg);
-  }
-
-  :global(.close:hover:where([data-hn-ui-dialog])) {
-    background: var(--ui-surface-muted);
-    color: var(--ui-text-primary);
-  }
-
-  :global(.close:focus-visible:where([data-hn-ui-dialog])) {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: var(--ui-focus-width);
-  }
-  @media (pointer: coarse) {
-    :global(.close:where([data-hn-ui-dialog])) {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
-    }
-  }
-
-  :global(html[data-ui-input-modality="touch"] :scope .close:where([data-hn-ui-dialog])) {
-    inline-size: var(--ui-control-min-block-size);
-    block-size: var(--ui-control-min-block-size);
   }
 
   :global(.body:where([data-hn-ui-dialog])) {
@@ -858,61 +816,10 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   }
 
   :global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    display: inline-grid !important;
-    place-items: center;
-    flex: none;
+    display: flex !important;
+    align-items: center !important;
+    flex: none !important;
     margin-inline-start: auto !important;
-    inline-size: var(--ui-control-size-sm);
-    block-size: var(--ui-control-size-sm);
-    padding: 0 !important;
-    border: 0;
-    border-radius: var(--ui-radius-round);
-    background: transparent;
-    color: var(--ui-text-secondary);
-    cursor: pointer;
-    transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
-      color var(--ui-motion-fast) var(--ui-motion-ease);
-  }
-  :global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
-    *):where([data-hn-ui-dialog])::before),
-  :global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
-    *):where([data-hn-ui-dialog])::after) {
-    content: "";
-    grid-area: 1 / 1;
-    inline-size: 0.875rem;
-    block-size: 1.5px;
-    border-radius: 1px;
-    background: currentColor;
-    transform: rotate(45deg);
-  }
-
-  :global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
-    *):where([data-hn-ui-dialog])::after) {
-    transform: rotate(-45deg);
-  }
-
-  :global(.close:hover:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    background: var(--ui-surface-muted);
-    color: var(--ui-text-primary);
-  }
-
-  :global(.close:focus-visible:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: var(--ui-focus-width);
-  }
-  @media (pointer: coarse) {
-    :global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
-    }
-  }
-
-  :global(html[data-ui-input-modality="touch"]
-    :where(.ui-dialog)
-    .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
-    inline-size: var(--ui-control-min-block-size);
-    block-size: var(--ui-control-min-block-size);
   }
 
   :global(.body:where(:scope, :scope *):where([data-hn-ui-dialog])) {

package/vue/UiInput.vue

@@ -537,6 +537,14 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   syntax: "*";
   inherits: false;
 }
+/* Normalize a unitless zero border to a length before the box calculation. */
+@property --_ui-input-stroke {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}
+
+/* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
 
 /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
 
@@ -555,6 +563,12 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 
 @scope (.ui-input) to ([data-hn]) {
   :global(:scope) {
+    --_ui-input-size: var(--ui-control-size-md);
+    --_ui-input-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
+    --_ui-input-stroke: var(
+      --ui-input-border-width,
+      var(--_ui-default-input-border-width, var(--ui-border-width))
+    );
     box-sizing: border-box !important;
     display: inline-block !important;
     inline-size: var(--ui-input-inline-size, 100%);
@@ -564,7 +578,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       var(--_ui-default-input-min-block-size, var(--ui-control-size-md))
     );
     margin: 0 !important;
-    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+    padding: var(--_ui-input-inset-block) var(--ui-space-3) !important;
     appearance: none;
     padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3))
       !important;
@@ -594,21 +608,34 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
+  :global(:scope:is([type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="number"])) {
+    max-block-size: max(
+      calc(var(--_ui-input-size) - var(--_ui-default-input-frame-width, 0px)),
+      calc(
+        1em * var(--ui-line-height-tight) + 2 * var(--_ui-input-inset-block) +
+          2 * var(--_ui-input-stroke)
+      )
+    );
+  }
   :global(:scope[data-ui-input-state~="size=sm"]) {
+    --_ui-input-size: var(--ui-control-size-sm);
+    --_ui-input-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
     );
-    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+    padding: var(--_ui-input-inset-block) var(--ui-space-2) !important;
     font-size: var(--ui-font-size-sm);
   }
 
   :global(:scope[data-ui-input-state~="size=lg"]) {
+    --_ui-input-size: var(--ui-control-size-lg);
+    --_ui-input-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
     );
-    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+    padding: var(--_ui-input-inset-block) var(--ui-space-4) !important;
     font-size: var(--ui-font-size-md);
   }
   @media (pointer: coarse) {

package/vue/UiInputGroup.vue

@@ -269,6 +269,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
        Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
     --_ui-default-input-border-width: 0;
     --_ui-default-input-min-block-size: 0;
+    --_ui-default-input-frame-width: calc(2 * var(--ui-border-width));
     --_ui-default-input-border: transparent;
     --_ui-default-input-border-hover: transparent;
     --_ui-default-input-focus-border: transparent;

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/UiSelect.vue

@@ -300,13 +300,22 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 
 @scope (.ui-select) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-select])) {
+    --_ui-select-size: var(--ui-control-size-md);
+    --_ui-select-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
     box-sizing: border-box !important;
     display: inline-block !important;
     inline-size: var(--ui-select-inline-size, 100%);
     min-inline-size: 0;
+    max-block-size: max(
+      var(--_ui-select-size),
+      calc(
+        1em * var(--ui-line-height-tight) + 2 * var(--_ui-select-inset-block) +
+          2 * var(--ui-border-width)
+      )
+    );
     min-block-size: var(--ui-control-size-md);
     margin: 0 !important;
-    padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+    padding: var(--_ui-select-inset-block) var(--ui-space-3) !important;
     border: var(--ui-border-width) solid
       var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
     border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -390,8 +399,10 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   }
 
   :global(:scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select])) {
+    --_ui-select-size: var(--ui-control-size-sm);
+    --_ui-select-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
     min-block-size: var(--ui-control-size-sm);
-    padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+    padding: var(--_ui-select-inset-block) var(--ui-space-2) !important;
     padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1))
       !important;
     background-position: right var(--ui-space-2) center, center;
@@ -402,8 +413,10 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   }
 
   :global(:scope[data-ui-select-state~="size=lg"]:where([data-hn-ui-select])) {
+    --_ui-select-size: var(--ui-control-size-lg);
+    --_ui-select-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
     min-block-size: var(--ui-control-size-lg);
-    padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+    padding: var(--_ui-select-inset-block) var(--ui-space-4) !important;
     padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
     background-position: right var(--ui-space-4) center, center;
     font-size: var(--ui-font-size-md);

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 };

package/vue/chunks/UiCombobox.js

@@ -2160,6 +2160,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4630df88"]]);
+}), [["__scopeId", "data-v-5b47db0f"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiDialog.js

@@ -1,7 +1,9 @@
 import { C as useReflectedProp, S as useComponentHost, _ as nativeAttrs, a as checkHydratedRoot, s as createDispatch, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { d as propValidityState, h as vuePropInputs, i as checkPropInput, m as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } from "./props.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { t as UiIconButton_default } from "./UiIconButton.js";
 import { t as UiScrollArea_default } from "./UiScrollArea.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
@@ -20,6 +22,10 @@ var _hoisted_2 = {
 	class: "title",
 	"data-hn-ui-dialog": ""
 };
+var _hoisted_3 = {
+	class: "close",
+	"data-hn-ui-dialog": ""
+};
 //#endregion
 //#region .build/vue/UiDialog.vue
 var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -319,18 +325,20 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					"data-hn-ui-dialog": "",
 					ref_key: "headerElement",
 					ref: headerElement
-				}, [
-					checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true),
-					_cache[0] || (_cache[0] = createTextVNode(toDisplayString(" "), -1)),
-					createElementVNode("button", {
-						class: "close",
-						type: "button",
-						"aria-label": "Close",
-						"data-hn-ui-dialog": "",
-						ref_key: "closeElement",
-						ref: closeElement
-					}, null, 512)
-				], 512),
+				}, [checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [createVNode(UiIconButton_default, {
+					class: "ui-icon-button",
+					size: "sm",
+					round: true,
+					label: "Close",
+					ref_key: "closeElement",
+					ref: closeElement
+				}, {
+					default: withCtx(() => [createVNode(UiIcon_default, {
+						class: "ui-icon",
+						name: "x"
+					})]),
+					_: 1
+				}, 512)])], 512),
 				createElementVNode("div", {
 					class: "body",
 					"data-hn-ui-dialog": "",
@@ -354,6 +362,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-6cfda64d"]]);
+}), [["__scopeId", "data-v-45428506"]]);
 //#endregion
 export { UiDialog_default as t };