@threadlabs/looma 0.37.0 → 0.37.2

package/vue/chunks/UiTreeItem.js

@@ -1,5 +1,5 @@
 import { a as concat, b as useReflectedProp, i as checkHydratedRoot, m as nativeAttrs, o as createDispatch, r as attribute, t as _plugin_vue_export_helper_default, y as useComponentHost } from "./_plugin-vue_export-helper.js";
-import { i as checkPropInput, m as vuePropInputs, p as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP, u as propValidityState } from "./props.js";
+import { d as propValidityState, h as vuePropInputs, i as checkPropInput, m as vPropValidity, r as acceptsControllerWrite, t as BINDING_INPUTS_PROP } from "./props.js";
 import { t as UiButton_default } from "./UiButton.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiTreeItem.vue?vue&type=script&setup=true&lang.ts

package/vue/chunks/props.js

@@ -852,6 +852,17 @@ function evaluateInput(compute, previous, invalid = Symbol.for("html-next.invali
 		status
 	};
 }
+/** A fallback handles absence; only the branch supplying the result contributes availability. */
+function inputDefault(read, fallback, absent) {
+	if (!observingInputs()) {
+		const value = read();
+		return value == null || value === absent ? fallback() : value;
+	}
+	const result = evaluateInput(read, READY_INPUT);
+	if (result.value == null || result.value === absent) return fallback();
+	observeInputStatus(result.status);
+	return result.value;
+}
 /** The adapter supplies its own memo/computed primitive; acceptance runs only for available data. */
 function inputComputed(compute, make, accept, initialStatus) {
 	let previous;
@@ -1214,4 +1225,4 @@ function vuePropInputs(values, defaults, check, prepare) {
 	};
 }
 //#endregion
-export { checkedProp as a, inputComputed as c, requireInputStatus as d, selectedPropNode as f, checkPropInput as i, inputRead as l, vuePropInputs as m, READY_INPUT as n, copyStateSeed as o, vPropValidity as p, acceptsControllerWrite as r, evaluateInput as s, BINDING_INPUTS_PROP as t, propValidityState as u };
+export { checkedProp as a, inputComputed as c, propValidityState as d, requireInputStatus as f, vuePropInputs as h, checkPropInput as i, inputDefault as l, vPropValidity as m, READY_INPUT as n, copyStateSeed as o, selectedPropNode as p, acceptsControllerWrite as r, evaluateInput as s, BINDING_INPUTS_PROP as t, inputRead as u };

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-d551a32f {
 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-d551a32f 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";