@threadlabs/looma 0.12.7 → 0.13.1

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.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     label?: string;
     max?: number;
+    size?: 'sm' | 'md';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -8,6 +9,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     label: string;
+    size: "sm" | "md";
     max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiAvatarGroup.vue

@@ -1,6 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-avatar-group/ui-avatar-group.js'
 import { createDispatch, useComponentHost } from './host'
 
@@ -10,10 +10,12 @@ const props = withDefaults(
   defineProps<{
     label?: string
     max?: number
+    size?: 'sm' | 'md'
   }>(),
   {
     label: 'People',
     max: 5,
+    size: 'md',
   },
 )
 
@@ -21,6 +23,13 @@ const root = ref<HTMLElement | null>(null)
 const overflowElement = useTemplateRef<HTMLElement>('overflow')
 const overflowCount = ref(0)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -33,7 +42,14 @@ useComponentHost(controllerModule.default, {
 </script>
 
 <template>
-  <div data-component="ui-avatar-group" role="group" v-bind="$attrs" :aria-label="label" ref="root">
+  <div
+    data-component="ui-avatar-group"
+    role="group"
+    v-bind="$attrs"
+    :aria-label="label"
+    :data-ui-avatar-group-state="hostState || undefined"
+    ref="root"
+  >
     <slot />
     <span
       class="overflow"
@@ -46,7 +62,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,14 +112,20 @@ 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;
   flex-shrink: 0;
 }
 
+[data-component~="ui-avatar-group"][data-ui-avatar-group-state~="size=sm"] .overflow {
+  margin-inline-start: -0.25rem;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+
 .overflow[hidden] {
   display: none;
 }

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;