@threadlabs/looma 0.39.1 → 0.39.3

package/components/ui-button/ui-button.html

@@ -96,7 +96,7 @@
       from:tabindex="{ true: '0', false: null }[concat(($loading or $pending) and not $disabled)]"
     >
       <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
-      <slot></slot>
+      <span class="label"><slot></slot></span>
       <span class="badge"><slot name="badge"></slot></span>
     </a>
     <button
@@ -109,7 +109,7 @@
       from:aria-busy="$loading or $pending"
     >
       <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
-      <slot></slot>
+      <span class="label"><slot></slot></span>
       <span class="badge"><slot name="badge"></slot></span>
     </button>
   </template>
@@ -237,6 +237,7 @@
 
     :host {
       --_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;
@@ -283,6 +284,21 @@
       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;
@@ -294,7 +310,7 @@
     }
 
     @supports (text-box-trim: trim-both) {
-      :host {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -622,6 +638,11 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :host[data-appearance="link"] .label {
+      display: inline !important;
+      text-box-trim: none;
+    }
+
     :host[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;

package/components/ui-checkbox/ui-checkbox.html

@@ -142,7 +142,8 @@
 
     input::after {
       content: "";
-      position: absolute;
+      position: absolute !important;
+      transform: none !important;
       opacity: 0;
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
     }
@@ -155,43 +156,44 @@
       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::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::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;
       }
     }
 
@@ -202,6 +204,20 @@
       }
     }
 
+    @media (forced-colors: active) {
+      input:checked,
+      input:indeterminate {
+        forced-color-adjust: none;
+        background: Highlight;
+        border-color: Highlight;
+      }
+      input:checked::after,
+      input:indeterminate::after {
+        forced-color-adjust: none;
+        background: HighlightText;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }

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-light-editor/ui-light-editor.html

@@ -1,5 +1,6 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <link rel="component" href="../ui-number-input/ui-number-input.html">
+<link rel="component" href="../ui-disclosure/ui-disclosure.html">
 <template component="ui-light-editor" module="./ui-light-editor.js">
   <defs>
     <state name="horizontal" type="string" value="50"></state>
@@ -29,31 +30,31 @@
         </button>
       </span>
     </span>
-    <span class="coordinates">
-      <ui-number-input
-        data-coordinate="x"
-        from:value="$horizontal"
-        min="0"
-        max="100"
-        step="1"
-        unit="%"
-        label="Light horizontal position"
-        from:size="$size"
-        from:disabled="$disabled"
-      ></ui-number-input>
-      <ui-number-input
-        data-coordinate="y"
-        from:value="$vertical"
-        min="0"
-        max="100"
-        step="1"
-        unit="%"
-        label="Light vertical position"
-        from:size="$size"
-        from:disabled="$disabled"
-      ></ui-number-input>
-    </span>
-    <span class="hint">Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%.</span>
+    <span class="hint">Drag or tap to move the light. Arrow keys adjust; Escape cancels.</span>
+    <ui-disclosure summary="Exact position"><span class="coordinates">
+        <ui-number-input
+          data-coordinate="x"
+          from:value="$horizontal"
+          min="0"
+          max="100"
+          step="1"
+          unit="%"
+          label="Light horizontal position"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input>
+        <ui-number-input
+          data-coordinate="y"
+          from:value="$vertical"
+          min="0"
+          max="100"
+          step="1"
+          unit="%"
+          label="Light vertical position"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input>
+      </span></ui-disclosure>
   </span>
   <style>
     :host {

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