@threadlabs/looma 0.10.10 → 0.10.12

package/vue/components.css

@@ -2945,6 +2945,146 @@ svg[data-v-bcedd63e-s] {
   display: none;
 }
 
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+[data-component~="ui-list"][data-v-935b1197] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-list-gap, var(--ui-space-1));
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+[data-component~="ui-list"][data-ui-list-state~="layout=grid"][data-v-935b1197] {
+  display: grid;
+  grid-template-columns:
+    repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+  gap: var(--ui-list-gap, var(--ui-space-3));
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list"][hidden][data-v-935b1197] {
+  display: none;
+}
+
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+[data-component~="ui-list-item"][data-v-d61daf46] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-list-item-gap, var(--ui-space-3));
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-d61daf46] {
+  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-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+}
+[data-component~="ui-list-item"][data-v-d61daf46]:has(.title a[href]:hover) {
+  background: var(--ui-surface-hover);
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-d61daf46]:has(.title
+  a[href]:hover) {
+  border-color: var(--ui-border-strong);
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-d61daf46] {
+  background: var(--ui-surface-hover);
+}
+[data-component~="ui-list-item"][data-v-d61daf46]:has(.title a[href]:focus-visible) {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
+.leading[data-v-d61daf46],
+.trailing[data-v-d61daf46] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+.leading[data-v-d61daf46] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+}
+
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+.trailing[data-v-d61daf46] {
+  position: relative;
+  z-index: 1;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+.content[data-v-d61daf46] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+.title[data-v-d61daf46],
+.description[data-v-d61daf46] {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.title[data-v-d61daf46] {
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+}
+.description[data-v-d61daf46] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-tight);
+}
+.title > a[data-v-d61daf46-s] {
+  color: inherit;
+  text-decoration: none;
+}
+.title > a[data-v-d61daf46-s]:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.title > a[href][data-v-d61daf46-s]::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+}
+
+/* An unused region takes no space. */
+.leading[data-v-d61daf46]:empty,
+.description[data-v-d61daf46]:empty,
+.trailing[data-v-d61daf46]:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list-item"][hidden][data-v-d61daf46] {
+  display: none;
+}
+
 /* Compact sets the part tokens its items read, so nothing has to rescale a global. */
 [data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-ad1dce95] {
   --ui-menu-item-padding-block: var(--ui-space-1);
@@ -4304,7 +4444,7 @@ to {
   display: none;
 }
 
-[data-component~="ui-tree-item"][data-v-a950b4d2] {
+[data-component~="ui-tree-item"][data-v-3778b642] {
   --_tree-row-min-height: 32px;
   --_tree-disclosure-size: 16px;
 
@@ -4313,7 +4453,7 @@ to {
   min-inline-size: 0;
   margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
 }
-.row[data-v-a950b4d2] {
+.row[data-v-3778b642] {
   position: relative;
   display: grid;
   grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -4330,38 +4470,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-a950b4d2]:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-a950b4d2],
-.row[data-v-a950b4d2]:focus-within {
+.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 {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-a950b4d2] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-3778b642] {
   opacity: 0.55;
 }
-[data-component~="ui-tree-item"][data-dragging] .row[data-v-a950b4d2] {
+[data-component~="ui-tree-item"][data-dragging] .row[data-v-3778b642] {
   opacity: 0.42;
 }
-[data-component~="ui-tree-item"][data-v-a950b4d2]:focus {
+[data-component~="ui-tree-item"][data-v-3778b642]:focus {
   outline: none;
 }
-[data-component~="ui-tree-item"]:focus-visible .row[data-v-a950b4d2] {
+[data-component~="ui-tree-item"]:focus-visible .row[data-v-3778b642] {
   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-a950b4d2] {
+[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-3778b642] {
   background: var(--ui-accent-subtle);
   box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure[data-v-a950b4d2],
-.disclosure-spacer[data-v-a950b4d2] {
+.disclosure[data-v-3778b642],
+.disclosure-spacer[data-v-3778b642] {
   grid-column: 1;
   grid-row: 1;
   inline-size: var(--_tree-disclosure-size);
   block-size: 28px;
 }
-.disclosure[data-v-a950b4d2] {
+.disclosure[data-v-3778b642] {
   display: grid;
   /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
   place-items: center start;
@@ -4372,14 +4512,14 @@ to {
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
 }
-.disclosure[hidden][data-v-a950b4d2] {
+.disclosure[hidden][data-v-3778b642] {
   display: none;
 }
-.disclosure[data-v-a950b4d2]:hover {
+.disclosure[data-v-3778b642]:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
 }
-.disclosure-icon[data-v-a950b4d2] {
+.disclosure-icon[data-v-3778b642] {
   display: grid;
   place-items: center;
   inline-size: 12px;
@@ -4387,7 +4527,7 @@ to {
   transform: rotate(-90deg);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon[data-v-a950b4d2]::before {
+.disclosure-icon[data-v-3778b642]::before {
   display: block;
   inline-size: 0.375rem;
   block-size: 0.375rem;
@@ -4397,19 +4537,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-a950b4d2] {
+[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-3778b642] {
   transform: rotate(0deg);
 }
 
 /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
-.drag-handle svg[data-v-a950b4d2] {
+.drag-handle svg[data-v-3778b642] {
   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-a950b4d2] {
+.leading[data-v-3778b642] {
   display: inline-grid;
   place-items: center;
   grid-column: 2;
@@ -4418,13 +4558,16 @@ to {
   block-size: 1em;
   margin-inline-start: var(--ui-space-1);
   color: var(--ui-text-muted);
+  /* Above the label, so a sliding name passes under the icon. */
+  position: relative;
+  z-index: 1;
 }
-.leading[data-v-a950b4d2]:empty {
+.leading[data-v-3778b642]: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-a950b4d2-s],img[data-v-a950b4d2-s] {
+svg[data-v-3778b642-s],img[data-v-3778b642-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -4433,7 +4576,7 @@ svg[data-v-a950b4d2-s],img[data-v-a950b4d2-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-a950b4d2] {
+.label[data-v-3778b642] {
   grid-column: 3;
   grid-row: 1;
   align-self: stretch;
@@ -4444,11 +4587,14 @@ svg[data-v-a950b4d2-s],img[data-v-a950b4d2-s] {
   overflow: hidden;
   padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
     var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+  /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+     is where the controller reads the length in pixels to stop a sliding name before the fade. */
+  column-gap: var(--ui-space-3);
 }
 
 /* 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-a950b4d2] {
+.label-text[data-v-3778b642] {
   display: flex;
   align-items: center;
   /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -4458,43 +4604,73 @@ svg[data-v-a950b4d2-s],img[data-v-a950b4d2-s] {
   inline-size: 100%;
   white-space: nowrap;
 }
-.label-text > [data-v-a950b4d2-s] {
+.label-text > [data-v-3778b642-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] {
+  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-3778b642]:dir(rtl),
+.row:focus-within > .label[data-v-3778b642]: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))
+  );
+}
+
 /* 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-a950b4d2] {
+.row[data-ui-marquee] > .label > .label-text[data-v-3778b642] {
   /* 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-a950b4d2 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+  animation: ui-tree-item-marquee-3778b642 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-a950b4d2] {
+/* 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
+   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] {
+  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))
+  );
   mask-image: linear-gradient(
     to right,
-    transparent 0,
-    #000 var(--ui-space-2),
+    transparent calc(var(--_marquee-lead, 0px) / 2),
+    #000 calc(
+      var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+    ),
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-.row[data-ui-marquee] > .label[data-v-a950b4d2]:dir(rtl) {
+.row[data-ui-marquee] > .label[data-v-3778b642]:dir(rtl) {
   mask-image: linear-gradient(
     to left,
-    transparent 0,
-    #000 var(--ui-space-2),
+    transparent calc(var(--_marquee-lead, 0px) / 2),
+    #000 calc(
+      var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+    ),
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
 }
-@keyframes ui-tree-item-marquee-a950b4d2 {
+@keyframes ui-tree-item-marquee-3778b642 {
 from {
     transform: translateX(0);
 }
@@ -4505,35 +4681,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-a950b4d2] {
+.row[data-ui-marquee] > .label > .label-text[data-v-3778b642] {
     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-a950b4d2],
-.row:focus-within > .label[data-v-a950b4d2] {
-  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-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-a950b4d2-s],
-.row:focus-within > .label > [data-v-a950b4d2-s] {
+.row:hover > .label > [data-v-3778b642-s],
+.row:focus-within > .label > [data-v-3778b642-s] {
   text-overflow: clip;
 }
-.actions[data-v-a950b4d2] {
+.actions[data-v-3778b642] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -4545,18 +4701,18 @@ to {
   pointer-events: none;
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions[data-v-a950b4d2],
-.row:focus-within > .actions[data-v-a950b4d2] {
+.row:hover > .actions[data-v-3778b642],
+.row:focus-within > .actions[data-v-3778b642] {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
 @media (hover: none) {
-.row[data-v-a950b4d2] {
+.row[data-v-3778b642] {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions[data-v-a950b4d2] {
+.actions[data-v-3778b642] {
     position: static;
     grid-column: 4;
     grid-row: 1;
@@ -4571,7 +4727,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-a950b4d2] {
+.drag-handle[data-v-3778b642] {
   position: absolute;
   z-index: 2;
   inset-block-start: 50%;
@@ -4592,24 +4748,24 @@ to {
   transform: translateY(-50%);
   transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.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] {
+.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] {
   opacity: 1;
 }
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-a950b4d2] {
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"] > .row > .drag-handle[data-v-3778b642] {
   inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle[data-v-a950b4d2]:hover,
-.drag-handle[data-v-a950b4d2]:focus-visible {
+.drag-handle[data-v-3778b642]:hover,
+.drag-handle[data-v-3778b642]:focus-visible {
   color: var(--ui-text-primary);
   background: var(--ui-surface-hover);
 }
-.drag-handle[data-v-a950b4d2]:active {
+.drag-handle[data-v-3778b642]:active {
   cursor: grabbing;
 }
-.drop-indicator[data-v-a950b4d2] {
+.drop-indicator[data-v-3778b642] {
   position: absolute;
   z-index: 3;
   inset-inline: 1px;
@@ -4619,8 +4775,8 @@ to {
   background: var(--ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
-.drop-indicator[data-v-a950b4d2]::before,
-.drop-indicator[data-v-a950b4d2]::after {
+.drop-indicator[data-v-3778b642]::before,
+.drop-indicator[data-v-3778b642]::after {
   content: "";
   position: absolute;
   inset-block-start: 50%;
@@ -4631,39 +4787,39 @@ to {
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
-.drop-indicator[data-v-a950b4d2]::before {
+.drop-indicator[data-v-3778b642]::before {
   inset-inline-start: -1px;
 }
-.drop-indicator[data-v-a950b4d2]::after {
+.drop-indicator[data-v-3778b642]::after {
   inset-inline-end: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-a950b4d2] {
+[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-3778b642] {
   display: block;
   inset-block-start: -1px;
 }
-[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-a950b4d2] {
+[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-3778b642] {
   display: block;
   inset-block-end: -1px;
 }
-.children[hidden][data-v-a950b4d2] {
+.children[hidden][data-v-3778b642] {
   display: none;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-a950b4d2] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-3778b642] {
   --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-a950b4d2] {
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-3778b642] {
   display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-v-a950b4d2],
-  .disclosure-icon[data-v-a950b4d2],
-  .drag-handle[data-v-a950b4d2] {
+.row[data-v-3778b642],
+  .disclosure-icon[data-v-3778b642],
+  .drag-handle[data-v-3778b642] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree-item"][hidden][data-v-a950b4d2] {
+[data-component~="ui-tree-item"][hidden][data-v-3778b642] {
   display: none;
 }
 /**

package/vue/index.d.ts

@@ -25,6 +25,8 @@ export { default as Grid } from "./UiGrid.js";
 export { default as Icon } from "./UiIcon.js";
 export { default as IconButton } from "./UiIconButton.js";
 export { default as Input } from "./UiInput.js";
+export { default as List } from "./UiList.js";
+export { default as ListItem } from "./UiListItem.js";
 export { default as Menu } from "./UiMenu.js";
 export { default as MenuItem } from "./UiMenuItem.js";
 export { default as Popover } from "./UiPopover.js";

package/vue/index.js

@@ -26,6 +26,8 @@ import { t as UiFormField_default } from "./chunks/UiFormField.js";
 import { t as UiGrid_default } from "./chunks/UiGrid.js";
 import { t as UiIconButton_default } from "./chunks/UiIconButton.js";
 import { t as UiInput_default } from "./chunks/UiInput.js";
+import { t as UiList_default } from "./chunks/UiList.js";
+import { t as UiListItem_default } from "./chunks/UiListItem.js";
 import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
 import { t as UiPopover_default } from "./chunks/UiPopover.js";
@@ -48,4 +50,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiButton_default as Button, UiCallout_default as Callout, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiInput_default as Input, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiStack_default as Stack, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiTextarea_default as Textarea, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiButton_default as Button, UiCallout_default as Callout, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiInput_default as Input, UiList_default as List, UiListItem_default as ListItem, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiStack_default as Stack, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiTextarea_default as Textarea, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };