@threadlabs/looma 0.39.2 → 0.39.4

package/components/ui-combobox/ui-combobox.html

@@ -762,10 +762,12 @@
       color: inherit;
     }
     input {
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
       appearance: none;
       width: 100%;
       min-inline-size: 0;
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+      max-block-size: max(calc(var(--_row) - 2 * var(--ui-border-width)), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block)));
       box-sizing: border-box !important;
       border: 0;
       border-radius: inherit;
@@ -773,7 +775,7 @@
       color: inherit;
       font: inherit;
       line-height: var(--ui-line-height-tight);
-      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
       margin: 0 !important;
       outline: none;
     }
@@ -781,14 +783,16 @@
       --_row: var(--ui-control-size-sm);
     }
     :host([size="sm"]) input {
-      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-sm);
     }
     :host([size="lg"]) {
       --_row: var(--ui-control-size-lg);
     }
     :host([size="lg"]) input {
-      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
       font-size: var(--ui-font-size-md);
     }
     button {
@@ -923,6 +927,7 @@
       display: none !important;
     }
     :host([multiple]) input {
+      max-block-size: none;
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;

package/components/ui-combobox/ui-combobox.js

@@ -485,7 +485,8 @@ export function connect(host) {
       input.focus();
     }
   };
-  const onPointerdown = (event) => { if (event.target.closest?.('[role="option"]')) event.preventDefault(); };
+  // Keep input focus through selection without cancelling Safari's touch-generated click.
+  const onMousedown = (event) => { if (event.target.closest?.('[role="option"]')) event.preventDefault(); };
   const onFocusout = (event) => {
     if (event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) return;
     close();
@@ -529,7 +530,7 @@ export function connect(host) {
   const onValidate = (event) => {
     if (event.target === element) void validateCurrent();
   };
-  const listeners = { input: onInput, keydown: onKeydown, click: onClick, pointerdown: onPointerdown, focusin: onFocusin, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose, command: onCommand, validate: onValidate };
+  const listeners = { input: onInput, keydown: onKeydown, click: onClick, mousedown: onMousedown, focusin: onFocusin, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose, command: onCommand, validate: onValidate };
   for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
   // Authored options can change after mount (renamed, replaced, or arriving late). A selected value
   // then shows its current label, unless the user is editing the text.

package/components/ui-dialog/ui-dialog.html

@@ -1,4 +1,6 @@
 <link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-dialog" module="./ui-dialog.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the dialog is open initially or when set externally.</prop>
@@ -39,7 +41,7 @@
   <dialog from:aria-label="$accessibleLabel">
     <header $ref="header">
       <h2 class="title" $if="$label">{$label}</h2>
-      <button class="close" $ref="close" type="button" aria-label="Close"></button>
+      <div class="close"><ui-icon-button $ref="close" size="sm" round label="Close"><ui-icon name="x"></ui-icon></ui-icon-button></div>
     </header>
     <div class="body" $ref="body"><ui-scroll-area from:trim="true"><slot></slot></ui-scroll-area></div>
     <footer $ref="footer"><slot name="actions"></slot></footer>
@@ -231,58 +233,10 @@
     }
 
     .close {
-      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);
-    }
-
-    /* A CSS-drawn X. */
-    .close::before,
-    .close::after {
-      content: "";
-      grid-area: 1 / 1;
-      inline-size: 0.875rem;
-      block-size: 1.5px;
-      border-radius: 1px;
-      background: currentColor;
-      transform: rotate(45deg);
-    }
-
-    .close::after {
-      transform: rotate(-45deg);
-    }
-
-    .close:hover {
-      background: var(--ui-surface-muted);
-      color: var(--ui-text-primary);
-    }
-
-    .close:focus-visible {
-      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-      outline-offset: var(--ui-focus-width);
-    }
-
-    /* A touch target, like Button on coarse pointers. */
-    @media (pointer: coarse) {
-      .close {
-        inline-size: var(--ui-control-min-block-size);
-        block-size: var(--ui-control-min-block-size);
-      }
-    }
-
-    html[data-ui-input-modality="touch"] :host .close {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
     }
 
     .body {

package/components/ui-input/ui-input.html

@@ -94,15 +94,24 @@
       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;
+    }
 
     :host {
+      --_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%);
       min-inline-size: 0;
       min-block-size: var(--ui-input-min-block-size, 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;
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
@@ -120,16 +129,25 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
+    :host: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)));
+    }
+
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
     :host([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);
     }
 
     :host([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);
     }
 

package/components/ui-input-group/ui-input-group.html

@@ -43,6 +43,7 @@
          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/components/ui-select/ui-select.html

@@ -60,13 +60,16 @@
     }
 
     :host {
+      --_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)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
@@ -144,8 +147,10 @@
     }
 
     :host([size="sm"]) {
+      --_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;
       background-size:
@@ -155,8 +160,10 @@
     }
 
     :host([size="lg"]) {
+      --_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);