@threadlabs/looma 0.22.14 → 0.23.0

package/vue/UiEditorTableOverlay.vue

@@ -695,7 +695,7 @@ function uniqueKeys<T>(
   width: 24px;
   height: 24px;
   padding: 0;
-  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+  border: var(--ui-border-width) 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));
@@ -738,8 +738,8 @@ function uniqueKeys<T>(
 .handle:focus-visible,
 .selector:focus-visible,
 .cell-menu:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 .control.row {
@@ -772,13 +772,13 @@ function uniqueKeys<T>(
 }
 
 .control.row .line {
-  inset: -1px 0 auto;
-  height: 2px;
+  inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
+  height: var(--ui-accent-line-width);
 }
 
 .control.col .line {
-  inset: 0 auto 0 -1px;
-  width: 2px;
+  inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
+  width: var(--ui-accent-line-width);
 }
 
 .control.active .line {
@@ -850,7 +850,7 @@ function uniqueKeys<T>(
   align-items: center;
   justify-content: center;
   padding: 0;
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   background: transparent;
   color: var(--ui-text-secondary);
   box-shadow: none;
@@ -967,19 +967,19 @@ function uniqueKeys<T>(
   position: absolute;
   z-index: 3;
   background: var(--ui-accent-solid);
-  box-shadow: 0 0 0 2px var(--ui-surface);
+  box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
   pointer-events: none;
 }
 
 .drop-indicator.row {
   left: 0;
   width: 100%;
-  height: 2px;
+  height: var(--ui-accent-line-width);
 }
 
 .drop-indicator.column {
   top: 0;
-  width: 2px;
+  width: var(--ui-accent-line-width);
   height: 100%;
 }
 

package/vue/UiEditorTableToolbar.vue

@@ -648,8 +648,8 @@ function uniqueKeys<T>(
   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-strong);
-  border-radius: calc(var(--ui-radius-md) + 2px);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
 }
@@ -739,7 +739,7 @@ function uniqueKeys<T>(
   max-width: min(17rem, calc(100vw - 24px));
   padding: var(--ui-space-1);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
@@ -754,7 +754,7 @@ function uniqueKeys<T>(
 .menu-section + .menu-section {
   margin-top: var(--ui-space-1);
   padding-top: var(--ui-space-1);
-  border-top: 1px solid var(--ui-border-divider);
+  border-top: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 .menu-heading {
@@ -788,7 +788,7 @@ function uniqueKeys<T>(
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
-  border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
   border-radius: var(--ui-radius-round);
   background: var(--_swatch);
 }

package/vue/UiEditorToolbar.vue

@@ -146,7 +146,8 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     var(--ui-editor-toolbar-padding-inline, 12px);
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+  border-bottom: var(--ui-border-width) solid
+    var(--ui-editor-toolbar-border, var(--ui-border-divider));
 }
 
 /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -221,7 +222,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
     transparent
   );
-  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
   border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
   box-shadow: var(
     --ui-editor-toolbar-floating-shadow,
@@ -238,7 +239,8 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     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-divider));
+    border-top: var(--ui-border-width) solid
+      var(--ui-editor-toolbar-border, var(--ui-border-divider));
     border-bottom: none;
     box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
   }
@@ -247,7 +249,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     position: relative;
     inset: auto;
     min-height: auto;
-    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
     border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
     box-shadow: var(
       --ui-editor-toolbar-floating-shadow,

package/vue/UiFloatingActionButton.vue

@@ -203,8 +203,8 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-floating-action-button"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 [data-component~="ui-floating-action-button"]:disabled {

package/vue/UiIcon.vue

@@ -160,6 +160,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M9 3v18',
     }, { tag: 'path', d: 'M15 3v18' }],
+    compass: [{
+      tag: 'path',
+      d: 'm16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z',
+    }, { tag: 'circle', cx: '12', cy: '12', r: '10' }],
     'credit-card': [{ tag: 'rect', width: '20', height: '14', x: '2', y: '5', rx: '2' }, {
       tag: 'line',
       x1: '2',
@@ -234,6 +238,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'm22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4',
     }],
+    history: [{ tag: 'path', d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }, {
+      tag: 'path',
+      d: 'M3 3v5h5',
+    }, { tag: 'path', d: 'M12 7v5l4 2' }],
     image: [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }, {
       tag: 'circle',
       cx: '9',

package/vue/UiIconButton.vue

@@ -459,7 +459,7 @@ function attribute(value: unknown): any {
   min-block-size: var(--ui-icon-button-size, var(--_size));
   padding: 0;
   margin: 0;
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
   background-color: var(--ui-icon-button-surface, transparent);
   color: inherit;

package/vue/UiInput.vue

@@ -554,7 +554,10 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
   padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
-  border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
+  border: var(
+    --ui-input-border-width,
+    var(--_ui-default-input-border-width, var(--ui-border-width))
+  ) solid
     var(
       --ui-input-border,
       var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
@@ -657,7 +660,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     var(
       --_ui-default-input-invalid-focus-shadow,
       var(--ui-control-inset),
-      0 0 0 3px color-mix(
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
         in srgb,
         var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
         transparent
@@ -678,9 +681,9 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   [data-component~="ui-input"]:focus-visible {
     outline: var(
       --ui-input-focus-outline,
-      var(--_ui-default-input-focus-outline, 2px solid Highlight)
+      var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
     );
-    outline-offset: 1px;
+    outline-offset: var(--ui-border-width);
   }
 }
 

package/vue/UiInputGroup.vue

@@ -199,7 +199,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   min-inline-size: 0;
   min-block-size: var(--ui-control-size-md);
   /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
   border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-elevated));
   box-shadow: var(--ui-control-inset);
@@ -250,7 +250,7 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   box-shadow: var(
     --ui-input-group-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(
+    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
       in srgb,
       var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
       transparent
@@ -261,8 +261,8 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
   [data-component~="ui-input-group"]:has(input:focus-visible) {
-    outline: 2px solid Highlight;
-    outline-offset: 1px;
+    outline: var(--ui-focus-width) solid Highlight;
+    outline-offset: var(--ui-border-width);
   }
 }
 
@@ -297,11 +297,11 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 }
 
 .affix:has([slot="prefix"]) {
-  border-inline-end: 1px solid var(--ui-border-divider);
+  border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 .affix:has([slot="suffix"]) {
-  border-inline-start: 1px solid var(--ui-border-divider);
+  border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 [data-component~="ui-input-group"][data-ui-input-group-state~="prefixKind=icon"] {

package/vue/UiList.vue

@@ -250,7 +250,7 @@ const hostState = computed(() =>
 [data-component~="ui-list"] > :slotted(li.card) {
   padding: var(--_ui-list-native-padding-block, var(--ui-space-3))
     var(--_ui-list-native-padding-inline, var(--ui-space-4));
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
   list-style: none;

package/vue/UiListItem.vue

@@ -178,7 +178,7 @@ const hostState = computed(() =>
     --ui-list-item-padding-inline,
     var(--_ui-list-item-padding-inline, var(--ui-space-3))
   );
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--ui-selection-radius);
   color: var(--ui-text-primary);
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -188,7 +188,7 @@ const hostState = computed(() =>
 [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
   padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
   padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
@@ -203,11 +203,12 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
-  background: var(--ui-surface-hover);
+  background: var(--ui-selection-surface);
+  color: var(--ui-selection-text);
 }
 
 [data-component~="ui-list-item"]:has(.title a[href]:focus-visible) {
-  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+  box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
 
 .leading,
@@ -223,6 +224,10 @@ const hostState = computed(() =>
   font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
 }
 
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] .leading {
+  color: var(--ui-selection-text);
+}
+
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
 .trailing {
   position: relative;
@@ -284,6 +289,17 @@ const hostState = computed(() =>
   display: none;
 }
 
+@media (forced-colors: active) {
+  [data-component~="ui-list-item"]:has(a:focus-visible) {
+    outline: var(--ui-focus-width) solid Highlight;
+    outline-offset: calc(-1 * var(--ui-focus-width));
+  }
+  [data-component~="ui-list-item"][data-ui-list-item-state~="current"]:not(:has(a:focus-visible)) {
+    outline: var(--ui-border-width) solid Highlight;
+    outline-offset: calc(-1 * var(--ui-border-width));
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-list-item"][hidden] {
   display: none;

package/vue/UiListbox.vue

@@ -471,7 +471,7 @@ function uniqueKeys<T>(
   min-inline-size: 0;
   margin: 0;
   padding: var(--ui-space-1);
-  border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
+  border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
   border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-listbox-surface, var(--ui-control-surface));
   color: var(--ui-text-primary);
@@ -515,8 +515,8 @@ function uniqueKeys<T>(
 
 [data-component~="ui-listbox"]:focus-visible {
   border-color: var(--ui-control-focus);
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
   box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
 }
 

package/vue/UiMenu.vue

@@ -379,7 +379,8 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   max-inline-size: inherit;
   padding: var(--ui-space-1);
   background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+  border: var(--ui-border-width) solid
+    var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   box-shadow: var(
     --_ui-menu-shadow,
@@ -394,7 +395,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   block-size: 0;
   margin: var(--ui-space-1) 0;
   border: 0;
-  border-block-start: 1px solid var(--ui-border-divider);
+  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 [data-component~="ui-menu"]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]):not([data-component~="ui-menu"][data-ui-menu-state~="inline"]) {

package/vue/UiMenuItem.vue

@@ -369,7 +369,7 @@ function attribute(value: unknown): any {
   text-align: left;
   border-radius: var(
     --ui-menu-item-radius,
-    var(--_ui-default-menu-item-radius, var(--ui-radius-md))
+    var(--_ui-default-menu-item-radius, var(--ui-selection-radius))
   );
   color: var(--ui-text-primary);
   font-size: var(
@@ -401,7 +401,7 @@ function attribute(value: unknown): any {
   box-sizing: border-box;
   inline-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
   block-size: var(--_ui-default-menu-indicator-size, var(--ui-icon-size-sm));
-  border: 1.5px solid var(--ui-control-border);
+  border: var(--ui-border-width) solid var(--ui-control-border);
   border-radius: var(--ui-radius-sm);
   color: var(--ui-surface);
   --_ui-default-icon-size: 0.75rem;
@@ -457,8 +457,8 @@ function attribute(value: unknown): any {
 }
 
 [data-component~="ui-menu-item"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: -2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
 
 [data-component~="ui-menu-item"][aria-disabled="true"] {

package/vue/UiMeter.vue

@@ -388,7 +388,7 @@ function number(value: unknown): number | undefined {
   background: var(--ui-border);
   box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1), inset 0 -1px rgb(255 255 255 / 0.22);
   /* Unseen until forced colours draw it, where the track's own colour is gone. */
-  outline: 1px solid transparent;
+  outline: var(--ui-border-width) solid transparent;
 }
 
 [data-component~="ui-meter"][data-ui-meter-state~="size=sm"] {

package/vue/UiNavItem.d.ts

@@ -22,6 +22,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"true" | "false" | "page" | "step" | "location" | null>;
         default: string;
     };
+    density: {
+        type: PropType<"comfortable" | "compact" | null>;
+        default: string;
+    };
     href: {
         type: PropType<string | null>;
         default: null;
@@ -34,6 +38,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: null;
     };
+    variant: {
+        type: PropType<"surface" | "line" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
         type: PropType<"button" | "a" | null>;
@@ -43,6 +51,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"true" | "false" | "page" | "step" | "location" | null>;
         default: string;
     };
+    density: {
+        type: PropType<"comfortable" | "compact" | null>;
+        default: string;
+    };
     href: {
         type: PropType<string | null>;
         default: null;
@@ -55,12 +67,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<string | null>;
         default: null;
     };
+    variant: {
+        type: PropType<"surface" | "line" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
+    variant: "line" | "surface" | null;
     current: "true" | "false" | "page" | "step" | "location" | null;
     as: "a" | "button" | null;
     href: string | null;
     rel: string | null;
     target: string | null;
+    density: "comfortable" | "compact" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;