@threadlabs/looma 0.17.0 → 0.17.2

package/vue/UiButton.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     as?: 'button' | 'a'
     disabled?: boolean
     href?: string
+    loading?: boolean
     pending?: boolean
     rel?: string
     size?: 'sm' | 'md' | 'lg'
@@ -26,6 +27,7 @@ const props = withDefaults(
     align: 'center',
     as: 'button',
     disabled: false,
+    loading: false,
     pending: false,
     size: 'md',
     stretch: false,
@@ -45,6 +47,7 @@ const hostState = computed(() =>
     props.size && `size size=${props.size}`,
     props.variant && `variant variant=${props.variant}`,
     props.tone && `tone tone=${props.tone}`,
+    props.loading && 'loading',
     props.pending && 'pending',
   ].filter(Boolean).join(' ')
 )
@@ -76,17 +79,17 @@ function attribute(value: unknown): any {
     v-if="as === 'a'"
     data-component="ui-button"
     v-bind="$attrs"
-    :href="attribute(({ true: null, false: href })[`${disabled || pending}`])"
+    :href="attribute(({ true: null, false: href })[`${disabled || loading || pending}`])"
     :target="target"
     :rel="rel"
-    :aria-disabled="typeof (({ true: 'true', false: null })[`${disabled || pending}`]) === 'boolean'
-    ? String(({ true: 'true', false: null })[`${disabled || pending}`])
-    : attribute(({ true: 'true', false: null })[`${disabled || pending}`])"
-    :aria-busy="pending"
-    :tabindex="attribute(({ true: '0', false: null })[`${pending && !disabled}`])"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${disabled || loading || pending}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${disabled || loading || pending}`])
+    : attribute(({ true: 'true', false: null })[`${disabled || loading || pending}`])"
+    :aria-busy="loading || pending"
+    :tabindex="attribute(({ true: '0', false: null })[`${(loading || pending) && !disabled}`])"
     :data-ui-button-state="hostState || undefined"
     ref="root"
-  ><UiSpinner v-if="pending" size="sm" class="pending-spinner" />
+  ><span v-if="loading || pending" class="spinner-wrap"><UiSpinner size="sm" /></span>
     <slot /></a>
   <button
     v-else
@@ -94,14 +97,14 @@ function attribute(value: unknown): any {
     v-bind="$attrs"
     :type="type"
     :disabled="disabled"
-    :aria-disabled="typeof (({ true: 'true', false: null })[`${pending}`]) === 'boolean'
-    ? String(({ true: 'true', false: null })[`${pending}`])
-    : attribute(({ true: 'true', false: null })[`${pending}`])"
-    :aria-busy="pending"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${loading || pending}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${loading || pending}`])
+    : attribute(({ true: 'true', false: null })[`${loading || pending}`])"
+    :aria-busy="loading || pending"
     :data-ui-button-state="hostState || undefined"
     ref="root"
   >
-    <UiSpinner v-if="pending" size="sm" class="pending-spinner" />
+    <span v-if="loading || pending" class="spinner-wrap"><UiSpinner size="sm" /></span>
     <slot />
   </button>
 </template>
@@ -234,12 +237,15 @@ function attribute(value: unknown): any {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease),
-    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    box-shadow var(--ui-motion-base) var(--ui-motion-ease);
   margin: 0;
 }
 
-.pending-spinner {
+.spinner-wrap {
+  display: inline-flex;
+  flex: none;
   margin-inline-end: var(--ui-space-2);
+  vertical-align: middle;
 }
 
 @supports (text-box-trim: trim-both) {
@@ -371,12 +377,12 @@ function attribute(value: unknown): any {
     var(--ui-focus-halo);
 }
 
-/* Disabled keeps the shape and washes out the rest: every variant keeps its own structure, so a
-   disabled outline is still an outline and a disabled ghost still has no edge. One filter fades
-   fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
-   toward the page. The highlight and shadow go, because nothing that cannot be pressed should
-   look raised. */
-[data-component~="ui-button"]:is(:disabled, [aria-disabled="true"]) {
+/* A loading action stays visually active; only an explicitly disabled action takes the
+   neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
+[data-component~="ui-button"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+  border-color: var(--ui-disabled-border);
+  background-color: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
   filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
@@ -384,16 +390,13 @@ function attribute(value: unknown): any {
   box-shadow: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="pending"]:focus-visible {
+:is([data-component~="ui-button"][data-ui-button-state~="loading"], [data-component~="ui-button"][data-ui-button-state~="pending"]):focus-visible {
   box-shadow: var(--ui-focus-halo);
 }
 
-/* Ghost has no hover to fall back on, so disabled is the one state it has to state outright:
-   it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
-   the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
-   hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]) {
-  background-color: oklch(from var(--_tone) l c h / 14%);
+/* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+  background-color: var(--ui-disabled-surface);
   border-color: transparent;
 }
 
@@ -456,7 +459,7 @@ html[data-ui-input-modality="touch"]
   transform: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
   background: none;
   border-color: transparent;
 }

package/vue/UiCallout.vue

@@ -158,8 +158,9 @@ const hostState = computed(() =>
   gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
   align-items: start;
   max-width: 100%;
-  padding: var(--ui-callout-padding-block, var(--ui-space-2))
-    var(--ui-callout-padding-inline, var(--ui-space-3));
+  padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
+  padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
+  padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
   border: var(--ui-callout-border-width, 1px) solid
     color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
   border-inline-start: var(--ui-callout-leading-border-width, 4px) solid

package/vue/UiCard.vue

@@ -69,7 +69,7 @@ const hostState = computed(() =>
   box-sizing: border-box;
   min-inline-size: 0;
   padding: var(--ui-space-5);
-  border: 1px solid var(--ui-border-default);
+  border: 1px solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
   color: var(--ui-text-primary);
@@ -95,7 +95,9 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
-  border-color: var(--ui-danger);
+  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+  border-inline-start: 4px solid var(--ui-danger);
+  background: var(--ui-danger-soft);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiCheckbox.vue

@@ -163,10 +163,10 @@ input {
   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: 1px solid var(--ui-control-border, var(--ui-border-strong));
   border-radius: var(--ui-radius-sm);
   background: var(--ui-control-surface, var(--ui-surface-default));
-  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
+  box-shadow: var(--ui-control-inset);
   cursor: pointer;
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -178,28 +178,30 @@ input::after {
   content: "";
   position: absolute;
   opacity: 0;
+  transition: opacity 120ms var(--ui-motion-ease);
 }
 
 input:checked,
 input:indeterminate {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
-  box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
+  box-shadow: var(--ui-control-inset);
 }
 
 /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
 input:checked::after {
   inset: 0;
   margin: auto;
-  inline-size: 0.32rem;
-  block-size: 0.58rem;
+  inline-size: 0.28rem;
+  block-size: 0.5rem;
   /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
      component, which left the tick with no style and no colour. */
   border-style: solid;
   border-color: var(--ui-text-on-accent);
   border-width: 0 0.125rem 0.125rem 0;
   opacity: 1;
-  transform: translateY(-0.11rem) rotate(45deg);
+  transform: translate(0.07rem, -0.09rem) rotate(45deg);
+  animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 input:indeterminate::after {
@@ -211,6 +213,28 @@ input:indeterminate::after {
   transform: translateY(-50%);
 }
 
+@keyframes ui-checkbox-check {
+  from {
+    opacity: 0;
+    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+  }
+  65% {
+    opacity: 1;
+    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  input::after {
+    transition: none;
+    animation: none;
+  }
+}
+
 input:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
@@ -228,9 +252,13 @@ input:focus-visible {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] .description {
+  color: var(--ui-disabled-text);
+}
 [data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input {
-  border-color: var(--ui-border-default);
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  border-color: var(--ui-disabled-border);
+  background: var(--ui-disabled-surface);
+  box-shadow: none;
   cursor: not-allowed;
 }
 

package/vue/UiCombobox.d.ts

@@ -347,6 +347,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     invalid: boolean;
     size: "sm" | "md" | "lg";
     disabled: boolean;
+    loading: boolean;
     required: boolean;
     allowCreate: boolean;
     allowFreeText: boolean;
@@ -354,7 +355,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     disclosure: boolean;
     help: string;
     labelVisibility: "visible" | "sr-only";
-    loading: boolean;
     multiple: boolean;
     openOnFocus: boolean;
     placeholder: string;

package/vue/UiCombobox.vue

@@ -802,35 +802,37 @@ defineExpose({
         *</template></label>
     <div class="control">
       <div class="field" ref="field">
-        <slot name="start" />
-        <template v-if="multiple"><button
-            v-for="(item, index) in internalItems"
-            :key="item.id"
-            class="item"
-            type="button"
-            tabindex="-1"
-            :data-index="index"
-            :disabled="disabled || readonly || item.disabled"
-            :aria-label="`${item.label}, press Delete or Backspace to remove`"
+        <div class="entry">
+          <slot name="start" />
+          <template v-if="multiple"><button
+              v-for="(item, index) in internalItems"
+              :key="item.id"
+              class="item"
+              type="button"
+              tabindex="-1"
+              :data-index="index"
+              :disabled="disabled || readonly || item.disabled"
+              :aria-label="`${item.label}, press Delete or Backspace to remove`"
+            >
+              <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
+            </button></template>
+          <input
+            role="combobox"
+            aria-autocomplete="list"
+            autocomplete="off"
+            :id="`${uid}-input`"
+            :aria-controls="`${uid}-listbox`"
+            :aria-expanded="expanded"
+            :aria-invalid="invalid || validationStatus === 'error'"
+            :aria-busy="loading || validationStatus === 'pending'"
+            :value.prop="display"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :required="required && !(multiple && internalItems[0])"
+            ref="input"
           >
-            <slot :name="`item-${item.id}`"><UiBadge>{{ item.label }}</UiBadge></slot>
-          </button></template>
-        <input
-          role="combobox"
-          aria-autocomplete="list"
-          autocomplete="off"
-          :id="`${uid}-input`"
-          :aria-controls="`${uid}-listbox`"
-          :aria-expanded="expanded"
-          :aria-invalid="invalid || validationStatus === 'error'"
-          :aria-busy="loading || validationStatus === 'pending'"
-          :value.prop="display"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          :readonly="readonly"
-          :required="required && !(multiple && internalItems[0])"
-          ref="input"
-        >
+        </div>
         <input
           v-if="name && !multiple"
           type="hidden"
@@ -851,7 +853,7 @@ defineExpose({
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
-          :disabled="disabled || readonly"
+          :disabled="disabled || readonly || (!raw && (multiple || selected === null))"
         >
           <svg
             class="affordance-icon"
@@ -1113,6 +1115,11 @@ label {
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
+.entry {
+  display: flex;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
 /* A ghost icon button: the affordance is the mark, not a box around it. */
 .help {
   flex: none;
@@ -1238,7 +1245,7 @@ input:disabled, button:disabled {
   margin: 0;
   padding: var(--ui-space-1);
   border: 1px solid
-    var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+    var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
   background: var(
     --_ui-combobox-popup-surface,
@@ -1268,6 +1275,10 @@ input:disabled, button:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
+.option[aria-disabled="true"] .primary,
+.option[aria-disabled="true"] .secondary {
+  color: var(--ui-disabled-text);
+}
 .primary {
   display: block;
   color: var(--_ui-combobox-option-text, var(--ui-text-primary));
@@ -1365,21 +1376,29 @@ input:disabled, button:disabled {
   );
 }
 
-/* Multiple mode: chips wrap before the cursor on one flexible field line. */
+/* Multiple mode keeps one control height. Chips and the input scroll within the entry,
+   while the clear and disclosure controls remain fixed at the end of the field. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {
-  flex-wrap: wrap;
   align-items: center;
-  gap: var(--ui-space-1);
   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"] .entry {
+  align-items: center;
+  gap: var(--ui-space-1);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry::-webkit-scrollbar {
+  display: none;
+}
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input {
   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);
 }
-/* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+/* Size variants keep their control height as selections are added. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
   .field {
   min-block-size: 0;
@@ -1402,6 +1421,7 @@ input:disabled, button:disabled {
 .item {
   appearance: none;
   display: inline-flex;
+  flex: none;
   min-inline-size: 0;
   max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
   overflow: hidden;
@@ -1418,7 +1438,7 @@ input:disabled, button:disabled {
   outline-offset: 1px;
 }
 .item:disabled {
-  opacity: 0.6;
+  color: var(--ui-disabled-text);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiContextMenu.vue

@@ -141,7 +141,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-overlay-surface, var(--ui-surface-elevated))
   );
   border: 1px solid
-    var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+    var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   box-shadow: var(
     --_ui-context-menu-shadow,
@@ -165,7 +165,7 @@ useComponentHost(controllerModule.default, {
   block-size: 0;
   margin: var(--ui-space-1) 0;
   border: 0;
-  border-block-start: 1px solid var(--ui-border-default);
+  border-block-start: 1px solid var(--ui-border-divider);
 }
 
 .menu:popover-open {

package/vue/UiDescriptionItem.vue

@@ -32,7 +32,7 @@ withDefaults(
   padding: var(--_ui-description-padding, 0);
   border-width: var(--_ui-description-border-width, 0);
   border-style: solid;
-  border-color: var(--ui-border-default);
+  border-color: var(--_ui-description-border-color, var(--ui-border-default));
   border-radius: var(--ui-radius-md);
   font-size: var(--ui-font-size-sm);
 }

package/vue/UiDescriptionList.vue

@@ -70,6 +70,7 @@ const hostState = computed(() =>
    than that many fit. */
 [data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
 [data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
+  inline-size: 100%;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
 }
 
@@ -78,6 +79,7 @@ const hostState = computed(() =>
   --_ui-description-value-size: var(--ui-font-size-lg);
   --_ui-description-padding: var(--_tile-padding);
   --_ui-description-border-width: 1px;
+  --_ui-description-border-color: var(--ui-border-strong);
   --_gap: var(--ui-space-3);
   --_gap-compact: var(--ui-space-2);
   --_column-gap: var(--_gap);

package/vue/UiDialog.d.ts

@@ -8,11 +8,11 @@ type __VLS_Props = {
     open?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'fullscreen';
 };
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_7: {}, __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_7) => any;
 } & {
-    actions?: (props: typeof __VLS_3) => any;
+    actions?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (detail: {

package/vue/UiDialog.vue

@@ -3,6 +3,7 @@
 import { computed, ref, useTemplateRef } from 'vue'
 import * as controllerModule from '../components/ui-dialog/ui-dialog.js'
 import { createDispatch, useComponentHost } from './host'
+import UiScrollArea from './UiScrollArea.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -106,7 +107,7 @@ useComponentHost(controllerModule.default, {
       <h2 v-if="label" class="title">{{ label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="close"></button>
     </header>
-    <div class="body"><slot /></div>
+    <UiScrollArea class="body"><slot /></UiScrollArea>
     <footer><slot name="actions" /></footer>
   </dialog>
 </template>
@@ -160,7 +161,7 @@ useComponentHost(controllerModule.default, {
   overflow: hidden;
   flex-direction: column;
   background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
   box-shadow: var(
     --ui-dialog-shadow,
@@ -215,7 +216,6 @@ header {
   gap: var(--ui-space-3);
   flex: none;
   padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
-  border-block-end: 1px solid var(--ui-border-default);
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
@@ -292,30 +292,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close {
 .body {
   flex: 1 1 auto;
   min-block-size: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
   padding: var(--ui-space-5);
-  /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self block);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
 
 footer {
@@ -325,7 +302,6 @@ footer {
   justify-content: flex-end;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-5);
-  border-block-start: 1px solid var(--ui-border-default);
 }
 
 footer:empty {

package/vue/UiDisclosure.vue

@@ -166,7 +166,7 @@ function attribute(value: unknown): any {
   display: block;
   inline-size: 100%;
   overflow: clip;
-  border-block-end: 1px solid var(--ui-border-default);
+  border-block-end: 1px solid var(--ui-border-divider);
   color: var(--ui-text-primary);
 }
 
@@ -191,7 +191,7 @@ function attribute(value: unknown): any {
 }
 
 .trigger:hover:not(:disabled) {
-  background: var(--ui-surface-muted);
+  background: color-mix(in srgb, currentColor 6%, transparent);
 }
 .trigger:focus-visible {
   outline: none;

package/vue/UiEditorInsertTableGrid.vue

@@ -91,7 +91,7 @@ useComponentHost(controllerModule.default, {
 [data-component~="ui-editor-insert-table-grid"] {
   padding: var(--ui-space-3);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border);
+  border: 1px solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
@@ -140,7 +140,7 @@ useComponentHost(controllerModule.default, {
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
-  border: 1px solid var(--ui-border);
+  border: 1px solid var(--ui-control-border);
   border-radius: 2px;
   background: var(--ui-surface);
   cursor: pointer;

package/vue/UiEditorMentionMenu.d.ts

@@ -50,8 +50,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     }) => any) | undefined;
 }>, {
     label: string;
-    open: boolean;
     loading: boolean;
+    open: boolean;
     query: string;
     loadingLabel: string;
     selectedIndex: number;

package/vue/UiEditorMentionMenu.vue

@@ -118,7 +118,7 @@ useComponentHost(controllerModule.default, {
   overflow: hidden;
   flex-direction: column;
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border);
+  border: 1px solid var(--ui-border-strong);
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
@@ -130,12 +130,13 @@ useComponentHost(controllerModule.default, {
   gap: var(--ui-space-3);
   padding: var(--ui-space-2) var(--ui-space-3);
   color: var(--ui-text-secondary);
-  border-bottom: 1px solid var(--ui-border);
+  border-bottom: 1px solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }
 
-.header:not(:has(> *)), .empty:not(:has(> *)) {
+[data-component~="ui-editor-mention-menu"] > .header:empty,
+[data-component~="ui-editor-mention-menu"] > .empty:empty {
   display: none;
 }