@threadlabs/looma 0.31.2 → 0.31.4

package/vue/UiDialog.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -575,4 +575,203 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
     transition: none;
   }
 }
+
+@scope ([data-slotted~="ui-dialog"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-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;
+    inline-size: min(
+      calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
+      var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
+    );
+    max-inline-size: none;
+    max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
+    margin: auto;
+    padding: 0;
+    overflow: hidden;
+    flex-direction: column;
+    background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+    border: var(--ui-border-width) 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,
+      var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+    );
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.96);
+    transition:
+      opacity var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      transform var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      visibility var(--ui-dialog-duration, var(--ui-motion-base)),
+      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;
+  }
+
+  :global(:where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    display: flex;
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1);
+    animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base))
+      var(--ui-motion-ease);
+  }
+
+  :global(:where(.ui-dialog)[data-ui-dialog-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    --_ui-dialog-size: 360px;
+  }
+
+  :global(:where(.ui-dialog)[data-ui-dialog-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    --_ui-dialog-size: 640px;
+  }
+
+  :global(:where(.ui-dialog)[data-ui-dialog-state~="size=fullscreen"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100dvh;
+    max-block-size: none;
+    margin: 0;
+    border-radius: var(--ui-dialog-radius, 0);
+  }
+
+  :global(:where(.ui-dialog)[data-ui-dialog-state~="alert"]
+    .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    display: none;
+  }
+  :global(header:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-3);
+    flex: none;
+    /* The title's ink sits inside its line box and the taller close target. Balance that
+       visible top inset against the action row's bottom inset, not just the boxes. */
+    padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
+      var(--ui-space-5);
+  }
+  :global(:where(.ui-dialog)[data-ui-dialog-state~="alert"]
+    header:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+  }
+  :global(:where(.ui-dialog)
+    .title:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    flex: 1;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: var(--ui-text-primary);
+    letter-spacing: normal;
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-semibold);
+    line-height: var(--ui-line-height-tight);
+  }
+
+  :global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: var(--ui-control-size-sm);
+    block-size: var(--ui-control-size-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-round);
+    background: transparent;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  :global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
+    *):where([data-hn-ui-dialog])::before),
+  :global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
+    *):where([data-hn-ui-dialog])::after) {
+    content: "";
+    grid-area: 1 / 1;
+    inline-size: 0.875rem;
+    block-size: 1.5px;
+    border-radius: 1px;
+    background: currentColor;
+    transform: rotate(45deg);
+  }
+
+  :global(.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
+    *):where([data-hn-ui-dialog])::after) {
+    transform: rotate(-45deg);
+  }
+
+  :global(.close:hover:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-primary);
+  }
+
+  :global(.close:focus-visible:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+  }
+  @media (pointer: coarse) {
+    :global(.close:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
+    }
+  }
+
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-dialog)
+    .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])) {
+    inline-size: var(--ui-control-min-block-size);
+    block-size: var(--ui-control-min-block-size);
+  }
+
+  :global(.body:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
+  }
+
+  :global(footer:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ui-space-2);
+    padding: 0 var(--ui-space-5) var(--ui-space-5);
+  }
+
+  :global(footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog])) {
+    display: none;
+  }
+
+  :global(:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-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;
+  }
+
+  :global(:where(.ui-dialog)[open]:modal:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop) {
+    background-color: var(--ui-overlay-backdrop);
+    animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base))
+      var(--ui-motion-ease);
+  }
+
+  :global(:where(.ui-dialog)[open][data-ui-backdrop-hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop) {
+    background-color: transparent;
+    animation: none;
+    transition: none;
+  }
+}
 </style>

package/vue/UiDisclosure.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditable.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorBlockActions.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorChipEditor.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorCodeLanguage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorFootnoteEditor.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorImageToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorInsertTableGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorLinkCard.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorLinkForm.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorMentionMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorMentionMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSlashMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSlashMenuGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSlashMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorSurface.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorTableContextMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorTableOverlay.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorTableToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiEditorToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -217,6 +217,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
   }
 
   :global(:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar])) {
+    box-sizing: border-box;
     position: relative;
     top: auto;
     width: max-content;

package/vue/UiFloatingActionButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiFormField.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiIcon.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiIconButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiImage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiInput.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script
   setup
   lang="ts"

package/vue/UiInputGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListbox.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -354,6 +354,7 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
             class="option"
             role="option"
             data-ui-choice-option=""
+            data-slotted="ui-listbox"
             data-hn-ui-listbox
             :data-multiple="checkedProps.multiple ? '' : undefined"
             :id="concat(uid, '-option-', choice.index)"
@@ -496,4 +497,81 @@ useComponentHost(() => import('../components/ui-listbox/ui-listbox.js'), {
     display: none;
   }
 }
+
+@scope ([data-slotted~="ui-listbox"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-listbox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    position: relative;
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
+    border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-listbox-surface, var(--ui-control-surface));
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(--ui-control-inset);
+    outline: none;
+  }
+  :global(.choices:where(:scope, :scope *):where([data-hn-ui-listbox])) {
+    display: flex;
+    flex-direction: column;
+    max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+  }
+
+  :global(:where(.ui-listbox):not([data-enhanced]):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :global(:where(.ui-listbox):not([data-enhanced])
+    .choices:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])),
+  :global(:where(.ui-listbox)[data-enhanced]
+    .fallback:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    display: none;
+  }
+
+  :global(.fallback:where(:scope, :scope *):where([data-hn-ui-listbox])) {
+    box-sizing: border-box;
+    inline-size: 100%;
+    font: inherit;
+  }
+
+  :global(.validity:where(:scope, :scope *):where([data-hn-ui-listbox])) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :global(:where(.ui-listbox):focus-visible:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    border-color: var(--ui-control-focus);
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+    box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+  }
+
+  :global(:where(.ui-listbox)[aria-invalid="true"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+  }
+
+  :global(:where(.ui-listbox)[aria-disabled="true"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    background: var(--ui-control-surface-disabled);
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  :global(:where(.ui-listbox)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox])) {
+    display: none;
+  }
+}
 </style>

package/vue/UiMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiMenuGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiMeter.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiNavItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiPageHeader.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiPopover.d.ts

@@ -5,6 +5,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    bare: {
+        type: PropType<boolean | null>;
+    };
     for: {
         type: PropType<string | null>;
     };
@@ -33,6 +36,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    bare: {
+        type: PropType<boolean | null>;
+    };
     for: {
         type: PropType<string | null>;
     };