@threadlabs/looma 0.31.2 → 0.31.4

package/vue/UiTreeItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -1333,4 +1333,638 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
     display: none;
   }
 }
+
+@scope ([data-slotted~="ui-tree-item"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-tree-item):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    /* Hooks do not inherit, so the parts below read them from the root. The tree's density
+       sets the defaults, in --_ui-default-*. */
+    --_ui-tree-item-min-block-size: var(
+      --ui-tree-item-min-block-size,
+      var(--_ui-default-tree-item-min-block-size)
+    );
+    --_ui-tree-item-font-size: var(
+      --ui-tree-item-font-size,
+      var(--_ui-default-tree-item-font-size)
+    );
+    --_ui-tree-item-label-padding-block: var(
+      --ui-tree-item-label-padding-block,
+      var(--_ui-default-tree-item-label-padding-block)
+    );
+    --_ui-tree-item-label-padding-inline: var(--ui-tree-item-label-padding-inline);
+
+    --_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-indent-step, 0) * var(--_ui-tree-indent, 16px));
+  }
+
+  :global(.row:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    position: relative;
+    display: grid;
+    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;
+    font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
+    border-radius: var(--ui-selection-radius);
+    color: var(--ui-text-secondary);
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease),
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      min-block-size var(--ui-motion-base) var(--ui-motion-ease);
+  }
+
+  :global(.row:hover:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+  :global(.row:focus-within:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    color: var(--ui-text-primary);
+    background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
+  }
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="selected"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+    background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
+  }
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
+    > .row
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+  }
+
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="disabled"]
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    color: var(--ui-disabled-text);
+    background: var(--ui-disabled-surface);
+    box-shadow: none;
+  }
+
+  :global(:where(.ui-tree-item)[data-dragging]:not([data-move-source])
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    opacity: 0.42;
+  }
+
+  :global(:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    opacity: 0.42;
+  }
+
+  :global(:where(.ui-tree-item):focus:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    outline: none;
+  }
+
+  :global(:where(.ui-tree-item):focus-visible
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
+  }
+  :global(:where(.ui-tree-item)[data-drop-position="inside"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    background: var(--ui-accent-subtle);
+    box-shadow: inset 0 0 0 var(--ui-accent-line-width)
+      var(--_ui-tree-drop-color, var(--ui-accent-solid));
+  }
+
+  :global(.disclosure:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+  :global(.disclosure-spacer:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    grid-column: 1;
+    grid-row: 1;
+    inline-size: var(--_tree-disclosure-size);
+    block-size: 28px;
+  }
+
+  :global(.disclosure:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: grid;
+    /* 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;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+  }
+
+  :global(.disclosure[hidden]:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: none;
+  }
+
+  :global(.selection-hit:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: none;
+    grid-column: 2;
+    grid-row: 1;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+    cursor: pointer;
+  }
+  :global(.selection-checkbox:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    accent-color: var(--ui-accent-solid);
+  }
+
+  :global(:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+  }
+  :global(:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .selection-hit:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    display: grid;
+  }
+  :global(:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 3;
+  }
+  :global(:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 4;
+  }
+
+  :global(.disclosure:hover:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-elevated);
+  }
+
+  :global(.disclosure-icon:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: grid;
+    place-items: center;
+    inline-size: 12px;
+    block-size: 12px;
+    transform: rotate(-90deg);
+    transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  :global(.disclosure-icon:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::before) {
+    display: block;
+    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);
+  }
+
+  :global(:where(.ui-tree-item)[aria-expanded="true"]
+    > .row
+    > .disclosure
+    > .disclosure-icon:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    transform: rotate(0deg);
+  }
+  :global(.drag-handle:where(:scope, :scope *) svg:where([data-hn-ui-tree-item])) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :global(.leading:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: inline-grid;
+    place-items: center;
+    grid-column: 2;
+    grid-row: 1;
+    inline-size: 1em;
+    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;
+  }
+
+  :global(.leading:empty:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: none;
+  }
+  :global(.label:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    grid-column: 3;
+    grid-row: 1;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
+    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-1);
+  }
+  :global(.label-text:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: flex;
+    align-items: center;
+    /* Stretches, so slotted content can still be the row's full-height hit area. */
+    align-self: stretch;
+    block-size: 100%;
+    min-inline-size: 0;
+    inline-size: 100%;
+    white-space: nowrap;
+  }
+  :global(.row:hover:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item])),
+  :global(.row:focus-within:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    text-overflow: clip;
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+  }
+
+  :global(.row:hover:where(:scope, :scope *) > .label:dir(rtl):where([data-hn-ui-tree-item])),
+  :global(.row:focus-within:where(:scope, :scope *)
+    > .label:dir(rtl):where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    mask-image: linear-gradient(
+      to left,
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+  }
+  :global(.row[data-ui-marquee]:where(:scope, :scope *)
+    > .label
+    > .label-text:where([data-hn-ui-tree-item])) {
+    /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
+       long enough to read rather than sliding back and forth. */
+    animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
+    will-change: transform;
+  }
+  :global(.row[data-ui-marquee]:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item])) {
+    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 var(--_marquee-icon-width, 0px),
+      #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-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+  }
+
+  :global(.row[data-ui-marquee]:where(:scope, :scope *)
+    > .label:dir(rtl):where([data-hn-ui-tree-item])) {
+    mask-image: linear-gradient(
+      to left,
+      transparent var(--_marquee-icon-width, 0px),
+      #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-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.row[data-ui-marquee]:where(:scope, :scope *)
+      > .label
+      > .label-text:where([data-hn-ui-tree-item])) {
+      animation: none;
+    }
+  }
+
+  :global(.actions:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    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);
+  }
+
+  :global(.row:hover:where(:scope, :scope *) > .actions:where([data-hn-ui-tree-item])),
+  :global(.row:focus-within:where(:scope, :scope *) > .actions:where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (hover: none), (pointer: coarse) {
+    :global(.row:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+      grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+    }
+
+    :global(.actions:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+      position: static;
+      grid-column: 4;
+      grid-row: 1;
+      padding-inline-start: 0;
+      background: none;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    :global(.row:is(:hover, :focus-within):where(:scope, :scope *)
+      > .label:where([data-hn-ui-tree-item])),
+    :global(.row:is(:hover, :focus-within):where(:scope, :scope *)
+      > .label:dir(rtl):where([data-hn-ui-tree-item])),
+    :global(:where(.ui-tree-item)[data-move-source]
+      > .row
+      > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])),
+    :global(:where(.ui-tree-item)[data-move-source]
+      > .row
+      > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      mask-image: none;
+    }
+
+    :global(.row[data-ui-marquee]:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item])) {
+      mask-image: linear-gradient(
+        to right,
+        transparent var(--_marquee-icon-width, 0px),
+        #000 calc(
+          var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+        )
+      );
+    }
+
+    /* Persistent content has its own column on touch. Fade only the label's end. */
+    :global(:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
+      > .row
+      > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+    }
+    :global(:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
+      > .row
+      > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+    }
+
+    :global(.row[data-ui-marquee]:where(:scope, :scope *)
+      > .label:dir(rtl):where([data-hn-ui-tree-item])) {
+      mask-image: linear-gradient(
+        to left,
+        transparent var(--_marquee-icon-width, 0px),
+        #000 calc(
+          var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+        )
+      );
+    }
+
+    :global(:where(.ui-tree-item)[data-selection-mode="multiple"]
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+    }
+
+    :global(:where(.ui-tree-item)[data-selection-mode="multiple"]
+      > .row
+      > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      grid-column: 5;
+    }
+  }
+  :global(.drag-handle:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    inline-size: var(--_tree-disclosure-size);
+    block-size: 24px;
+    display: grid;
+    place-items: center;
+    padding: 5px 2px;
+    color: var(--ui-text-muted);
+    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
+       the pointer onto it must not hide it on the way. */
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  :global(.row:hover:where(:scope, :scope *) .drag-handle:where([data-hn-ui-tree-item])),
+  :global(.drag-handle:hover:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+  :global(.drag-handle:focus-visible:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+  :global(:where(.ui-tree-item)[data-dragging]
+    > .row
+    > .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    opacity: 1;
+  }
+
+  :global(:where(.ui-tree-item)[data-ui-tree-item-state~="isContainer"]
+    > .row
+    > .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+  }
+
+  :global(.drag-handle:hover:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+  :global(.drag-handle:focus-visible:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-hover);
+  }
+
+  :global(.drag-handle:active:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    cursor: grabbing;
+  }
+
+  :global(.drop-indicator:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    position: absolute;
+    z-index: 3;
+    inset-inline: 1px;
+    display: none;
+    block-size: var(--ui-accent-line-width);
+    border-radius: var(--ui-radius-round);
+    background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
+    pointer-events: none;
+  }
+
+  :global(.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::before),
+  :global(.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::after) {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 7px;
+    block-size: 7px;
+    border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
+    border-radius: var(--ui-radius-round);
+    background: var(--ui-surface-elevated);
+    transform: translateY(-50%);
+  }
+
+  :global(.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::before) {
+    inset-inline-start: -1px;
+  }
+  :global(.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::after) {
+    inset-inline-end: -1px;
+  }
+
+  :global(:where(.ui-tree-item)[data-drop-position="before"]
+    > .row
+    > .row-drop-indicator:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    display: block;
+    inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
+  }
+
+  :global(:where(.ui-tree-item)[data-drop-position="after"]
+    > .subtree-drop-indicator:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    display: block;
+    inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
+  }
+
+  :global(.children[hidden]:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+    display: none;
+  }
+
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    --_tree-row-min-height: 44px;
+  }
+
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
+  }
+
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])),
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)[data-ui-tree-item-state~="isContainer"]
+    > .row
+    > .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    position: relative;
+    grid-column: 1;
+    grid-row: 1;
+    inset: auto;
+    inline-size: 44px;
+    block-size: 44px;
+    padding: 14px;
+    opacity: 1;
+    transform: none;
+    cursor: pointer;
+  }
+
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .disclosure:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 2;
+  }
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 3;
+  }
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 4;
+  }
+
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+  }
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .selection-hit:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 3;
+    inline-size: 44px;
+    block-size: 44px;
+  }
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 4;
+  }
+  :global(html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    grid-column: 5;
+  }
+
+  @media (hover: none), (pointer: coarse) {
+    :global(html[data-ui-input-modality="touch"]
+      :where(.ui-tree-item)
+      .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+    }
+
+    :global(html[data-ui-input-modality="touch"]
+      :where(.ui-tree-item)
+      .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      grid-column: 5;
+    }
+
+    :global(html[data-ui-input-modality="touch"]
+      :where(.ui-tree-item)[data-selection-mode="multiple"]
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+    }
+
+    :global(html[data-ui-input-modality="touch"]
+      :where(.ui-tree-item)[data-selection-mode="multiple"]
+      > .row
+      > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      grid-column: 6;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.row:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+    :global(.disclosure-icon:where(:scope, :scope *):where([data-hn-ui-tree-item])),
+    :global(.drag-handle:where(:scope, :scope *):where([data-hn-ui-tree-item])) {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(:where(.ui-tree-item):focus-visible
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-focus-width));
+    }
+    :global(:where(.ui-tree-item)[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+  :global(:where(.ui-tree-item)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item])) {
+    display: none;
+  }
+}
 </style>

package/vue/chunks/UiActionBar.js

@@ -37,6 +37,6 @@ var UiActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			])], 16);
 		};
 	}
-}), [["__scopeId", "data-v-0a58b207"]]);
+}), [["__scopeId", "data-v-6366b3ff"]]);
 //#endregion
 export { UiActionBar_default as t };

package/vue/chunks/UiAffordanceScope.js

@@ -131,6 +131,6 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-715f4ec6"]]);
+}), [["__scopeId", "data-v-70b98180"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiAvatar.js

@@ -336,6 +336,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fbcb8d01"]]);
+}), [["__scopeId", "data-v-65d3b832"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -229,6 +229,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-797db461"]]);
+}), [["__scopeId", "data-v-43f51570"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -181,6 +181,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8895f48b"]]);
+}), [["__scopeId", "data-v-35d4d9cb"]]);
 //#endregion
 export { UiBadge_default as t };