@threadlabs/looma 0.35.0 → 0.36.0

package/vue/components.css

@@ -1489,8 +1489,11 @@ svg,.arc {
     border-color: transparent;
 }
 @media (pointer: coarse) {
-:scope:where([data-hn-ui-button]),:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button]) {
-      min-block-size: var(--ui-control-min-block-size);
+:scope:where([data-hn-ui-button]) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+}
+:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button]) {
+      min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
 }
 }
 html[data-ui-input-modality="touch"]
@@ -2304,7 +2307,10 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
 :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))
+        var(
+          --_ui-default-input-min-block-size,
+          max(var(--ui-control-size-sm), var(--ui-control-min-block-size))
+        )
       );
 }
 }
@@ -2491,7 +2497,7 @@ input[type="range"] {
       --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
 }
 :scope[data-ui-color-picker-state~="size=sm"] {
-      --_size: var(--ui-control-min-block-size);
+      --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       --_font: var(--ui-font-size-md);
 }
 }
@@ -2726,7 +2732,8 @@ input[type="range"] {
     border-inline-end-width: var(--ui-border-width);
     border-block-end-width: var(--ui-border-width);
     border-end-end-radius: var(--ui-border-width);
-    transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+    /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+    transform: scale(1.25, 0.85) rotate(45deg);
 }
 :scope[data-ui-actual-placement="bottom"] .surface:where([data-hn-ui-tooltip])::after {
     inset-block-start: calc(
@@ -3126,7 +3133,7 @@ button:where([data-hn-ui-combobox]) {
     /* 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. */
 :scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox]) {
-      --_row: var(--ui-control-min-block-size);
+      --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
 }
 :scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox]) {
       font-size: inherit;
@@ -3464,7 +3471,7 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     /* 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. */
 :where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
-      --_row: var(--ui-control-min-block-size);
+      --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
 }
 :where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
       input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
@@ -8650,10 +8657,18 @@ path:where([data-hn-ui-light-editor]) {
     cursor: grab;
     touch-action: none;
 }
+.source-glyph:where([data-hn-ui-light-editor]) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex !important;
+    color: var(--ui-accent);
+    font-size: var(--ui-font-size-lg);
+}
 .source:where([data-hn-ui-light-editor])::after {
     content: "";
-    inline-size: 1rem;
-    block-size: 1rem;
+    position: absolute;
+    inline-size: 2rem;
+    block-size: 2rem;
     border: var(--ui-border-width) solid var(--ui-accent);
     border-radius: 50%;
     background: var(--ui-surface-raised);
@@ -8686,6 +8701,9 @@ path:where([data-hn-ui-light-editor]) {
     color: var(--ui-text-secondary);
 }
 @media (forced-colors: active) {
+.source-glyph:where([data-hn-ui-light-editor]) {
+      color: CanvasText;
+}
 .source:where([data-hn-ui-light-editor])::after {
       background: Canvas;
       border-color: CanvasText;
@@ -10160,7 +10178,7 @@ dialog:where([data-hn-ui-search-shell]) {
       min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
 }
 :scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select]) {
-      min-block-size: var(--ui-control-min-block-size);
+      min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       font-size: inherit;
 }
 }
@@ -10934,10 +10952,9 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
     max-inline-size: 100%;
     /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
     overflow-x: auto;
-    /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-       strip or the page vertically. */
+    /* Contain sideways overscroll without trapping vertical page scrolling. */
     overflow-y: hidden;
-    overscroll-behavior: contain;
+    overscroll-behavior-inline: contain;
     scrollbar-width: thin;
     border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
@@ -13590,7 +13607,9 @@ html[data-ui-input-modality="touch"]
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
       background-image: var(--ui-surface-highlight, none);
-      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      box-shadow:
+        var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--_tone-glow);
       cursor: pointer;
       transition:
         scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -13723,7 +13742,9 @@ html[data-ui-input-modality="touch"]
       background-color: var(--_tone);
       color: var(--_on-tone);
       background-image: var(--_tone-highlight);
-      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      box-shadow:
+        var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--_tone-glow);
     }
 
     :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
@@ -13893,8 +13914,11 @@ html[data-ui-input-modality="touch"]
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :scope:where([data-component~="ui-button"]), :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
-        min-block-size: var(--ui-control-min-block-size);
+      :scope:where([data-component~="ui-button"]) {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+        min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       }
     }
 
@@ -16093,7 +16117,8 @@ html[data-ui-input-modality="touch"]
       border-inline-end-width: var(--ui-border-width);
       border-block-end-width: var(--ui-border-width);
       border-end-end-radius: var(--ui-border-width);
-      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+      /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+      transform: scale(1.25, 0.85) rotate(45deg);
     }
 
     :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="bottom"] .surface:where(:not([data-component], [data-slotted]))::after {
@@ -16789,7 +16814,10 @@ html[data-ui-input-modality="touch"]
       }
 
       :scope:where([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)));
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-sm), var(--ui-control-min-block-size)))
+        );
       }
     }