@threadlabs/looma 0.12.7 → 0.13.0

package/vue/UiAvatarGroup.vue

@@ -46,7 +46,21 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-avatar-group-edge-ring {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-avatar-group-overlap-shadow {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-avatar-group"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-avatar-group-overlap-shadow: var(--ui-avatar-group-overlap-shadow);
+  --_ui-avatar-group-edge-ring: var(--ui-avatar-group-edge-ring);
+
   /* Each avatar is ringed in the surface colour, so where one overlaps the next it reads as a
    * whole circle set on top, not a shape cut into the one beneath. */
   --_overlap-shadow: 0 0 0 0 transparent;
@@ -82,8 +96,8 @@ useComponentHost(controllerModule.default, {
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow:
-    var(--ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
-    var(--ui-avatar-group-edge-ring, var(--_edge-ring));
+    var(--_ui-avatar-group-overlap-shadow, var(--_overlap-shadow)),
+    var(--_ui-avatar-group-edge-ring, var(--_edge-ring));
   font: inherit;
   font-size: var(--ui-font-size-xs);
   font-weight: 600;

package/vue/UiBadge.vue

@@ -36,6 +36,48 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-badge-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-font-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-line-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-point {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-badge-text {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-badge"] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);

package/vue/UiButton.vue

@@ -75,6 +75,76 @@ function attribute(value: unknown): any {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-button-active-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-disabled-filter {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-disabled-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-ghost-active-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-ghost-hover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-ghost-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-hover-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-hover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-link-hover-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-link-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-solid-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-button-text {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-button"] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);

package/vue/UiCallout.vue

@@ -97,7 +97,58 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-callout-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-icon {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-icon-column {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-icon-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-leading-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-callout-text {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-callout"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-callout-icon-column: var(--ui-callout-icon-column);
+  --_ui-callout-icon: var(--ui-callout-icon);
+  --_ui-callout-icon-size: var(--ui-callout-icon-size);
+
   --_callout-surface: var(--ui-info-soft);
   --_callout-border: var(--ui-info-solid);
   --_callout-icon: var(--ui-info-solid);
@@ -126,14 +177,14 @@ const hostState = computed(() =>
 .icon {
   display: grid;
   place-items: center;
-  inline-size: var(--ui-callout-icon-column, 1.125rem);
+  inline-size: var(--_ui-callout-icon-column, 1.125rem);
   block-size: 1lh;
-  color: var(--ui-callout-icon, var(--_callout-icon));
+  color: var(--_ui-callout-icon, var(--_callout-icon));
 }
 
 .icon svg {
-  inline-size: var(--ui-callout-icon-size, 1.125rem);
-  block-size: var(--ui-callout-icon-size, 1.125rem);
+  inline-size: var(--_ui-callout-icon-size, 1.125rem);
+  block-size: var(--_ui-callout-icon-size, 1.125rem);
 }
 
 .content {

package/vue/UiCheckbox.vue

@@ -95,7 +95,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-checkbox-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-checkbox-size {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-checkbox"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-checkbox-size: var(--ui-checkbox-size);
+
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-checkbox-gap, var(--ui-space-2));
@@ -132,8 +145,8 @@ input {
   -webkit-appearance: none;
   position: relative;
   flex: 0 0 auto;
-  inline-size: var(--ui-checkbox-size, 1.125rem);
-  block-size: var(--ui-checkbox-size, 1.125rem);
+  inline-size: var(--_ui-checkbox-size, 1.125rem);
+  block-size: var(--_ui-checkbox-size, 1.125rem);
   margin: 0.125em 0 0;
   border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
   border-radius: var(--ui-radius-sm);

package/vue/UiCluster.vue

@@ -25,6 +25,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-cluster-gap {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-cluster"] {
   --_layout-gap: var(--ui-space-3);
   display: flex;

package/vue/UiCombobox.vue

@@ -662,7 +662,61 @@ defineExpose({
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-combobox-affordance-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-item-input-min-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-item-item-max-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-item-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-label-font-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-label-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-max-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-message-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-option-check {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-combobox-option-text {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-combobox"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-combobox-label-text: var(--ui-combobox-label-text);
+  --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
+  --_ui-combobox-affordance-text: var(--ui-combobox-affordance-text);
+  --_ui-combobox-max-block-size: var(--ui-combobox-max-block-size);
+  --_ui-combobox-option-text: var(--ui-combobox-option-text);
+  --_ui-combobox-message-text: var(--ui-combobox-message-text);
+  --_ui-combobox-option-check: var(--ui-combobox-option-check);
+  --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
+  --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
+  --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
@@ -670,8 +724,8 @@ defineExpose({
   font: inherit;
 }
 label {
-  color: var(--ui-combobox-label-text, var(--ui-text-primary));
-  font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
+  color: var(--_ui-combobox-label-text, var(--ui-text-primary));
+  font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
@@ -773,7 +827,7 @@ button {
   border: 0;
   border-radius: var(--ui-radius-md);
   background: transparent;
-  color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
+  color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
   font: inherit;
   font-weight: 400;
   min-inline-size: 2rem;
@@ -808,7 +862,7 @@ input:disabled, button:disabled {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
-  max-block-size: var(--ui-combobox-max-block-size, 18rem);
+  max-block-size: var(--_ui-combobox-max-block-size, 18rem);
   overflow: auto;
   margin: 0;
   padding: var(--ui-space-1);
@@ -838,11 +892,11 @@ input:disabled, button:disabled {
 }
 .primary {
   display: block;
-  color: var(--ui-combobox-option-text, var(--ui-text-primary));
+  color: var(--_ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
 .message, .group {
-  color: var(--ui-combobox-message-text, var(--ui-text-secondary));
+  color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
@@ -903,7 +957,7 @@ input:disabled, button:disabled {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
-    --ui-combobox-option-check,
+    --_ui-combobox-option-check,
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
   );
 }
@@ -913,11 +967,11 @@ input:disabled, button:disabled {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
-  min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
+  min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input {
-  flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
+  flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
@@ -926,7 +980,7 @@ input:disabled, button:disabled {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
-  max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
+  max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
   overflow: hidden;
   padding: 0;
   border: 0;

package/vue/UiContainer.vue

@@ -29,6 +29,16 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-container-gutters {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-container-measure {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-container"] {
   --_container-measure: 65ch;
   --_container-gutters: var(--ui-space-4);

package/vue/UiContextMenu.vue

@@ -89,7 +89,16 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-context-menu-z-index {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-context-menu"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
+
   display: contents;
 }
 
@@ -107,7 +116,7 @@ useComponentHost(controllerModule.default, {
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   outline: 0;
   overflow: auto;
-  z-index: var(--ui-context-menu-z-index, 1000);
+  z-index: var(--_ui-context-menu-z-index, 1000);
   min-width: 12rem;
   opacity: 0;
   transform: translateY(-4px) scale(0.99);

package/vue/UiDialog.vue

@@ -76,7 +76,24 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-dialog-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-max-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-viewport-gap {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-dialog"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-dialog-duration: var(--ui-dialog-duration);
+
   position: fixed;
   inset: 0;
   box-sizing: border-box;
@@ -249,14 +266,14 @@ footer:empty {
 [data-component~="ui-dialog"]::backdrop {
   background-color: transparent;
   transition:
-    background-color var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
-    display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
-    overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+    background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+    display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+    overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
 
 [data-component~="ui-dialog"][open]::backdrop {
   background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter var(--ui-dialog-duration, var(--ui-motion-base))
+  animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);
 }
 

package/vue/UiDisclosure.vue

@@ -104,8 +104,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-disclosure-trigger-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-disclosure-trigger-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-disclosure-trigger-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+
 /* Density resolves into the summary row's own values; the public tokens still override them. */
 [data-component~="ui-disclosure"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
+  --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
+  --_ui-disclosure-trigger-padding-inline: var(--ui-disclosure-trigger-padding-inline);
+
   --_trigger-min-block-size: var(--ui-control-size);
   --_trigger-padding-block: var(--ui-space-2);
   --_trigger-padding-inline: var(--ui-space-3);
@@ -133,9 +152,9 @@ useComponentHost(controllerModule.default, {
   gap: var(--ui-space-3);
   align-items: center;
   inline-size: 100%;
-  min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
-  padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
-    var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
+  min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+  padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+    var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
   border: 0;
   background: transparent;
   color: inherit;

package/vue/UiEditorSlashMenu.vue

@@ -220,8 +220,8 @@ useComponentHost(controllerModule.default, {
 }
 
 .icon {
-  --ui-icon-size: 1rem;
-  --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+  --_ui-default-icon-size: 1rem;
+  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
 
 .body {

package/vue/UiEditorTableContextMenu.vue

@@ -201,8 +201,8 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-editor-table-context-menu"] button {
-  --ui-icon-size: 1rem;
-  --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+  --_ui-default-icon-size: 1rem;
+  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
 
 [data-component~="ui-editor-table-context-menu"] button:hover:not(:disabled) {

package/vue/UiEditorTableOverlay.vue

@@ -333,8 +333,8 @@ useComponentHost(controllerModule.default, {
 }
 
 .handle {
-  --ui-icon-size: 14px;
-  --ui-icon-stroke-width: 2;
+  --_ui-default-icon-size: 14px;
+  --_ui-default-icon-stroke-width: 2;
 }
 
 .handle[data-ui-proximity="near"],
@@ -482,8 +482,8 @@ useComponentHost(controllerModule.default, {
 
 .selector:hover,
 .cell-menu:hover {
-  background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
-  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+  background: var(--ui-surface-muted);
+  color: var(--ui-text-primary);
   box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
 }
 
@@ -507,8 +507,8 @@ useComponentHost(controllerModule.default, {
   display: block;
   width: 14px;
   height: 14px;
-  --ui-icon-size: 14px;
-  --ui-icon-stroke-width: 2;
+  --_ui-default-icon-size: 14px;
+  --_ui-default-icon-stroke-width: 2;
   opacity: 0;
   transform: scale(0.72);
   transition:
@@ -570,8 +570,8 @@ useComponentHost(controllerModule.default, {
 }
 
 .cell-menu {
-  --ui-icon-size: 15px;
-  --ui-icon-stroke-width: 2;
+  --_ui-default-icon-size: 15px;
+  --_ui-default-icon-stroke-width: 2;
 }
 
 [data-component~="ui-editor-table-overlay"][hidden] {

package/vue/UiEditorTableToolbar.vue

@@ -318,13 +318,13 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-editor-table-toolbar"] {
-  --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-  --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+  --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
 
 .chevron {
   display: inline-flex;
-  --ui-icon-size: 0.875rem;
+  --_ui-default-icon-size: 0.875rem;
 }
 
 [data-component~="ui-editor-table-toolbar"] .icon-button {

package/vue/UiFloatingActionButton.vue

@@ -39,6 +39,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-floating-action-button-inset-block-end {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-floating-action-button-inset-inline-end {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-floating-action-button-z-index {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-floating-action-button"] {
   position: fixed;
   inset-block-end: calc(

package/vue/UiFormField.vue

@@ -40,7 +40,16 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-form-field-help-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-form-field"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+
   display: grid;
   gap: var(--ui-space-2);
   min-inline-size: 0;
@@ -68,7 +77,7 @@ useComponentHost(controllerModule.default, {
 }
 
 .help > :slotted(*) {
-  min-block-size: var(--ui-form-field-help-min-block-size, 0);
+  min-block-size: var(--_ui-form-field-help-min-block-size, 0);
 }
 
 /* An error reads in the danger colour, the one the invalid control's border takes. */