@threadlabs/looma 0.11.2 → 0.11.3

package/package.json

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

package/styles/ui-tree-item.css

@@ -201,7 +201,7 @@
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        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. */
+       and a duration from it, so every name moves at the same speed. */
     .row[data-ui-marquee] > .label > .label-text {
       /* 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. */
@@ -424,7 +424,7 @@
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        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. */
+       and a duration from it, so every name moves at the same speed. */
 
     /* This comes after the hover fade, which it replaces at the same specificity. While the name
        slides, the label reaches back under the icon (the controller measures how far) with its text

package/vue/UiTreeItem.vue

@@ -378,7 +378,7 @@ useComponentHost(controllerModule.default, {
 /* A hovered row reads its whole name: the label slides far enough to show the end, waits
    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. */
+   and a duration from it, so every name moves at the same speed. */
 .row[data-ui-marquee] > .label > .label-text {
   /* 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. */

package/vue/chunks/UiTreeItem.js

@@ -234,6 +234,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3778b642"]]);
+}), [["__scopeId", "data-v-dab96891"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/components.css

@@ -5080,7 +5080,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-tree-item"][data-v-3778b642] {
+[data-component~="ui-tree-item"][data-v-dab96891] {
   --_tree-row-min-height: 32px;
   --_tree-disclosure-size: 16px;
 
@@ -5089,7 +5089,7 @@ to {
   min-inline-size: 0;
   margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
 }
-.row[data-v-3778b642] {
+.row[data-v-dab96891] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -5106,38 +5106,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-3778b642]:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-3778b642],
-.row[data-v-3778b642]:focus-within {
+.row[data-v-dab96891]:hover,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-dab96891],
+.row[data-v-dab96891]: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-3778b642] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-dab96891] {
   opacity: 0.55;
 }
-[data-component~="ui-tree-item"][data-dragging] .row[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-dragging] .row[data-v-dab96891] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-3778b642]:focus {
+[data-component~="ui-tree-item"][data-v-dab96891]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-3778b642] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-dab96891] {
   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-3778b642] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-dab96891] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-3778b642],
-.disclosure-spacer[data-v-3778b642] {
+.disclosure[data-v-dab96891],
+.disclosure-spacer[data-v-dab96891] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-3778b642] {
+.disclosure[data-v-dab96891] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -5148,14 +5148,14 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-3778b642] {
+.disclosure[hidden][data-v-dab96891] {
   display: none;
 }
-.disclosure[data-v-3778b642]:hover {
+.disclosure[data-v-dab96891]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-3778b642] {
+.disclosure-icon[data-v-dab96891] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -5163,7 +5163,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-3778b642]::before {
+.disclosure-icon[data-v-dab96891]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -5173,19 +5173,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-3778b642] {
+[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-dab96891] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-3778b642] {
+.drag-handle svg[data-v-dab96891] {
   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-3778b642] {
+.leading[data-v-dab96891] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -5198,12 +5198,12 @@ to {
   position: relative;
   z-index: 1;
 }
-.leading[data-v-3778b642]:empty {
+.leading[data-v-dab96891]: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-3778b642-s],img[data-v-3778b642-s] {
+svg[data-v-dab96891-s],img[data-v-dab96891-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -5212,7 +5212,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-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-3778b642] {
+.label[data-v-dab96891] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -5230,7 +5230,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-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-3778b642] {
+.label-text[data-v-dab96891] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -5240,15 +5240,15 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-3778b642-s] {
+.label-text > [data-v-dab96891-s] {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
 
 /* 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-3778b642],
-.row:focus-within > .label[data-v-3778b642] {
+.row:hover > .label[data-v-dab96891],
+.row:focus-within > .label[data-v-dab96891] {
   text-overflow: clip;
   mask-image: linear-gradient(
     to right,
@@ -5256,8 +5256,8 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row:hover > .label[data-v-3778b642]:dir(rtl),
-.row:focus-within > .label[data-v-3778b642]:dir(rtl) {
+.row:hover > .label[data-v-dab96891]:dir(rtl),
+.row:focus-within > .label[data-v-dab96891]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
@@ -5268,11 +5268,11 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
 /* A hovered row reads its whole name: the label slides far enough to show the end, waits
    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-3778b642] {
+   and a duration from it, so every name moves at the same speed. */
+.row[data-ui-marquee] > .label > .label-text[data-v-dab96891] {
   /* 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-3778b642 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-dab96891 var(--_marquee-duration) linear 0.5s 1 normal forwards;
   will-change: transform;
 }
 
@@ -5280,7 +5280,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
    slides, the label reaches back under the icon (the controller measures how far) with its text
    where it was, and fades out across that stretch, gone by the icon's middle: the name slips
    under the icon rather than stopping at a hard edge beside it. */
-.row[data-ui-marquee] > .label[data-v-3778b642] {
+.row[data-ui-marquee] > .label[data-v-dab96891] {
   margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
   padding-inline-start: calc(
     var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
@@ -5295,7 +5295,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-3778b642]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-dab96891]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
     transparent calc(var(--_marquee-lead, 0px) / 2),
@@ -5306,7 +5306,7 @@ svg[data-v-3778b642-s],img[data-v-3778b642-s] {
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-3778b642 {
+@keyframes ui-tree-item-marquee-dab96891 {
 from {
     transform: translateX(0);
 }
@@ -5317,15 +5317,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-3778b642] {
+.row[data-ui-marquee] > .label > .label-text[data-v-dab96891] {
     animation: none;
 }
 }
-.row:hover > .label > [data-v-3778b642-s],
-.row:focus-within > .label > [data-v-3778b642-s] {
+.row:hover > .label > [data-v-dab96891-s],
+.row:focus-within > .label > [data-v-dab96891-s] {
   text-overflow: clip;
 }
-.actions[data-v-3778b642] {
+.actions[data-v-dab96891] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -5337,18 +5337,18 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-3778b642],
-.row:focus-within > .actions[data-v-3778b642] {
+.row:hover > .actions[data-v-dab96891],
+.row:focus-within > .actions[data-v-dab96891] {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
 @media (hover: none) {
-.row[data-v-3778b642] {
+.row[data-v-dab96891] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-3778b642] {
+.actions[data-v-dab96891] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -5363,7 +5363,7 @@ to {
    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-3778b642] {
+.drag-handle[data-v-dab96891] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -5384,24 +5384,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-3778b642],
-.drag-handle[data-v-3778b642]:hover,
-.drag-handle[data-v-3778b642]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-3778b642] {
+.row:hover .drag-handle[data-v-dab96891],
+.drag-handle[data-v-dab96891]:hover,
+.drag-handle[data-v-dab96891]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-dab96891] {
   opacity: 1;
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-dab96891] {
   inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle[data-v-3778b642]:hover,
-.drag-handle[data-v-3778b642]:focus-visible {
+.drag-handle[data-v-dab96891]:hover,
+.drag-handle[data-v-dab96891]:focus-visible {
   color: var(--ui-text-primary);
   background: var(--ui-surface-hover);
 }
-.drag-handle[data-v-3778b642]:active {
+.drag-handle[data-v-dab96891]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-3778b642] {
+.drop-indicator[data-v-dab96891] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -5411,8 +5411,8 @@ to {
   background: var(--ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-3778b642]::before,
-.drop-indicator[data-v-3778b642]::after {
+.drop-indicator[data-v-dab96891]::before,
+.drop-indicator[data-v-dab96891]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -5423,39 +5423,39 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-3778b642]::before {
+.drop-indicator[data-v-dab96891]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-3778b642]::after {
+.drop-indicator[data-v-dab96891]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-dab96891] {
   display: block;
   inset-block-start: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-3778b642] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-dab96891] {
   display: block;
   inset-block-end: -1px;
 }
-.children[hidden][data-v-3778b642] {
+.children[hidden][data-v-dab96891] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-3778b642] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-dab96891] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-3778b642] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-dab96891] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-3778b642],
-  .disclosure-icon[data-v-3778b642],
-  .drag-handle[data-v-3778b642] {
+.row[data-v-dab96891],
+  .disclosure-icon[data-v-dab96891],
+  .drag-handle[data-v-dab96891] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-3778b642] {
+[data-component~="ui-tree-item"][hidden][data-v-dab96891] {
   display: none;
 }
 /**