@threadlabs/looma 0.35.1 → 0.37.0

package/vue/components.css

@@ -180,7 +180,7 @@ svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     letter-spacing: 0.02em;
 }
 :scope[data-ui-avatar-state~="hasImage"]:where([data-hn-ui-avatar]) {
@@ -297,7 +297,7 @@ svg {
     inline-size: 1.25rem;
     block-size: 1.25rem;
     /* Matches the xs Avatar's initials. */
-    font-size: calc(var(--ui-font-size) * 0.5625);
+    font-size: calc(var(--ui-font-size-md) * 0.5625);
     line-height: 1;
 }
 .overflow[hidden]:where([data-hn-ui-avatar-group]) {
@@ -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);
 }
 }
@@ -3127,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;
@@ -3465,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]) {
@@ -8651,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);
@@ -8687,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;
@@ -10161,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;
 }
 }
@@ -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));
       }
     }
 
@@ -16790,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)))
+        );
       }
     }