@threadlabs/looma 0.5.2 → 0.6.0-rc.2

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

@@ -18,6 +18,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
+		tone: { default: "neutral" },
 		variant: { default: "outline" }
 	},
 	setup(__props) {
@@ -27,7 +28,8 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			props.variant && `variant variant=${props.variant}`,
 			props.align && `align align=${props.align}`,
 			props.stretch && "stretch",
-			props.size && `size size=${props.size}`
+			props.size && `size size=${props.size}`,
+			props.tone && `tone tone=${props.tone}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
@@ -39,6 +41,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-405b2c60"]]);
 //#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 };

package/vue/chunks/UiEditorInsertTableGrid.js

@@ -198,6 +198,6 @@ var UiEditorInsertTableGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-daf13b61"]]);
+}), [["__scopeId", "data-v-c4064690"]]);
 //#endregion
 export { UiEditorInsertTableGrid_default as t };

package/vue/chunks/UiEditorMentionMenu.js

@@ -199,6 +199,6 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-e6ede828"]]);
+}), [["__scopeId", "data-v-2abe407e"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -181,6 +181,6 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-6616eea5"]]);
+}), [["__scopeId", "data-v-aeee1d4f"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorTableContextMenu.js

@@ -172,6 +172,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}), 128))], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-db07efb3"]]);
+}), [["__scopeId", "data-v-7c984caf"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/chunks/UiEditorTableOverlay.js

@@ -272,6 +272,6 @@ var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a31eb11f"]]);
+}), [["__scopeId", "data-v-d5963c35"]]);
 //#endregion
 export { UiEditorTableOverlay_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -270,6 +270,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-b2b27930"]]);
+}), [["__scopeId", "data-v-c7ed049b"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiEditorToolbar.js

@@ -23,6 +23,6 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}, _ctx.$attrs, { "data-ui-editor-toolbar-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-890a1e69"]]);
+}), [["__scopeId", "data-v-472b5c16"]]);
 //#endregion
 export { UiEditorToolbar_default as t };

package/vue/chunks/UiFloatingActionButton.js

@@ -37,6 +37,6 @@ var UiFloatingActionButton_default = /*#__PURE__*/ _plugin_vue_export_helper_def
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a6b9e9ca"]]);
+}), [["__scopeId", "data-v-b66a2428"]]);
 //#endregion
 export { UiFloatingActionButton_default as t };

package/vue/chunks/UiGrid.js

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

package/vue/chunks/UiIconButton.js

@@ -124,6 +124,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-9ff7e192"]]);
+}), [["__scopeId", "data-v-80722d12"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInput.js

@@ -126,6 +126,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-e80b5857"]]);
+}), [["__scopeId", "data-v-f00d6a51"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiMenu.js

@@ -10,6 +10,7 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	inheritAttrs: false,
 	__name: "UiMenu",
 	props: {
+		density: { default: "comfortable" },
 		for: { default: "" },
 		open: {
 			type: Boolean,
@@ -29,7 +30,7 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const root = ref(null);
 		const internalOpen = ref(false);
 		/** 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 = {
@@ -154,6 +155,6 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3174acee"]]);
+}), [["__scopeId", "data-v-09be9e37"]]);
 //#endregion
 export { UiMenu_default as t };

package/vue/chunks/UiMenuItem.js

@@ -26,6 +26,6 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-732d4711"]]);
+}), [["__scopeId", "data-v-deb5a674"]]);
 //#endregion
 export { UiMenuItem_default as t };

package/vue/chunks/UiPopover.js

@@ -143,6 +143,6 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-49809509"]]);
+}), [["__scopeId", "data-v-c16079f0"]]);
 //#endregion
 export { UiPopover_default as t };

package/vue/chunks/UiReel.js

@@ -28,6 +28,6 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-reel-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8cc08968"]]);
+}), [["__scopeId", "data-v-0dde8279"]]);
 //#endregion
 export { UiReel_default as t };

package/vue/chunks/UiSearchResultRow.js

@@ -45,6 +45,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d2414aa2"]]);
+}), [["__scopeId", "data-v-7d88a5d4"]]);
 //#endregion
 export { UiSearchResultRow_default as t };

package/vue/chunks/UiSearchShell.js

@@ -144,6 +144,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			])], 8, _hoisted_1)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-7aa92a93"]]);
+}), [["__scopeId", "data-v-976b649d"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/chunks/UiSelect.js

@@ -126,6 +126,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-b52cc131"]]);
+}), [["__scopeId", "data-v-01335c35"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSidebar.js

@@ -170,6 +170,6 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-fe11c9df"]]);
+}), [["__scopeId", "data-v-a2e22569"]]);
 //#endregion
 export { UiSidebar_default as t };

package/vue/chunks/UiStack.js

@@ -24,6 +24,6 @@ var UiStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-stack" }, _ctx.$attrs, { "data-ui-stack-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8ab460be"]]);
+}), [["__scopeId", "data-v-aa8062a9"]]);
 //#endregion
 export { UiStack_default as t };

package/vue/chunks/UiSwitcher.js

@@ -24,6 +24,6 @@ var UiSwitcher_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-switcher" }, _ctx.$attrs, { "data-ui-switcher-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4c7859e6"]]);
+}), [["__scopeId", "data-v-4ba623e1"]]);
 //#endregion
 export { UiSwitcher_default as t };