@threadlabs/looma 0.28.4 → 0.28.6

package/styles/ui-listbox.css

@@ -1,26 +1,34 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* 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-listbox"] { --html-next-scope-owner: "ui-listbox" !important; }
+}
+@scope ([data-component~="ui-listbox"]) to ([data-component], [data-slotted]) {
 @property --ui-listbox-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-listbox-border {
+    @property --ui-listbox-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-listbox-surface {
+    @property --ui-listbox-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-listbox-focus-shadow {
+    @property --ui-listbox-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-listbox-invalid-border {
+    @property --ui-listbox-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-listbox"]) to ([data-component], [data-slotted]) {
-:scope {
+
+    :scope:where([data-component~="ui-listbox"]) {
       position: relative;
       box-sizing: border-box;
       display: block;
@@ -45,15 +53,15 @@
       max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
     }
 
-    :scope:not([data-enhanced]) {
+    :scope:where([data-component~="ui-listbox"]):not([data-enhanced]) {
       padding: 0;
       border: 0;
       background: transparent;
       box-shadow: none;
     }
 
-    :scope:not([data-enhanced]) .choices,
-    :scope[data-enhanced] .fallback {
+    :scope:where([data-component~="ui-listbox"]):not([data-enhanced]) .choices,
+    :scope:where([data-component~="ui-listbox"])[data-enhanced] .fallback {
       display: none;
     }
 
@@ -73,25 +81,25 @@
       pointer-events: none;
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-listbox"]):focus-visible {
       border-color: var(--ui-control-focus);
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: var(--ui-focus-width);
       box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
     }
 
-    :scope[aria-invalid="true"] {
+    :scope:where([data-component~="ui-listbox"])[aria-invalid="true"] {
       border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
     }
 
-    :scope[aria-disabled="true"] {
+    :scope:where([data-component~="ui-listbox"])[aria-disabled="true"] {
       background: var(--ui-control-surface-disabled);
       color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-listbox"])[hidden] {
       display: none;
     }
 }

package/styles/ui-menu-group.css

@@ -1,6 +1,13 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* 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-menu-group"] { --html-next-scope-owner: "ui-menu-group" !important; }
+}
 @scope ([data-component~="ui-menu-group"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-menu-group"]) {
       display: flex;
       flex-direction: column;
       min-inline-size: 0;
@@ -13,7 +20,7 @@
       font-weight: var(--ui-font-semibold);
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-menu-group"])[hidden] {
       display: none;
     }
 }

package/styles/ui-menu-item.css

@@ -1,32 +1,39 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-menu-item-font-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-menu-item"] { --html-next-scope-owner: "ui-menu-item" !important; }
+}
+@scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-item-font-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-item-hover-surface {
+    @property --ui-menu-item-hover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-item-min-block-size {
+    @property --ui-menu-item-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-item-padding-block {
+    @property --ui-menu-item-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-item-padding-inline {
+    @property --ui-menu-item-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-item-radius {
+    @property --ui-menu-item-radius {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-menu-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-menu-item"]) {
       display: flex;
       align-items: center;
       gap: var(--ui-space-2);
@@ -59,7 +66,7 @@
       display: inline-flex;
     }
 
-    :scope[data-ui-menu-item-state~="tone=danger"] {
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="tone=danger"] {
       color: var(--ui-danger);
     }
 
@@ -85,18 +92,18 @@
       --_ui-default-icon-size: 0.75rem;
     }
 
-    :scope[data-ui-menu-item-state~="type=action"] .indicator {
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=action"] .indicator {
       display: none;
     }
 
-    :scope[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=checkbox"][aria-checked="true"] .indicator {
       border-color: var(--ui-accent);
       background: var(--ui-accent);
     }
 
     /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
        as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
-    :scope[data-ui-menu-item-state~="type=radio"] .indicator {
+    :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="type=radio"] .indicator {
       border-color: transparent;
       color: var(--ui-text-secondary);
     }
@@ -116,46 +123,46 @@
 
     /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
-      :scope {
+      :scope:where([data-component~="ui-menu-item"]) {
         min-block-size: var(--ui-menu-item-min-block-size, var(--_ui-default-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem)));
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
     }
 
-    :scope:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-menu-item"]):is(:hover, :focus-visible):not([aria-disabled="true"]) {
       background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-menu-item"]):focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
-    :scope[aria-disabled="true"] {
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] {
       background: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 
-    :scope[aria-disabled="true"] .indicator {
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] .indicator {
       border-color: var(--ui-disabled-border);
       background: transparent;
       color: var(--ui-disabled-text);
     }
 
-    :scope[aria-disabled="true"] .indicator::after {
+    :scope:where([data-component~="ui-menu-item"])[aria-disabled="true"] .indicator:where(:not([data-component], [data-slotted]))::after {
       background: var(--ui-disabled-text);
     }
 
     @media (forced-colors: active) {
-      :scope:focus-visible {
+      :scope:where([data-component~="ui-menu-item"]):focus-visible {
         outline-color: Highlight;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-menu-item"])[hidden] {
       display: none;
     }
 }

package/styles/ui-menu.css

@@ -1,30 +1,37 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-menu-surface {
+/* 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-menu"] { --html-next-scope-owner: "ui-menu" !important; }
+}
+@scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-border {
+    @property --ui-menu-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-radius {
+    @property --ui-menu-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-shadow {
+    @property --ui-menu-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-menu-viewport-gap {
+    @property --ui-menu-viewport-gap {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
        still win. */
-    :scope[data-ui-menu-state~="density=compact"] {
+    :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="density=compact"] {
       --_ui-default-menu-item-padding-block: var(--ui-space-1);
       --_ui-default-menu-item-padding-inline: var(--ui-space-2);
       --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
@@ -34,7 +41,7 @@
     }
 
     /* Small follows its trigger down: an item's own hooks still win. */
-    :scope[data-ui-menu-state~="size=sm"] {
+    :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="size=sm"] {
       --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
       --_ui-default-menu-item-padding-inline: var(--ui-space-2);
       --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
@@ -46,11 +53,11 @@
       gap: 0;
     }
 
-    :scope[data-ui-menu-state~="icons"] {
+    :scope:where([data-component~="ui-menu"])[data-ui-menu-state~="icons"] {
       --_ui-default-menu-icon-display: inline-flex;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-menu"]) {
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
       --_ui-menu-radius: var(--ui-menu-radius);
@@ -100,11 +107,11 @@
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :scope:not(:scope[data-ui-menu-state~="internalOpen"]):not(:scope[data-ui-menu-state~="inline"]) {
+    :scope:where([data-component~="ui-menu"]):not(:scope:where([data-component~="ui-menu"])[data-ui-menu-state~="internalOpen"]):not(:scope:where([data-component~="ui-menu"])[data-ui-menu-state~="inline"]) {
       display: none;
     }
 
-    :scope[popover] {
+    :scope:where([data-component~="ui-menu"])[popover] {
       position: fixed;
       inset: auto;
       margin: 0;
@@ -119,24 +126,24 @@
         overlay var(--ui-motion-fast) allow-discrete;
     }
 
-    :scope[popover]:popover-open {
+    :scope:where([data-component~="ui-menu"])[popover]:popover-open {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
 
     @starting-style {
-      :scope[popover]:popover-open {
+      :scope:where([data-component~="ui-menu"])[popover]:popover-open {
         opacity: 0;
         transform: translateY(-4px) scale(0.99);
       }
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-menu"])[hidden] {
       display: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope[popover] {
+      :scope:where([data-component~="ui-menu"])[popover] {
         transition: none;
       }
     }

package/styles/ui-meter.css

@@ -1,14 +1,21 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-meter-inline-size {
-      syntax: "*";
-      inherits: false;
-    }
+/* 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-meter"] { --html-next-scope-owner: "ui-meter" !important; }
+}
 @scope ([data-component~="ui-meter"]) to ([data-component], [data-slotted]) {
 /* How far along something is: a track, filled from the start in the tone's colour. The track is a
        quiet border colour, so an empty meter still shows; every tone's fill keeps 3:1 against the
        track and the page. */
+    @property --ui-meter-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 
-    :scope {
+    :scope:where([data-component~="ui-meter"]) {
       --_meter-fill: var(--ui-text-muted);
 
       display: inline-block;
@@ -25,7 +32,7 @@
       outline: var(--ui-border-width) solid transparent;
     }
 
-    :scope[data-ui-meter-state~="size=sm"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="size=sm"] {
       inline-size: var(--ui-meter-inline-size, 5rem);
       block-size: var(--ui-space-1);
     }
@@ -38,23 +45,23 @@
       box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
     }
 
-    :scope[data-ui-meter-state~="tone=accent"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="tone=accent"] {
       --_meter-fill: var(--ui-accent-solid);
     }
 
-    :scope[data-ui-meter-state~="tone=info"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="tone=info"] {
       --_meter-fill: var(--ui-info-solid);
     }
 
-    :scope[data-ui-meter-state~="tone=success"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="tone=success"] {
       --_meter-fill: var(--ui-success-solid);
     }
 
-    :scope[data-ui-meter-state~="tone=warning"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="tone=warning"] {
       --_meter-fill: var(--ui-warning-solid);
     }
 
-    :scope[data-ui-meter-state~="tone=danger"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="tone=danger"] {
       --_meter-fill: var(--ui-danger-solid);
     }
 
@@ -66,51 +73,51 @@
        The count arrives as an attribute, not an inline custom property (which would add a style
        attribute to every meter), so a continuous meter renders exactly as before, and the rules below
        turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
-    :scope[data-ui-meter-segments="2"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="2"] {
       --_segments: 2;
     }
 
-    :scope[data-ui-meter-segments="3"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="3"] {
       --_segments: 3;
     }
 
-    :scope[data-ui-meter-segments="4"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="4"] {
       --_segments: 4;
     }
 
-    :scope[data-ui-meter-segments="5"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="5"] {
       --_segments: 5;
     }
 
-    :scope[data-ui-meter-segments="6"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="6"] {
       --_segments: 6;
     }
 
-    :scope[data-ui-meter-segments="7"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="7"] {
       --_segments: 7;
     }
 
-    :scope[data-ui-meter-segments="8"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="8"] {
       --_segments: 8;
     }
 
-    :scope[data-ui-meter-segments="9"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="9"] {
       --_segments: 9;
     }
 
-    :scope[data-ui-meter-segments="10"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="10"] {
       --_segments: 10;
     }
 
-    :scope[data-ui-meter-segments="11"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="11"] {
       --_segments: 11;
     }
 
-    :scope[data-ui-meter-segments="12"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments="12"] {
       --_segments: 12;
     }
 
-    :scope[data-ui-meter-segments] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-segments] {
       --_meter-gap: var(--ui-space-1);
       --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
       --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
@@ -118,20 +125,20 @@
       mask-image: repeating-linear-gradient(to right, #000 0 var(--_meter-segment), transparent 0 var(--_meter-period));
     }
 
-    :scope[data-ui-meter-state~="size=sm"][data-ui-meter-segments] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="size=sm"][data-ui-meter-segments] {
       --_meter-gap: var(--ui-space-0-5);
     }
 
     /* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
        identical geometry before hydration. It has no progress mask or growing-value animation. */
-    :scope[data-ui-meter-state~="variant=distribution"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="variant=distribution"] {
       display: flex;
       inline-size: 100%;
       block-size: var(--ui-space-4);
       gap: var(--ui-space-0-5);
     }
 
-    :scope[data-ui-meter-state~="variant=distribution"][size="sm"] {
+    :scope:where([data-component~="ui-meter"])[data-ui-meter-state~="variant=distribution"][size="sm"] {
       block-size: var(--ui-space-2);
     }
 
@@ -159,7 +166,7 @@
 
       /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
          top and bottom edges and the gradient the ends. */
-      :scope[data-ui-meter-segments] {
+      :scope:where([data-component~="ui-meter"])[data-ui-meter-segments] {
         forced-color-adjust: none;
         background: repeating-linear-gradient(
           to right,
@@ -173,7 +180,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-meter"])[hidden] {
       display: none;
     }
 }

package/styles/ui-nav-item.css

@@ -1,28 +1,35 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-nav-item-current-surface {
+/* 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-nav-item"] { --html-next-scope-owner: "ui-nav-item" !important; }
+}
+@scope ([data-component~="ui-nav-item"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-nav-item-current-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-nav-item-indicator-color {
+    @property --ui-nav-item-indicator-color {
       syntax: "*";
       inherits: false;
     }
-@property --ui-nav-item-indicator-width {
+    @property --ui-nav-item-indicator-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-nav-item-inline-size {
+    @property --ui-nav-item-inline-size {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-nav-item"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
        default slot), and an optional line under it (description), such as the record a section
        belongs to. Label and description are one line each and end in an ellipsis, so every item in a
        navigation has the same height and the rail never grows sideways. */
-    :scope {
+    :scope:where([data-component~="ui-nav-item"]) {
       --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
       --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
       position: relative;
@@ -49,29 +56,29 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope:hover:not([aria-current]) {
+    :scope:where([data-component~="ui-nav-item"]):hover:not([aria-current]) {
       background: var(--_ui-selection-context-surface, var(--ui-nav-hover-surface));
       color: var(--ui-text-primary);
     }
 
     /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
        box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-nav-item"]):focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
-    :scope[aria-current] {
+    :scope:where([data-component~="ui-nav-item"])[aria-current] {
       background: var(--ui-nav-item-current-surface, var(--_ui-selection-context-surface, var(--ui-selection-surface)));
       color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     /* A complete inset edge separates pale fills without changing rail geometry. */
-    :scope[data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
+    :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="variant=surface"]:is(:hover, [aria-current]) {
       box-shadow: inset 0 0 0 var(--ui-border-width) var(--_ui-selection-context-border, var(--ui-selection-border));
     }
 
-    :scope[data-ui-nav-item-state~="variant=line"] {
+    :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="variant=line"] {
       border-radius: 0;
     }
 
@@ -88,14 +95,14 @@
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
     }
 
-    :scope[data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
+    :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
       display: block;
     }
 
     @media (forced-colors: active) {
       /* System colors may erase the selected fill. Trace the complete surface, without
          creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
-      :scope[data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible) {
+      :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }
@@ -144,17 +151,17 @@
       line-height: var(--ui-line-height-tight);
     }
 
-    :scope[data-ui-nav-item-state~="density=compact"] {
+    :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="density=compact"] {
       min-block-size: var(--ui-nav-compact-min-block-size);
       padding-block: var(--ui-nav-compact-padding-block);
       padding-inline: var(--ui-nav-compact-padding-inline);
     }
-    :scope[data-ui-nav-item-state~="density=compact"] .label {
+    :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="density=compact"] .label {
       font-size: var(--ui-font-size-sm);
     }
 
     @media (pointer: coarse) {
-      :scope[data-ui-nav-item-state~="density=compact"] {
+      :scope:where([data-component~="ui-nav-item"])[data-ui-nav-item-state~="density=compact"] {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -167,7 +174,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-nav-item"])[hidden] {
       display: none;
     }
 }