@threadlabs/looma 0.31.3 → 0.31.4

package/vanilla/UiTree.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, writeAttribute, dispatchDeclared, detailCheck, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkInteger, checkList, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree/ui-tree.js";
 import "../styles/ui-tree.css";

package/vanilla/UiTreeItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiTreeItemEventMap {
   expand: CustomEvent<{ readonly id: string; readonly expanded: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
 }

package/vanilla/UiTreeItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, clearRegion, NONCONFORMING, readIndex, recordValue, textCall, toAttribute, toText, truthy, writeAttribute, dispatchDeclared, detailCheck, dispose, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkConstrained, checkFormat, checkNumber, checkObject, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";

package/vue/UiActionBar.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 { checkHydratedRoot, nativeAttrs } from './host'
 

package/vue/UiAffordanceScope.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/UiAvatar.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/UiAvatarGroup.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/UiBadge.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/UiBreadcrumbItem.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/UiBreadcrumbs.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/UiButton.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiCallout.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/UiCard.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/UiCheckbox.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/UiCluster.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/UiCombobox.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'
@@ -1983,9 +1983,11 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
                         class="ui-badge"
                         :tone="row.tag?.tone"
                         :style="{ '--ui-badge-color': row.tag?.color ?? undefined }"
-                      ><span data-hn-ui-combobox :id="concat(uid, '-option-', row.index, '-tag')">{{
-                          row.tag?.label
-                        }}</span></UiBadge></span>{{ ' ' }}<span
+                      ><span
+                          data-slotted="ui-combobox"
+                          data-hn-ui-combobox
+                          :id="concat(uid, '-option-', row.index, '-tag')"
+                        >{{ row.tag?.label }}</span></UiBadge></span>{{ ' ' }}<span
                       v-if="row.description"
                       class="description"
                       data-hn-ui-combobox
@@ -2467,4 +2469,360 @@ useComponentHost(() => import('../components/ui-combobox/ui-combobox.js'), {
     display: none;
   }
 }
+
+@scope ([data-slotted~="ui-combobox"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-combobox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-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);
+    --_ui-combobox-radius: var(--ui-combobox-radius);
+    --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+    --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+    --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+    --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+    --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
+
+    --_row: var(--ui-control-size-md);
+    display: grid;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+    font: inherit;
+  }
+  :global(label:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    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;
+  }
+  :global(.control:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :global(.field:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    box-sizing: border-box;
+    min-block-size: var(--_row);
+    flex: 1 1 auto;
+    display: flex;
+    min-inline-size: 0;
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
+    border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-default));
+    box-shadow: var(--ui-control-inset);
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+  :global(.field:focus-within:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
+  }
+  :global(.entry:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  :global(.help:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    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(.help:hover:enabled:where(:scope, :scope *):where([data-hn-ui-combobox])),
+  :global(.help[aria-expanded="true"]:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    color: var(--ui-text-primary);
+  }
+
+  :global(.help:focus-visible:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
+  }
+
+  :global(.help:disabled:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
+
+  :global(.help-icon:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
+  }
+
+  :global(input:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope
+    *):where([data-hn-ui-combobox])::selection) {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
+  }
+  :global(input:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    appearance: none;
+    width: 100%;
+    min-inline-size: 0;
+    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    box-sizing: border-box;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: var(--ui-line-height-tight);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    margin: 0;
+    outline: none;
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    --_row: var(--ui-control-size-sm);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    --_row: var(--ui-control-size-lg);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    padding: var(--ui-space-3) var(--ui-space-4);
+    font-size: var(--ui-font-size-md);
+  }
+  :global(button:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    align-self: stretch;
+    border: 0;
+    border-radius: var(--ui-radius-md);
+    background: transparent;
+    color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
+    font: inherit;
+    font-weight: 400;
+    min-inline-size: 2rem;
+    padding: 0 var(--ui-space-1);
+    cursor: pointer;
+  }
+  :global(.affordance-icon:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: block;
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
+  }
+  :global(button:hover:enabled:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-primary);
+  }
+  :global(button:focus-visible:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    outline: none;
+    background: var(--ui-surface-muted);
+    box-shadow: inset 0 0 0 var(--ui-focus-width)
+      color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+  }
+  :global(input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox])),
+  :global(button:disabled:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
+  :global(.field:has(input:disabled):where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="validationStatus=error"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])),
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="invalid"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    border-color: var(
+      --_ui-combobox-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
+    );
+  }
+  :global(.popup:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    box-sizing: border-box;
+    min-inline-size: 12rem;
+    max-inline-size: calc(100vw - 1rem);
+    max-block-size: var(--_ui-combobox-max-block-size, 18rem);
+    overflow: auto;
+    margin: 0;
+    padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid
+      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,
+      var(--ui-overlay-surface, var(--ui-surface-elevated))
+    );
+    color: var(--ui-text-primary);
+    box-shadow: var(
+      --_ui-combobox-popup-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+  }
+  :global([hidden]:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: none;
+  }
+  :global(.option[aria-disabled="true"]:where(:scope, :scope *)
+    .primary:where([data-hn-ui-combobox])),
+  :global(.option[aria-disabled="true"]:where(:scope, :scope *)
+    .secondary:where([data-hn-ui-combobox])) {
+    color: var(--ui-disabled-text);
+  }
+  :global(.primary:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: block;
+    color: var(--_ui-combobox-option-text, inherit);
+    font-weight: 500;
+  }
+  :global(.detail:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: grid;
+    gap: var(--ui-space-0-5);
+    min-inline-size: 0;
+  }
+  :global(.line:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+  :global(.description:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-md);
+  }
+  :global(.message:where(:scope, :scope *):where([data-hn-ui-combobox])),
+  :global(.group:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    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);
+    overflow-wrap: anywhere;
+  }
+  :global(.group:where(:scope, :scope *):where([data-hn-ui-combobox])),
+  :global(.popup:where(:scope, :scope *) .message:where([data-hn-ui-combobox])) {
+    padding: var(--ui-space-2) var(--ui-space-3);
+  }
+  :global(.sr-only:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  @media (pointer: coarse) {
+    :global(:where(.ui-combobox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+    }
+    :global(button:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+      min-inline-size: 2.75rem;
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    }
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+    :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+      --_row: var(--ui-control-min-block-size);
+    }
+    :global(:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+      input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+      font-size: inherit;
+    }
+  }
+  @media (forced-colors: active) {
+    :global(.field:where(:scope, :scope *):where([data-hn-ui-combobox])),
+    :global(.popup:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+      border-color: CanvasText;
+    }
+    :global(.option.active:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+      outline-color: Highlight;
+    }
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    align-items: center;
+    min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
+    padding: var(--ui-space-1);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    .entry:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    align-items: center;
+    gap: var(--ui-space-1);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    .entry:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])::-webkit-scrollbar) {
+    display: none;
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    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);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    min-block-size: 0;
+    padding: var(--ui-space-0-5);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
+    padding: 0 var(--ui-space-1);
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    min-block-size: 0;
+  }
+  :global(:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    min-block-size: calc(
+      var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
+    );
+  }
+  :global(.item:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    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;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: default;
+  }
+  :global(.item:focus-visible:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-border-width);
+  }
+  :global(.item:disabled:where(:scope, :scope *):where([data-hn-ui-combobox])) {
+    color: var(--ui-disabled-text);
+  }
+  :global(:where(.ui-combobox)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])) {
+    display: none;
+  }
+}
 </style>

package/vue/UiContainer.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/UiContextMenu.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/UiCover.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/UiDescriptionItem.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/UiDescriptionList.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'