@threadlabs/looma 0.17.0 → 0.17.2

package/vue/UiEditorSlashMenu.vue

@@ -108,7 +108,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-editor-slash-menu"] {
   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));
   overflow: hidden;
@@ -128,7 +128,7 @@ useComponentHost(controllerModule.default, {
   align-items: center;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
-  border-bottom: 1px solid var(--ui-border);
+  border-bottom: 1px solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
   font-weight: var(--ui-font-semibold);
@@ -136,7 +136,9 @@ useComponentHost(controllerModule.default, {
   letter-spacing: 0.05em;
 }
 
-.header:not(:has(> *)), .footer:not(:has(> *)), .empty:not(:has(> *)) {
+[data-component~="ui-editor-slash-menu"] > .header:empty,
+[data-component~="ui-editor-slash-menu"] > .footer:empty,
+[data-component~="ui-editor-slash-menu"] > .empty:empty {
   display: none;
 }
 
@@ -257,7 +259,7 @@ useComponentHost(controllerModule.default, {
 
 .footer {
   padding: var(--ui-space-2) var(--ui-space-3);
-  border-top: 1px solid var(--ui-border);
+  border-top: 1px solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
 }

package/vue/UiEditorSlashMenuItem.vue

@@ -53,9 +53,14 @@ withDefaults(
   background: var(--ui-accent-subtle);
 }
 [data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] {
-  opacity: 0.6;
+  background: var(--ui-disabled-surface);
   cursor: not-allowed;
 }
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .title,
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .description,
+[data-component~="ui-editor-slash-menu-item"][aria-disabled="true"] .icon {
+  color: var(--ui-disabled-text);
+}
 
 .icon {
   display: flex;

package/vue/UiEditorTableContextMenu.vue

@@ -217,7 +217,7 @@ function attribute(value: unknown): any {
   max-height: min(28rem, calc(100vh - 24px));
   padding: var(--ui-space-2);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border);
+  border: 1px solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
@@ -319,7 +319,7 @@ function attribute(value: unknown): any {
 
 .sep {
   height: 1px;
-  background: var(--ui-border);
+  background: var(--ui-border-divider);
   margin: var(--ui-space-1) 0;
 }
 

package/vue/UiEditorTableToolbar.vue

@@ -298,7 +298,7 @@ function attribute(value: unknown): any {
   gap: var(--ui-space-1);
   padding: var(--ui-space-1);
   background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-  border: 1px solid var(--ui-border);
+  border: 1px solid var(--ui-border-strong);
   border-radius: calc(var(--ui-radius-md) + 2px);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
@@ -314,7 +314,7 @@ function attribute(value: unknown): any {
 .sep {
   width: 1px;
   align-self: stretch;
-  background: var(--ui-border);
+  background: var(--ui-border-divider);
 }
 
 .overflow {
@@ -387,7 +387,7 @@ function attribute(value: unknown): any {
   min-width: 12rem;
   padding: var(--ui-space-1);
   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));
   display: flex;
@@ -399,7 +399,7 @@ function attribute(value: unknown): any {
 .menu-section + .menu-section {
   margin-top: var(--ui-space-1);
   padding-top: var(--ui-space-1);
-  border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
+  border-top: 1px solid var(--ui-border-divider);
 }
 
 .menu-heading {

package/vue/UiEditorToolbar.vue

@@ -59,7 +59,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-editor-toolbar-padding-inline, 12px);
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
 }
 
 /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -117,7 +117,7 @@ useComponentHost(controllerModule.default, {
 :slotted(.divider) {
   width: 1px;
   height: 20px;
-  background: var(--ui-editor-toolbar-divider, var(--ui-border));
+  background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
   flex-shrink: 0;
   margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
 }
@@ -134,7 +134,7 @@ useComponentHost(controllerModule.default, {
     var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
     transparent
   );
-  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
   border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
   box-shadow: var(
     --ui-editor-toolbar-floating-shadow,
@@ -151,7 +151,7 @@ useComponentHost(controllerModule.default, {
     left: 0;
     right: 0;
     min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
     border-bottom: none;
     box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
   }
@@ -160,7 +160,7 @@ useComponentHost(controllerModule.default, {
     position: relative;
     inset: auto;
     min-height: auto;
-    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
     border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
     box-shadow: var(
       --ui-editor-toolbar-floating-shadow,

package/vue/UiFloatingActionButton.vue

@@ -103,7 +103,9 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-floating-action-button"]:disabled {
-  opacity: 0.6;
+  background: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
+  box-shadow: none;
   cursor: not-allowed;
 }
 

package/vue/UiIconButton.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     anticipatory?: boolean;
     disabled?: boolean;
     label?: string;
+    loading?: boolean;
     pending?: boolean;
     round?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -16,6 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     size: "sm" | "md" | "lg";
     variant: "ghost" | "outline" | "solid";
     disabled: boolean;
+    loading: boolean;
     pending: boolean;
     anticipatory: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/vue/UiIconButton.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
     anticipatory?: boolean
     disabled?: boolean
     label?: string
+    loading?: boolean
     pending?: boolean
     round?: boolean
     size?: 'sm' | 'md' | 'lg'
@@ -20,6 +21,7 @@ const props = withDefaults(
   {
     anticipatory: false,
     disabled: false,
+    loading: false,
     pending: false,
     round: false,
     size: 'md',
@@ -34,9 +36,10 @@ const hostState = computed(() =>
   [
     props.anticipatory && 'anticipatory',
     props.variant && `variant variant=${props.variant}`,
+    props.loading && 'loading',
+    props.pending && 'pending',
     props.size && `size size=${props.size}`,
     props.round && 'round',
-    props.pending && 'pending',
   ].filter(Boolean).join(' ')
 )
 
@@ -69,14 +72,14 @@ function attribute(value: unknown): any {
     v-bind="$attrs"
     :disabled="disabled"
     :aria-label="label"
-    :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-icon-button-state="hostState || undefined"
     ref="root"
   >
-    <UiSpinner v-if="pending" size="sm" />
+    <UiSpinner v-if="loading || pending" size="sm" />
     <span class="content"><slot /></span>
   </button>
 </template>
@@ -184,15 +187,32 @@ function attribute(value: unknown): any {
   pointer-events: none;
 }
 
-/* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
- * surface and icon. The root is the native button, so hiding it outright would hide the dot
- * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:disabled::before {
+  opacity: 0;
+}
+
+/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(--ui-motion-fast) var(--ui-motion-ease),
+    transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+}
+
 @media (hover: hover) and (pointer: fine) {
-  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
-    color: transparent;
+  }
+
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"], :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+    .content {
+    opacity: 0;
+    transform: scale(0.65);
+    transition-duration: var(--ui-motion-fast);
   }
 }
 
@@ -222,7 +242,7 @@ 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),
     transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
@@ -283,13 +303,16 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
-  border-color: var(--ui-icon-button-border, var(--ui-border-default));
+  border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
   background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
+  box-shadow: var(--ui-raised);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
   background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+  background-image: var(--ui-raised-highlight);
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
     --ui-icon-button-solid-shadow,
@@ -304,7 +327,10 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
-  border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+  border-color: var(
+    --ui-icon-button-hover-border,
+    var(--ui-control-border-hover, var(--ui-control-border))
+  );
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
@@ -315,30 +341,46 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"] {
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"]) {
   cursor: progress;
 }
 
 .content {
-  display: contents;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"] .content {
+:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"])
+  .content {
   display: none;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"] .content {
+    transition: none;
+  }
+}
+
 [data-component~="ui-icon-button"]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
 
-/* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
-/* Disabled washes the button out the way Button does: the same shape, one filter. */
+/* Disabled is a flat neutral control, independent of the active variant's tone. */
 [data-component~="ui-icon-button"]:disabled {
+  border-color: var(--ui-disabled-border);
+  background: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
   filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);
   cursor: not-allowed;
   box-shadow: none;
+  background-image: none;
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"]:disabled {
+  border-color: transparent;
 }
 
 [data-component~="ui-icon-button"] {

package/vue/UiList.d.ts

@@ -1,14 +1,20 @@
 type __VLS_Props = {
+    as?: 'ul' | 'ol';
     density?: 'comfortable' | 'compact';
     layout?: 'rows' | 'grid';
+    markers?: 'none' | 'disc';
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: "ul" | "ol";
     density: "comfortable" | "compact";
     layout: "rows" | "grid";
+    markers: "none" | "disc";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiList.vue

@@ -6,18 +6,24 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    as?: 'ul' | 'ol'
     density?: 'comfortable' | 'compact'
     layout?: 'rows' | 'grid'
+    markers?: 'none' | 'disc'
   }>(),
   {
+    as: 'ul',
     density: 'comfortable',
     layout: 'rows',
+    markers: 'none',
   },
 )
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.as && `as as=${props.as}`,
+    props.markers && `markers markers=${props.markers}`,
     props.density && `density density=${props.density}`,
     props.layout && `layout layout=${props.layout}`,
   ].filter(Boolean).join(' ')
@@ -25,7 +31,16 @@ const hostState = computed(() =>
 </script>
 
 <template>
+  <ol
+    v-if="as === 'ol'"
+    data-component="ui-list"
+    v-bind="$attrs"
+    :data-ui-list-state="hostState || undefined"
+  >
+    <slot />
+  </ol>
   <ul
+    v-else
     data-component="ui-list"
     role="list"
     v-bind="$attrs"
@@ -46,33 +61,69 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+/* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
    explicit list role keeps the list announced as one: some browsers drop it from a list with no
    markers. */
 [data-component~="ui-list"] {
+  --_list-gap: var(--ui-list-gap, var(--ui-space-1));
+  --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
   display: flex;
   flex-direction: column;
-  gap: var(--ui-list-gap, var(--ui-space-1));
+  inline-size: 100%;
+  gap: var(--_list-gap);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+[data-component~="ui-list"][data-ui-list-state~="as=ol"],
+[data-component~="ui-list"][data-ui-list-state~="markers=disc"] {
+  padding-inline-start: var(--ui-space-5);
+}
+
+[data-component~="ui-list"][data-ui-list-state~="as=ol"] {
+  list-style: decimal;
+}
+
+[data-component~="ui-list"][data-ui-list-state~="markers=disc"] {
+  list-style: disc;
+}
+
+[data-component~="ui-list"] > :slotted(li) {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  padding: var(--_ui-list-native-padding-block, var(--ui-space-2))
+    var(--_ui-list-native-padding-inline, var(--ui-space-3));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  list-style: inherit;
+}
+
+[data-component~="ui-list"] > :slotted(li.card) {
+  padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
+    var(--_ui-list-native-padding-inline, var(--ui-space-4));
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+  list-style: none;
+}
+
 /* Compact passes its size to the items through private properties, which cross into each item. */
 [data-component~="ui-list"][data-ui-list-state~="density=compact"] {
+  --_list-gap: var(--ui-list-gap, var(--ui-space-2));
   --_ui-list-item-min-size: 0;
   --_ui-list-item-padding-block: 0;
   --_ui-list-item-padding-inline: 0;
   --_ui-list-item-title-weight: var(--ui-font-normal);
-  gap: var(--ui-list-gap, var(--ui-space-2));
+  --_ui-list-native-padding-block: 0;
+  --_ui-list-native-padding-inline: 0;
 }
 
 [data-component~="ui-list"][data-ui-list-state~="layout=grid"] {
+  --_list-gap: var(--ui-list-gap, var(--ui-space-3));
   display: grid;
-  grid-template-columns:
-    repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
-  gap: var(--ui-list-gap, var(--ui-space-3));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiListItem.vue

@@ -95,7 +95,7 @@ const hostState = computed(() =>
 [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
   padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
   padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-  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);
 }

package/vue/UiMenu.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     density?: 'comfortable' | 'compact';
     for?: string;
+    inline?: boolean;
     open?: boolean;
     placement?: string;
 };
@@ -46,6 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     for: string;
     open: boolean;
     placement: string;
+    inline: boolean;
     density: "comfortable" | "compact";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiMenu.vue

@@ -10,12 +10,14 @@ const props = withDefaults(
   defineProps<{
     density?: 'comfortable' | 'compact'
     for?: string
+    inline?: boolean
     open?: boolean
     placement?: string
   }>(),
   {
     density: 'comfortable',
     for: '',
+    inline: false,
     open: false,
     placement: 'bottom-start',
   },
@@ -53,6 +55,7 @@ const hostState = computed(() =>
   [
     props.density && `density density=${props.density}`,
     internalOpen.value && 'internalOpen',
+    props.inline && 'inline',
   ].filter(Boolean).join(' ')
 )
 
@@ -181,7 +184,7 @@ useComponentHost(controllerModule.default, {
   max-inline-size: inherit;
   padding: var(--ui-space-1);
   background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+  border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   box-shadow: var(
     --_ui-menu-shadow,
@@ -196,10 +199,10 @@ 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);
 }
 
-[data-component~="ui-menu"]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]) {
+[data-component~="ui-menu"]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {
   display: none;
 }
 

package/vue/UiMenuItem.d.ts

@@ -5,15 +5,15 @@ type __VLS_Props = {
     type?: 'action' | 'checkbox' | 'radio';
     value?: string;
 };
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_15: {}, __VLS_17: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     shortcut?: (props: typeof __VLS_3) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_10) => any;
 } & {
-    shortcut?: (props: typeof __VLS_17) => any;
+    shortcut?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (detail: {