@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/vue/UiIconButton.vue

@@ -146,11 +146,11 @@ onBeforeUnmount(() => {
   position: absolute;
   inset: 50% auto auto 50%;
   z-index: 1;
-  inline-size: var(--ui-affordance-guide-size, 0.25rem);
-  block-size: var(--ui-affordance-guide-size, 0.25rem);
-  border-radius: var(--ui-radius-round, 999px);
+  inline-size: var(--ui-affordance-guide-size);
+  block-size: var(--ui-affordance-guide-size);
+  border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
+  opacity: var(--ui-affordance-guide-opacity);
   transform: translate(-50%, -50%);
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
@@ -173,16 +173,18 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-icon-button"] {
+  /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+  --_size: 2rem;
   appearance: none;
-  inline-size: var(--ui-icon-button-size, 2rem);
-  block-size: var(--ui-icon-button-size, 2rem);
-  min-inline-size: var(--ui-icon-button-size, 2rem);
-  min-block-size: var(--ui-icon-button-size, 2rem);
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
   padding: 0;
   margin: 0;
   border: 1px solid transparent;
-  border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
-  background: var(--ui-icon-button-bg, transparent);
+  border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
+  background: var(--ui-icon-button-surface, transparent);
   color: inherit;
   display: inline-flex;
   align-items: center;
@@ -213,8 +215,8 @@ onBeforeUnmount(() => {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
-    inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
-    block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+    inline-size: max(100%, var(--ui-control-min-block-size));
+    block-size: max(100%, var(--ui-control-min-block-size));
     transform: translate(-50%, -50%);
   }
 }
@@ -227,38 +229,40 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
-  inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
-  block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+  inline-size: max(100%, var(--ui-control-min-block-size));
+  block-size: max(100%, var(--ui-control-min-block-size));
   transform: translate(-50%, -50%);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
-  inline-size: var(--ui-icon-button-size-sm, 1.75rem);
-  block-size: var(--ui-icon-button-size-sm, 1.75rem);
-  min-inline-size: var(--ui-icon-button-size-sm, 1.75rem);
-  min-block-size: var(--ui-icon-button-size-sm, 1.75rem);
+  --_size: 1.75rem;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
-  inline-size: var(--ui-icon-button-size-lg, 2.5rem);
-  block-size: var(--ui-icon-button-size-lg, 2.5rem);
-  min-inline-size: var(--ui-icon-button-size-lg, 2.5rem);
-  min-block-size: var(--ui-icon-button-size-lg, 2.5rem);
+  --_size: 2.5rem;
+  inline-size: var(--ui-icon-button-size, var(--_size));
+  block-size: var(--ui-icon-button-size, var(--_size));
+  min-inline-size: var(--ui-icon-button-size, var(--_size));
+  min-block-size: var(--ui-icon-button-size, var(--_size));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"] {
-  border-radius: var(--ui-radius-round, 999px);
+  border-radius: var(--ui-radius-round);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"] {
   border-color: var(--ui-icon-button-border, var(--ui-border-default));
-  background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
-  color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+  background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+  color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"] {
-  background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
-  color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+  background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+  color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
     --ui-icon-button-solid-shadow,
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
@@ -267,8 +271,8 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 [data-component~="ui-icon-button"]:hover:enabled {
   /* Derived from the text colour so the ghost hover shows on any background. */
-  background: var(--ui-icon-button-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
-  color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+  background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:hover:enabled {
@@ -276,7 +280,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:hover:enabled {
-  background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+  background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
 
 [data-component~="ui-icon-button"]:active:enabled {
@@ -290,47 +294,33 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
 [data-component~="ui-icon-button"]:disabled {
-  opacity: var(--ui-icon-button-disabled-opacity, 0.6);
-  color: var(--ui-icon-button-disabled-color, inherit);
+  opacity: var(--ui-icon-button-disabled-opacity, 1);
+  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
   cursor: not-allowed;
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"]:disabled {
-  border-color: var(
-    --ui-icon-button-disabled-border,
-    var(--ui-icon-button-border, var(--ui-border-default))
-  );
-  background-color: var(
-    --ui-icon-button-disabled-bg,
-    var(--ui-icon-button-outline-bg, var(--ui-surface-default))
-  );
-  color: var(
-    --ui-icon-button-disabled-color,
-    var(--ui-icon-button-outline-color, var(--ui-text-primary))
-  );
+  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"]:disabled {
-  background-color: var(
-    --ui-icon-button-disabled-bg,
-    var(--ui-icon-button-solid-bg, var(--ui-accent-solid))
-  );
-  color: var(
-    --ui-icon-button-disabled-color,
-    var(--ui-icon-button-solid-color, var(--ui-text-on-accent))
-  );
+  border-color: var(--ui-icon-button-disabled-border, var(--ui-border));
+  background-color: var(--ui-icon-button-disabled-surface, var(--ui-disabled-surface));
+  color: var(--ui-icon-button-disabled-text, var(--ui-disabled-text));
 }
 
 [data-component~="ui-icon-button"] {
-  --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+  --_icon-button-icon-default: var(--ui-icon-size-md);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {
-  --_icon-button-icon-default: var(--ui-icon-size-sm, 1rem);
+  --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"] {
-  --_icon-button-icon-default: var(--ui-icon-size-lg, 1.5rem);
+  --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
 
 :slotted(svg) {

package/vue/UiInput.vue

@@ -132,12 +132,12 @@ 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);
   appearance: none;
   border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-input-radius, var(--ui-radius-2));
+  border-radius: var(--ui-input-radius, var(--ui-radius-md));
   background: var(--ui-control-surface, var(--ui-surface-elevated));
   color: var(--ui-text-primary);
   font: inherit;

package/vue/UiMenu.d.ts

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

package/vue/UiMenu.vue

@@ -7,11 +7,13 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     for?: string
     open?: boolean
     placement?: string
   }>(),
   {
+    density: 'comfortable',
     for: '',
     open: false,
     placement: 'bottom-start',
@@ -44,6 +46,7 @@ const internalOpen = ref(false)
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.density && `density density=${props.density}`,
     internalOpen.value && 'internalOpen',
   ].filter(Boolean).join(' ')
 )
@@ -192,16 +195,23 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
+[data-component~="ui-menu"][data-ui-menu-state~="density=compact"] {
+  --ui-menu-item-padding-block: var(--ui-space-1);
+  --ui-menu-item-padding-inline: var(--ui-space-2);
+  --ui-menu-item-font-size: var(--ui-font-size-sm);
+  --ui-menu-item-radius: var(--ui-radius-sm);
+  padding: var(--ui-space-1);
+  gap: 0;
+}
+
 [data-component~="ui-menu"] {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   inline-size: max-content;
-  min-inline-size: min(
-    12rem,
-    calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
-  );
-  max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+  min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
+  max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
   padding: 0;
   border: 0;
   outline: 0;
@@ -219,7 +229,7 @@ onBeforeUnmount(() => {
   padding: var(--ui-space-1);
   background: var(--ui-surface-elevated);
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
+  border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   max-block-size: inherit;
   overflow: auto;
@@ -234,7 +244,7 @@ onBeforeUnmount(() => {
   inset: auto;
   margin: 0;
   overflow: visible;
-  max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+  max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
   opacity: 0;
   transform: translateY(-4px) scale(0.99);
   transition:

package/vue/UiMenuItem.vue

@@ -32,12 +32,13 @@ withDefaults(
   display: block;
   box-sizing: border-box;
   width: 100%;
-  padding: var(--ui-space-2) var(--ui-space-3);
+  padding: var(--ui-menu-item-padding-block, var(--ui-space-2))
+    var(--ui-menu-item-padding-inline, var(--ui-space-3));
   text-align: left;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-menu-item-radius, var(--ui-radius-md));
   color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-medium, 500);
+  font-size: var(--ui-menu-item-font-size, var(--ui-font-size-md));
+  font-weight: var(--ui-font-medium);
   cursor: pointer;
   outline: none;
   transition:
@@ -46,7 +47,7 @@ withDefaults(
 }
 
 [data-component~="ui-menu-item"]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
-  background: var(--ui-surface-subtle);
+  background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
 }
 
 [data-component~="ui-menu-item"][aria-disabled="true"] {

package/vue/UiPopover.vue

@@ -183,9 +183,9 @@ onBeforeUnmount(() => {
   box-sizing: border-box;
   max-inline-size: min(
     20rem,
-    calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
+    calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
   );
-  max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+  max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
   overflow: visible;
   padding: 0;
   border: 0;
@@ -203,7 +203,7 @@ onBeforeUnmount(() => {
   padding: var(--ui-space-3);
   background: var(--ui-surface-elevated);
   border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
+  border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
 

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>;