@threadlabs/looma 0.28.5 → 0.28.6

package/styles/ui-container.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-container-gutters {
+/* 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-container"] { --html-next-scope-owner: "ui-container" !important; }
+}
+@scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-container-gutters {
       syntax: "*";
       inherits: false;
     }
-@property --ui-container-measure {
+    @property --ui-container-measure {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-container"]) 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-container"]) {
       --_container-measure: 65ch;
       --_container-gutters: var(--ui-space-4);
       display: block;
@@ -20,10 +27,10 @@
       padding-inline: var(--ui-container-gutters, var(--_container-gutters));
     }
 
-    :scope[data-ui-container-state~="measure=narrow"] {
+    :scope:where([data-component~="ui-container"])[data-ui-container-state~="measure=narrow"] {
       --_container-measure: 45ch;
     }
-    :scope[data-ui-container-state~="fill"] {
+    :scope:where([data-component~="ui-container"])[data-ui-container-state~="fill"] {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
@@ -31,21 +38,21 @@
       min-inline-size: 0;
       min-block-size: 0;
     }
-    :scope[data-ui-container-state~="measure=wide"] {
+    :scope:where([data-component~="ui-container"])[data-ui-container-state~="measure=wide"] {
       --_container-measure: 80ch;
     }
-    :scope[data-ui-container-state~="gutters=s"] {
+    :scope:where([data-component~="ui-container"])[data-ui-container-state~="gutters=s"] {
       --_container-gutters: var(--ui-space-3);
     }
-    :scope[data-ui-container-state~="gutters=m"] {
+    :scope:where([data-component~="ui-container"])[data-ui-container-state~="gutters=m"] {
       --_container-gutters: var(--ui-space-4);
     }
-    :scope[data-ui-container-state~="gutters=l"] {
+    :scope:where([data-component~="ui-container"])[data-ui-container-state~="gutters=l"] {
       --_container-gutters: var(--ui-space-5);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-container"])[hidden] {
       display: none;
     }
 }

package/styles/ui-context-menu.css

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

package/styles/ui-cover.css

@@ -1,8 +1,15 @@
-/* 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-cover"] { --html-next-scope-owner: "ui-cover" !important; }
+}
 @scope ([data-component~="ui-cover"]) to ([data-component], [data-slotted]) {
 /* A layout primitive that centres its content in the space, both ways, with room around it: the
        frame for a view that is one card or one message. */
-    :scope {
+    :scope:where([data-component~="ui-cover"]) {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -13,13 +20,13 @@
       padding: var(--ui-space-6) var(--ui-space-4);
     }
 
-    :scope[data-ui-cover-state~="size=fill"] {
+    :scope:where([data-component~="ui-cover"])[data-ui-cover-state~="size=fill"] {
       flex: 1;
       min-block-size: 100%;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-cover"])[hidden] {
       display: none;
     }
 }
@@ -27,7 +34,7 @@
 /* A layout primitive that centres its content in the space, both ways, with room around it: the
        frame for a view that is one card or one message. */
 
-    :scope > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-cover"]) > :where([data-slotted], [data-slotted] *):is(*) {
       max-inline-size: 100%;
     }
 

package/styles/ui-description-item.css

@@ -1,7 +1,14 @@
-/* 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-description-item"] { --html-next-scope-owner: "ui-description-item" !important; }
+}
 @scope ([data-component~="ui-description-item"]) to ([data-component], [data-slotted]) {
 /* One term and its value in a ui-description-list, laid out by the list's layout. */
-    :scope {
+    :scope:where([data-component~="ui-description-item"]) {
       display: var(--_ui-description-display, grid);
       grid-column: var(--_ui-description-column, 1 / -1);
       grid-template-columns: subgrid;
@@ -32,7 +39,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-description-item"])[hidden] {
       display: none;
     }
 }

package/styles/ui-description-list.css

@@ -1,8 +1,15 @@
-/* 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-description-list"] { --html-next-scope-owner: "ui-description-list" !important; }
+}
 @scope ([data-component~="ui-description-list"]) to ([data-component], [data-slotted]) {
 /* Named values: a term and what it is, for each item (ui-description-item). */
     /* Rows line every term up in one column and every value in the next, through subgrid. */
-    :scope {
+    :scope:where([data-component~="ui-description-list"]) {
       --_gap: var(--ui-space-2);
       --_gap-compact: var(--ui-space-1);
       --_column-gap: var(--ui-space-6);
@@ -18,9 +25,9 @@
 
     /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
        private properties, which cross into each item. */
-    :scope[data-ui-description-list-state~="layout=stacked"],
-    :scope[data-ui-description-list-state~="layout=grid"],
-    :scope[data-ui-description-list-state~="layout=tiles"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="layout=stacked"],
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="layout=grid"],
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="layout=tiles"] {
       --_ui-description-display: flex;
       --_ui-description-column: auto;
       --_ui-description-align: stretch;
@@ -31,13 +38,13 @@
 
     /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
        than that many fit. */
-    :scope[data-ui-description-list-state~="layout=grid"],
-    :scope[data-ui-description-list-state~="layout=tiles"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="layout=grid"],
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="layout=tiles"] {
       inline-size: 100%;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
     }
 
-    :scope[data-ui-description-list-state~="layout=tiles"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="layout=tiles"] {
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
       --_ui-description-padding: var(--_tile-padding);
@@ -48,24 +55,24 @@
       --_column-gap: var(--_gap);
     }
 
-    :scope[data-ui-description-list-state~="columns=2"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="columns=2"] {
       --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
     }
-    :scope[data-ui-description-list-state~="columns=3"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="columns=3"] {
       --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
     }
-    :scope[data-ui-description-list-state~="columns=4"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="columns=4"] {
       --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
     }
 
     /* Compact takes each layout's closer spacing. */
-    :scope[data-ui-description-list-state~="density=compact"] {
+    :scope:where([data-component~="ui-description-list"])[data-ui-description-list-state~="density=compact"] {
       --_gap: var(--_gap-compact);
       --_tile-padding: var(--ui-space-2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-description-list"])[hidden] {
       display: none;
     }
 }

package/styles/ui-dialog.css

@@ -1,47 +1,43 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-dialog-duration {
+/* 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-dialog"] { --html-next-scope-owner: "ui-dialog" !important; }
+}
+@scope ([data-component~="ui-dialog"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-dialog-duration {
       syntax: "*";
       inherits: false;
     }
-@property --ui-dialog-surface {
+    @property --ui-dialog-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-dialog-border {
+    @property --ui-dialog-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-dialog-radius {
+    @property --ui-dialog-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-dialog-shadow {
+    @property --ui-dialog-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-dialog-max-width {
+    @property --ui-dialog-max-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-dialog-viewport-gap {
+    @property --ui-dialog-viewport-gap {
       syntax: "*";
       inherits: false;
     }
-@keyframes ui-dialog-enter {
-      from {
-        opacity: 0;
-        transform: scale(0.96);
-      }
-    }
-@keyframes ui-dialog-backdrop-enter {
-      from {
-        background-color: transparent;
-      }
-    }
-@scope ([data-component~="ui-dialog"]) 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-dialog"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -74,7 +70,7 @@
         overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
-    :scope[open] {
+    :scope:where([data-component~="ui-dialog"])[open] {
       display: flex;
       visibility: visible;
       pointer-events: auto;
@@ -83,15 +79,15 @@
       animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
-    :scope[data-ui-dialog-state~="size=sm"] {
+    :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="size=sm"] {
       --_ui-dialog-size: 360px;
     }
 
-    :scope[data-ui-dialog-state~="size=lg"] {
+    :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="size=lg"] {
       --_ui-dialog-size: 640px;
     }
 
-    :scope[data-ui-dialog-state~="size=fullscreen"] {
+    :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="size=fullscreen"] {
       inset: 0;
       inline-size: 100%;
       block-size: 100dvh;
@@ -100,7 +96,7 @@
       border-radius: var(--ui-dialog-radius, 0);
     }
 
-    :scope[data-ui-dialog-state~="alert"] .close {
+    :scope:where([data-component~="ui-dialog"])[data-ui-dialog-state~="alert"] .close {
       display: none;
     }
 
@@ -116,7 +112,7 @@
     }
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-    :scope .title {
+    :scope:where([data-component~="ui-dialog"]) .title {
       flex: 1;
       min-inline-size: 0;
       margin: 0;
@@ -146,8 +142,8 @@
     }
 
     /* A CSS-drawn X. */
-    .close::before,
-    .close::after {
+    .close:where(:not([data-component], [data-slotted]))::before, 
+    .close:where(:not([data-component], [data-slotted]))::after {
       content: "";
       grid-area: 1 / 1;
       inline-size: 0.875rem;
@@ -157,7 +153,7 @@
       transform: rotate(45deg);
     }
 
-    .close::after {
+    .close:where(:not([data-component], [data-slotted]))::after {
       transform: rotate(-45deg);
     }
 
@@ -179,7 +175,7 @@
       }
     }
 
-    html[data-ui-input-modality="touch"] :scope .close {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-dialog"]) .close {
       inline-size: var(--ui-control-min-block-size);
       block-size: var(--ui-control-min-block-size);
     }
@@ -205,7 +201,14 @@
       display: none;
     }
 
-    :scope::backdrop {
+    @keyframes ui-dialog-enter {
+      from {
+        opacity: 0;
+        transform: scale(0.96);
+      }
+    }
+
+    :scope:where([data-component~="ui-dialog"])::backdrop {
       background-color: transparent;
       transition:
         background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
@@ -213,16 +216,22 @@
         overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
-    :scope[open]:modal::backdrop {
+    :scope:where([data-component~="ui-dialog"])[open]:modal::backdrop {
       background-color: var(--ui-overlay-backdrop);
       animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
-    :scope[open][data-ui-backdrop-hidden]::backdrop {
+    :scope:where([data-component~="ui-dialog"])[open][data-ui-backdrop-hidden]::backdrop {
       background-color: transparent;
       animation: none;
       transition: none;
     }
+
+    @keyframes ui-dialog-backdrop-enter {
+      from {
+        background-color: transparent;
+      }
+    }
 }
 @scope ([data-component~="ui-dialog"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */

package/styles/ui-disclosure.css

@@ -1,21 +1,28 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-disclosure-trigger-min-block-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-disclosure"] { --html-next-scope-owner: "ui-disclosure" !important; }
+}
+@scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-disclosure-trigger-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-disclosure-trigger-padding-block {
+    @property --ui-disclosure-trigger-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-disclosure-trigger-padding-inline {
+    @property --ui-disclosure-trigger-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* Density resolves into the summary row's own values; the public tokens still override them. */
-    :scope {
+    :scope:where([data-component~="ui-disclosure"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
       --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
@@ -26,7 +33,7 @@
       --_trigger-padding-inline: var(--ui-space-3);
     }
 
-    :scope[data-ui-disclosure-state~="density=compact"] {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="density=compact"] {
       --_trigger-min-block-size: var(--ui-control-size-sm);
       --_trigger-padding-block: var(--ui-space-1);
       --_trigger-padding-inline: var(--ui-space-2);
@@ -34,7 +41,7 @@
 
     /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */
-    :scope {
+    :scope:where([data-component~="ui-disclosure"]) {
       display: block;
       inline-size: 100%;
       overflow: clip;
@@ -91,7 +98,7 @@
     .indicator {
       transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
     }
-    :scope[data-ui-disclosure-state~="internalOpen"] .indicator {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .indicator {
       transform: rotate(180deg);
     }
 
@@ -115,16 +122,16 @@
       padding-inline: var(--ui-space-3);
     }
 
-    :scope[data-ui-disclosure-state~="internalOpen"] .panel {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .panel {
       grid-template-rows: 1fr;
     }
-    :scope[data-ui-disclosure-state~="internalOpen"] .panel-inner {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] .panel-inner {
       padding-block: 0 var(--ui-space-3);
     }
 
     /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
      * normal content-sized layout and its animation remain unchanged when fill is omitted. */
-    :scope[data-ui-disclosure-state~="fill"] {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] {
       display: flex;
       flex-direction: column;
       flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
@@ -133,20 +140,20 @@
       border-block-end: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
-    :scope[data-ui-disclosure-state~="fill"]:scope[data-ui-disclosure-state~="internalOpen"] {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"]:scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="internalOpen"] {
       flex-grow: 1;
     }
-    :scope[data-ui-disclosure-state~="fill"] .heading {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .heading {
       flex: none;
     }
-    :scope[data-ui-disclosure-state~="fill"] .trigger {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .trigger {
       border-radius: 0;
     }
-    :scope[data-ui-disclosure-state~="fill"] .panel {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .panel {
       flex: 1;
       min-block-size: 0;
     }
-    :scope[data-ui-disclosure-state~="fill"] .panel-inner {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"] .panel-inner {
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -154,7 +161,7 @@
       padding: 0;
     }
 
-    :scope[data-ui-disclosure-state~="variant=navigation"] .trigger {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] .trigger {
       gap: var(--ui-nav-gap);
       padding-inline: var(--ui-nav-padding-inline);
       min-block-size: var(--ui-nav-min-block-size);
@@ -164,28 +171,28 @@
       font-weight: var(--ui-font-normal);
       color: var(--ui-text-secondary);
     }
-    :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
       padding-inline: var(--ui-nav-compact-padding-inline);
       padding-block: var(--ui-nav-compact-padding-block);
       min-block-size: var(--ui-nav-compact-min-block-size);
       font-size: var(--ui-font-size-sm);
     }
-    :scope[data-ui-disclosure-state~="variant=navigation"] .trigger:hover:not(:disabled) {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] .trigger:hover:not(:disabled) {
       background: var(--ui-nav-hover-surface);
       color: var(--ui-text-primary);
     }
-    :scope[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
+    :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"] :is(.leading, .indicator) {
       inline-size: var(--ui-nav-icon-size);
       font-size: var(--ui-nav-icon-size);
     }
     @media (pointer: coarse) {
-      :scope[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
+      :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"] .trigger {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope[data-ui-disclosure-state~="fill"],
+      :scope:where([data-component~="ui-disclosure"])[data-ui-disclosure-state~="fill"],
       .panel,
       .indicator {
         transition: none;
@@ -193,7 +200,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-disclosure"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editable.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-editable"] { --html-next-scope-owner: "ui-editable" !important; }
+}
 @scope ([data-component~="ui-editable"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editable"]) {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -75,14 +82,14 @@
         var(--ui-control-focus-halo-shadow);
     }
 
-    .input::selection {
+    .input:where(:not([data-component], [data-slotted]))::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     }
 
-    :scope[data-ui-editable-state~="internalEdit"] .preview {
+    :scope:where([data-component~="ui-editable"])[data-ui-editable-state~="internalEdit"] .preview {
       visibility: hidden;
     }
-    :scope[data-ui-editable-state~="internalEdit"] .input {
+    :scope:where([data-component~="ui-editable"])[data-ui-editable-state~="internalEdit"] .input {
       visibility: visible;
     }
 
@@ -90,7 +97,7 @@
       display: none;
       gap: var(--ui-space-1);
     }
-    :scope[data-ui-editable-state~="internalEdit"] .actions {
+    :scope:where([data-component~="ui-editable"])[data-ui-editable-state~="internalEdit"] .actions {
       display: inline-flex;
     }
 
@@ -119,13 +126,13 @@
       box-shadow: var(--ui-focus-halo);
     }
 
-    :scope[data-ui-editable-state~="disabled"] .preview {
+    :scope:where([data-component~="ui-editable"])[data-ui-editable-state~="disabled"] .preview {
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editable"])[hidden] {
       display: none;
     }
 }