@threadlabs/looma 0.28.4 → 0.28.6

package/styles/ui-text.css

@@ -1,13 +1,20 @@
-/* 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-text"] { --html-next-scope-owner: "ui-text" !important; }
+}
 @scope ([data-component~="ui-text"]) to ([data-component], [data-slotted]) {
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
        heading. */
-    :scope[data-ui-text-state~="grow"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="grow"] {
       flex: 1;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-text"]) {
       margin: 0;
       min-inline-size: 0;
       color: var(--ui-text-primary);
@@ -16,107 +23,107 @@
 
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
-    :scope:is(h2, h3, h4, h5, h6) {
+    :scope:where([data-component~="ui-text"]):is(h2, h3, h4, h5, h6) {
       font-size: inherit;
       font-weight: inherit;
     }
 
-    :scope[data-ui-text-state~="size=xs"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=xs"] {
       font-size: var(--ui-font-size-xs);
       line-height: var(--ui-line-height);
     }
-    :scope[data-ui-text-state~="size=sm"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=sm"] {
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height);
     }
-    :scope[data-ui-text-state~="size=md"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=md"] {
       font-size: var(--ui-font-size-md);
       line-height: var(--ui-line-height);
     }
-    :scope[data-ui-text-state~="size=lg"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="size=lg"] {
       font-size: var(--ui-font-size-lg);
       line-height: var(--ui-line-height-relaxed);
     }
 
     /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
-    :scope[data-ui-text-state~="trim"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="trim"] {
       text-box-trim: trim-both;
       text-box-edge: cap alphabetic;
     }
 
-    :scope[data-ui-text-state~="tone=secondary"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=secondary"] {
       color: var(--ui-text-secondary);
     }
-    :scope[data-ui-text-state~="tone=muted"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=muted"] {
       color: var(--ui-text-muted);
     }
-    :scope[data-ui-text-state~="tone=accent"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=accent"] {
       color: var(--ui-accent-active);
     }
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
-    :scope[data-ui-text-state~="tone=danger"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=danger"] {
       color: var(--ui-danger-subtle-text);
     }
-    :scope[data-ui-text-state~="tone=success"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=success"] {
       color: var(--ui-success-subtle-text);
     }
-    :scope[data-ui-text-state~="tone=info"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=info"] {
       color: var(--ui-info-subtle-text);
     }
-    :scope[data-ui-text-state~="tone=warning"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=warning"] {
       color: var(--ui-warning-subtle-text);
     }
 
-    :scope[data-ui-text-state~="weight=normal"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="weight=normal"] {
       font-weight: var(--ui-font-normal);
     }
-    :scope[data-ui-text-state~="weight=medium"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="weight=medium"] {
       font-weight: var(--ui-font-medium);
     }
-    :scope[data-ui-text-state~="weight=semibold"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="weight=semibold"] {
       font-weight: var(--ui-font-semibold);
     }
 
-    :scope[data-ui-text-state~="variant=eyebrow"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=eyebrow"] {
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
       letter-spacing: 0.06em;
       text-transform: uppercase;
     }
-    :scope[data-ui-text-state~="variant=code"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=code"] {
       font-family: var(--ui-font-family-mono);
     }
 
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */
 
-    :scope[data-ui-text-state~="truncate"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="truncate"] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
-    :scope[data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
       overflow-x: clip;
       overflow-y: visible;
     }
 
-    :scope[data-ui-text-state~="align=center"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="align=center"] {
       text-align: center;
     }
 
-    :scope[data-ui-text-state~="font=sans"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="font=sans"] {
       font-family: var(--ui-font-family-sans, sans-serif);
     }
 
-    :scope[data-ui-text-state~="wrap=anywhere"] {
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="wrap=anywhere"] {
       overflow-wrap: anywhere;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-text"])[hidden] {
       display: none;
     }
 }
@@ -134,7 +141,7 @@
 
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */
-    :scope :where([data-slotted], [data-slotted] *):is(a) {
+    :scope:where([data-component~="ui-text"]) :where([data-slotted], [data-slotted] *):is(a) {
       color: var(--ui-accent-active);
       text-decoration: underline;
       text-decoration-thickness: 0.06em;

package/styles/ui-textarea.css

@@ -1,56 +1,63 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-textarea-border-width {
+/* 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-textarea"] { --html-next-scope-owner: "ui-textarea" !important; }
+}
+@scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-textarea-border-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-border {
+    @property --ui-textarea-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-border-hover {
+    @property --ui-textarea-border-hover {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-focus-border {
+    @property --ui-textarea-focus-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-focus-outline {
+    @property --ui-textarea-focus-outline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-surface {
+    @property --ui-textarea-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-focus-shadow {
+    @property --ui-textarea-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-invalid-border {
+    @property --ui-textarea-invalid-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-invalid-focus-shadow {
+    @property --ui-textarea-invalid-focus-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-radius {
+    @property --ui-textarea-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-shadow {
+    @property --ui-textarea-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-textarea-padding-inline-end {
+    @property --ui-textarea-padding-inline-end {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-textarea"]) 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-textarea"]) {
       box-sizing: border-box;
       display: inline-block;
       inline-size: 100%;
@@ -77,33 +84,33 @@
     }
 
     /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-    :scope::selection {
+    :scope:where([data-component~="ui-textarea"])::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
       color: inherit;
     }
 
-    :scope::placeholder {
+    :scope:where([data-component~="ui-textarea"])::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-textarea"]):hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
       border-color: var(--ui-textarea-border-hover, var(--_ui-default-textarea-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-textarea"]):focus-visible {
       border-color: var(--ui-textarea-focus-border, var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
       outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
       box-shadow: var(--ui-textarea-focus-shadow, var(--_ui-default-textarea-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-textarea"])[aria-invalid="true"],
+    :scope:where([data-component~="ui-textarea"]):is(:user-invalid, [data-user-invalid]) {
       border-color: var(--ui-textarea-invalid-border, var(--_ui-default-textarea-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-textarea"]):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
       box-shadow: var(
         --ui-textarea-invalid-focus-shadow,
         var(
@@ -118,33 +125,33 @@
       );
     }
 
-    :scope:disabled {
+    :scope:where([data-component~="ui-textarea"]):disabled {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }
 
-    :scope[data-ui-textarea-state~="size=sm"] {
+    :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="size=sm"] {
       --_padding-block: var(--ui-space-1);
       padding: var(--ui-space-1) var(--ui-space-2);
       padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2)));
       font-size: var(--ui-font-size-sm);
     }
 
-    :scope[data-ui-textarea-state~="size=lg"] {
+    :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="size=lg"] {
       --_padding-block: var(--ui-space-3);
       padding: var(--ui-space-3) var(--ui-space-4);
       padding-inline-end: var(--ui-textarea-padding-inline-end, var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4)));
       font-size: var(--ui-font-size-md);
     }
 
-    :scope[data-ui-textarea-state~="maxRows"] {
+    :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="maxRows"] {
       max-block-size: calc(max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
     }
 
     @supports (field-sizing: content) {
-      :scope[data-ui-textarea-state~="autosize"] {
+      :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="autosize"] {
         field-sizing: content;
         min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
       }
@@ -152,13 +159,13 @@
 
     /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
     @media (pointer: coarse) {
-      :scope[data-ui-textarea-state~="size=sm"] {
+      :scope:where([data-component~="ui-textarea"])[data-ui-textarea-state~="size=sm"] {
         font-size: inherit;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-textarea"])[hidden] {
       display: none;
     }
 }

package/styles/ui-toast-region.css

@@ -1,72 +1,39 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-toast-region-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-toast-region"] { --html-next-scope-owner: "ui-toast-region" !important; }
+}
+@scope ([data-component~="ui-toast-region"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-toast-region-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-region-border {
+    @property --ui-toast-region-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-region-radius {
+    @property --ui-toast-region-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-region-shadow {
+    @property --ui-toast-region-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-region-enter-duration {
+    @property --ui-toast-region-enter-duration {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-region-exit-duration {
+    @property --ui-toast-region-exit-duration {
       syntax: "*";
       inherits: false;
     }
-@keyframes ui-toast-enter {
-      from {
-        opacity: 0;
-        transform: translateY(-1rem);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-@keyframes ui-toast-exit {
-      from {
-        opacity: 1;
-        transform: translateY(0);
-      }
-      to {
-        opacity: 0;
-        transform: translateY(0.75rem);
-      }
-    }
-@keyframes ui-toast-enter-bottom {
-      from {
-        opacity: 0;
-        transform: translateY(1rem);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-@keyframes ui-toast-exit-bottom {
-      from {
-        opacity: 1;
-        transform: translateY(0);
-      }
-      to {
-        opacity: 0;
-        transform: translateY(-0.75rem);
-      }
-    }
-@scope ([data-component~="ui-toast-region"]) 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-toast-region"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-toast-region-surface: var(--ui-toast-region-surface);
       --_ui-toast-region-border: var(--ui-toast-region-border);
@@ -97,29 +64,29 @@
       pointer-events: none;
     }
 
-    :scope:not(:popover-open) {
+    :scope:where([data-component~="ui-toast-region"]):not(:popover-open) {
       display: none;
     }
 
-    :scope[data-ui-toast-region-state~="placement=top-start"],
-    :scope[data-ui-toast-region-state~="placement=bottom-start"] {
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=top-start"],
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-start"] {
       left: auto;
       right: auto;
       inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
       transform: none;
     }
 
-    :scope[data-ui-toast-region-state~="placement=top-end"],
-    :scope[data-ui-toast-region-state~="placement=bottom-end"] {
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=top-end"],
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-end"] {
       left: auto;
       right: auto;
       inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
       transform: none;
     }
 
-    :scope[data-ui-toast-region-state~="placement=bottom"],
-    :scope[data-ui-toast-region-state~="placement=bottom-start"],
-    :scope[data-ui-toast-region-state~="placement=bottom-end"] {
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom"],
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-start"],
+    :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-end"] {
       top: auto;
       bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
     }
@@ -169,14 +136,58 @@
       pointer-events: none;
     }
 
-    :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"]) .toast {
+    :is(:scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom"], :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-start"], :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-end"]) .toast {
       animation-name: ui-toast-enter-bottom;
     }
 
-    :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"]) .toast.closing {
+    :is(:scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom"], :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-start"], :scope:where([data-component~="ui-toast-region"])[data-ui-toast-region-state~="placement=bottom-end"]) .toast.closing {
       animation-name: ui-toast-exit-bottom;
     }
 
+    @keyframes ui-toast-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes ui-toast-exit {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(0.75rem);
+      }
+    }
+
+    @keyframes ui-toast-enter-bottom {
+      from {
+        opacity: 0;
+        transform: translateY(1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes ui-toast-exit-bottom {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(-0.75rem);
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .toast, .toast.closing {
         animation: none;
@@ -193,15 +204,15 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-toast-region"])[hidden] {
       display: none;
     }
 }
 @scope ([data-component~="ui-toast-region"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope > .toast,
-    :scope > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-toast-region"]) > .toast,
+    :scope:where([data-component~="ui-toast-region"]) > :where([data-slotted], [data-slotted] *):is(*) {
       pointer-events: auto;
     }
 

package/styles/ui-toast.css

@@ -1,28 +1,35 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-toast-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-toast"] { --html-next-scope-owner: "ui-toast" !important; }
+}
+@scope ([data-component~="ui-toast"]) to ([data-component], [data-slotted]) {
+/* Component hooks stay on this toast; group overlay values may inherit from the region. */
+    @property --ui-toast-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-border {
+    @property --ui-toast-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-radius {
+    @property --ui-toast-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-shadow {
+    @property --ui-toast-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-toast-accent {
+    @property --ui-toast-accent {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-toast"]) to ([data-component], [data-slotted]) {
-/* Component hooks stay on this toast; group overlay values may inherit from the region. */
 
-    :scope {
+    :scope:where([data-component~="ui-toast"]) {
       --_ui-toast-accent: var(--ui-border-strong);
       --_ui-toast-surface: var(--ui-surface-muted);
 
@@ -47,19 +54,19 @@
       pointer-events: auto;
     }
 
-    :scope[data-ui-toast-state~="tone=info"] {
+    :scope:where([data-component~="ui-toast"])[data-ui-toast-state~="tone=info"] {
       --_ui-toast-accent: var(--ui-info-solid);
       --_ui-toast-surface: var(--ui-info-soft);
     }
-    :scope[data-ui-toast-state~="tone=success"] {
+    :scope:where([data-component~="ui-toast"])[data-ui-toast-state~="tone=success"] {
       --_ui-toast-accent: var(--ui-success-solid);
       --_ui-toast-surface: var(--ui-success-soft);
     }
-    :scope[data-ui-toast-state~="tone=warning"] {
+    :scope:where([data-component~="ui-toast"])[data-ui-toast-state~="tone=warning"] {
       --_ui-toast-accent: var(--ui-warning-solid);
       --_ui-toast-surface: var(--ui-warning-soft);
     }
-    :scope[data-ui-toast-state~="tone=danger"] {
+    :scope:where([data-component~="ui-toast"])[data-ui-toast-state~="tone=danger"] {
       --_ui-toast-accent: var(--ui-danger-solid);
       --_ui-toast-surface: var(--ui-danger-soft);
     }
@@ -71,7 +78,7 @@
     .action:not(:has(> *)) {
       display: none;
     }
-    :scope[hidden] {
+    :scope:where([data-component~="ui-toast"])[hidden] {
       display: none;
     }
 }