@threadlabs/looma 0.26.6 → 0.26.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.6",
+  "version": "0.26.8",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-list-item.css

@@ -53,23 +53,26 @@
       background: var(--ui-surface-raised);
     }
 
-    :scope:where(:has(.title a[href])):hover {
+    :scope:where(:has(.title a[href])):hover,
+    :scope[data-ui-list-item-state~="highlighted"],
+    :scope[data-ui-list-item-state~="current"] {
       background: var(--ui-selection-surface);
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
     }
 
     :scope[data-ui-list-item-state~="variant=card"]:where(:has(.title a[href])):hover {
       border-color: var(--ui-border-strong);
     }
 
-    :scope[data-ui-list-item-state~="highlighted"] {
-      background: var(--ui-selection-surface);
-    }
-
     :scope[data-ui-list-item-state~="current"] {
-      background: var(--ui-selection-surface);
       color: var(--ui-selection-text);
     }
 
+    /* Framed cards already have their own edge; the stronger focus ring stays separate. */
+    :scope[data-ui-list-item-state~="variant=card"] {
+      box-shadow: none;
+    }
+
     :scope:has(.title a[href]:focus-visible) {
       box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
     }
@@ -186,6 +189,8 @@
        a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
        stay their own. */
 
+    /* Framed cards already have their own edge; the stronger focus ring stays separate. */
+
     /* An explicitly independent leading control sits above the stretched row link. */
 
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */

package/styles/ui-nav-item.css

@@ -66,6 +66,11 @@
       color: var(--ui-selection-text);
     }
 
+    /* A complete inset edge separates pale fills without changing rail geometry. */
+    :scope[data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+    }
+
     :scope[data-ui-nav-item-state~="variant=line"] {
       border-radius: 0;
     }
@@ -177,6 +182,8 @@
     /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
        box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
 
+    /* A complete inset edge separates pale fills without changing rail geometry. */
+
     /* A line treatment has straight corners and a continuous edge. Surface treatment has
        shared rounded corners and no edge marker; never combine the two geometries.
        The line is a border, not a fill: forced colors replace backgrounds but keep a

package/styles/ui-tree-item.css

@@ -70,12 +70,14 @@
     .row:focus-within {
       color: var(--ui-text-primary);
       background: var(--ui-surface-muted);
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
     }
 
     /* Selection is the same surface recipe as destination and choice rows. */
     :scope[data-ui-tree-item-state~="selected"] > .row {
       color: var(--ui-selection-text);
       background: var(--ui-selection-surface);
+      box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
     }
     :scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
       color: var(--ui-selection-text);
@@ -84,6 +86,7 @@
     :scope[data-ui-tree-item-state~="disabled"] .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
+      box-shadow: none;
     }
 
     :scope[data-dragging]:not([data-move-source]) .row {

package/tokens.css

@@ -184,6 +184,7 @@
     /* One quiet selection recipe for destination/content rows. Hue derives from the brand;
        corners derive from the scale, and selected labels retain their resting weight. */
     --ui-selection-surface: color-mix(in oklab, var(--ui-accent) 6%, var(--ui-surface));
+    --ui-selection-border: color-mix(in oklab, var(--ui-accent) 20%, var(--ui-surface));
     --ui-selection-text: var(--ui-accent-subtle-text);
     --ui-selection-radius: var(--ui-radius-md);
     --ui-nav-icon-size: var(--ui-font-size-md);

package/vue/UiListItem.vue

@@ -280,8 +280,11 @@ const hostState = computed(() =>
   background: var(--ui-surface-raised);
 }
 
-[data-component~="ui-list-item"]:where(:has(.title a[href])):hover {
+[data-component~="ui-list-item"]:where(:has(.title a[href])):hover,
+[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"],
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
   background: var(--ui-selection-surface);
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
 }
 
 [data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:where(:has(.title
@@ -289,15 +292,15 @@ const hostState = computed(() =>
   border-color: var(--ui-border-strong);
 }
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="highlighted"] {
-  background: var(--ui-selection-surface);
-}
-
 [data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
-  background: var(--ui-selection-surface);
   color: var(--ui-selection-text);
 }
 
+/* Framed cards already have their own edge; the stronger focus ring stays separate. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
+  box-shadow: none;
+}
+
 [data-component~="ui-list-item"]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }

package/vue/UiNavItem.vue

@@ -439,6 +439,11 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   color: var(--ui-selection-text);
 }
 
+/* A complete inset edge separates pale fills without changing rail geometry. */
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
+}
+
 [data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"] {
   border-radius: 0;
 }

package/vue/UiTreeItem.vue

@@ -778,12 +778,14 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 .row:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
 }
 
 /* Selection is the same surface recipe as destination and choice rows. */
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row {
   color: var(--ui-selection-text);
   background: var(--ui-selection-surface);
+  box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
 }
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
   > .row
@@ -794,6 +796,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
   color: var(--ui-disabled-text);
   background: var(--ui-disabled-surface);
+  box-shadow: none;
 }
 
 [data-component~="ui-tree-item"][data-dragging]:not([data-move-source]) .row {

package/vue/chunks/UiListItem.js

@@ -203,6 +203,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-6c3bc8f3"]]);
+}), [["__scopeId", "data-v-deeac109"]]);
 //#endregion
 export { UiListItem_default as t };

package/vue/chunks/UiNavItem.js

@@ -357,6 +357,6 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5ff984a2"]]);
+}), [["__scopeId", "data-v-e4b23866"]]);
 //#endregion
 export { UiNavItem_default as t };

package/vue/chunks/UiTreeItem.js

@@ -699,6 +699,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9fa5fb80"]]);
+}), [["__scopeId", "data-v-b69b9249"]]);
 //#endregion
 export { UiTreeItem_default as t };