@threadlabs/looma 0.31.3 → 0.31.5

package/styles/ui-tree-item.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -662,3 +662,561 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
+@scope ([data-slotted~="ui-tree-item"]:not([data-component])) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-tree-item-depth {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tree-item-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tree-item-label-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tree-item-label-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-tree-item-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :where([data-component~="ui-tree-item"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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));
+    }
+
+    .row:where(:scope, :scope *) {
+      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);
+    }
+
+    .row:hover:where(:scope, :scope *), .row:focus-within:where(:scope, :scope *) {
+      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));
+    }
+
+    /* Selection is the same surface recipe as destination and choice rows. */
+    :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="selected"] > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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));
+    }
+    :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      color: var(--_ui-selection-context-text, var(--ui-selection-text));
+    }
+
+    :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="disabled"] .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      color: var(--ui-disabled-text);
+      background: var(--ui-disabled-surface);
+      box-shadow: none;
+    }
+
+    :where([data-component~="ui-tree-item"])[data-dragging]:not([data-move-source]) .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      opacity: 0.42;
+    }
+
+    :where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))), :where([data-component~="ui-tree-item"])[data-move-source] > .row > .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      opacity: 0.42;
+    }
+
+    :where([data-component~="ui-tree-item"]):focus:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      outline: none;
+    }
+
+    :where([data-component~="ui-tree-item"]):focus-visible .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
+    }
+
+    /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+    :where([data-component~="ui-tree-item"])[data-drop-position="inside"] > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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));
+    }
+
+    .disclosure:where(:scope, :scope *), .disclosure-spacer:where(:scope, :scope *) {
+      grid-column: 1;
+      grid-row: 1;
+      inline-size: var(--_tree-disclosure-size);
+      block-size: 28px;
+    }
+
+    .disclosure:where(:scope, :scope *) {
+      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;
+    }
+
+    .disclosure[hidden]:where(:scope, :scope *) {
+      display: none;
+    }
+
+    .selection-hit:where(:scope, :scope *) {
+      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;
+    }
+    .selection-checkbox:where(:scope, :scope *) {
+      inline-size: 1rem;
+      block-size: 1rem;
+      margin: 0;
+      accent-color: var(--ui-accent-solid);
+    }
+
+    :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+    }
+    :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      display: grid;
+    }
+    :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 3;
+    }
+    :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 4;
+    }
+
+    .disclosure:hover:where(:scope, :scope *) {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-elevated);
+    }
+
+    .disclosure-icon:where(:scope, :scope *) {
+      display: grid;
+      place-items: center;
+      inline-size: 12px;
+      block-size: 12px;
+      transform: rotate(-90deg);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .disclosure-icon:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::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);
+    }
+
+    :where([data-component~="ui-tree-item"])[aria-expanded="true"] > .row > .disclosure > .disclosure-icon:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      transform: rotate(0deg);
+    }
+
+    /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
+    .drag-handle:where(:scope, :scope *) svg {
+      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:where(:scope, :scope *) {
+      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;
+    }
+
+    .leading:empty:where(:scope, :scope *) {
+      display: none;
+    }
+
+    /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
+
+    /* 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:where(:scope, :scope *) {
+      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);
+    }
+
+    /* 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:where(:scope, :scope *) {
+      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;
+    }
+
+    /* 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:where(:scope, :scope *) > .label, .row:focus-within:where(:scope, :scope *) > .label, :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))), :where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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))
+      );
+    }
+
+    .row:hover:where(:scope, :scope *) > .label:dir(rtl), .row:focus-within:where(:scope, :scope *) > .label:dir(rtl), :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))), :where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:dir(rtl):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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))
+      );
+    }
+
+    /* A hovered row reads its whole name: the label slides far enough to show the end, rests
+       there, and starts again. 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 every name moves at the same speed. */
+    .row[data-ui-marquee]:where(:scope, :scope *) > .label > .label-text {
+      /* 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;
+    }
+
+    /* 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 the gap before the icon, fully gone where the icon begins
+       to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
+    .row[data-ui-marquee]:where(:scope, :scope *) > .label {
+      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))
+      );
+    }
+
+    .row[data-ui-marquee]:where(:scope, :scope *) > .label:dir(rtl) {
+      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))
+      );
+    }
+
+    @keyframes ui-tree-item-marquee {
+      from {
+        transform: translateX(0);
+      }
+
+      to {
+        transform: translateX(var(--_marquee-distance));
+      }
+    }
+
+    /* Reduced motion keeps the fade, which already says the name continues. */
+    @media (prefers-reduced-motion: reduce) {
+      .row[data-ui-marquee]:where(:scope, :scope *) > .label > .label-text {
+        animation: none;
+      }
+    }
+
+    .actions:where(:scope, :scope *) {
+      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:where(:scope, :scope *) > .actions, .row:focus-within:where(:scope, :scope *) > .actions, :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .actions:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))), :where([data-component~="ui-tree-item"])[data-move-source] > .row > .actions:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* Without hover there is no reveal, so the controls keep their own column. */
+    @media (hover: none), (pointer: coarse) {
+      .row:where(:scope, :scope *) {
+        grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      .actions:where(:scope, :scope *) {
+        position: static;
+        grid-column: 4;
+        grid-row: 1;
+        padding-inline-start: 0;
+        background: none;
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .row:is(:hover, :focus-within):where(:scope, :scope *) > .label, .row:is(:hover, :focus-within):where(:scope, :scope *) > .label:dir(rtl), :where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))), :where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:dir(rtl):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        mask-image: none;
+      }
+
+      .row[data-ui-marquee]:where(:scope, :scope *) > .label {
+        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. */
+      :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+      :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+
+      .row[data-ui-marquee]:where(:scope, :scope *) > .label:dir(rtl) {
+        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)))
+        );
+      }
+
+      :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+      }
+
+      :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .actions:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        grid-column: 5;
+      }
+    }
+
+    /* 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:where(:scope, :scope *) {
+      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);
+    }
+
+    .row:hover:where(:scope, :scope *) .drag-handle, .drag-handle:hover:where(:scope, :scope *), .drag-handle:focus-visible:where(:scope, :scope *), :where([data-component~="ui-tree-item"])[data-dragging] > .row > .drag-handle:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      opacity: 1;
+    }
+
+    :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+    }
+
+    .drag-handle:hover:where(:scope, :scope *), .drag-handle:focus-visible:where(:scope, :scope *) {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-hover);
+    }
+
+    .drag-handle:active:where(:scope, :scope *) {
+      cursor: grabbing;
+    }
+
+    .drop-indicator:where(:scope, :scope *) {
+      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;
+    }
+
+    .drop-indicator:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::before, .drop-indicator:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::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%);
+    }
+
+    .drop-indicator:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::before {
+      inset-inline-start: -1px;
+    }
+    .drop-indicator:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope *)::after {
+      inset-inline-end: -1px;
+    }
+
+    :where([data-component~="ui-tree-item"])[data-drop-position="before"] > .row > .row-drop-indicator:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      display: block;
+      inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
+    }
+
+    :where([data-component~="ui-tree-item"])[data-drop-position="after"] > .subtree-drop-indicator:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      display: block;
+      inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
+    }
+
+    .children[hidden]:where(:scope, :scope *) {
+      display: none;
+    }
+
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      --_tree-row-min-height: 44px;
+    }
+
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
+    }
+
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .drag-handle:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))), html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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;
+    }
+
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .disclosure:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 2;
+    }
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 3;
+    }
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 4;
+    }
+
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+    }
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 3;
+      inline-size: 44px;
+      block-size: 44px;
+    }
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 4;
+    }
+    html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .label:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      grid-column: 5;
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"]) .actions:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        grid-column: 5;
+      }
+
+      html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .actions:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        grid-column: 6;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .row:where(:scope, :scope *), .disclosure-icon:where(:scope, :scope *), .drag-handle:where(:scope, :scope *) {
+        transition: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :where([data-component~="ui-tree-item"]):focus-visible > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"]) > .row:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+        outline: var(--ui-border-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :where([data-component~="ui-tree-item"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-tree-item"]))) {
+      display: none;
+    }
+}

package/styles/ui-tree.css

@@ -1,4 +1,4 @@
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }

package/vanilla/UiActionBar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiActionBarEventMap {
 }
 export interface UiActionBarElement extends HTMLDivElement {

package/vanilla/UiActionBar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, dispose, project, fillSlot, defineComponent } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-action-bar.css";
 

package/vanilla/UiAffordanceScope.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiAffordanceScopeEventMap {
 }
 export interface UiAffordanceScopeElement extends HTMLSpanElement {

package/vanilla/UiAffordanceScope.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkFormat, checkNumber, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-affordance-scope/ui-affordance-scope.js";
 import "../styles/ui-affordance-scope.css";

package/vanilla/UiAvatar.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiAvatarEventMap {
 }
 export interface UiAvatarElement extends HTMLSpanElement {

package/vanilla/UiAvatar.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, toAttribute, toText, writeAttribute, writeUrlAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, checkFormat, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-avatar/ui-avatar.js";
 import "../styles/ui-avatar.css";

package/vanilla/UiAvatarGroup.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiAvatarGroupEventMap {
 }
 export interface UiAvatarGroupElement extends HTMLDivElement {

package/vanilla/UiAvatarGroup.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, toAttribute, toText, truthy, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkFormat, checkInteger, checkNumber, checkString, defineComponent, activateModule } from "@nextwebwg/html-next/generated-runtime";
 import * as controller from "../components/ui-avatar-group/ui-avatar-group.js";
 import "../styles/ui-avatar-group.css";

package/vanilla/UiBadge.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiBadgeEventMap {
 }
 export interface UiBadgeElement extends HTMLSpanElement {

package/vanilla/UiBadge.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, writeAttribute, dispose, formatOf, keywordFormat, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkFormat, defineComponent } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-badge.css";
 

package/vanilla/UiBreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 export interface UiBreadcrumbItemEventMap {
 }
 export interface UiBreadcrumbItemElement extends HTMLLIElement {

package/vanilla/UiBreadcrumbItem.js

@@ -1,4 +1,4 @@
-// Generated by HTML Next 1.0.0-alpha.67 for Vanilla DOM. Do not edit.
+// Generated by HTML Next 1.0.0-alpha.69 for Vanilla DOM. Do not edit.
 import { attachGeneratedController, buildTemplate, NONCONFORMING, readIndex, textCall, toAttribute, writeAttribute, dispose, hostState, acceptProps, manageProps, generatedInputs, project, fillSlot, checkBoolean, defineComponent } from "@nextwebwg/html-next/generated-runtime";
 import "../styles/ui-breadcrumb-item.css";