@threadlabs/looma 0.23.14 → 0.23.16

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

@@ -11,6 +11,9 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
       area of at least 44px.</prop>
+    <prop name="matchButton" type="boolean" default="false"
+    >Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row's height, including
+      touch-sized controls. Leave it off for compact toolbar and inline icon buttons.</prop>
     <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
     >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
       accent colour, for the one primary action in a group.</prop>
@@ -23,6 +26,7 @@
     from:disabled="disabled"
     type="button"
     from:aria-label="label"
+    from:data-match-button="matchButton"
     from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
     from:aria-busy="loading or pending"
   >
@@ -245,6 +249,29 @@
       min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+    :host-state([matchButton]) {
+      --_size: var(--ui-control-size-md);
+      block-size: auto;
+      align-self: stretch;
+    }
+
+    :host-state([matchButton][size="sm"]) {
+      --_size: var(--ui-control-size-sm);
+    }
+
+    :host-state([matchButton][size="lg"]) {
+      --_size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :host-state([matchButton]) {
+        inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      }
+    }
+
     :host-state([round]) {
       border-radius: var(--ui-radius-round);
     }

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

@@ -133,9 +133,14 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :host,
+      :host-state([size="sm"]),
+      :host-state([size="lg"]) {
+        font-size: var(--ui-font-size-md);
+      }
+
       :host-state([size="sm"]) {
         min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
-        font-size: inherit;
       }
     }
 

package/components/ui-tree-item/ui-tree-item.html

@@ -470,7 +470,7 @@
     }
 
     /* Without hover there is no reveal, so the controls keep their own column. */
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
       .row {
         grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
       }
@@ -484,6 +484,37 @@
         opacity: 1;
         pointer-events: auto;
       }
+
+      .row:is(:hover, :focus-within) > .label,
+      .row:is(:hover, :focus-within) > .label:dir(rtl),
+      :host[data-move-source] > .row > .label,
+      :host[data-move-source] > .row > .label:dir(rtl) {
+        mask-image: none;
+      }
+
+      .row[data-ui-marquee] > .label {
+        mask-image: linear-gradient(
+          to right,
+          transparent var(--_marquee-icon-width, 0px),
+          #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)))
+        );
+      }
+
+      .row[data-ui-marquee] > .label:dir(rtl) {
+        mask-image: linear-gradient(
+          to left,
+          transparent var(--_marquee-icon-width, 0px),
+          #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)))
+        );
+      }
+
+      :host[data-selection-mode="multiple"] > .row {
+        grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+      }
+
+      :host[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 5;
+      }
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -625,6 +656,24 @@
       grid-column: 5;
     }
 
+    @media (hover: none), (pointer: coarse) {
+      html[data-ui-input-modality="touch"] :host .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :host .actions {
+        grid-column: 5;
+      }
+
+      html[data-ui-input-modality="touch"] :host[data-selection-mode="multiple"] > .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :host[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 6;
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .row,
       .disclosure-icon,

package/components/ui-tree-item/ui-tree-item.js

@@ -143,7 +143,8 @@ export default function controller(host) {
     labelText.style.flex = labelText.style.inlineSize = "";
     const cell = label.getBoundingClientRect();
     const icon = leading?.getBoundingClientRect();
-    const stop = (actions?.offsetWidth ?? 0) + parseFloat(getComputedStyle(label).columnGap);
+    const overlayActions = actions && getComputedStyle(actions).position === "absolute";
+    const stop = overlayActions ? actions.offsetWidth + parseFloat(getComputedStyle(label).columnGap) : 0;
     const distance = Math.ceil(rightToLeft ? cell.left + stop - end : end - (cell.right - stop));
     if (distance <= 0) return;
     const lead = icon?.width ? (rightToLeft ? icon.right - cell.right : cell.left - icon.left) : 0;