@threadlabs/looma 0.37.0 → 0.37.1

package/vue/components.css

@@ -1145,8 +1145,7 @@ svg,.arc {
 /* The size states outrank :host, so sm is named too, or a small button would stay small. */
 
 /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
-   area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
-   a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+   area, centred on it, like IconButton's. A link-style action keeps its text size, so a standalone one ("See all" under a list) needs the
    area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
    Only these need it: a hit area on every button would reach over its neighbours. */
 
@@ -1488,14 +1487,6 @@ svg,.arc {
     background-color: var(--ui-disabled-surface);
     border-color: transparent;
 }
-@media (pointer: coarse) {
-: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"]
     :scope[data-appearance="link"]:where([data-hn-ui-button]),html[data-ui-input-modality="touch"]
     :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button]) {
@@ -1775,7 +1766,9 @@ html[data-ui-input-modality="touch"]
     box-shadow: var(--ui-shadow-lg);
 }
 :scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card]) {
-    --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-panel-glass: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-panel-rim: calc(
       (var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px
@@ -1891,7 +1884,7 @@ html[data-ui-input-modality="touch"]
 /* The label, and under it an optional line saying what the choice means. */
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-@keyframes ui-checkbox-check-4950a023 {
+@keyframes ui-checkbox-check-5f3fc8ff {
 from {
     opacity: 0;
     transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
@@ -2013,7 +2006,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
       calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
     opacity: 1;
     transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
-    animation: ui-checkbox-check-4950a023 var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    animation: ui-checkbox-check-5f3fc8ff var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
     inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
@@ -2068,11 +2061,6 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
       calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)
     ) !important;
 }
-@media (pointer: coarse) {
-:scope[data-ui-checkbox-state~="size=sm"]:where([data-hn-ui-checkbox]) {
-      --_row: var(--ui-control-min-block-size);
-}
-}
 :scope[hidden]:where([data-hn-ui-checkbox]) {
     display: none !important;
 }
@@ -2221,8 +2209,7 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
 
 /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
 
-/* 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. */
+/* Touch may use body-size text in a small native field to avoid focus zoom; this does not impose a larger visible control height. */
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
 
@@ -2292,27 +2279,9 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
     font-size: var(--ui-font-size-md);
 }
 @media (pointer: coarse) {
-:scope {
-      min-block-size: var(
-        --ui-input-min-block-size,
-        var(
-          --_ui-default-input-min-block-size,
-          max(var(--ui-control-size-md), var(--ui-control-min-block-size))
-        )
-      );
-}
 :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,
-          max(var(--ui-control-size-sm), var(--ui-control-min-block-size))
-        )
-      );
-}
 }
 :scope::selection {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
@@ -2492,15 +2461,6 @@ input[type="range"] {
     padding: 0 !important;
     accent-color: var(--ui-accent-solid);
 }
-@media (pointer: coarse) {
-:scope {
-      --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-:scope[data-ui-color-picker-state~="size=sm"] {
-      --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-      --_font: var(--ui-font-size-md);
-}
-}
 }
 
 /* This component's hooks style the element they are set on, and never a nested one. */
@@ -2613,7 +2573,9 @@ input[type="range"] {
     );
 }
 .surface:where([data-hn-ui-tooltip]) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,
@@ -3123,20 +3085,8 @@ input:disabled:where([data-hn-ui-combobox]),button:disabled:where([data-hn-ui-co
     white-space: nowrap;
 }
 @media (pointer: coarse) {
-:scope:where([data-hn-ui-combobox]) {
-      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-button:where([data-hn-ui-combobox]) {
-      min-inline-size: 2.75rem;
-      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-}
-    /* 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: 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;
+      font-size: var(--ui-font-size-md);
 }
 }
 @media (forced-colors: active) {
@@ -3461,21 +3411,9 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     white-space: nowrap;
 }
 @media (pointer: coarse) {
-:where(.ui-combobox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
-      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
-      min-inline-size: 2.75rem;
-      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-}
-    /* 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: 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]) {
-      font-size: inherit;
+      font-size: var(--ui-font-size-md);
 }
 }
 @media (forced-colors: active) {
@@ -4064,19 +4002,6 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
 :scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
     --_size: var(--ui-control-size-lg);
 }
-@media (pointer: coarse) {
-:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button]) {
-      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)
-      );
-}
-}
 :scope[data-ui-icon-button-state~="round"]:where([data-hn-ui-icon-button]) {
     border-radius: var(--ui-radius-round);
 }
@@ -4370,6 +4295,35 @@ output {
 }
 }
 
+@scope (.ui-cycle-button) to ([data-hn]) {
+:scope {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    vertical-align: middle;
+}
+:scope[hidden] {
+    display: none !important;
+}
+}
+@scope ([data-slotted~="ui-cycle-button"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-cycle-button):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-cycle-button"]))) {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    vertical-align: middle;
+}
+:where(.ui-cycle-button)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-cycle-button"]))) {
+    display: none !important;
+}
+}
+
 /* One term and its value in a ui-description-list, laid out by the list's layout. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
@@ -4591,13 +4545,13 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-0eef3ecb {
+@keyframes ui-dialog-enter-6cfda64d {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-0eef3ecb {
+@keyframes ui-dialog-backdrop-enter-6cfda64d {
 from {
     background-color: transparent;
 }
@@ -4641,7 +4595,9 @@ from {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
 :scope:where([data-hn-ui-dialog]) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,
@@ -4730,7 +4686,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-0eef3ecb var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-6cfda64d var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -4851,7 +4807,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-0eef3ecb var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-6cfda64d var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -4899,7 +4855,9 @@ footer:empty:where([data-hn-ui-dialog]) {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
 :where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,
@@ -4988,7 +4946,7 @@ footer:empty:where([data-hn-ui-dialog]) {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-0eef3ecb var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-6cfda64d var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[data-ui-dialog-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
@@ -5117,7 +5075,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 }
 :where(.ui-dialog)[open]:modal:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-0eef3ecb var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-6cfda64d var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[open][data-ui-backdrop-hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
@@ -5538,7 +5496,9 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     overflow: auto;
 }
 :scope:not([inline]) .surface:where([data-hn-ui-menu]) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,
@@ -6212,14 +6172,6 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
 :scope:has(.field [data-ui-input-state~="size=lg"]):where([data-hn-ui-input-group]) {
     min-block-size: var(--ui-control-size-lg);
 }
-@media (pointer: coarse) {
-:scope:where([data-hn-ui-input-group]) {
-      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
-      min-block-size: var(--ui-control-min-block-size);
-}
-}
 :scope:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))):where([data-hn-ui-input-group]) {
     border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
@@ -6764,7 +6716,9 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     );
 }
 .surface:where([data-hn-ui-popover]) {
-    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-glassiness: calc(
+      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
+    );
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
     --_ui-material-active: clamp(
       0,
@@ -9635,11 +9589,6 @@ input:focus-visible:where([data-hn-ui-radio]) {
       calc((var(--_row) - max(var(--_line), var(--_ui-radio-size, 1.125rem))) / 2)
     ) !important;
 }
-@media (pointer: coarse) {
-:scope[data-ui-radio-state~="size=sm"]:where([data-hn-ui-radio]) {
-      --_row: var(--ui-control-min-block-size);
-}
-}
 :scope[hidden]:where([data-hn-ui-radio]) {
     display: none !important;
 }
@@ -10075,8 +10024,7 @@ dialog:where([data-hn-ui-search-shell]) {
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
-/* 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. */
+/* Touch may use body-size text in a small native field to avoid focus zoom; this does not impose a larger visible control height. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 @scope (.ui-select) to ([data-hn]) {
@@ -10174,12 +10122,8 @@ dialog:where([data-hn-ui-search-shell]) {
     font-size: var(--ui-font-size-md);
 }
 @media (pointer: coarse) {
-:scope:where([data-hn-ui-select]) {
-      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: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-      font-size: inherit;
+      font-size: var(--ui-font-size-md);
 }
 }
 :scope[hidden]:where([data-hn-ui-select]) {
@@ -10701,11 +10645,6 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
       calc((var(--_row) - max(var(--_line), var(--_ui-switch-track-height, 1.5rem))) / 2)
     ) !important;
 }
-@media (pointer: coarse) {
-:scope[data-ui-switch-state~="size=sm"]:where([data-hn-ui-switch]) {
-      --_row: var(--ui-control-min-block-size);
-}
-}
 :scope[hidden]:where([data-hn-ui-switch]) {
     display: none !important;
 }
@@ -13913,18 +13852,9 @@ 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"]) {
-        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));
-      }
-    }
 
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
-       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
-       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area, centred on it, like IconButton's. A link-style action keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"],
@@ -14029,12 +13959,9 @@ html[data-ui-input-modality="touch"]
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
-    @media (pointer: coarse) {
-    }
 
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
-       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
-       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area, centred on it, like IconButton's. A link-style action keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
 
@@ -14696,14 +14623,6 @@ html[data-ui-input-modality="touch"]
       --_size: var(--ui-control-size-lg);
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-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));
-      }
-    }
-
     :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="round"] {
       border-radius: var(--ui-radius-round);
     }
@@ -14713,14 +14632,18 @@ html[data-ui-input-modality="touch"]
       background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
       background-image: var(--ui-surface-highlight, none);
       color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-      box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow)), var(--_tone-glow);
+      box-shadow:
+        var(--ui-action-shadow, var(--_ui-action-shadow)),
+        var(--_tone-glow);
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"] {
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
       background-image: var(--_tone-highlight);
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
-      box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      box-shadow:
+        var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--_tone-glow);
     }
 
     :scope:where([data-component~="ui-icon-button"]):hover:enabled:not([aria-disabled="true"]) {
@@ -14874,9 +14797,6 @@ html[data-ui-input-modality="touch"]
 
     /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
 
-    @media (pointer: coarse) {
-    }
-
     /* Native toggle state persists after pointer release, including during loading. */
 
     @media (prefers-reduced-motion: reduce) {
@@ -15099,7 +15019,7 @@ html[data-ui-input-modality="touch"]
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
        transparency, saturation and edge light belong to the surrounding decorative material. */
     :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
-      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
       --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
       --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.28) * 8px);
@@ -15503,7 +15423,7 @@ html[data-ui-input-modality="touch"]
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
        transparency, saturation and edge light belong to the surrounding decorative material. */
     .surface {
-      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
       --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
       --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.55) * 8px);
@@ -16019,7 +15939,7 @@ html[data-ui-input-modality="touch"]
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
        transparency, saturation and edge light belong to the surrounding decorative material. */
     .surface {
-      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
       --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
       --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.08) * 8px);
@@ -16441,12 +16361,6 @@ html[data-ui-input-modality="touch"]
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] {
-        --_row: var(--ui-control-min-block-size);
-      }
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-checkbox"])[hidden] {
       display: none !important;
@@ -16466,9 +16380,6 @@ html[data-ui-input-modality="touch"]
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */
 
-    @media (pointer: coarse) {
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
 /* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
@@ -16797,28 +16708,13 @@ html[data-ui-input-modality="touch"]
       font-size: var(--ui-font-size-md);
     }
 
-    /* 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. */
+    /* Touch may use body-size text in a small native field to avoid focus zoom; this does not impose a larger visible control height. */
     @media (pointer: coarse) {
-      :scope:where([data-component~="ui-input"]) {
-        min-block-size: var(
-          --ui-input-min-block-size,
-          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
-        );
-      }
-
       :scope:where([data-component~="ui-input"]),
       :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"],
       :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
         font-size: var(--ui-font-size-md);
       }
-
-      :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, max(var(--ui-control-size-sm), var(--ui-control-min-block-size)))
-        );
-      }
     }
 
     /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
@@ -16892,8 +16788,7 @@ html[data-ui-input-modality="touch"]
 
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
 
-    /* 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. */
+    /* Touch may use body-size text in a small native field to avoid focus zoom; this does not impose a larger visible control height. */
     @media (pointer: coarse) {
     }
 

package/vue/editor/index.js

@@ -6793,6 +6793,34 @@ function createUiIcon(options = {}, html) {
 			"tag": "path",
 			"d": "M5 12h14"
 		}],
+		"monitor": [
+			{
+				"tag": "rect",
+				"width": "20",
+				"height": "14",
+				"x": "2",
+				"y": "3",
+				"rx": "2"
+			},
+			{
+				"tag": "line",
+				"x1": "8",
+				"x2": "16",
+				"y1": "21",
+				"y2": "21"
+			},
+			{
+				"tag": "line",
+				"x1": "12",
+				"x2": "12",
+				"y1": "17",
+				"y2": "21"
+			}
+		],
+		"moon": [{
+			"tag": "path",
+			"d": "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+		}],
 		"notebook-pen": [
 			{
 				"tag": "path",
@@ -7012,6 +7040,46 @@ function createUiIcon(options = {}, html) {
 				"y2": "12"
 			}
 		],
+		"sun": [
+			{
+				"tag": "circle",
+				"cx": "12",
+				"cy": "12",
+				"r": "4"
+			},
+			{
+				"tag": "path",
+				"d": "M12 2v2"
+			},
+			{
+				"tag": "path",
+				"d": "M12 20v2"
+			},
+			{
+				"tag": "path",
+				"d": "m4.93 4.93 1.41 1.41"
+			},
+			{
+				"tag": "path",
+				"d": "m17.66 17.66 1.41 1.41"
+			},
+			{
+				"tag": "path",
+				"d": "M2 12h2"
+			},
+			{
+				"tag": "path",
+				"d": "M20 12h2"
+			},
+			{
+				"tag": "path",
+				"d": "m6.34 17.66-1.41 1.41"
+			},
+			{
+				"tag": "path",
+				"d": "m19.07 4.93-1.41 1.41"
+			}
+		],
 		"superscript": [
 			{
 				"tag": "path",

package/vue/index.d.ts

@@ -16,6 +16,7 @@ export { default as Container } from "./UiContainer.js";
 export { default as ContextMenu } from "./UiContextMenu.js";
 export { default as Cover } from "./UiCover.js";
 export { default as CurveEditor } from "./UiCurveEditor.js";
+export { default as CycleButton } from "./UiCycleButton.js";
 export { default as DescriptionItem } from "./UiDescriptionItem.js";
 export { default as DescriptionList } from "./UiDescriptionList.js";
 export { default as Dialog } from "./UiDialog.js";

package/vue/index.js

@@ -22,6 +22,7 @@ import { t as UiCover_default } from "./chunks/UiCover.js";
 import { t as UiIconButton_default } from "./chunks/UiIconButton.js";
 import { t as UiNumberInput_default } from "./chunks/UiNumberInput.js";
 import { t as UiCurveEditor_default } from "./chunks/UiCurveEditor.js";
+import { t as UiCycleButton_default } from "./chunks/UiCycleButton.js";
 import { t as UiDescriptionItem_default } from "./chunks/UiDescriptionItem.js";
 import { t as UiDescriptionList_default } from "./chunks/UiDescriptionList.js";
 import { t as UiScrollArea_default } from "./chunks/UiScrollArea.js";
@@ -87,4 +88,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };