@threadlabs/looma 0.6.3 → 0.6.4

package/vue/components.css

@@ -4001,18 +4001,19 @@ to {
   display: none;
 }
 
-[data-component~="ui-tree-item"][data-v-b57a29c6] {
+[data-component~="ui-tree-item"][data-v-07ef6009] {
   --_tree-row-min-height: 32px;
+  --_tree-disclosure-size: 16px;
 
   position: relative;
   display: block;
   min-inline-size: 0;
   margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
 }
-.row[data-v-b57a29c6] {
+.row[data-v-07ef6009] {
   position: relative;
   display: grid;
-  grid-template-columns: 20px auto minmax(0, 1fr) auto;
+  grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
   align-items: center;
   min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
@@ -4026,40 +4027,41 @@ 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-b57a29c6]:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-b57a29c6],
-.row[data-v-b57a29c6]:focus-within {
+.row[data-v-07ef6009]:hover,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-07ef6009],
+.row[data-v-07ef6009]: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-b57a29c6] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-07ef6009] {
   opacity: 0.55;
 }
-[data-component~="ui-tree-item"][data-dragging] .row[data-v-b57a29c6] {
+[data-component~="ui-tree-item"][data-dragging] .row[data-v-07ef6009] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-b57a29c6]:focus {
+[data-component~="ui-tree-item"][data-v-07ef6009]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-b57a29c6] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-07ef6009] {
   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-b57a29c6] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-07ef6009] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-b57a29c6],
-.disclosure-spacer[data-v-b57a29c6] {
+.disclosure[data-v-07ef6009],
+.disclosure-spacer[data-v-07ef6009] {
   grid-column: 1;
   grid-row: 1;
-  inline-size: 20px;
+  inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-b57a29c6] {
+.disclosure[data-v-07ef6009] {
   display: grid;
-  place-items: center;
+  /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+  place-items: center start;
   padding: 0;
   color: var(--ui-text-muted);
   background: transparent;
@@ -4067,44 +4069,44 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-b57a29c6] {
+.disclosure[hidden][data-v-07ef6009] {
   display: none;
 }
-.disclosure[data-v-b57a29c6]:hover {
+.disclosure[data-v-07ef6009]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-b57a29c6] {
+.disclosure-icon[data-v-07ef6009] {
   display: grid;
   place-items: center;
-  inline-size: 14px;
-  block-size: 14px;
+  inline-size: 12px;
+  block-size: 12px;
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-b57a29c6]::before {
+.disclosure-icon[data-v-07ef6009]::before {
   display: block;
-  inline-size: 0.45rem;
-  block-size: 0.45rem;
-  border-inline-end: 2px solid currentColor;
-  border-block-end: 2px solid currentColor;
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
   content: "";
   /* 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-b57a29c6] {
+[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-07ef6009] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-b57a29c6] {
+.drag-handle svg[data-v-07ef6009] {
   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-b57a29c6] {
+.leading[data-v-07ef6009] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -4114,12 +4116,12 @@ to {
   margin-inline-start: var(--ui-space-1);
   color: var(--ui-text-muted);
 }
-.leading[data-v-b57a29c6]:empty {
+.leading[data-v-07ef6009]: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-b57a29c6-s],img[data-v-b57a29c6-s] {
+svg[data-v-07ef6009-s],img[data-v-07ef6009-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -4128,7 +4130,7 @@ svg[data-v-b57a29c6-s],img[data-v-b57a29c6-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-b57a29c6] {
+.label[data-v-07ef6009] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -4141,18 +4143,68 @@ svg[data-v-b57a29c6-s],img[data-v-b57a29c6-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 > [data-v-b57a29c6-s] {
+.label > [data-v-07ef6009-s] {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
-.actions[data-v-b57a29c6] {
-  grid-column: 4;
-  grid-row: 1;
+
+/* 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-07ef6009],
+.row:focus-within > .label[data-v-07ef6009] {
+  text-overflow: clip;
+  mask-image: linear-gradient(
+    to right,
+    #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-07ef6009]:dir(rtl),
+.row:focus-within > .label[data-v-07ef6009]: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-07ef6009-s],
+.row:focus-within > .label > [data-v-07ef6009-s] {
+  text-overflow: clip;
+}
+.actions[data-v-07ef6009] {
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+  inset-inline-end: 0;
   display: inline-flex;
   align-items: center;
   min-inline-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.row:hover > .actions[data-v-07ef6009],
+.row:focus-within > .actions[data-v-07ef6009] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Without hover there is no reveal, so the controls keep their own column. */
+@media (hover: none) {
+.row[data-v-07ef6009] {
+    grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+}
+.actions[data-v-07ef6009] {
+    position: static;
+    grid-column: 4;
+    grid-row: 1;
+    padding-inline-start: 0;
+    background: none;
+    opacity: 1;
+    pointer-events: auto;
+}
 }
-.drag-handle[data-v-b57a29c6] {
+.drag-handle[data-v-07ef6009] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -4173,16 +4225,16 @@ svg[data-v-b57a29c6-s],img[data-v-b57a29c6-s] {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle[data-v-b57a29c6],
-.drag-handle[data-v-b57a29c6]:hover,
-.drag-handle[data-v-b57a29c6]:focus-visible,
-[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-b57a29c6] {
+.row:hover .drag-handle[data-v-07ef6009],
+.drag-handle[data-v-07ef6009]:hover,
+.drag-handle[data-v-07ef6009]:focus-visible,
+[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-07ef6009] {
   opacity: 1;
 }
-.drag-handle[data-v-b57a29c6]:active {
+.drag-handle[data-v-07ef6009]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-b57a29c6] {
+.drop-indicator[data-v-07ef6009] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -4192,8 +4244,8 @@ svg[data-v-b57a29c6-s],img[data-v-b57a29c6-s] {
   background: var(--ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-b57a29c6]::before,
-.drop-indicator[data-v-b57a29c6]::after {
+.drop-indicator[data-v-07ef6009]::before,
+.drop-indicator[data-v-07ef6009]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -4204,39 +4256,39 @@ svg[data-v-b57a29c6-s],img[data-v-b57a29c6-s] {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-b57a29c6]::before {
+.drop-indicator[data-v-07ef6009]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-b57a29c6]::after {
+.drop-indicator[data-v-07ef6009]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-b57a29c6] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-07ef6009] {
   display: block;
   inset-block-start: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-b57a29c6] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-07ef6009] {
   display: block;
   inset-block-end: -1px;
 }
-.children[hidden][data-v-b57a29c6] {
+.children[hidden][data-v-07ef6009] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-b57a29c6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-07ef6009] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-b57a29c6] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-07ef6009] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-b57a29c6],
-  .disclosure-icon[data-v-b57a29c6],
-  .drag-handle[data-v-b57a29c6] {
+.row[data-v-07ef6009],
+  .disclosure-icon[data-v-07ef6009],
+  .drag-handle[data-v-07ef6009] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-b57a29c6] {
+[data-component~="ui-tree-item"][hidden][data-v-07ef6009] {
   display: none;
 }
 /**