@threadlabs/looma 0.10.5 → 0.10.7

package/package.json

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

package/styles/ui-tree-item.css

@@ -268,19 +268,23 @@
       }
     }
 
+    /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+       empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+       outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+       patch rather than as a control. */
     .drag-handle {
       position: absolute;
       z-index: 2;
       inset-block-start: 50%;
-      inset-inline-start: -22px;
-      inline-size: 20px;
-      block-size: 32px;
+      inset-inline-start: 0;
+      inline-size: var(--_tree-disclosure-size);
+      block-size: 24px;
       display: grid;
       place-items: center;
-      padding: 7px 3px;
+      padding: 5px 2px;
       color: var(--ui-text-muted);
-      background: var(--ui-surface-elevated);
-      border: 1px solid transparent;
+      background: transparent;
+      border: 0;
       border-radius: var(--ui-radius-sm);
       cursor: grab;
       /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
@@ -297,6 +301,16 @@
       opacity: 1;
     }
 
+    :scope[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+      inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+    }
+
+    .drag-handle:hover,
+    .drag-handle:focus-visible {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-hover);
+    }
+
     .drag-handle:active {
       cursor: grabbing;
     }
@@ -418,6 +432,11 @@
     @media (hover: none) {
     }
 
+    /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+       empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+       outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+       patch rather than as a control. */
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/vue/UiTreeItem.vue

@@ -64,6 +64,7 @@ const hostState = computed(() =>
   [
     props.selected && 'selected',
     props.disabled && 'disabled',
+    isContainer.value && 'isContainer',
   ].filter(Boolean).join(' ')
 )
 
@@ -455,19 +456,23 @@ useComponentHost(controllerModule.default, {
   }
 }
 
+/* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+   empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+   outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+   patch rather than as a control. */
 .drag-handle {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
-  inset-inline-start: -22px;
-  inline-size: 20px;
-  block-size: 32px;
+  inset-inline-start: 0;
+  inline-size: var(--_tree-disclosure-size);
+  block-size: 24px;
   display: grid;
   place-items: center;
-  padding: 7px 3px;
+  padding: 5px 2px;
   color: var(--ui-text-muted);
-  background: var(--ui-surface-elevated);
-  border: 1px solid transparent;
+  background: transparent;
+  border: 0;
   border-radius: var(--ui-radius-sm);
   cursor: grab;
   /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
@@ -484,6 +489,16 @@ useComponentHost(controllerModule.default, {
   opacity: 1;
 }
 
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+  inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+}
+
+.drag-handle:hover,
+.drag-handle:focus-visible {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-hover);
+}
+
 .drag-handle:active {
   cursor: grabbing;
 }

package/vue/chunks/UiTreeItem.js

@@ -87,7 +87,11 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const tabStop = ref(false);
 		const isContainer = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.selected && "selected", props.disabled && "disabled"].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.selected && "selected",
+			props.disabled && "disabled",
+			isContainer.value && "isContainer"
+		].filter(Boolean).join(" "));
 		const isExpandDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && typeof detail["expanded"] === "boolean" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"id",
 			"expanded",
@@ -220,6 +224,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-171d033f"]]);
+}), [["__scopeId", "data-v-a950b4d2"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/components.css

@@ -4130,7 +4130,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-tree-item"][data-v-171d033f] {
+[data-component~="ui-tree-item"][data-v-a950b4d2] {
   --_tree-row-min-height: 32px;
   --_tree-disclosure-size: 16px;
 
@@ -4139,7 +4139,7 @@ to {
   min-inline-size: 0;
   margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
 }
-.row[data-v-171d033f] {
+.row[data-v-a950b4d2] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -4156,38 +4156,38 @@ to {
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
     min-block-size var(--ui-motion-base) var(--ui-motion-ease);
 }
-.row[data-v-171d033f]:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-171d033f],
-.row[data-v-171d033f]:focus-within {
+.row[data-v-a950b4d2]:hover,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-a950b4d2],
+.row[data-v-a950b4d2]:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-171d033f] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-a950b4d2] {
   opacity: 0.55;
 }
-[data-component~="ui-tree-item"][data-dragging] .row[data-v-171d033f] {
+[data-component~="ui-tree-item"][data-dragging] .row[data-v-a950b4d2] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-171d033f]:focus {
+[data-component~="ui-tree-item"][data-v-a950b4d2]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-171d033f] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-a950b4d2] {
   box-shadow: 0 0 0 2px var(--ui-focus-ring);
 }
 
 /* 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[data-v-171d033f] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-a950b4d2] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-171d033f],
-.disclosure-spacer[data-v-171d033f] {
+.disclosure[data-v-a950b4d2],
+.disclosure-spacer[data-v-a950b4d2] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-171d033f] {
+.disclosure[data-v-a950b4d2] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -4198,14 +4198,14 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-171d033f] {
+.disclosure[hidden][data-v-a950b4d2] {
   display: none;
 }
-.disclosure[data-v-171d033f]:hover {
+.disclosure[data-v-a950b4d2]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-171d033f] {
+.disclosure-icon[data-v-a950b4d2] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -4213,7 +4213,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-171d033f]::before {
+.disclosure-icon[data-v-a950b4d2]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -4223,19 +4223,19 @@ to {
   /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
   transform: translateY(-20%) rotate(45deg);
 }
-[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-171d033f] {
+[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-a950b4d2] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-171d033f] {
+.drag-handle svg[data-v-a950b4d2] {
   display: block;
   inline-size: 100%;
   block-size: 100%;
 }
 
 /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
-.leading[data-v-171d033f] {
+.leading[data-v-a950b4d2] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -4245,12 +4245,12 @@ to {
   margin-inline-start: var(--ui-space-1);
   color: var(--ui-text-muted);
 }
-.leading[data-v-171d033f]:empty {
+.leading[data-v-a950b4d2]:empty {
   display: none;
 }
 
 /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
-svg[data-v-171d033f-s],img[data-v-171d033f-s] {
+svg[data-v-a950b4d2-s],img[data-v-a950b4d2-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -4259,7 +4259,7 @@ svg[data-v-171d033f-s],img[data-v-171d033f-s] {
 
 /* The label spans the row's height and centres its content, so slotted content (a link) can
    stretch to fill the row as its own hit area; the padding tokens remove the inset. */
-.label[data-v-171d033f] {
+.label[data-v-a950b4d2] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -4274,7 +4274,7 @@ svg[data-v-171d033f-s],img[data-v-171d033f-s] {
 
 /* 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-text[data-v-171d033f] {
+.label-text[data-v-a950b4d2] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -4284,7 +4284,7 @@ svg[data-v-171d033f-s],img[data-v-171d033f-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-171d033f-s] {
+.label-text > [data-v-a950b4d2-s] {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
@@ -4293,16 +4293,16 @@ svg[data-v-171d033f-s],img[data-v-171d033f-s] {
    there, and comes back. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
    and a duration from it, so a longer name travels no faster. */
-.row[data-ui-marquee] > .label > .label-text[data-v-171d033f] {
+.row[data-ui-marquee] > .label > .label-text[data-v-a950b4d2] {
   /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
      and forth under the pointer is harder to read than one that arrives and holds. */
-  animation: ui-tree-item-marquee-171d033f var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-a950b4d2 var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
 /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
    edge beside the icon reads as a collision rather than as more text. */
-.row[data-ui-marquee] > .label[data-v-171d033f] {
+.row[data-ui-marquee] > .label[data-v-a950b4d2] {
   mask-image: linear-gradient(
     to right,
     transparent 0,
@@ -4311,7 +4311,7 @@ svg[data-v-171d033f-s],img[data-v-171d033f-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-171d033f]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-a950b4d2]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     transparent 0,
@@ -4320,7 +4320,7 @@ svg[data-v-171d033f-s],img[data-v-171d033f-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-171d033f {
+@keyframes ui-tree-item-marquee-a950b4d2 {
 from {
     transform: translateX(0);
 }
@@ -4331,15 +4331,15 @@ to {
 
 /* Reduced motion keeps the fade, which already says the name continues. */
 @media (prefers-reduced-motion: reduce) {
-.row[data-ui-marquee] > .label > .label-text[data-v-171d033f] {
+.row[data-ui-marquee] > .label > .label-text[data-v-a950b4d2] {
     animation: none;
 }
 }
 
 /* The controls sit over the label's end, so the text fades out where they begin. The fade is
    the truncation mark while it shows: an ellipsis under it would read as a second one. */
-.row:hover > .label[data-v-171d033f],
-.row:focus-within > .label[data-v-171d033f] {
+.row:hover > .label[data-v-a950b4d2],
+.row:focus-within > .label[data-v-a950b4d2] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -4347,19 +4347,19 @@ to {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-171d033f]:dir(rtl),
-.row:focus-within > .label[data-v-171d033f]:dir(rtl) {
+.row:hover > .label[data-v-a950b4d2]:dir(rtl),
+.row:focus-within > .label[data-v-a950b4d2]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label > [data-v-171d033f-s],
-.row:focus-within > .label > [data-v-171d033f-s] {
+.row:hover > .label > [data-v-a950b4d2-s],
+.row:focus-within > .label > [data-v-a950b4d2-s] {
   text-overflow: clip;
 }
-.actions[data-v-171d033f] {
+.actions[data-v-a950b4d2] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -4371,18 +4371,18 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-171d033f],
-.row:focus-within > .actions[data-v-171d033f] {
+.row:hover > .actions[data-v-a950b4d2],
+.row:focus-within > .actions[data-v-a950b4d2] {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
 @media (hover: none) {
-.row[data-v-171d033f] {
+.row[data-v-a950b4d2] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-171d033f] {
+.actions[data-v-a950b4d2] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -4392,19 +4392,24 @@ to {
     pointer-events: auto;
 }
 }
-.drag-handle[data-v-171d033f] {
+
+/* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+   empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+   outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+   patch rather than as a control. */
+.drag-handle[data-v-a950b4d2] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
-  inset-inline-start: -22px;
-  inline-size: 20px;
-  block-size: 32px;
+  inset-inline-start: 0;
+  inline-size: var(--_tree-disclosure-size);
+  block-size: 24px;
   display: grid;
   place-items: center;
-  padding: 7px 3px;
+  padding: 5px 2px;
   color: var(--ui-text-muted);
-  background: var(--ui-surface-elevated);
-  border: 1px solid transparent;
+  background: transparent;
+  border: 0;
   border-radius: var(--ui-radius-sm);
   cursor: grab;
   /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
@@ -4413,16 +4418,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-171d033f],
-.drag-handle[data-v-171d033f]:hover,
-.drag-handle[data-v-171d033f]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-171d033f] {
+.row:hover .drag-handle[data-v-a950b4d2],
+.drag-handle[data-v-a950b4d2]:hover,
+.drag-handle[data-v-a950b4d2]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-a950b4d2] {
   opacity: 1;
 }
-.drag-handle[data-v-171d033f]:active {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-a950b4d2] {
+  inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+}
+.drag-handle[data-v-a950b4d2]:hover,
+.drag-handle[data-v-a950b4d2]:focus-visible {
+  color: var(--ui-text-primary);
+  background: var(--ui-surface-hover);
+}
+.drag-handle[data-v-a950b4d2]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-171d033f] {
+.drop-indicator[data-v-a950b4d2] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -4432,8 +4445,8 @@ to {
   background: var(--ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-171d033f]::before,
-.drop-indicator[data-v-171d033f]::after {
+.drop-indicator[data-v-a950b4d2]::before,
+.drop-indicator[data-v-a950b4d2]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -4444,39 +4457,39 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-171d033f]::before {
+.drop-indicator[data-v-a950b4d2]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-171d033f]::after {
+.drop-indicator[data-v-a950b4d2]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-171d033f] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-a950b4d2] {
   display: block;
   inset-block-start: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-171d033f] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-a950b4d2] {
   display: block;
   inset-block-end: -1px;
 }
-.children[hidden][data-v-171d033f] {
+.children[hidden][data-v-a950b4d2] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-171d033f] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-a950b4d2] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-171d033f] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-a950b4d2] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-171d033f],
-  .disclosure-icon[data-v-171d033f],
-  .drag-handle[data-v-171d033f] {
+.row[data-v-a950b4d2],
+  .disclosure-icon[data-v-a950b4d2],
+  .drag-handle[data-v-a950b4d2] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-171d033f] {
+[data-component~="ui-tree-item"][hidden][data-v-a950b4d2] {
   display: none;
 }
 /**