@threadlabs/looma 0.5.2 → 0.6.0-rc.1

package/vue/UiReel.vue

@@ -34,7 +34,7 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-reel"] {
-  --_reel-gap: var(--ui-space-4, 1rem);
+  --_reel-gap: var(--ui-space-4);
   --_reel-item-width: auto;
   display: flex;
   inline-size: 100%;
@@ -53,19 +53,19 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-reel"][data-ui-reel-state~="gap=xs"] {
-  --_reel-gap: var(--ui-space-2, 0.5rem);
+  --_reel-gap: var(--ui-space-2);
 }
 [data-component~="ui-reel"][data-ui-reel-state~="gap=s"] {
-  --_reel-gap: var(--ui-space-3, 0.75rem);
+  --_reel-gap: var(--ui-space-3);
 }
 [data-component~="ui-reel"][data-ui-reel-state~="gap=m"] {
-  --_reel-gap: var(--ui-space-4, 1rem);
+  --_reel-gap: var(--ui-space-4);
 }
 [data-component~="ui-reel"][data-ui-reel-state~="gap=l"] {
-  --_reel-gap: var(--ui-space-5, 1.5rem);
+  --_reel-gap: var(--ui-space-5);
 }
 [data-component~="ui-reel"][data-ui-reel-state~="gap=xl"] {
-  --_reel-gap: var(--ui-space-6, 2rem);
+  --_reel-gap: var(--ui-space-6);
 }
 [data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"] {
   --_reel-item-width: 12rem;

package/vue/UiSearchResultRow.vue

@@ -45,18 +45,18 @@ const hostState = computed(() =>
   inline-size: 100%;
   min-block-size: var(--ui-search-result-row-min-height, 56px);
   margin: 0;
-  padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
-  padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+  padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
+  padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
   display: flex;
   align-items: flex-start;
-  gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
-  background: var(--ui-search-result-row-bg, transparent);
+  gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+  background: var(--ui-search-result-row-surface, transparent);
   border: none;
-  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border));
   color: inherit;
   cursor: pointer;
   text-align: left;
-  transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+  transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 [data-component~="ui-search-result-row"]:last-child {
@@ -65,23 +65,20 @@ const hostState = computed(() =>
 
 [data-component~="ui-search-result-row"]:hover:enabled {
   background: var(
-    --ui-search-result-row-hover-bg,
-    color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%)
+    --ui-search-result-row-hover-surface,
+    color-mix(in srgb, var(--ui-surface) 85%, black 3%)
   );
 }
 
 [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"] {
   background: var(
     --ui-search-result-row-selected-bg,
-    var(
-      --ui-search-result-row-hover-bg,
-      color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%)
-    )
+    var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
   );
 }
 
 [data-component~="ui-search-result-row"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, #2563eb);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: -2px;
 }
 

package/vue/UiSearchShell.vue

@@ -207,7 +207,7 @@ dialog::backdrop {
   max-block-size: var(--ui-search-shell-max-height, 80vh);
   margin-inline: auto;
   overflow: hidden;
-  background: var(--ui-search-shell-bg, var(--ui-surface-elevated));
+  background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
   border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
   border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
   box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
@@ -233,7 +233,7 @@ dialog::backdrop {
   min-block-size: var(--ui-control-min-block-size);
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-control-border);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-control-surface);
   color: var(--ui-text-primary);
   font: inherit;
@@ -242,7 +242,7 @@ dialog::backdrop {
 
 :slotted(input[slot="search"]:focus-visible) {
   border-color: var(--ui-control-focus);
-  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 

package/vue/UiSelect.vue

@@ -134,11 +134,11 @@ onBeforeUnmount(() => {
   display: inline-block;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: var(--ui-control-size-md, 2.5rem);
+  min-block-size: var(--ui-control-size-md);
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-select-radius, var(--ui-radius-2));
+  border-radius: var(--ui-select-radius, var(--ui-radius-md));
   background-color: var(--ui-control-surface, var(--ui-surface-elevated));
   color: var(--ui-text-primary);
   color-scheme: light dark;

package/vue/UiSidebar.vue

@@ -280,11 +280,10 @@ onBeforeUnmount(() => {
     var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%,
     transparent
   );
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
+  opacity: var(--ui-affordance-guide-opacity);
   transition:
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .guide {
@@ -293,21 +292,17 @@ onBeforeUnmount(() => {
   inset-inline-start: 50%;
   inline-size: 6px;
   block-size: 22px;
-  border: 1px solid var(--ui-border-strong, #c8c8c4);
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-surface-elevated, #fff);
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-surface-elevated);
   opacity: 0;
   transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
 
 .resizer:is(:hover, :focus-visible)::after {
-  background: var(
-    --ui-affordance-direct-color,
-    var(--ui-accent-solid, var(--ui-color-focus, Highlight))
-  );
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
   opacity: 1;
 }
 
@@ -330,9 +325,9 @@ onBeforeUnmount(() => {
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   transform: translateX(0);
   transition:
-    transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
-    display var(--ui-motion-base, 0.2s) allow-discrete,
-    overlay var(--ui-motion-base, 0.2s) allow-discrete;
+    transform var(--ui-motion-base) var(--ui-motion-ease-out),
+    display var(--ui-motion-base) allow-discrete,
+    overlay var(--ui-motion-base) allow-discrete;
 }
 
 /* The author display above would otherwise override the UA rule that hides a closed popover. */

package/vue/UiStack.vue

@@ -28,7 +28,7 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-stack"] {
-  --_layout-gap: var(--ui-space-4, 1rem);
+  --_layout-gap: var(--ui-space-4);
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -39,19 +39,19 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-stack"][data-ui-stack-state~="gap=xs"] {
-  --_layout-gap: var(--ui-space-2, 0.5rem);
+  --_layout-gap: var(--ui-space-2);
 }
 [data-component~="ui-stack"][data-ui-stack-state~="gap=s"] {
-  --_layout-gap: var(--ui-space-3, 0.75rem);
+  --_layout-gap: var(--ui-space-3);
 }
 [data-component~="ui-stack"][data-ui-stack-state~="gap=m"] {
-  --_layout-gap: var(--ui-space-4, 1rem);
+  --_layout-gap: var(--ui-space-4);
 }
 [data-component~="ui-stack"][data-ui-stack-state~="gap=l"] {
-  --_layout-gap: var(--ui-space-5, 1.5rem);
+  --_layout-gap: var(--ui-space-5);
 }
 [data-component~="ui-stack"][data-ui-stack-state~="gap=xl"] {
-  --_layout-gap: var(--ui-space-6, 2rem);
+  --_layout-gap: var(--ui-space-6);
 }
 [data-component~="ui-stack"][data-ui-stack-state~="align=start"] {
   align-items: flex-start;

package/vue/UiSwitcher.vue

@@ -32,7 +32,7 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-switcher"] {
-  --_switcher-gap: var(--ui-space-4, 1rem);
+  --_switcher-gap: var(--ui-space-4);
   display: flex;
   flex-wrap: wrap;
   gap: var(--ui-switcher-gap, var(--_switcher-gap));
@@ -49,19 +49,19 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=xs"] {
-  --_switcher-gap: var(--ui-space-2, 0.5rem);
+  --_switcher-gap: var(--ui-space-2);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=s"] {
-  --_switcher-gap: var(--ui-space-3, 0.75rem);
+  --_switcher-gap: var(--ui-space-3);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=m"] {
-  --_switcher-gap: var(--ui-space-4, 1rem);
+  --_switcher-gap: var(--ui-space-4);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=l"] {
-  --_switcher-gap: var(--ui-space-5, 1.5rem);
+  --_switcher-gap: var(--ui-space-5);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=xl"] {
-  --_switcher-gap: var(--ui-space-6, 2rem);
+  --_switcher-gap: var(--ui-space-6);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=xs"] > :slotted(*) {
   flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);

package/vue/UiTabs.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
     label?: string;
     orientation?: 'horizontal' | 'vertical';
     stretch?: boolean;
@@ -26,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     label: string;
     value: string;
     stretch: boolean;
+    density: "comfortable" | "compact";
     orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiTabs.vue

@@ -15,12 +15,14 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     label?: string
     orientation?: 'horizontal' | 'vertical'
     stretch?: boolean
     value?: string
   }>(),
   {
+    density: 'comfortable',
     label: 'Tabs',
     orientation: 'horizontal',
     stretch: false,
@@ -47,6 +49,7 @@ const tabs = ref<{ id: string; label: string }[]>([])
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.density && `density density=${props.density}`,
     props.stretch && 'stretch',
     props.orientation && `orientation orientation=${props.orientation}`,
   ].filter(Boolean).join(' ')
@@ -201,6 +204,19 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* Density resolves into the tab row's own values; the public tokens still override them. */
+[data-component~="ui-tabs"] {
+  --_tab-min-block-size: var(--ui-control-size);
+  --_tab-padding-block: var(--ui-space-2);
+  --_tab-padding-inline: var(--ui-space-3);
+}
+
+[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"] {
+  --_tab-min-block-size: var(--ui-control-size-sm);
+  --_tab-padding-block: var(--ui-space-1);
+  --_tab-padding-inline: var(--ui-space-2);
+}
+
 [data-component~="ui-tabs"] {
   display: grid;
   inline-size: 100%;
@@ -225,16 +241,17 @@ onBeforeUnmount(() => {
 }
 
 .list button {
-  min-block-size: 2.5rem;
+  min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 -1px;
-  padding: var(--ui-space-2) var(--ui-space-3);
+  padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block))
+    var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
   border: 0;
   border-block-end: 2px solid transparent;
   background: transparent;
   color: var(--ui-text-secondary);
   font: inherit;
   font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-medium, 500);
+  font-weight: var(--ui-font-medium);
   cursor: pointer;
   transition:
     color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -262,7 +279,7 @@ onBeforeUnmount(() => {
   position: relative;
   outline: none;
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
 }
 
 .panels {

package/vue/UiTextarea.vue

@@ -135,13 +135,13 @@ onBeforeUnmount(() => {
   display: inline-block;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: calc(var(--ui-space-12, 3rem) * 2);
+  min-block-size: calc(3rem * 2);
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
   resize: vertical;
   border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-textarea-radius, var(--ui-radius-2));
+  border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
   background: var(--ui-control-surface, var(--ui-surface-elevated));
   color: var(--ui-text-primary);
   font: inherit;

package/vue/UiToastRegion.vue

@@ -259,7 +259,7 @@ defineExpose({
   gap: var(--ui-space-2);
   align-items: start;
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
+  border-radius: var(--ui-radius-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
@@ -270,7 +270,7 @@ defineExpose({
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
 .toast.closing {
-  animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+  animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }
 

package/vue/UiTooltip.vue

@@ -217,7 +217,7 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
   max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
   border: 1px solid var(--_tooltip-line);
-  border-radius: var(--ui-tooltip-radius, var(--ui-radius-1));
+  border-radius: var(--ui-tooltip-radius, var(--ui-radius-sm));
   background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
   color: var(--ui-tooltip-text, var(--ui-text-primary));
   padding: var(--ui-space-1) var(--ui-space-2);

package/vue/UiTopBar.vue

@@ -20,17 +20,17 @@ defineOptions({ inheritAttrs: false })
   min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
   display: flex;
   align-items: center;
-  gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));
+  gap: var(--ui-top-bar-gap, var(--ui-space-3));
   padding-block-start: env(safe-area-inset-top);
   padding-inline-start: max(
-    var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),
+    var(--ui-top-bar-padding-inline, var(--ui-space-4)),
     env(safe-area-inset-left)
   );
   padding-inline-end: max(
-    var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),
+    var(--ui-top-bar-padding-inline, var(--ui-space-4)),
     env(safe-area-inset-right)
   );
-  background: var(--ui-top-bar-bg, var(--ui-surface-elevated));
+  background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
   border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
 }
 
@@ -43,7 +43,7 @@ defineOptions({ inheritAttrs: false })
 }
 
 .actions {
-  gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));
+  gap: var(--ui-top-bar-actions-gap, var(--ui-space-1));
 }
 
 .title {

package/vue/UiTree.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
     hoverExpandDelay?: number;
     label?: string;
     maxDepth?: number;
@@ -51,6 +52,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     }) => any) | undefined;
 }>, {
     label: string;
+    density: "comfortable" | "compact";
     hoverExpandDelay: number;
     maxDepth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/vue/UiTree.vue

@@ -7,11 +7,13 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     hoverExpandDelay?: number
     label?: string
     maxDepth?: number
   }>(),
   {
+    density: 'comfortable',
     hoverExpandDelay: 700,
     label: 'Tree',
     maxDepth: 0,
@@ -46,6 +48,13 @@ const emit = defineEmits<{
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.density && `density density=${props.density}`,
+  ].filter(Boolean).join(' ')
+)
+
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
 function dispatch(name: string, detail?: unknown): boolean {
   const declared: Record<string, EventInit | undefined> = {
@@ -187,10 +196,24 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div data-component="ui-tree" role="tree" v-bind="$attrs" ref="root"><slot /></div>
+  <div
+    data-component="ui-tree"
+    role="tree"
+    v-bind="$attrs"
+    :data-ui-tree-state="hostState || undefined"
+    ref="root"
+  >
+    <slot />
+  </div>
 </template>
 
 <style scoped>
+[data-component~="ui-tree"][data-ui-tree-state~="density=compact"] {
+  --ui-tree-item-min-block-size: var(--ui-control-size-sm);
+  --ui-tree-item-font-size: var(--ui-font-size-sm);
+  --ui-tree-item-label-padding-block: 0;
+}
+
 [data-component~="ui-tree"] {
   display: block;
   min-inline-size: 0;

package/vue/UiTreeItem.vue

@@ -288,9 +288,9 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: 20px auto minmax(0, 1fr) auto;
   align-items: center;
-  min-block-size: var(--ui-tree-row-min-height, var(--_tree-row-min-height));
+  min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
-  font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
+  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-secondary);
   transition:
@@ -324,7 +324,8 @@ onBeforeUnmount(() => {
   box-shadow: 0 0 0 2px var(--ui-focus-ring);
 }
 
-[data-component~="ui-tree-item"][data-drop-position="inside"] .row {
+/* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
@@ -422,8 +423,15 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   min-inline-size: 0;
-  padding: var(--ui-tree-label-padding-block, var(--ui-space-1))
-    var(--ui-tree-label-padding-inline, var(--ui-space-2));
+  padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
+    var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+}
+
+/* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
+   its own text and reading as overflow. */
+.label > :slotted(*) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
 }
 
 .actions {
@@ -459,7 +467,7 @@ onBeforeUnmount(() => {
 .row:hover .drag-handle,
 .drag-handle:hover,
 .drag-handle:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] .drag-handle {
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle {
   opacity: 1;
 }
 
@@ -498,12 +506,12 @@ onBeforeUnmount(() => {
   inset-inline-end: -1px;
 }
 
-[data-component~="ui-tree-item"][data-drop-position="before"] .row-drop-indicator {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator {
   display: block;
   inset-block-start: -1px;
 }
 
-[data-component~="ui-tree-item"][data-drop-position="after"] .subtree-drop-indicator {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator {
   display: block;
   inset-block-end: -1px;
 }

package/vue/chunks/UiButton.js

@@ -39,6 +39,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-44d2f337"]]);
+}), [["__scopeId", "data-v-d0355403"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -103,6 +103,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-c6ed30ab"]]);
+}), [["__scopeId", "data-v-31ee6589"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiCheckbox.js

@@ -159,6 +159,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1e598fdb"]]);
+}), [["__scopeId", "data-v-acf71232"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCluster.js

@@ -19,6 +19,6 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2a9e690c"]]);
+}), [["__scopeId", "data-v-06d4310a"]]);
 //#endregion
 export { UiCluster_default as t };

package/vue/chunks/UiCombobox.js

@@ -637,6 +637,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-7eb73ca2"]]);
+}), [["__scopeId", "data-v-147b231f"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiContainer.js

@@ -19,6 +19,6 @@ var UiContainer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-container" }, _ctx.$attrs, { "data-ui-container-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-bf6caa0d"]]);
+}), [["__scopeId", "data-v-4c7bb81d"]]);
 //#endregion
 export { UiContainer_default as t };

package/vue/chunks/UiContextMenu.js

@@ -153,6 +153,6 @@ var UiContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-9d2943e9"]]);
+}), [["__scopeId", "data-v-39e418e5"]]);
 //#endregion
 export { UiContextMenu_default as t };

package/vue/chunks/UiDialog.js

@@ -154,6 +154,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-e78fa426"]]);
+}), [["__scopeId", "data-v-05ac1756"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiDisclosure.js

@@ -16,6 +16,7 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	inheritAttrs: false,
 	__name: "UiDisclosure",
 	props: {
+		density: { default: "comfortable" },
 		disabled: {
 			type: Boolean,
 			default: false
@@ -39,7 +40,7 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const internalOpen = ref(false);
 		const contentId = ref("");
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [internalOpen.value && "internalOpen"].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.density && `density density=${props.density}`, internalOpen.value && "internalOpen"].filter(Boolean).join(" "));
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
 		function dispatch(name, detail) {
 			const declared = {
@@ -175,6 +176,6 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-283377cf"]]);
+}), [["__scopeId", "data-v-d9a330a8"]]);
 //#endregion
 export { UiDisclosure_default as t };

package/vue/chunks/UiEditable.js

@@ -216,6 +216,6 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, "Cancel", -1)])])) : createCommentVNode("v-if", true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f4bef809"]]);
+}), [["__scopeId", "data-v-3707d050"]]);
 //#endregion
 export { UiEditable_default as t };