@threadlabs/looma 0.28.4 → 0.28.6

package/styles/ui-tooltip.css

@@ -1,48 +1,55 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-tooltip-arrow-size {
+/* Generated by HTML Next 1.0.0-alpha.51. 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; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-tooltip"] { --html-next-scope-owner: "ui-tooltip" !important; }
+}
+@scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-tooltip-arrow-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-border {
+    @property --ui-tooltip-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-inverse-surface {
+    @property --ui-tooltip-inverse-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-inverse-text {
+    @property --ui-tooltip-inverse-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-max-inline-size {
+    @property --ui-tooltip-max-inline-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-offset {
+    @property --ui-tooltip-offset {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-radius {
+    @property --ui-tooltip-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-shadow {
+    @property --ui-tooltip-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-surface {
+    @property --ui-tooltip-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tooltip-text {
+    @property --ui-tooltip-text {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-tooltip"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-tooltip-border: var(--ui-tooltip-border);
       --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -112,7 +119,7 @@
 
     /* A <kbd> takes the browser's monospace; the hint reads in the tooltip's own type. */
 
-    :scope[data-ui-tooltip-state~="inverse"] .surface {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-tooltip-state~="inverse"] .surface {
       --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));
@@ -120,7 +127,7 @@
 
     /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
      * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
-    .surface::after {
+    .surface:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
       z-index: 1;
@@ -137,7 +144,7 @@
       transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
     }
 
-    :scope[data-ui-actual-placement="bottom"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="bottom"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-block-end: auto;
       border-inline-end-width: 0;
@@ -148,65 +155,65 @@
       border-start-start-radius: var(--ui-border-width);
     }
 
-    :scope[data-ui-actual-align="center"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-align="center"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
     }
 
-    :scope[data-ui-actual-align="end"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-align="end"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-inline-start: auto;
       inset-inline-end: var(--ui-space-3);
     }
 
-    :scope[data-ui-actual-placement="left"] .surface::after,
-    :scope[data-ui-actual-placement="right"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"] .surface:where(:not([data-component], [data-slotted]))::after, 
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.625rem) / 2);
       inset-block-end: auto;
       border: 0 solid var(--_tooltip-line);
     }
 
-    :scope[data-ui-actual-placement="left"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-inline-start: auto;
       inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       border-inline-end-width: var(--ui-border-width);
       border-block-start-width: var(--ui-border-width);
     }
 
-    :scope[data-ui-actual-placement="right"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-inline-end: auto;
       border-inline-start-width: var(--ui-border-width);
       border-block-end-width: var(--ui-border-width);
     }
 
-    :scope[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,
-    :scope[data-ui-actual-placement="right"][data-ui-actual-align="start"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface:where(:not([data-component], [data-slotted]))::after, 
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"][data-ui-actual-align="start"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-block-start: var(--ui-space-3);
     }
 
-    :scope[data-ui-actual-placement="left"][data-ui-actual-align="end"] .surface::after,
-    :scope[data-ui-actual-placement="right"][data-ui-actual-align="end"] .surface::after {
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="left"][data-ui-actual-align="end"] .surface:where(:not([data-component], [data-slotted]))::after, 
+    :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="right"][data-ui-actual-align="end"] .surface:where(:not([data-component], [data-slotted]))::after {
       inset-block-start: auto;
       inset-block-end: var(--ui-space-3);
     }
 
-    :scope:popover-open {
+    :scope:where([data-component~="ui-tooltip"]):popover-open {
       opacity: 1;
       transform: translateY(0);
     }
 
     @starting-style {
-      :scope:popover-open {
+      :scope:where([data-component~="ui-tooltip"]):popover-open {
         opacity: 0;
         transform: translateY(4px);
       }
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-tooltip"])[hidden] {
       display: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope {
+      :scope:where([data-component~="ui-tooltip"]) {
         transition: none;
       }
     }

package/styles/ui-top-bar.css

@@ -1,36 +1,43 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-top-bar-actions-gap {
+/* Generated by HTML Next 1.0.0-alpha.51. 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; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-top-bar"] { --html-next-scope-owner: "ui-top-bar" !important; }
+}
+@scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-top-bar-actions-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-top-bar-border {
+    @property --ui-top-bar-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-top-bar-gap {
+    @property --ui-top-bar-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-top-bar-height {
+    @property --ui-top-bar-height {
       syntax: "*";
       inherits: false;
     }
-@property --ui-top-bar-padding-inline {
+    @property --ui-top-bar-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-top-bar-surface {
+    @property --ui-top-bar-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-top-bar-z-index {
+    @property --ui-top-bar-z-index {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-top-bar"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-top-bar-actions-gap: var(--ui-top-bar-actions-gap);
 
@@ -73,7 +80,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-top-bar"])[hidden] {
       display: none;
     }
 }

package/styles/ui-tree-item.css

@@ -1,37 +1,35 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-tree-item-depth {
+/* Generated by HTML Next 1.0.0-alpha.51. 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; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-tree-item"] { --html-next-scope-owner: "ui-tree-item" !important; }
+}
+@scope ([data-component~="ui-tree-item"]) 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 {
+    @property --ui-tree-item-font-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tree-item-label-padding-block {
+    @property --ui-tree-item-label-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tree-item-label-padding-inline {
+    @property --ui-tree-item-label-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tree-item-min-block-size {
+    @property --ui-tree-item-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@keyframes ui-tree-item-marquee {
-      from {
-        transform: translateX(0);
-      }
 
-      to {
-        transform: translateX(var(--_marquee-distance));
-      }
-    }
-@scope ([data-component~="ui-tree-item"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
-
-    :scope {
+    :scope:where([data-component~="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));
@@ -74,40 +72,40 @@
     }
 
     /* Selection is the same surface recipe as destination and choice rows. */
-    :scope[data-ui-tree-item-state~="selected"] > .row {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="selected"] > .row {
       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));
     }
-    :scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
       color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
-    :scope[data-ui-tree-item-state~="disabled"] .row {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="disabled"] .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
       box-shadow: none;
     }
 
-    :scope[data-dragging]:not([data-move-source]) .row {
+    :scope:where([data-component~="ui-tree-item"])[data-dragging]:not([data-move-source]) .row {
       opacity: 0.42;
     }
 
-    :scope[data-move-source] > .row > .label,
-    :scope[data-move-source] > .row > .leading {
+    :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .label,
+    :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .leading {
       opacity: 0.42;
     }
 
-    :scope:focus {
+    :scope:where([data-component~="ui-tree-item"]):focus {
       outline: none;
     }
 
-    :scope:focus-visible .row {
+    :scope:where([data-component~="ui-tree-item"]):focus-visible .row {
       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. */
-    :scope[data-drop-position="inside"] > .row {
+    :scope:where([data-component~="ui-tree-item"])[data-drop-position="inside"] > .row {
       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));
     }
@@ -152,16 +150,16 @@
       accent-color: var(--ui-accent-solid);
     }
 
-    :scope[data-selection-mode="multiple"] > .row {
+    :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row {
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
     }
-    :scope[data-selection-mode="multiple"] > .row > .selection-hit {
+    :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit {
       display: grid;
     }
-    :scope[data-selection-mode="multiple"] > .row > .leading {
+    :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading {
       grid-column: 3;
     }
-    :scope[data-selection-mode="multiple"] > .row > .label {
+    :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .label {
       grid-column: 4;
     }
 
@@ -179,7 +177,7 @@
       transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    .disclosure-icon::before {
+    .disclosure-icon:where(:not([data-component], [data-slotted]))::before {
       display: block;
       inline-size: 0.375rem;
       block-size: 0.375rem;
@@ -190,7 +188,7 @@
       transform: translateY(-20%) rotate(45deg);
     }
 
-    :scope[aria-expanded="true"] > .row > .disclosure > .disclosure-icon {
+    :scope:where([data-component~="ui-tree-item"])[aria-expanded="true"] > .row > .disclosure > .disclosure-icon {
       transform: rotate(0deg);
     }
 
@@ -256,8 +254,8 @@
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
     .row:focus-within > .label,
-    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label,
-    :scope[data-move-source] > .row > .label {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label,
+    :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
         to right,
@@ -268,8 +266,8 @@
 
     .row:hover > .label:dir(rtl),
     .row:focus-within > .label:dir(rtl),
-    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl),
-    :scope[data-move-source] > .row > .label:dir(rtl) {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl),
+    :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -314,6 +312,16 @@
       );
     }
 
+    @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] > .label > .label-text {
@@ -336,8 +344,8 @@
 
     .row:hover > .actions,
     .row:focus-within > .actions,
-    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
-    :scope[data-move-source] > .row > .actions {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
+    :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
     }
@@ -360,8 +368,8 @@
 
       .row:is(:hover, :focus-within) > .label,
       .row:is(:hover, :focus-within) > .label:dir(rtl),
-      :scope[data-move-source] > .row > .label,
-      :scope[data-move-source] > .row > .label:dir(rtl) {
+      :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .label,
+      :scope:where([data-component~="ui-tree-item"])[data-move-source] > .row > .label:dir(rtl) {
         mask-image: none;
       }
 
@@ -374,10 +382,10 @@
       }
 
       /* Persistent content has its own column on touch. Fade only the label's end. */
-      :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+      :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label {
         mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
       }
-      :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl) {
+      :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl) {
         mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
       }
 
@@ -389,11 +397,11 @@
         );
       }
 
-      :scope[data-selection-mode="multiple"] > .row {
+      :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row {
         grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
       }
 
-      :scope[data-selection-mode="multiple"] > .row > .actions {
+      :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .actions {
         grid-column: 5;
       }
     }
@@ -427,11 +435,11 @@
     .row:hover .drag-handle,
     .drag-handle:hover,
     .drag-handle:focus-visible,
-    :scope[data-dragging] > .row > .drag-handle {
+    :scope:where([data-component~="ui-tree-item"])[data-dragging] > .row > .drag-handle {
       opacity: 1;
     }
 
-    :scope[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+    :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
       inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
     }
 
@@ -456,8 +464,8 @@
       pointer-events: none;
     }
 
-    .drop-indicator::before,
-    .drop-indicator::after {
+    .drop-indicator:where(:not([data-component], [data-slotted]))::before, 
+    .drop-indicator:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
       inset-block-start: 50%;
@@ -469,19 +477,19 @@
       transform: translateY(-50%);
     }
 
-    .drop-indicator::before {
+    .drop-indicator:where(:not([data-component], [data-slotted]))::before {
       inset-inline-start: -1px;
     }
-    .drop-indicator::after {
+    .drop-indicator:where(:not([data-component], [data-slotted]))::after {
       inset-inline-end: -1px;
     }
 
-    :scope[data-drop-position="before"] > .row > .row-drop-indicator {
+    :scope:where([data-component~="ui-tree-item"])[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
       inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
-    :scope[data-drop-position="after"] > .subtree-drop-indicator {
+    :scope:where([data-component~="ui-tree-item"])[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
       inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
@@ -490,16 +498,16 @@
       display: none;
     }
 
-    html[data-ui-input-modality="touch"] :scope {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) {
       --_tree-row-min-height: 44px;
     }
 
-    html[data-ui-input-modality="touch"] :scope .row {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .row {
       grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
     }
 
-    html[data-ui-input-modality="touch"] :scope .drag-handle,
-    html[data-ui-input-modality="touch"] :scope[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .drag-handle,
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="isContainer"] > .row > .drag-handle {
       position: relative;
       grid-column: 1;
       grid-row: 1;
@@ -512,45 +520,45 @@
       cursor: pointer;
     }
 
-    html[data-ui-input-modality="touch"] :scope .disclosure {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .disclosure {
       grid-column: 2;
     }
-    html[data-ui-input-modality="touch"] :scope .leading {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .leading {
       grid-column: 3;
     }
-    html[data-ui-input-modality="touch"] :scope .label {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .label {
       grid-column: 4;
     }
 
-    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row {
       grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
     }
-    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .selection-hit {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .selection-hit {
       grid-column: 3;
       inline-size: 44px;
       block-size: 44px;
     }
-    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .leading {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .leading {
       grid-column: 4;
     }
-    html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .label {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .label {
       grid-column: 5;
     }
 
     @media (hover: none), (pointer: coarse) {
-      html[data-ui-input-modality="touch"] :scope .row {
+      html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .row {
         grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
       }
 
-      html[data-ui-input-modality="touch"] :scope .actions {
+      html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"]) .actions {
         grid-column: 5;
       }
 
-      html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+      html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row {
         grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
       }
 
-      html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .actions {
+      html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-tree-item"])[data-selection-mode="multiple"] > .row > .actions {
         grid-column: 6;
       }
     }
@@ -564,18 +572,18 @@
     }
 
     @media (forced-colors: active) {
-      :scope:focus-visible > .row {
+      :scope:where([data-component~="ui-tree-item"]):focus-visible > .row {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :scope[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"]) > .row {
+      :scope:where([data-component~="ui-tree-item"])[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"]) > .row {
         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. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-tree-item"])[hidden] {
       display: none;
     }
 }