@threadlabs/looma 0.23.14 → 0.23.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.23.14",
+  "version": "0.23.15",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-input.css

@@ -95,9 +95,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) {
+      :scope,
+      :scope[data-ui-input-state~="size=sm"],
+      :scope[data-ui-input-state~="size=lg"] {
+        font-size: var(--ui-font-size-md);
+      }
+
       :scope[data-ui-input-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/styles/ui-tree-item.css

@@ -337,7 +337,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;
       }
@@ -351,6 +351,37 @@
         opacity: 1;
         pointer-events: auto;
       }
+
+      .row:is(:hover, :focus-within) > .label,
+      .row:is(:hover, :focus-within) > .label:dir(rtl),
+      :scope[data-move-source] > .row > .label,
+      :scope[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)))
+        );
+      }
+
+      :scope[data-selection-mode="multiple"] > .row {
+        grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+      }
+
+      :scope[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
@@ -492,6 +523,24 @@
       grid-column: 5;
     }
 
+    @media (hover: none), (pointer: coarse) {
+      html[data-ui-input-modality="touch"] :scope .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :scope .actions {
+        grid-column: 5;
+      }
+
+      html[data-ui-input-modality="touch"] :scope[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"] :scope[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 6;
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .row,
       .disclosure-icon,
@@ -570,7 +619,7 @@
     }
 
     /* Without hover there is no reveal, so the controls keep their own column. */
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -578,6 +627,9 @@
        outside the row. It is bare until pointed at: a resting surface behind it read as a faint
        patch rather than as a control. */
 
+    @media (hover: none), (pointer: coarse) {
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/vue/UiInput.vue

@@ -602,12 +602,17 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 /* 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) {
+  [data-component~="ui-input"],
+  [data-component~="ui-input"][data-ui-input-state~="size=sm"],
+  [data-component~="ui-input"][data-ui-input-state~="size=lg"] {
+    font-size: var(--ui-font-size-md);
+  }
+
   [data-component~="ui-input"][data-ui-input-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/vue/UiTreeItem.vue

@@ -925,7 +925,7 @@ function attribute(value: unknown): any {
 }
 
 /* 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;
   }
@@ -939,6 +939,41 @@ function attribute(value: unknown): any {
     opacity: 1;
     pointer-events: auto;
   }
+
+  .row:is(:hover, :focus-within) > .label,
+  .row:is(:hover, :focus-within) > .label:dir(rtl),
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label,
+  [data-component~="ui-tree-item"][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))
+      )
+    );
+  }
+
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row {
+    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+  }
+
+  [data-component~="ui-tree-item"][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
@@ -1094,6 +1129,29 @@ html[data-ui-input-modality="touch"]
   grid-column: 5;
 }
 
+@media (hover: none), (pointer: coarse) {
+  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row {
+    grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+  }
+
+  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions {
+    grid-column: 5;
+  }
+
+  html[data-ui-input-modality="touch"]
+    [data-component~="ui-tree-item"][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"]
+    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+    > .row
+    > .actions {
+    grid-column: 6;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .row,
   .disclosure-icon,

package/vue/chunks/UiInput.js

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

package/vue/chunks/UiTreeItem.js

@@ -610,6 +610,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d2b1bbe0"]]);
+}), [["__scopeId", "data-v-fd74ff6c"]]);
 //#endregion
 export { UiTreeItem_default as t };