@threadlabs/looma 0.28.5 → 0.28.6

package/styles/ui-badge.css

@@ -1,68 +1,75 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-badge-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-badge"] { --html-next-scope-owner: "ui-badge" !important; }
+}
+@scope ([data-component~="ui-badge"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-badge-border {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-square-size {
+    @property --ui-badge-square-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-circle-size {
+    @property --ui-badge-circle-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-circle-opacity {
+    @property --ui-badge-circle-opacity {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-dot-size {
+    @property --ui-badge-dot-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-color {
+    @property --ui-badge-color {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-font-size {
+    @property --ui-badge-font-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-font-weight {
+    @property --ui-badge-font-weight {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-line-height {
+    @property --ui-badge-line-height {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-min-block-size {
+    @property --ui-badge-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-padding-block {
+    @property --ui-badge-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-padding-inline {
+    @property --ui-badge-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-point {
+    @property --ui-badge-point {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-surface {
+    @property --ui-badge-surface {
       syntax: "*";
       inherits: false;
     }
-@property --ui-badge-text {
+    @property --ui-badge-text {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-badge"]) 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-badge"]) {
       --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
       --_badge-text: var(--ui-text-secondary);
       /* Sit between the soft fill and its stronger theme ink. */
@@ -131,15 +138,15 @@
     /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
        Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
-      :scope {
+      :scope:where([data-component~="ui-badge"]) {
         display: inline-block;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
         align-content: center;
         text-box-trim: none;
       }
-      :scope:has(.icon:not(:empty)),
-      :scope:has(.label svg) {
+      :scope:where([data-component~="ui-badge"]):has(.icon:not(:empty)),
+      :scope:where([data-component~="ui-badge"]):has(.label svg) {
         display: inline-flex;
         text-box-trim: none;
       }
@@ -151,7 +158,7 @@
       }
     }
 
-    :scope[data-ui-badge-state~="size=xs"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="size=xs"] {
       box-sizing: border-box;
       min-inline-size: 1rem;
       min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -162,66 +169,66 @@
       line-height: var(--ui-badge-line-height, 1);
     }
 
-    :scope[data-ui-badge-state~="size=sm"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="size=sm"] {
       font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
       line-height: var(--ui-badge-line-height, 1);
     }
 
-    :scope[data-ui-badge-state~="tone=accent"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="tone=accent"] {
       --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
       --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
     }
 
-    :scope[data-ui-badge-state~="tone=danger"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="tone=danger"] {
       --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
       --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
       --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
     }
 
-    :scope[data-ui-badge-state~="tone=success"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="tone=success"] {
       --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
       --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
       --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
     }
 
-    :scope[data-ui-badge-state~="tone=warning"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="tone=warning"] {
       --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
       --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
       --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
     }
 
-    :scope[data-ui-badge-state~="tone=info"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="tone=info"] {
       --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
       --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
       --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
     }
 
-    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
       --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
       --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
       --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
       --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
       --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
       --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -229,7 +236,7 @@
 
     /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
        invalid while the hook is unset. */
-    :scope[data-ui-badge-state~="variant=solid"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=solid"] {
       --_badge-color-surface: var(--_badge-color-ink);
       --_badge-color-border: var(--_badge-color-ink);
       --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
@@ -237,7 +244,7 @@
 
     /* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
        toward the theme text to retain contrast against that composed surface. */
-    :scope[data-ui-badge-state~="variant=inverse"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"] {
       --_badge-color-surface: color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%, transparent);
       --_badge-color-border: var(--_badge-color-surface);
       --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
@@ -250,7 +257,7 @@
 
     /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
        Dark controls retain a shaded surface and theme ink with a quieter rim. */
-    :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"] {
       --_badge-color-surface: light-dark(
         color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(--ui-badge-circle-opacity, 66%), transparent),
         color-mix(in srgb, color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(--ui-badge-circle-opacity, 56%), transparent)
@@ -281,7 +288,7 @@
 
     /* A count can keep its containing control's contrasting ink instead of reversing it.
        The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
-    :scope[data-ui-badge-state~="variant=overlay"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=overlay"] {
       --_badge-outline-surface: var(--ui-badge-surface, color-mix(in srgb, currentColor 6%, transparent));
       color: var(--ui-badge-text, inherit);
       border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
@@ -290,11 +297,11 @@
 
     /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
        surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
-    :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
       color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
     }
 
-    :scope[data-ui-badge-state~="variant=outline"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"] {
       --_badge-surface: var(--ui-surface-default);
       --_badge-border: var(--ui-border-strong);
       --_badge-text: var(--ui-text-secondary);
@@ -303,33 +310,33 @@
       --_badge-color-border: var(--_badge-color-ink);
     }
 
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"] {
       --_badge-border: var(--ui-accent-solid);
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"] {
       --_badge-border: var(--ui-danger-solid);
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"] {
       --_badge-border: var(--ui-success-solid);
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"] {
       --_badge-border: var(--ui-warning-solid);
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
-    :scope[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"] {
       --_badge-border: var(--ui-info-solid);
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-    :scope[data-ui-badge-state~="shape=square"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
       display: inline-flex;
       box-sizing: border-box;
@@ -343,26 +350,26 @@
       text-box-trim: none;
     }
 
-    :scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"] {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
     }
 
-    :scope[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"] {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2 + var(--ui-space-2)));
     }
 
-    :scope[data-ui-badge-state~="shape=square"] .label {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label {
       display: inline-flex;
       align-items: center;
       justify-content: center;
     }
 
-    :scope[data-ui-badge-state~="shape=square"] .label:empty {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label:empty {
       display: none;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
-    :scope[data-ui-badge-state~="shape=circle"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] {
       --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
       display: inline-flex;
       flex: none;
@@ -375,19 +382,19 @@
       text-box-trim: none;
     }
 
-    :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"] {
       --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
     }
 
-    :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
       --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
     }
 
-    :scope[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"] {
       --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
     }
 
-    :scope[data-ui-badge-state~="shape=circle"] .label {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -395,15 +402,15 @@
       text-box-trim: none;
     }
 
-    :scope[data-ui-badge-state~="shape=circle"] .label:empty {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label:empty {
       display: none;
     }
 
     /* Center capital and numeral ink, rather than the font's ascent/descent line box.
        Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
     @supports (text-box-trim: trim-both) {
-      :scope[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
-      :scope[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
+      :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
+      :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
         display: block;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
@@ -412,7 +419,7 @@
     }
 
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-    :scope[data-ui-badge-state~="shape=dot"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=dot"] {
       position: relative;
       box-sizing: border-box;
       flex: none;
@@ -425,7 +432,7 @@
       text-box-trim: none;
     }
 
-    :scope[data-ui-badge-state~="shape=dot"] .label {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=dot"] .label {
       position: absolute;
       inline-size: 1px;
       block-size: 1px;
@@ -436,7 +443,7 @@
 
     /* The clipped point needs an inset surface over an outer border-colour shape: a native border
        has no diagonal edge to follow. Keep this edge for every tag variant. */
-    :scope[data-ui-badge-state~="shape=tag"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"] {
       --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
       position: relative;
@@ -448,7 +455,7 @@
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
-    :scope[data-ui-badge-state~="shape=tag"]::before {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"]::before {
       content: "";
       position: absolute;
       inset: 0;
@@ -458,40 +465,40 @@
       pointer-events: none;
     }
 
-    :scope[data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"] {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"] {
       background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
     }
 
-    :scope[data-ui-badge-state~="shape=tag"]:dir(rtl) {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"]:dir(rtl) {
       padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
       padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
-    :scope[data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
     @media (forced-colors: active) {
-      :scope[data-ui-badge-state~="shape=dot"] {
+      :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=dot"] {
         forced-color-adjust: none;
         border-color: CanvasText;
         background: CanvasText;
       }
 
-      :scope[data-ui-badge-state~="shape=tag"] {
+      :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"] {
         forced-color-adjust: none;
         background: CanvasText;
         color: CanvasText;
       }
 
-      :scope[data-ui-badge-state~="shape=tag"]::before {
+      :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"]::before {
         background: Canvas;
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-badge"])[hidden] {
       display: none;
     }
 }
@@ -540,13 +547,13 @@
 
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
-    :scope[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
       margin-inline-end: 0;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
 
-    :scope[data-ui-badge-state~="shape=circle"] .label :where([data-slotted], [data-slotted] *):is(svg) {
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label :where([data-slotted], [data-slotted] *):is(svg) {
       margin-inline-end: 0;
     }
 

package/styles/ui-breadcrumb-item.css

@@ -1,8 +1,15 @@
-/* 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-breadcrumb-item"] { --html-next-scope-owner: "ui-breadcrumb-item" !important; }
+}
 @scope ([data-component~="ui-breadcrumb-item"]) to ([data-component], [data-slotted]) {
 /* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
        every step but the first. An icon slotted before the name sits with it. */
-    :scope {
+    :scope:where([data-component~="ui-breadcrumb-item"]) {
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-2);
@@ -16,7 +23,7 @@
       font-size: var(--ui-font-size-sm);
     }
 
-    :scope:first-child .separator {
+    :scope:where([data-component~="ui-breadcrumb-item"]):first-child .separator {
       display: none;
     }
 
@@ -27,13 +34,13 @@
       min-inline-size: 0;
     }
 
-    :scope[data-ui-breadcrumb-item-state~="current"] .content {
+    :scope:where([data-component~="ui-breadcrumb-item"])[data-ui-breadcrumb-item-state~="current"] .content {
       color: var(--ui-text-primary);
       font-weight: var(--ui-font-medium);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-breadcrumb-item"])[hidden] {
       display: none;
     }
 }

package/styles/ui-breadcrumbs.css

@@ -1,8 +1,15 @@
-/* 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-breadcrumbs"] { --html-next-scope-owner: "ui-breadcrumbs" !important; }
+}
 @scope ([data-component~="ui-breadcrumbs"]) to ([data-component], [data-slotted]) {
 /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */
-    :scope {
+    :scope:where([data-component~="ui-breadcrumbs"]) {
       display: block;
       min-inline-size: 0;
       color: var(--ui-text-muted);
@@ -20,7 +27,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-breadcrumbs"])[hidden] {
       display: none;
     }
 }