@threadlabs/looma 0.12.6 → 0.13.0

package/tokens.css

@@ -122,10 +122,11 @@
     --ui-motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
     /* Neutrals: the ink mixed into the page. One ramp, so a theme that changes either end moves
-       every step with it. */
+       every step with it. Muted is the lightest text that still reads at 4.5:1 (WCAG AA) on the
+       sunken surface as well as the page, and secondary sits halfway between it and the ink. */
     --ui-surface-muted: color-mix(in oklab, var(--ui-surface-sunken) 50%, var(--ui-surface));
-    --ui-text-secondary: color-mix(in oklab, var(--ui-text) 72%, var(--ui-surface));
-    --ui-text-muted: color-mix(in oklab, var(--ui-text) 45%, var(--ui-surface));
+    --ui-text-secondary: color-mix(in oklab, var(--ui-text) 80%, var(--ui-surface));
+    --ui-text-muted: color-mix(in oklab, var(--ui-text) 62%, var(--ui-surface));
     --ui-border: color-mix(in oklab, var(--ui-text) 12%, var(--ui-surface));
     --ui-border-strong: color-mix(in oklab, var(--ui-text) 25%, var(--ui-surface));
     --ui-control-border: color-mix(in oklab, var(--ui-text) 48%, var(--ui-surface));
@@ -137,10 +138,11 @@
     --ui-accent-subtle: color-mix(in oklab, var(--ui-accent) 12%, var(--ui-surface));
     --ui-danger-hover: color-mix(in oklab, var(--ui-danger) 86%, var(--ui-text));
 
-    /* Disabled is one decision, not a per-component one: the sunken surface and the muted ink, at
-       full opacity, so a disabled control reads as unavailable rather than as a faded variant. */
+    /* Disabled is one decision, not a per-component one: the sunken surface and a pale ink, at
+       full opacity, so a disabled control reads as unavailable rather than as a faded variant.
+       Lighter than muted text, which must stay readable; disabled text is exempt from contrast. */
     --ui-disabled-surface: var(--ui-surface-sunken);
-    --ui-disabled-text: var(--ui-text-muted);
+    --ui-disabled-text: color-mix(in oklab, var(--ui-text) 45%, var(--ui-surface));
     /* A disabled button keeps its own look, washed out: less colour, less contrast, toward the page.
        A filter rather than a second palette, so every variant and tone fades the same way. */
     --ui-disabled-filter: saturate(0.2) contrast(0.75) brightness(1.25);

package/vue/UiActionBar.vue

@@ -15,10 +15,19 @@ defineOptions({ inheritAttrs: false })
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-action-bar-gap {
+  syntax: "*";
+  inherits: false;
+}
+
 /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
-       edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
-       row. The bar arranges its actions and leaves their look to them. */
+   edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
+   row. The bar arranges its actions and leaves their look to them. */
 [data-component~="ui-action-bar"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-action-bar-gap: var(--ui-action-bar-gap);
+
   --_gap: var(--ui-space-2);
   display: block;
   /* A size container sizes itself from its container, never its content. */
@@ -34,7 +43,7 @@ defineOptions({ inheritAttrs: false })
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--ui-action-bar-gap, var(--_gap));
+  gap: var(--_ui-action-bar-gap, var(--_gap));
 }
 
 /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the

package/vue/UiAvatar.vue

@@ -68,6 +68,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-avatar-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-avatar-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-avatar-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-avatar-active-ring {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-avatar"] {
   display: inline-grid;
   place-items: center;

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);
@@ -193,7 +206,7 @@ input:focus-visible {
 }
 
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input {

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;
@@ -795,7 +849,7 @@ button:focus-visible {
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
 input:disabled, button:disabled {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 .field:has(input:disabled) {
@@ -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);
@@ -833,16 +887,16 @@ input:disabled, button:disabled {
   outline-offset: -1px;
 }
 .option[aria-disabled="true"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 .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;
@@ -155,7 +174,7 @@ useComponentHost(controllerModule.default, {
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
 .trigger:disabled {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 

package/vue/UiEditable.vue

@@ -264,7 +264,7 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }