@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/vue/UiEditorTableOverlay.vue

@@ -418,10 +418,10 @@ onBeforeUnmount(() => {
   width: 24px;
   height: 24px;
   padding: 0;
-  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
-  border-radius: var(--ui-radius-round, 999px);
-  background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
-  color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
+  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+  border-radius: var(--ui-radius-round);
+  background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
+  color: var(--ui-affordance-near-color, var(--ui-text-secondary));
   font: inherit;
   font-size: 16px;
   line-height: 1;
@@ -429,20 +429,18 @@ onBeforeUnmount(() => {
   opacity: 0;
   scale: 0.72;
   transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: auto;
   cursor: pointer;
 }
 
 .handle {
   --ui-icon-size: 14px;
-  --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  --ui-icon-stroke-width: 2;
 }
 
 .handle[data-ui-proximity="near"],
@@ -454,16 +452,16 @@ onBeforeUnmount(() => {
 
 .control.active .handle,
 .handle:focus-visible {
-  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  color: var(--ui-text-on-accent, #fff);
+  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
+  color: var(--ui-text-on-accent);
   box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
 }
 
 .handle:focus-visible,
 .selector:focus-visible,
 .cell-menu:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, #5b55d6);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
@@ -491,10 +489,9 @@ onBeforeUnmount(() => {
 
 .line {
   position: absolute;
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+  background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   opacity: 0;
-  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);
 }
 
 .control.row .line {
@@ -513,13 +510,12 @@ onBeforeUnmount(() => {
 
 .guide {
   position: absolute;
-  width: var(--ui-affordance-guide-size, 4px);
-  height: var(--ui-affordance-guide-size, 4px);
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+  width: var(--ui-affordance-guide-size);
+  height: 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);
+  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .control.row .guide {
@@ -544,17 +540,16 @@ onBeforeUnmount(() => {
   left: 50%;
   width: max-content;
   max-width: 14rem;
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-1, 4px);
-  background: var(--ui-text-primary, #1a1a1a);
-  color: var(--ui-surface-elevated, #fff);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-medium, 500);
-  line-height: var(--ui-line-height-md, 1.4);
+  padding: var(--ui-space-1) var(--ui-space-2);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-text-primary);
+  color: var(--ui-surface-elevated);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-md);
   opacity: 0;
   transform: translateX(-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;
 }
 
@@ -580,41 +575,37 @@ onBeforeUnmount(() => {
   padding: 0;
   border: 1px solid transparent;
   background: transparent;
-  color: var(--ui-text-secondary, #5c5c5c);
+  color: var(--ui-text-secondary);
   box-shadow: none;
   pointer-events: auto;
   cursor: pointer;
   transition:
-    color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease),
-    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
-    var(--ui-motion-ease, ease);
+    color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .selector:hover,
 .cell-menu:hover {
-  background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
-  color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
+  background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
+  color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
   box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
 }
 
 .selector {
-  border-radius: var(--ui-radius-round, 999px);
+  border-radius: var(--ui-radius-round);
 }
 
 .selector::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+  opacity: var(--ui-affordance-guide-opacity);
   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;
 }
 
@@ -623,12 +614,12 @@ onBeforeUnmount(() => {
   width: 14px;
   height: 14px;
   --ui-icon-size: 14px;
-  --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  --ui-icon-stroke-width: 2;
   opacity: 0;
   transform: scale(0.72);
   transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+    opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+    transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
 
 .selector:hover::before,
@@ -680,13 +671,13 @@ onBeforeUnmount(() => {
 .cell-menu {
   width: 24px;
   height: 24px;
-  border-radius: var(--ui-radius-1, 4px);
-  background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
+  border-radius: var(--ui-radius-sm);
+  background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
 }
 
 .cell-menu {
   --ui-icon-size: 15px;
-  --ui-icon-stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
+  --ui-icon-stroke-width: 2;
 }
 
 [data-component~="ui-editor-table-overlay"][hidden] {

package/vue/UiEditorTableToolbar.vue

@@ -341,13 +341,13 @@ onBeforeUnmount(() => {
 
 .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active,
 .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
 
 .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
   top: auto;
   right: 0;
-  bottom: calc(100% + var(--ui-space-2, 8px));
+  bottom: calc(100% + var(--ui-space-2));
   max-height: min(50dvh, 22rem);
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -355,11 +355,11 @@ onBeforeUnmount(() => {
 [data-component~="ui-editor-table-toolbar"] {
   display: inline-flex;
   align-items: center;
-  gap: var(--ui-space-1, 4px);
-  padding: var(--ui-space-1, 4px);
-  background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: calc(var(--ui-radius-md, 6px) + 2px);
+  gap: var(--ui-space-1);
+  padding: var(--ui-space-1);
+  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
+  border: 1px solid var(--ui-border);
+  border-radius: calc(var(--ui-radius-md) + 2px);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
 }
@@ -374,7 +374,7 @@ onBeforeUnmount(() => {
 .sep {
   width: 1px;
   align-self: stretch;
-  background: var(--ui-border, #e5e7eb);
+  background: var(--ui-border);
 }
 
 .overflow {
@@ -385,31 +385,31 @@ onBeforeUnmount(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--ui-space-1-5, 6px);
+  gap: var(--ui-space-2);
   min-height: 32px;
   border: 0;
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
   background: transparent;
-  color: var(--ui-text-primary, #111827);
+  color: var(--ui-text-primary);
   cursor: pointer;
-  font-size: var(--ui-text-sm, 0.875rem);
+  font-size: var(--ui-font-size-sm);
   font-weight: 500;
   line-height: 1;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+  padding: var(--ui-space-2) var(--ui-space-2);
   white-space: nowrap;
 }
 
 [data-component~="ui-editor-table-toolbar"] button:hover {
-  background: var(--ui-surface-hover, #f3f4f6);
+  background: var(--ui-surface-hover);
 }
 
 [data-component~="ui-editor-table-toolbar"] button.active {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-  color: var(--ui-accent-active, #003d7a);
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
+  color: var(--ui-accent-active);
 }
 
 .group button {
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
 }
 
 .group button + button {
@@ -418,11 +418,11 @@ onBeforeUnmount(() => {
 
 [data-component~="ui-editor-table-toolbar"] .more {
   border: 0;
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
 }
 
 [data-component~="ui-editor-table-toolbar"] button.danger {
-  color: var(--ui-danger, #dc2626);
+  color: var(--ui-danger);
 }
 
 [data-component~="ui-editor-table-toolbar"] {
@@ -442,13 +442,13 @@ onBeforeUnmount(() => {
 
 .menu {
   position: absolute;
-  top: calc(100% + var(--ui-space-2, 8px));
+  top: calc(100% + var(--ui-space-2));
   right: 0;
   min-width: 12rem;
-  padding: var(--ui-space-1, 4px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
+  padding: var(--ui-space-1);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
   flex-direction: column;
@@ -457,18 +457,18 @@ onBeforeUnmount(() => {
 }
 
 .menu-section + .menu-section {
-  margin-top: var(--ui-space-1, 4px);
-  padding-top: var(--ui-space-1, 4px);
-  border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
+  margin-top: var(--ui-space-1);
+  padding-top: var(--ui-space-1);
+  border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
 }
 
 .menu-heading {
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+  padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--ui-text-muted, #6b7280);
+  color: var(--ui-text-muted);
 }
 
 .menu button {
@@ -485,7 +485,7 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-table-toolbar"] .swatch-button {
-  gap: var(--ui-space-1, 4px);
+  gap: var(--ui-space-1);
   justify-content: flex-start;
 }
 
@@ -493,19 +493,19 @@ onBeforeUnmount(() => {
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
-  border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+  border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
   border-radius: 3px;
   background: var(--ui-editor-table-toolbar-swatch);
 }
 
 .swatch.default {
   background:
-    linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
-    var(--ui-surface, #fff);
+    linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
+    var(--ui-surface);
 }
 
 .swatch-button.selected {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
 
 [data-component~="ui-editor-table-toolbar"][hidden] {

package/vue/UiEditorToolbar.vue

@@ -48,8 +48,8 @@ const hostState = computed(() =>
   overflow-x: auto;
   scrollbar-width: none;
   white-space: nowrap;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
-  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+  background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
 }
 
 [data-component~="ui-editor-toolbar"]::-webkit-scrollbar {
@@ -63,7 +63,7 @@ const hostState = computed(() =>
 :slotted(.divider) {
   width: 1px;
   height: 20px;
-  background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
+  background: var(--ui-editor-toolbar-divider, var(--ui-border));
   flex-shrink: 0;
   margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
 }
@@ -78,11 +78,11 @@ const hostState = computed(() =>
   overflow-x: visible;
   background: color-mix(
     in srgb,
-    var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%,
+    var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
     transparent
   );
-  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
   box-shadow: var(
     --ui-editor-toolbar-floating-shadow,
     var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
@@ -98,7 +98,7 @@ const hostState = computed(() =>
     left: 0;
     right: 0;
     min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
     border-bottom: none;
     box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
   }
@@ -107,8 +107,8 @@ const hostState = computed(() =>
     position: static;
     inset: auto;
     min-height: auto;
-    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
+    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
     box-shadow: var(
       --ui-editor-toolbar-floating-shadow,
       var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))

package/vue/UiFloatingActionButton.vue

@@ -42,14 +42,15 @@ const hostState = computed(() =>
 [data-component~="ui-floating-action-button"] {
   position: fixed;
   inset-block-end: calc(
-    var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)
+    var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
+      env(safe-area-inset-bottom)
   );
   inset-inline-end: max(
-    var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+    var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
     env(safe-area-inset-right)
   );
-  inline-size: var(--ui-floating-action-button-size, 56px);
-  block-size: var(--ui-floating-action-button-size, 56px);
+  inline-size: var(--ui-control-min-block-size);
+  block-size: var(--ui-control-min-block-size);
   display: inline-flex;
   z-index: var(--ui-floating-action-button-z-index, 100);
 }
@@ -63,33 +64,27 @@ const hostState = computed(() =>
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
-  color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
-  box-shadow: var(
-    --ui-floating-action-button-shadow,
-    0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
-  );
+  background: var(--ui-accent);
+  color: var(--ui-on-accent);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
   cursor: pointer;
   transition:
-    background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
-    transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
-    box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    transform var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 [data-component~="ui-floating-action-button"]:hover:enabled {
-  background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
-  box-shadow: var(
-    --ui-floating-action-button-hover-shadow,
-    0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
-  );
+  background: var(--ui-accent-hover);
+  box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
 }
 
 [data-component~="ui-floating-action-button"]:active:enabled {
-  transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+  transform: scale(0.94);
 }
 
 [data-component~="ui-floating-action-button"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, currentColor);
+  outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
@@ -99,8 +94,8 @@ const hostState = computed(() =>
 }
 
 :slotted(svg) {
-  inline-size: var(--ui-floating-action-button-icon-size, 24px);
-  block-size: var(--ui-floating-action-button-icon-size, 24px);
+  inline-size: var(--ui-icon-size-lg);
+  block-size: var(--ui-icon-size-lg);
   flex-shrink: 0;
 }
 

package/vue/UiGrid.vue

@@ -26,7 +26,7 @@ const hostState = computed(() =>
 
 <style scoped>
 [data-component~="ui-grid"] {
-  --_grid-gap: var(--ui-space-4, 1rem);
+  --_grid-gap: var(--ui-space-4);
   --_grid-min: 12rem;
   display: grid;
   gap: var(--ui-grid-gap, var(--_grid-gap));
@@ -38,19 +38,19 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-grid"][data-ui-grid-state~="gap=xs"] {
-  --_grid-gap: var(--ui-space-2, 0.5rem);
+  --_grid-gap: var(--ui-space-2);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=s"] {
-  --_grid-gap: var(--ui-space-3, 0.75rem);
+  --_grid-gap: var(--ui-space-3);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=m"] {
-  --_grid-gap: var(--ui-space-4, 1rem);
+  --_grid-gap: var(--ui-space-4);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=l"] {
-  --_grid-gap: var(--ui-space-5, 1.5rem);
+  --_grid-gap: var(--ui-space-5);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="gap=xl"] {
-  --_grid-gap: var(--ui-space-6, 2rem);
+  --_grid-gap: var(--ui-space-6);
 }
 [data-component~="ui-grid"][data-ui-grid-state~="min=md"] {
   --_grid-min: 16rem;