@threadlabs/looma 0.28.5 → 0.28.6

package/styles/ui-button.css

@@ -1,80 +1,87 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-button-active-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-button"] { --html-next-scope-owner: "ui-button" !important; }
+}
+@scope ([data-component~="ui-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-button-active-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-border {
+    @property --ui-button-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-disabled-filter {
+    @property --ui-button-disabled-filter {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-disabled-opacity {
+    @property --ui-button-disabled-opacity {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-ghost-active-surface {
+    @property --ui-button-ghost-active-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-ghost-hover-surface {
+    @property --ui-button-ghost-hover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-ghost-text {
+    @property --ui-button-ghost-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-hover-border {
+    @property --ui-button-hover-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-hover-surface {
+    @property --ui-button-hover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-link-hover-text {
+    @property --ui-button-link-hover-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-link-text {
+    @property --ui-button-link-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-min-block-size {
+    @property --ui-button-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-radius {
+    @property --ui-button-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-shadow {
+    @property --ui-button-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-solid-shadow {
+    @property --ui-button-solid-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-surface {
+    @property --ui-button-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-text {
+    @property --ui-button-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-button-white-space {
+    @property --ui-button-white-space {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-button"]) 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-button"]) {
       /* Optional inherited action-group values keep text and icon actions under the same light.
          One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
          A single ambient lift avoids stacking a face gradient or another inset bevel. */
@@ -105,21 +112,21 @@
       color: var(--_tone-text);
     }
 
-    :scope:dir(rtl) {
+    :scope:where([data-component~="ui-button"]):dir(rtl) {
       --_ui-action-start: -1px;
     }
 
-    :scope[data-ui-button-state~="align=start"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="align=start"] {
       justify-content: flex-start;
       text-align: start;
     }
 
-    :scope[data-ui-button-state~="stretch"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="stretch"] {
       display: flex;
       inline-size: 100%;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-button"]) {
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
@@ -147,7 +154,7 @@
     }
 
     /* An anchor keeps the boxed button look even when an app styles ordinary links. */
-    :scope:is(a) {
+    :scope:where([data-component~="ui-button"]):is(a) {
       text-decoration: none;
     }
 
@@ -159,7 +166,7 @@
 
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
-    :scope:not([variant="link"]):has(.badge:not(:empty)) {
+    :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
       padding-block: var(--ui-space-0-5);
     }
 
@@ -174,29 +181,29 @@
     }
 
     @supports (text-box-trim: trim-both) {
-      :scope {
+      :scope:where([data-component~="ui-button"]) {
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
     }
 
-    :scope[data-ui-button-state~="size=xs"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
       min-block-size: 1.5rem;
       padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
       font-size: var(--ui-font-size-xs);
     }
 
-    :scope[data-ui-button-state~="shape=pill"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="shape=pill"] {
       border-radius: var(--ui-button-radius, var(--ui-radius-round));
     }
 
-    :scope[data-ui-button-state~="size=sm"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
       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-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
@@ -204,7 +211,7 @@
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
-    :scope[data-ui-button-state~="variant=card"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center;
@@ -217,10 +224,10 @@
       box-shadow: none;
       background-image: none;
     }
-    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :scope[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -241,40 +248,40 @@
 
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
-    :scope:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"]):hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--_tone-hover));
       background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
     }
 
     /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
 
-    :scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-    :scope:active:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
       box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
-    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -283,7 +290,7 @@
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :scope[data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=neutral"] {
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -291,7 +298,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="tone=danger"], :scope[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=danger"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
       --_hue-active: var(--ui-danger-hover);
@@ -299,7 +306,7 @@
       --_on-hue: var(--ui-on-danger);
     }
 
-    :scope[data-ui-button-state~="tone=success"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=success"] {
       --_hue: var(--ui-success);
       --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
       --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
@@ -307,7 +314,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="tone=warning"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=warning"] {
       --_hue: var(--ui-warning);
       --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
       --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
@@ -315,7 +322,7 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :scope[data-ui-button-state~="tone=info"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=info"] {
       --_hue: var(--ui-info);
       --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
       --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
@@ -324,7 +331,7 @@
     }
 
     /* A value picker is a field, with Select's quiet edge and resting lift. */
-    :scope[data-ui-button-state~="variant=field"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"] {
       --_ui-field-shadow: var(--ui-shadow-sm);
       border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -334,23 +341,23 @@
       box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
     }
 
-    :scope[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
       background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
     }
 
-    :scope[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       --_ui-field-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-button-state~="variant=field"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:focus-visible {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-button-shadow, var(--_ui-field-shadow)),
         var(--ui-control-focus-halo-shadow);
     }
 
-    :scope[data-ui-button-state~="variant=ghost"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -358,40 +365,40 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :scope[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
        edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-    :scope[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
     }
 
     /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-button"]):focus-visible {
       outline: none;
       box-shadow:
         var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :scope[data-ui-button-state~="variant=solid"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"]:focus-visible {
       box-shadow:
         var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible {
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
     /* A loading action stays visually active; only an explicitly disabled action takes the
        neutral disabled palette. Its flat surface and muted ink make the state unambiguous. */
-    :scope:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
@@ -402,19 +409,19 @@
       box-shadow: none;
     }
 
-    :is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible {
+    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="loading"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="pending"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :scope, :scope[data-ui-button-state~="size=sm"] {
+      :scope:where([data-component~="ui-button"]), :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -424,13 +431,13 @@
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="variant=link"],
-    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="size=xs"] {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="variant=link"]::after,
-    html[data-ui-input-modality="touch"] :scope[data-ui-button-state~="size=xs"]::after {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]::after, 
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"]::after {
       position: absolute;
       inset: 50% auto auto 50%;
       inline-size: max(100%, var(--ui-control-min-block-size));
@@ -441,7 +448,7 @@
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    :scope[data-ui-button-state~="variant=link"] {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
       display: inline;
       min-block-size: 0;
       padding: 0;
@@ -458,24 +465,24 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :scope[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :scope[data-ui-button-state~="variant=link"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
@@ -483,7 +490,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-button"])[hidden] {
       display: none;
     }
 }

package/styles/ui-callout.css

@@ -1,52 +1,59 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-callout-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-callout"] { --html-next-scope-owner: "ui-callout" !important; }
+}
+@scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-callout-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-border-width {
+    @property --ui-callout-border-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-gap {
+    @property --ui-callout-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-icon {
+    @property --ui-callout-icon {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-icon-column {
+    @property --ui-callout-icon-column {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-icon-size {
+    @property --ui-callout-icon-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-leading-border-width {
+    @property --ui-callout-leading-border-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-padding-block {
+    @property --ui-callout-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-padding-inline {
+    @property --ui-callout-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-surface {
+    @property --ui-callout-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-callout-text {
+    @property --ui-callout-text {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-callout"]) 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-callout"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-callout-icon-column: var(--ui-callout-icon-column);
       --_ui-callout-icon: var(--ui-callout-icon);
@@ -110,7 +117,7 @@
       font-weight: var(--ui-font-semibold);
     }
 
-    :scope[data-ui-callout-state~="tone=neutral"], :scope[data-ui-callout-state~="tone=note"] {
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=neutral"], :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=note"] {
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
       --_ui-selection-context-text: initial;
@@ -119,31 +126,31 @@
       --_callout-icon: var(--ui-text-secondary);
     }
 
-    :scope[data-ui-callout-state~="tone=tip"] {
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=tip"] {
       --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
-    :scope[data-ui-callout-state~="tone=important"] {
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=important"] {
       --_callout-surface: var(--ui-accent-soft);
       --_callout-border: var(--ui-accent-solid);
       --_callout-icon: var(--ui-accent-solid);
     }
 
-    :scope[data-ui-callout-state~="tone=warning"] {
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=warning"] {
       --_callout-surface: var(--ui-warning-soft);
       --_callout-border: var(--ui-warning-solid);
       --_callout-icon: var(--ui-warning-solid);
     }
 
-    :scope[data-ui-callout-state~="tone=success"] {
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=success"] {
       --_callout-surface: var(--ui-success-soft);
       --_callout-border: var(--ui-success-solid);
       --_callout-icon: var(--ui-success-solid);
     }
 
-    :scope[data-ui-callout-state~="tone=danger"], :scope[data-ui-callout-state~="tone=caution"] {
+    :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=danger"], :scope:where([data-component~="ui-callout"])[data-ui-callout-state~="tone=caution"] {
       --_callout-surface: var(--ui-danger-soft);
       --_callout-border: var(--ui-danger-solid);
       --_callout-icon: var(--ui-danger-solid);
@@ -152,7 +159,7 @@
     /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-callout"])[hidden] {
       display: none;
     }
 }