@threadlabs/looma 0.12.7 → 0.13.0

package/vue/UiSearchShell.vue

@@ -76,23 +76,77 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-search-shell-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-focus-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-max-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-max-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-padding-top {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-viewport-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-z-index {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-search-shell"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
+  --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
+  --_ui-search-shell-viewport-gap: var(--ui-search-shell-viewport-gap);
+  --_ui-search-shell-max-width: var(--ui-search-shell-max-width);
+  --_ui-search-shell-max-height: var(--ui-search-shell-max-height);
+  --_ui-search-shell-surface: var(--ui-search-shell-surface);
+  --_ui-search-shell-border: var(--ui-search-shell-border);
+  --_ui-search-shell-radius: var(--ui-search-shell-radius);
+  --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
+  --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
+
   display: contents;
 }
 
 dialog {
   position: fixed;
   inset: 0;
-  z-index: var(--ui-search-shell-z-index, 400);
+  z-index: var(--_ui-search-shell-z-index, 400);
   box-sizing: border-box;
   inline-size: 100%;
   max-inline-size: none;
   block-size: 100%;
   max-block-size: none;
   margin: 0;
-  padding: var(--ui-search-shell-padding-top, 10vh)
-    var(--ui-search-shell-viewport-gap, var(--ui-space-4))
-    var(--ui-search-shell-viewport-gap, var(--ui-space-4));
+  padding: var(--_ui-search-shell-padding-top, 10vh)
+    var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
+    var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
   overflow: auto;
   border: 0;
   background: var(--ui-overlay-backdrop);
@@ -107,14 +161,14 @@ dialog::backdrop {
   position: relative;
   display: flex;
   flex-direction: column;
-  inline-size: min(100%, var(--ui-search-shell-max-width, 40rem));
-  max-block-size: var(--ui-search-shell-max-height, 80vh);
+  inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
+  max-block-size: var(--_ui-search-shell-max-height, 80vh);
   margin-inline: auto;
   overflow: hidden;
-  background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
-  border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
-  border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
-  box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+  background: var(--_ui-search-shell-surface, var(--ui-surface-elevated));
+  border: 1px solid var(--_ui-search-shell-border, var(--ui-border-default));
+  border-radius: var(--_ui-search-shell-radius, var(--ui-radius-dialog));
+  box-shadow: var(--_ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
 }
 
 .search {
@@ -127,8 +181,8 @@ dialog::backdrop {
 
 /* The search region shows where typing goes, whatever the author put in it. */
 .search:focus-within {
-  border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
-  box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
+  border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
+  box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
 }
 
 :slotted(input[slot="search"]) {

package/vue/UiSelect.vue

@@ -54,6 +54,20 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-select-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-shadow {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-select"] {
   box-sizing: border-box;
   display: inline-block;

package/vue/UiSeparator.vue

@@ -17,7 +17,14 @@ withDefaults(
 </template>
 
 <style scoped>
-hr {
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-separator-color {
+  syntax: "*";
+  inherits: false;
+}
+
+/* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
+[data-component~="ui-separator"] {
   box-sizing: border-box;
   align-self: stretch;
   margin: 0;
@@ -25,7 +32,7 @@ hr {
   border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
 }
 
-hr[aria-orientation="vertical"] {
+[data-component~="ui-separator"][aria-orientation="vertical"] {
   block-size: auto;
   border-block-start: 0;
   border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));

package/vue/UiSidebar.vue

@@ -115,7 +115,28 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-sidebar-backdrop {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-sidebar-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-sidebar-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-sidebar-width {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-sidebar"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -276,7 +297,7 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-sidebar"][popover]::backdrop {
-  background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+  background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
 
 @media (prefers-reduced-motion: reduce) {

package/vue/UiStack.vue

@@ -27,6 +27,12 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-stack-gap {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-stack"] {
   --_layout-gap: var(--ui-space-4);
   display: flex;

package/vue/UiSwitch.vue

@@ -93,7 +93,25 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-switch-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-switch-track-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-switch-track-width {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-switch"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-switch-track-width: var(--ui-switch-track-width);
+  --_ui-switch-track-height: var(--ui-switch-track-height);
+
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-switch-gap, var(--ui-space-2));
@@ -130,8 +148,8 @@ input {
   -webkit-appearance: none;
   position: relative;
   flex: 0 0 auto;
-  width: var(--ui-switch-track-width, 2.5rem);
-  height: var(--ui-switch-track-height, 1.5rem);
+  width: var(--_ui-switch-track-width, 2.5rem);
+  height: var(--_ui-switch-track-height, 1.5rem);
   padding: 0;
   border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
   border-radius: 999px;

package/vue/UiSwitcher.vue

@@ -31,7 +31,20 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-switcher-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-switcher-threshold {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-switcher"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-switcher-threshold: var(--ui-switcher-threshold);
+
   --_switcher-gap: var(--ui-space-4);
   display: flex;
   flex-wrap: wrap;
@@ -45,7 +58,7 @@ const hostState = computed(() =>
   min-inline-size: 0;
   flex-grow: 1;
   /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
-  flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
 }
 
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=xs"] {
@@ -64,13 +77,13 @@ const hostState = computed(() =>
   --_switcher-gap: var(--ui-space-6);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=xs"] > :slotted(*) {
-  flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=md"] > :slotted(*) {
-  flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=lg"] > :slotted(*) {
-  flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="align=start"] {
   align-items: flex-start;

package/vue/UiTabs.vue

@@ -100,8 +100,27 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-tabs-tab-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tabs-tab-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tabs-tab-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+
 /* Density resolves into the tab row's own values; the public tokens still override them. */
 [data-component~="ui-tabs"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
+  --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
+  --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+
   --_tab-min-block-size: var(--ui-control-size);
   --_tab-padding-block: var(--ui-space-2);
   --_tab-padding-inline: var(--ui-space-3);
@@ -137,10 +156,10 @@ useComponentHost(controllerModule.default, {
 }
 
 .list button {
-  min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
+  min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 -1px;
-  padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block))
-    var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
+  padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
+    var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
   border: 0;
   border-block-end: 2px solid transparent;
   background: transparent;

package/vue/UiTextarea.vue

@@ -58,6 +58,20 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-textarea-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-shadow {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-textarea"] {
   box-sizing: border-box;
   display: inline-block;

package/vue/UiToastRegion.vue

@@ -132,7 +132,21 @@ defineExpose({
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-toast-region-enter-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-exit-duration {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-toast-region"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
+  --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
+
   position: fixed;
   top: calc(var(--ui-space-4) + env(safe-area-inset-top));
   right: auto;
@@ -175,13 +189,13 @@ defineExpose({
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-  animation: ui-toast-enter var(--ui-toast-region-enter-duration, 0.32s)
+  animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s)
     var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
 .toast.closing {
-  animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
+  animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }
 

package/vue/UiTooltip.vue

@@ -96,7 +96,56 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-tooltip-arrow-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-inverse-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-inverse-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-max-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tooltip-text {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-tooltip"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-tooltip-border: var(--ui-tooltip-border);
+  --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
+  --_ui-tooltip-radius: var(--ui-tooltip-radius);
+  --_ui-tooltip-surface: var(--ui-tooltip-surface);
+  --_ui-tooltip-text: var(--ui-tooltip-text);
+  --_ui-tooltip-shadow: var(--ui-tooltip-shadow);
+  --_ui-tooltip-inverse-surface: var(--ui-tooltip-inverse-surface);
+  --_ui-tooltip-inverse-text: var(--ui-tooltip-inverse-text);
+  --_ui-tooltip-arrow-size: var(--ui-tooltip-arrow-size);
+
   position: fixed;
   inset: auto;
   margin: 0;
@@ -119,25 +168,25 @@ useComponentHost(controllerModule.default, {
 }
 
 .surface {
-  --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
+  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-border-default));
   position: relative;
   box-sizing: border-box;
-  max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
+  max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
   border: 1px solid var(--_tooltip-line);
-  border-radius: var(--ui-tooltip-radius, var(--ui-radius-sm));
-  background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
-  color: var(--ui-tooltip-text, var(--ui-text-primary));
+  border-radius: var(--_ui-tooltip-radius, var(--ui-radius-sm));
+  background: var(--_ui-tooltip-surface, var(--ui-surface-elevated));
+  color: var(--_ui-tooltip-text, var(--ui-text-primary));
   padding: var(--ui-space-1) var(--ui-space-2);
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
-  box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+  box-shadow: var(--_ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
 }
 
 [data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
-  --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
-  background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
-  color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
+  --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+  background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
+  color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
 }
 
 /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
@@ -147,9 +196,9 @@ useComponentHost(controllerModule.default, {
   position: absolute;
   z-index: 1;
   inset-inline-start: var(--ui-space-3);
-  inset-block-end: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
-  inline-size: var(--ui-tooltip-arrow-size, 0.5rem);
-  block-size: var(--ui-tooltip-arrow-size, 0.5rem);
+  inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inline-size: var(--_ui-tooltip-arrow-size, 0.5rem);
+  block-size: var(--_ui-tooltip-arrow-size, 0.5rem);
   box-sizing: border-box;
   background: inherit;
   border: 0 solid var(--_tooltip-line);
@@ -161,7 +210,7 @@ useComponentHost(controllerModule.default, {
 
 :is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
   .surface::after {
-  inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
   border-block-end-width: 0;

package/vue/UiTopBar.vue

@@ -13,7 +13,40 @@ defineOptions({ inheritAttrs: false })
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-top-bar-actions-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-top-bar-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-top-bar-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-top-bar-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-top-bar-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-top-bar-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-top-bar-z-index {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-top-bar"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-top-bar-actions-gap: var(--ui-top-bar-actions-gap);
+
   position: sticky;
   inset-block-start: 0;
   z-index: var(--ui-top-bar-z-index, 100);
@@ -43,7 +76,7 @@ defineOptions({ inheritAttrs: false })
 }
 
 .actions {
-  gap: var(--ui-top-bar-actions-gap, var(--ui-space-1));
+  gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
 }
 
 .title {

package/vue/UiTree.vue

@@ -130,19 +130,42 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-tree-drop-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tree-gutter {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tree-indent {
+  syntax: "*";
+  inherits: false;
+}
+
 /* Reaches the items the way density does, so the setting lives on the tree the way a reader
-       thinks about it: this list scrolls its long names. */
+   thinks about it: this list scrolls its long names. */
 [data-component~="ui-tree"][data-ui-tree-state~="marquee"] {
-  --ui-tree-item-marquee: 1;
+  --_ui-default-tree-item-marquee: 1;
 }
 
+/* The items' defaults for this density: an item's own hook still wins. */
 [data-component~="ui-tree"][data-ui-tree-state~="density=compact"] {
-  --ui-tree-item-min-block-size: var(--ui-control-size-sm);
-  --ui-tree-item-font-size: var(--ui-font-size-sm);
-  --ui-tree-item-label-padding-block: 0;
+  --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
+  --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
+  --_ui-default-tree-item-label-padding-block: 0;
 }
 
 [data-component~="ui-tree"] {
+  /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
+     starts again from its own settings. */
+  --_ui-tree-indent: var(--ui-tree-indent);
+  --_ui-tree-drop-color: var(--ui-tree-drop-color);
+  --_ui-default-tree-item-marquee: initial;
+  --_ui-default-tree-item-min-block-size: initial;
+  --_ui-default-tree-item-font-size: initial;
+  --_ui-default-tree-item-label-padding-block: initial;
   display: block;
   min-inline-size: 0;
   padding-inline-start: var(--ui-tree-gutter, 0px);