@threadlabs/looma 0.39.2 → 0.39.3

package/vue/UiDialog.d.ts

@@ -1,10 +1,10 @@
 import type { PropType } from 'vue';
 import { type InputBindings } from './props.js';
-declare var __VLS_7: {}, __VLS_9: {};
+declare var __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_20) => any;
 } & {
-    actions?: (props: typeof __VLS_9) => any;
+    actions?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     alert: {

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

package/vue/chunks/UiInput.js

@@ -704,6 +704,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d1d52f1a"]]);
+}), [["__scopeId", "data-v-a7bff040"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -220,6 +220,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-6e5b8e59"]]);
+}), [["__scopeId", "data-v-5717ef0c"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiSelect.js

@@ -246,6 +246,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-988e4463"]]);
+}), [["__scopeId", "data-v-aa155548"]]);
 //#endregion
 export { UiSelect_default as t };