@threadlabs/looma 0.28.5 → 0.28.7

package/styles/ui-input-group.css

@@ -1,18 +1,25 @@
-/* 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-input-group"] { --html-next-scope-owner: "ui-input-group" !important; }
+}
+@scope ([data-component~="ui-input-group"]) to ([data-component], [data-slotted]) {
 @property --ui-input-group-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-group-invalid-border {
+    @property --ui-input-group-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-group-invalid-focus-shadow {
+    @property --ui-input-group-invalid-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-input-group"]) to ([data-component], [data-slotted]) {
-/* An input with fixed text before or after it, such as a domain after a site's name
+    /* An input with fixed text before or after it, such as a domain after a site's name
        ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
        focus ring around the input and its affixes together; the input inside drops its own through
        its custom properties, so it is still the one ui-input, with its form behaviour intact. The
@@ -20,7 +27,7 @@
        whole value is. The action slot takes one button at the end, inside the border, for the one
        thing the field is for ("Continue" after a site's address), so it reads as the field's action
        and not the form's. */
-    :scope {
+    :scope:where([data-component~="ui-input-group"]) {
       /* The group's own border and height stand for the input's, so the group is a lone Input's height.
          Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
       --_ui-default-input-border-width: 0;
@@ -64,49 +71,49 @@
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope[data-ui-input-group-state~="variant=subtle"] {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="variant=subtle"] {
       border-color: var(--ui-border);
       background: var(--ui-surface-muted);
       box-shadow: none;
     }
 
     /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-    :scope:has(.field [data-ui-input-state~="size=sm"]) {
+    :scope:where([data-component~="ui-input-group"]):has(.field [data-ui-input-state~="size=sm"]) {
       min-block-size: var(--ui-control-size-sm);
     }
 
-    :scope:has(.field [data-ui-input-state~="size=lg"]) {
+    :scope:where([data-component~="ui-input-group"]):has(.field [data-ui-input-state~="size=lg"]) {
       min-block-size: var(--ui-control-size-lg);
     }
 
     @media (pointer: coarse) {
-      :scope {
+      :scope:where([data-component~="ui-input-group"]) {
         min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
       }
 
-      :scope:has(.field [data-ui-input-state~="size=sm"]) {
+      :scope:where([data-component~="ui-input-group"]):has(.field [data-ui-input-state~="size=sm"]) {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
 
-    :scope:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+    :scope:where([data-component~="ui-input-group"]):hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
 
     /* The ring shows when the field's input would show its own: when it is focus-visible, which a
        text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-    :scope:has(.field :is(input, textarea):focus-visible) {
+    :scope:where([data-component~="ui-input-group"]):has(.field :is(input, textarea):focus-visible) {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-control-inset),
         var(--ui-control-focus-halo-shadow);
     }
 
-    :scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+    :scope:where([data-component~="ui-input-group"]):has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
-    :scope:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+    :scope:where([data-component~="ui-input-group"]):has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
       box-shadow: var(
         --ui-input-group-invalid-focus-shadow,
         var(--ui-control-inset),
@@ -120,14 +127,14 @@
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
-      :scope:has(:is(input, textarea):focus-visible) {
+      :scope:where([data-component~="ui-input-group"]):has(:is(input, textarea):focus-visible) {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: var(--ui-border-width);
       }
     }
 
-    :scope[data-ui-input-group-state~="disabled"],
-    :scope:has(:is(input, textarea):disabled) {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="disabled"],
+    :scope:where([data-component~="ui-input-group"]):has(:is(input, textarea):disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       box-shadow: none;
       cursor: not-allowed;
@@ -164,10 +171,10 @@
       border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :scope[data-ui-input-group-state~="prefixKind=icon"] {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="prefixKind=icon"] {
       --_ui-default-input-padding-inline-start: var(--ui-space-2);
     }
-    :scope[data-ui-input-group-state~="prefixKind=icon"] .affix:first-child {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="prefixKind=icon"] .affix:first-child {
       padding-inline-end: 0;
       border-inline-end: 0;
       background: transparent;
@@ -183,16 +190,16 @@
     }
 
     /* Multiline text owns the first row; its action remains inside the same frame below it. */
-    :scope[data-ui-input-group-state~="multiline"] {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"] {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
 
-    :scope[data-ui-input-group-state~="multiline"] .field {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"] .field {
       grid-column: 2;
     }
 
-    :scope[data-ui-input-group-state~="multiline"] .action {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"] .action {
       grid-column: 1 / -1;
       justify-content: end;
       padding: var(--ui-space-2);
@@ -201,15 +208,15 @@
 
     /* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
        so a translated label or pending indicator cannot cover what the person types. */
-    :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] {
       --_ui-default-textarea-padding-inline-end: calc(var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3));
     }
 
-    :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] .field {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] .field {
       grid-row: 1;
     }
 
-    :scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] .action {
+    :scope:where([data-component~="ui-input-group"])[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"] .action {
       grid-column: 2;
       grid-row: 1;
       align-self: start;
@@ -223,7 +230,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-input-group"])[hidden] {
       display: none;
     }
 }

package/styles/ui-input.css

@@ -1,61 +1,68 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-input-border {
+/* 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-input"] { --html-next-scope-owner: "ui-input" !important; }
+}
+@scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. An Input
+       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+    @property --ui-input-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-border-hover {
+    @property --ui-input-border-hover {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-border-width {
+    @property --ui-input-border-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-focus-border {
+    @property --ui-input-focus-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-focus-outline {
+    @property --ui-input-focus-outline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-focus-shadow {
+    @property --ui-input-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-inline-size {
+    @property --ui-input-inline-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-invalid-border {
+    @property --ui-input-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-invalid-focus-shadow {
+    @property --ui-input-invalid-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-min-block-size {
+    @property --ui-input-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-radius {
+    @property --ui-input-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-shadow {
+    @property --ui-input-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-input-surface {
+    @property --ui-input-surface {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. An Input
-       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
 
-    :scope {
+    :scope:where([data-component~="ui-input"]) {
       box-sizing: border-box;
       display: inline-block;
       inline-size: var(--ui-input-inline-size, 100%);
@@ -80,13 +87,13 @@
     }
 
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
-    :scope[data-ui-input-state~="size=sm"] {
+    :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
 
-    :scope[data-ui-input-state~="size=lg"] {
+    :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
@@ -95,52 +102,52 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
-      :scope {
+      :scope:where([data-component~="ui-input"]) {
         min-block-size: var(
           --ui-input-min-block-size,
           var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
         );
       }
 
-      :scope,
-      :scope[data-ui-input-state~="size=sm"],
-      :scope[data-ui-input-state~="size=lg"] {
+      :scope:where([data-component~="ui-input"]),
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"],
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
         font-size: var(--ui-font-size-md);
       }
 
-      :scope[data-ui-input-state~="size=sm"] {
+      :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
         min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
       }
     }
 
     /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-    :scope::selection {
+    :scope:where([data-component~="ui-input"])::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
     }
 
-    :scope::placeholder {
+    :scope:where([data-component~="ui-input"])::placeholder {
       color: var(--ui-control-placeholder, var(--ui-text-secondary));
       opacity: 1;
     }
 
-    :scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
+    :scope:where([data-component~="ui-input"]):hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-input"]):focus-visible {
       border-color: var(--ui-input-focus-border, var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
       outline: none;
       box-shadow: var(--ui-input-focus-shadow, var(--_ui-default-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-    :scope[aria-invalid="true"],
-    :scope:is(:user-invalid, [data-user-invalid]) {
+    :scope:where([data-component~="ui-input"])[aria-invalid="true"],
+    :scope:where([data-component~="ui-input"]):is(:user-invalid, [data-user-invalid]) {
       border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
     }
 
-    :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+    :scope:where([data-component~="ui-input"]):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
       box-shadow: var(
         --ui-input-invalid-focus-shadow,
         var(
@@ -155,7 +162,7 @@
       );
     }
 
-    :scope:disabled {
+    :scope:where([data-component~="ui-input"]):disabled {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
@@ -164,7 +171,7 @@
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
-      :scope:focus-visible {
+      :scope:where([data-component~="ui-input"]):focus-visible {
         outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight));
         outline-offset: var(--ui-border-width);
       }
@@ -174,7 +181,7 @@
      * scroll vertically inside the field. Native inputs already center their single line. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-input"])[hidden] {
       display: none;
     }
 }

package/styles/ui-list-item.css

@@ -1,22 +1,29 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-list-item-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-list-item"] { --html-next-scope-owner: "ui-list-item" !important; }
+}
+@scope ([data-component~="ui-list-item"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-list-item-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-list-item-icon-size {
+    @property --ui-list-item-icon-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-list-item-padding-block {
+    @property --ui-list-item-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-list-item-padding-inline {
+    @property --ui-list-item-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-list-item"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* One entry in a list: something to recognise (leading, usually an icon), its name (the default
        slot), one line about it (description), and what it offers (trailing, such as a button or a
@@ -27,7 +34,7 @@
        padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
        a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
        stay their own. */
-    :scope {
+    :scope:where([data-component~="ui-list-item"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-list-item-icon-size: var(--ui-list-item-icon-size);
 
@@ -45,7 +52,7 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope[data-ui-list-item-state~="variant=card"] {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="variant=card"] {
       padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
       padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
       border: var(--ui-border-width) solid var(--ui-border-strong);
@@ -53,27 +60,27 @@
       background: var(--ui-surface-raised);
     }
 
-    :scope:where(:has(.title a[href])):hover,
-    :scope[data-ui-list-item-state~="highlighted"],
-    :scope[data-ui-list-item-state~="current"] {
+    :scope:where([data-component~="ui-list-item"]):where(:has(.title a[href])):hover,
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="highlighted"],
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="current"] {
       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-list-item-state~="variant=card"]:where(:has(.title a[href])):hover {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="variant=card"]:where(:has(.title a[href])):hover {
       border-color: var(--ui-border-strong);
     }
 
-    :scope[data-ui-list-item-state~="current"] {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="current"] {
       color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     /* Framed cards already have their own edge; the stronger focus ring stays separate. */
-    :scope[data-ui-list-item-state~="variant=card"] {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="variant=card"] {
       box-shadow: none;
     }
 
-    :scope:has(.title a[href]:focus-visible) {
+    :scope:where([data-component~="ui-list-item"]):has(.title a[href]:focus-visible) {
       box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
     }
 
@@ -90,12 +97,12 @@
       font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
     }
 
-    :scope[data-ui-list-item-state~="current"] .leading {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="current"] .leading {
       color: var(--_ui-selection-context-text, var(--ui-selection-text));
     }
 
     /* An explicitly independent leading control sits above the stretched row link. */
-    :scope[data-ui-list-item-state~="leadingInteractive"] .leading {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="leadingInteractive"] .leading {
       position: relative;
       z-index: 1;
     }
@@ -125,8 +132,8 @@
       white-space: nowrap;
     }
 
-    :scope[data-ui-list-item-state~="wrap"] .title,
-    :scope[data-ui-list-item-state~="wrap"] .description {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="wrap"] .title,
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="wrap"] .description {
       white-space: normal;
       overflow-wrap: anywhere;
     }
@@ -138,12 +145,12 @@
     }
 
     /* Keep identity and disclosure marks beside the first line, even with a long description. */
-    :scope[data-ui-list-item-state~="align=title"] {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] {
       align-items: flex-start;
     }
 
-    :scope[data-ui-list-item-state~="align=title"] .leading,
-    :scope[data-ui-list-item-state~="align=title"] .trailing {
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] .leading,
+    :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="align=title"] .trailing {
       min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
     }
 
@@ -161,18 +168,18 @@
     }
 
     @media (forced-colors: active) {
-      :scope:has(a:focus-visible) {
+      :scope:where([data-component~="ui-list-item"]):has(a:focus-visible) {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :is(:scope[data-ui-list-item-state~="current"], :scope[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
+      :is(:scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="current"], :scope:where([data-component~="ui-list-item"])[data-ui-list-item-state~="highlighted"]):not(:has(a:focus-visible)) {
         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-list-item"])[hidden] {
       display: none;
     }
 }

package/styles/ui-list.css

@@ -1,19 +1,26 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-list-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-list"] { --html-next-scope-owner: "ui-list" !important; }
+}
+@scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-list-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-list-min-item-width {
+    @property --ui-list-min-item-width {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* A list of native li elements or structured ui-list-item components. It owns the spacing between them, so a view never sets it. The
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */
-    :scope {
+    :scope:where([data-component~="ui-list"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-1));
       --_list-min-item-width: var(--ui-list-min-item-width, 14rem);
       display: flex;
@@ -26,21 +33,21 @@
       list-style: none;
     }
 
-    :scope[data-ui-list-state~="as=ol"],
-    :scope[data-ui-list-state~="markers=disc"] {
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"],
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
       padding-inline-start: var(--ui-space-5);
     }
 
-    :scope[data-ui-list-state~="as=ol"] {
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="as=ol"] {
       list-style: decimal;
     }
 
-    :scope[data-ui-list-state~="markers=disc"] {
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="markers=disc"] {
       list-style: disc;
     }
 
     /* Compact passes its size to the items through private properties, which cross into each item. */
-    :scope[data-ui-list-state~="density=compact"] {
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="density=compact"] {
       --_list-gap: var(--ui-list-gap, var(--ui-space-2));
       --_ui-list-item-min-size: 0;
       --_ui-list-item-padding-block: 0;
@@ -50,14 +57,14 @@
       --_ui-list-native-padding-inline: 0;
     }
 
-    :scope[data-ui-list-state~="layout=grid"] {
+    :scope:where([data-component~="ui-list"])[data-ui-list-state~="layout=grid"] {
       --_list-gap: var(--ui-list-gap, var(--ui-space-3));
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-list"])[hidden] {
       display: none;
     }
 }
@@ -68,7 +75,7 @@
        explicit list role keeps the list announced as one: some browsers drop it from a list with no
        markers. */
 
-    :scope > :where([data-slotted], [data-slotted] *):is(li) {
+    :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(li) {
       box-sizing: border-box;
       min-inline-size: 0;
       padding: var(--_ui-list-native-padding-block, var(--ui-space-2)) var(--_ui-list-native-padding-inline, var(--ui-space-3));
@@ -77,7 +84,7 @@
       list-style: inherit;
     }
 
-    :scope > :where([data-slotted], [data-slotted] *):is(li.card) {
+    :scope:where([data-component~="ui-list"]) > :where([data-slotted], [data-slotted] *):is(li.card) {
       padding: var(--_ui-list-native-padding-block, var(--ui-space-3)) var(--_ui-list-native-padding-inline, var(--ui-space-4));
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);