@threadlabs/looma 0.28.4 → 0.28.6

package/styles/ui-search-shell.css

@@ -1,48 +1,55 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-search-shell-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-search-shell"] { --html-next-scope-owner: "ui-search-shell" !important; }
+}
+@scope ([data-component~="ui-search-shell"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-search-shell-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-focus-color {
+    @property --ui-search-shell-focus-color {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-max-height {
+    @property --ui-search-shell-max-height {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-max-width {
+    @property --ui-search-shell-max-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-padding-top {
+    @property --ui-search-shell-padding-top {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-radius {
+    @property --ui-search-shell-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-shadow {
+    @property --ui-search-shell-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-surface {
+    @property --ui-search-shell-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-viewport-gap {
+    @property --ui-search-shell-viewport-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-search-shell-z-index {
+    @property --ui-search-shell-z-index {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-search-shell"]) 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-search-shell"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
       --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
@@ -76,7 +83,7 @@
       color: var(--ui-text-primary);
     }
 
-    dialog:modal::backdrop {
+    dialog:modal:where(:not([data-component], [data-slotted]))::backdrop {
       background: var(--ui-overlay-backdrop);
     }
 
@@ -84,7 +91,7 @@
       background: transparent;
     }
 
-    dialog[data-ui-backdrop-hidden]::backdrop {
+    dialog[data-ui-backdrop-hidden]:where(:not([data-component], [data-slotted]))::backdrop {
       background: transparent;
     }
 
@@ -172,7 +179,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-search-shell"])[hidden] {
       display: none;
     }
 }

package/styles/ui-section.css

@@ -1,15 +1,22 @@
-/* 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-section"] { --html-next-scope-owner: "ui-section" !important; }
+}
 @scope ([data-component~="ui-section"]) to ([data-component], [data-slotted]) {
 /* A part of a view: a heading, an optional line under it, actions for the whole section at its
        end, and the content. Sections space themselves out through the Stack around them. */
-    :scope {
+    :scope:where([data-component~="ui-section"]) {
       display: flex;
       flex-direction: column;
       gap: var(--ui-space-4);
       min-inline-size: 0;
     }
 
-    :scope[data-ui-section-state~="variant=card"] {
+    :scope:where([data-component~="ui-section"])[data-ui-section-state~="variant=card"] {
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
       --_ui-selection-context-text: initial;
@@ -19,12 +26,12 @@
       background: var(--ui-surface-raised);
     }
 
-    :scope[data-ui-section-state~="variant=divided"] {
+    :scope:where([data-component~="ui-section"])[data-ui-section-state~="variant=divided"] {
       padding-block-start: var(--ui-space-6);
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
+    :scope:where([data-component~="ui-section"])[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--ui-danger-soft) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--ui-danger-soft) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)
@@ -66,7 +73,7 @@
       line-height: var(--ui-line-height-tight);
     }
 
-    :scope[data-ui-section-state~="tone=danger"] .heading {
+    :scope:where([data-component~="ui-section"])[data-ui-section-state~="tone=danger"] .heading {
       color: var(--ui-danger);
     }
 
@@ -99,7 +106,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-section"])[hidden] {
       display: none;
     }
 }

package/styles/ui-select.css

@@ -1,48 +1,55 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-select-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-select"] { --html-next-scope-owner: "ui-select" !important; }
+}
+@scope ([data-component~="ui-select"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-select-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-border-hover {
+    @property --ui-select-border-hover {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-focus-border {
+    @property --ui-select-focus-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-focus-shadow {
+    @property --ui-select-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-inline-size {
+    @property --ui-select-inline-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-invalid-border {
+    @property --ui-select-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-invalid-focus-shadow {
+    @property --ui-select-invalid-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-radius {
+    @property --ui-select-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-shadow {
+    @property --ui-select-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-select-surface {
+    @property --ui-select-surface {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-select"]) 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-select"]) {
       box-sizing: border-box;
       display: inline-block;
       inline-size: var(--ui-select-inline-size, 100%);
@@ -66,7 +73,7 @@
 
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-    :scope {
+    :scope:where([data-component~="ui-select"]) {
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
       background-image: var(
@@ -78,23 +85,23 @@
       background-size: 1.125rem 1.125rem;
     }
 
-    :scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
+    :scope:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-select"]):focus-visible {
       border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
       box-shadow: var(--ui-select-focus-shadow, var(--ui-shadow-sm), 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-select"])[aria-invalid="true"],
+    :scope:where([data-component~="ui-select"]):is(:user-invalid, [data-user-invalid]) {
       border-color: var(--ui-select-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-select"]):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
       box-shadow: var(
         --ui-select-invalid-focus-shadow,
         var(--ui-shadow-sm),
@@ -106,14 +113,14 @@
       );
     }
 
-    :scope:disabled {
+    :scope:where([data-component~="ui-select"]):disabled {
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }
 
-    :scope[data-ui-select-state~="size=sm"] {
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-space-1) var(--ui-space-2);
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
@@ -122,7 +129,7 @@
       font-size: var(--ui-font-size-sm);
     }
 
-    :scope[data-ui-select-state~="size=lg"] {
+    :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
@@ -133,18 +140,18 @@
     /* 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-select"]) {
         min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
       }
 
-      :scope[data-ui-select-state~="size=sm"] {
+      :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
         min-block-size: var(--ui-control-min-block-size);
         font-size: inherit;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-select"])[hidden] {
       display: none;
     }
 }

package/styles/ui-separator.css

@@ -1,13 +1,20 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-separator-color {
+/* 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-separator"] { --html-next-scope-owner: "ui-separator" !important; }
+}
+@scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-separator-color {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-separator"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
-    :scope {
+    :scope:where([data-component~="ui-separator"]) {
       box-sizing: border-box;
       align-self: stretch;
       margin: 0;
@@ -15,27 +22,27 @@
       border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }
 
-    :scope[data-ui-separator-state~="emphasis=strong"] {
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="emphasis=strong"] {
       --_separator-color: var(--ui-border-strong);
     }
 
-    :scope[aria-orientation="vertical"] {
+    :scope:where([data-component~="ui-separator"])[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
       border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }
 
-    :scope[data-ui-separator-state~="selectable"] {
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="selectable"] {
       min-block-size: var(--ui-control-size-sm);
       border: 0;
       background: linear-gradient(var(--ui-separator-color, var(--ui-border-divider)), var(--ui-separator-color, var(--ui-border-divider))) center / 100%
         var(--ui-border-width) no-repeat;
       cursor: pointer;
     }
-    :scope[data-ui-separator-state~="selectable"]:hover {
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="selectable"]:hover {
       background-color: var(--ui-surface-hover);
     }
-    :scope[data-ui-separator-state~="selected"] {
+    :scope:where([data-component~="ui-separator"])[data-ui-separator-state~="selected"] {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: var(--ui-focus-width);
       border-radius: var(--ui-radius-sm);

package/styles/ui-sidebar.css

@@ -1,28 +1,35 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-sidebar-backdrop {
+/* 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-sidebar"] { --html-next-scope-owner: "ui-sidebar" !important; }
+}
+@scope ([data-component~="ui-sidebar"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-sidebar-backdrop {
       syntax: "*";
       inherits: false;
     }
-@property --ui-sidebar-border {
+    @property --ui-sidebar-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-sidebar-surface {
+    @property --ui-sidebar-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-sidebar-width {
+    @property --ui-sidebar-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-sidebar-collapsed-width {
+    @property --ui-sidebar-collapsed-width {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-sidebar"]) 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-sidebar"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
       --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
@@ -40,7 +47,7 @@
       transition: inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease), visibility var(--ui-motion-layout);
     }
 
-    :scope[data-ui-sidebar-state~="side=end"] {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"] {
       border-inline-end: 0;
       border-inline-start: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
@@ -77,17 +84,17 @@
     }
 
     /* Collapsed while docked. */
-    :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
       inline-size: var(--ui-sidebar-collapsed-width, 0px);
       visibility: hidden;
     }
-    :scope[data-ui-sidebar-state~="resizing"] {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="resizing"] {
       transition: none;
     }
-    :scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
       transform: translateX(-100%);
     }
-    :scope[data-ui-sidebar-state~="side=end"]:scope[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"]:scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
       transform: translateX(100%);
     }
 
@@ -109,13 +116,13 @@
       display: none;
     }
 
-    :scope[data-ui-sidebar-state~="side=end"] .resizer {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"] .resizer {
       inset-inline-end: auto;
       inset-inline-start: 0;
       transform: translateX(-50%);
     }
 
-    .resizer::after {
+    .resizer:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
       inset-block: 0;
@@ -143,7 +150,7 @@
       pointer-events: none;
     }
 
-    .resizer:is(:hover, :focus-visible)::after {
+    .resizer:is(:hover, :focus-visible):where(:not([data-component], [data-slotted]))::after {
       background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
       opacity: 1;
     }
@@ -153,7 +160,7 @@
     }
 
     /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
-    :scope[popover] {
+    :scope:where([data-component~="ui-sidebar"])[popover] {
       position: fixed;
       inset-block: 0;
       inset-inline-start: 0;
@@ -173,46 +180,46 @@
     }
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */
-    :scope[popover]:not(:popover-open) {
+    :scope:where([data-component~="ui-sidebar"])[popover]:not(:popover-open) {
       display: none;
       transform: translateX(-100%);
     }
 
-    :scope[data-ui-sidebar-state~="side=end"][popover] {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"][popover] {
       inset-inline-start: auto;
       inset-inline-end: 0;
     }
 
-    :scope[data-ui-sidebar-state~="side=end"][popover]:not(:popover-open) {
+    :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"][popover]:not(:popover-open) {
       transform: translateX(100%);
     }
 
     @starting-style {
-      :scope[popover]:popover-open {
+      :scope:where([data-component~="ui-sidebar"])[popover]:popover-open {
         transform: translateX(-100%);
       }
-      :scope[data-ui-sidebar-state~="side=end"][popover]:popover-open {
+      :scope:where([data-component~="ui-sidebar"])[data-ui-sidebar-state~="side=end"][popover]:popover-open {
         transform: translateX(100%);
       }
     }
 
-    :scope[popover]::backdrop {
+    :scope:where([data-component~="ui-sidebar"])[popover]::backdrop {
       background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
     }
-    :scope[popover] .content {
+    :scope:where([data-component~="ui-sidebar"])[popover] .content {
       inline-size: 100%;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope,
-      :scope[popover],
+      :scope:where([data-component~="ui-sidebar"]),
+      :scope:where([data-component~="ui-sidebar"])[popover],
       .content {
         transition: none;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-sidebar"])[hidden] {
       display: none;
     }
 }

package/styles/ui-spinner.css

@@ -1,26 +1,14 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@keyframes ui-spinner-rotate {
-      100% {
-        transform: rotate(1turn);
-      }
-    }
-@keyframes ui-spinner-dash {
-      0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-      }
-      100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-      }
-    }
+/* 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-spinner"] { --html-next-scope-owner: "ui-spinner" !important; }
+}
 @scope ([data-component~="ui-spinner"]) to ([data-component], [data-slotted]) {
 /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
-    :scope {
+    :scope:where([data-component~="ui-spinner"]) {
       display: inline-flex;
       flex: none;
       align-items: center;
@@ -33,7 +21,7 @@
       line-height: 1;
     }
 
-    :scope[data-ui-spinner-state~="size=sm"] {
+    :scope:where([data-component~="ui-spinner"])[data-ui-spinner-state~="size=sm"] {
       font-size: var(--ui-font-size-md);
     }
 
@@ -60,6 +48,27 @@
       animation: ui-spinner-dash 1.5s ease-in-out infinite;
     }
 
+    @keyframes ui-spinner-rotate {
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+
+    @keyframes ui-spinner-dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       svg,
       .arc {
@@ -68,7 +77,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-spinner"])[hidden] {
       display: none;
     }
 }