@threadlabs/looma 0.28.5 → 0.28.6

package/styles/ui-icon-button.css

@@ -1,84 +1,91 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-icon-button-active-scale {
+/* 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-icon-button"] { --html-next-scope-owner: "ui-icon-button" !important; }
+}
+@scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-button-active-scale {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-active-surface {
+    @property --ui-icon-button-active-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-border {
+    @property --ui-icon-button-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-disabled-filter {
+    @property --ui-icon-button-disabled-filter {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-disabled-opacity {
+    @property --ui-icon-button-disabled-opacity {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-hover-border {
+    @property --ui-icon-button-hover-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-hover-surface {
+    @property --ui-icon-button-hover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-hover-text {
+    @property --ui-icon-button-hover-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-icon-size {
+    @property --ui-icon-button-icon-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-icon-stroke-width {
+    @property --ui-icon-button-icon-stroke-width {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-outline-surface {
+    @property --ui-icon-button-outline-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-outline-text {
+    @property --ui-icon-button-outline-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-radius {
+    @property --ui-icon-button-radius {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-size {
+    @property --ui-icon-button-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-solid-hover-surface {
+    @property --ui-icon-button-solid-hover-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-solid-shadow {
+    @property --ui-icon-button-solid-shadow {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-solid-surface {
+    @property --ui-icon-button-solid-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-solid-text {
+    @property --ui-icon-button-solid-text {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-button-surface {
+    @property --ui-icon-button-surface {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-icon-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-icon-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. */
@@ -97,11 +104,11 @@
       color: var(--ui-text-secondary);
     }
 
-    :scope:dir(rtl) {
+    :scope:where([data-component~="ui-icon-button"]):dir(rtl) {
       --_ui-action-start: -1px;
     }
 
-    :scope[data-ui-icon-button-state~="tone=accent"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=accent"] {
       --_icon-button-border: var(--ui-accent-solid);
       --_icon-button-hover-border: var(--ui-accent-hover);
       --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
@@ -110,17 +117,17 @@
     }
 
     /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-    :scope[data-ui-icon-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=neutral"] {
       --_icon-button-solid-surface: var(--ui-text-primary);
       --_icon-button-solid-hover-surface: var(--ui-text-primary);
       --_icon-button-solid-text: var(--ui-surface-default);
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] {
       position: relative;
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"]::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]::before {
       content: "";
       position: absolute;
       inset: 50% auto auto 50%;
@@ -135,33 +142,33 @@
       pointer-events: none;
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
       inline-size: 2px;
       block-size: 20px;
       background: var(--ui-border-strong);
       opacity: 1;
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"]:disabled::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:disabled::before {
       opacity: 0;
     }
 
     /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
        proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-    :scope[data-ui-icon-button-state~="anticipatory"] .content {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] .content {
       opacity: 1;
       transform: scale(1);
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease), transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -169,11 +176,11 @@
       }
     }
 
-    :scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-icon-button"]) {
       /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
       --_size: 2rem;
       appearance: none;
@@ -200,7 +207,7 @@
     }
 
     @media (hover: none), (pointer: coarse) {
-      :scope[data-ui-icon-button-state~="anticipatory"]::before {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]::before {
         opacity: 0;
       }
     }
@@ -208,11 +215,11 @@
     /* A touch target without a bigger button: an invisible hit area, at least the control
        minimum, centred on the button (::before is the anticipatory guide). */
     @media (pointer: coarse) {
-      :scope {
+      :scope:where([data-component~="ui-icon-button"]) {
         position: relative;
       }
 
-      :scope::after {
+      :scope:where([data-component~="ui-icon-button"])::after {
         content: "";
         position: absolute;
         inset: 50% auto auto 50%;
@@ -222,11 +229,11 @@
       }
     }
 
-    html[data-ui-input-modality="touch"] :scope {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-icon-button"]) {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :scope::after {
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-icon-button"])::after {
       content: "";
       position: absolute;
       inset: 50% auto auto 50%;
@@ -235,7 +242,7 @@
       transform: translate(-50%, -50%);
     }
 
-    :scope[data-ui-icon-button-state~="size=sm"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=sm"] {
       --_size: 1.75rem;
       inline-size: var(--ui-icon-button-size, var(--_size));
       block-size: var(--ui-icon-button-size, var(--_size));
@@ -243,7 +250,7 @@
       min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
-    :scope[data-ui-icon-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=lg"] {
       --_size: 2.5rem;
       inline-size: var(--ui-icon-button-size, var(--_size));
       block-size: var(--ui-icon-button-size, var(--_size));
@@ -252,33 +259,33 @@
     }
 
     /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
-    :scope[data-ui-icon-button-state~="matchButton"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
       --_size: var(--ui-control-size-md);
       block-size: auto;
       align-self: stretch;
     }
 
-    :scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
       --_size: var(--ui-control-size-sm);
     }
 
-    :scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
       --_size: var(--ui-control-size-lg);
     }
 
     @media (pointer: coarse) {
-      :scope[data-ui-icon-button-state~="matchButton"] {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
         inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
         min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
         min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
       }
     }
 
-    :scope[data-ui-icon-button-state~="round"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="round"] {
       border-radius: var(--ui-radius-round);
     }
 
-    :scope[data-ui-icon-button-state~="variant=outline"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"] {
       border-color: var(--ui-icon-button-border, var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong))));
       background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
       background-image: none;
@@ -286,50 +293,50 @@
       box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
     }
 
-    :scope[data-ui-icon-button-state~="variant=solid"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"] {
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
       background-image: none;
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
       box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
-    :scope:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"]):hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
       background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
     }
 
-    :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
 
-    :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
     }
 
-    :scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
-    :scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
     }
 
-    :scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
       color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
       box-shadow: var(--ui-pressed);
     }
 
     /* Native toggle state persists after pointer release, including during loading. */
-    :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 12%, var(--ui-surface-default)));
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
-    :scope:active:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"]):active:enabled:not([aria-disabled="true"]) {
       scale: var(--ui-icon-button-active-scale, 0.96);
     }
 
-    :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) {
+    :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) {
       cursor: progress;
     }
 
@@ -339,56 +346,56 @@
       justify-content: center;
     }
 
-    :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]) .content {
+    :is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"]) .content {
       display: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :scope[data-ui-icon-button-state~="anticipatory"] .content {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] .content {
         transition: none;
       }
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-icon-button"]):focus-visible {
       outline: none;
       box-shadow: var(--ui-focus-halo);
     }
 
-    :scope[data-ui-icon-button-state~="variant=outline"]:focus-visible {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:focus-visible {
       box-shadow:
         var(--ui-action-shadow, var(--_ui-action-shadow)),
         var(--ui-focus-halo);
     }
 
-    :scope[data-ui-icon-button-state~="variant=solid"]:focus-visible {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:focus-visible {
       box-shadow:
         var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :scope:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"]):is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
-    :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
       box-shadow:
         var(--ui-pressed),
         var(--ui-focus-halo);
     }
 
     @media (forced-colors: active) {
-      :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-2 * var(--ui-focus-width));
       }
-      :scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
         outline-offset: var(--ui-focus-width);
       }
     }
 
     /* Disabled is a flat neutral control, independent of the active variant's tone. */
-    :scope:disabled {
+    :scope:where([data-component~="ui-icon-button"]):disabled {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
@@ -399,11 +406,11 @@
       background-image: none;
     }
 
-    :scope[data-ui-icon-button-state~="variant=ghost"]:disabled {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"]:disabled {
       border-color: transparent;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-icon-button"]) {
       --_icon-button-icon-default: var(--ui-icon-size-md);
       /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
          defaults, which its own --ui-icon-* hooks still override. */
@@ -411,16 +418,16 @@
       --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
-    :scope[data-ui-icon-button-state~="size=sm"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=sm"] {
       --_icon-button-icon-default: var(--ui-icon-size-sm);
     }
 
-    :scope[data-ui-icon-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="size=lg"] {
       --_icon-button-icon-default: var(--ui-icon-size-lg);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-icon-button"])[hidden] {
       display: none;
     }
 }

package/styles/ui-icon.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-icon-size {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-icon"] { --html-next-scope-owner: "ui-icon" !important; }
+}
+@scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-icon-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-icon-stroke-width {
+    @property --ui-icon-stroke-width {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-icon"]) 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-icon"]) {
       /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
          sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
       --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
@@ -28,7 +35,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-icon"])[hidden] {
       display: none;
     }
 }

package/styles/ui-image.css

@@ -1,6 +1,13 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-image"] { --html-next-scope-owner: "ui-image" !important; }
+}
 @scope ([data-component~="ui-image"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-image"]) {
       display: flex;
       justify-content: flex-start;
       box-sizing: border-box;
@@ -9,21 +16,21 @@
       margin: 0;
       padding: var(--ui-space-3) 0;
     }
-    :scope[data-ui-image-state~="placement=center"] {
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=center"] {
       justify-content: center;
     }
-    :scope[data-ui-image-state~="placement=wrap-left"] {
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"] {
       float: left;
       padding-inline-end: var(--ui-space-4);
     }
-    :scope[data-ui-image-state~="placement=wrap-right"] {
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"] {
       float: right;
       padding-inline-start: var(--ui-space-4);
     }
-    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) {
+    :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) {
       inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
     }
-    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .frame {
+    :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .frame {
       inline-size: 100%;
     }
     .frame {
@@ -35,7 +42,7 @@
       align-self: flex-start;
       border-radius: var(--ui-radius-md);
     }
-    :scope[data-ui-image-state~="selected"] .frame {
+    :scope:where([data-component~="ui-image"])[data-ui-image-state~="selected"] .frame {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: var(--ui-border-width);
     }
@@ -49,7 +56,7 @@
       background: transparent;
       touch-action: none;
     }
-    .handle::after {
+    .handle:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
       inset: 8px;
@@ -81,16 +88,16 @@
       right: -12px;
       cursor: nwse-resize;
     }
-    .handles[hidden], :scope[hidden] {
+    .handles[hidden], :scope:where([data-component~="ui-image"])[hidden] {
       display: none;
     }
     @media (max-width: 767px) {
-      :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) {
+      :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) {
         float: none;
         inline-size: 100%;
         padding-inline: 0;
       }
-      :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .handles {
+      :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .handles {
         display: none;
       }
     }
@@ -99,7 +106,7 @@
         inline-size: 44px;
         block-size: 44px;
       }
-      .handle::after {
+      .handle:where(:not([data-component], [data-slotted]))::after {
         inset: 18px;
       }
       .handle[data-corner="top-left"] {
@@ -120,18 +127,18 @@
       }
     }
     @media (forced-colors: active) {
-      :scope[data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+      :scope:where([data-component~="ui-image"])[data-ui-image-state~="selected"] .frame, .handle:focus-visible {
         outline-color: Highlight;
       }
-      .handle::after {
+      .handle:where(:not([data-component], [data-slotted]))::after {
         border-color: Highlight;
         background: Canvas;
       }
     }
 }
 @scope ([data-component~="ui-image"]) to ([data-component]) {
-:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .frame img,
-    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]) .frame :where([data-slotted], [data-slotted] *):is(img) {
+:scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .frame img,
+    :scope:where([data-component~="ui-image"]):is(:scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-left"], :scope:where([data-component~="ui-image"])[data-ui-image-state~="placement=wrap-right"]) .frame :where([data-slotted], [data-slotted] *):is(img) {
       inline-size: 100%;
     }
     .frame img, .frame :where([data-slotted], [data-slotted] *):is(img) {
@@ -141,7 +148,7 @@
       margin: 0;
       border-radius: inherit;
     }
-    :scope[data-resizing] .frame img, :scope[data-resizing] .frame :where([data-slotted], [data-slotted] *):is(img) {
+    :scope:where([data-component~="ui-image"])[data-resizing] .frame img, :scope:where([data-component~="ui-image"])[data-resizing] .frame :where([data-slotted], [data-slotted] *):is(img) {
       inline-size: 100%;
     }
     @media (max-width: 767px) {