@threadlabs/looma 0.28.5 → 0.28.7

package/styles/ui-editor-image-toolbar.css

@@ -1 +1 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */

package/styles/ui-editor-insert-table-grid.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-editor-insert-table-grid"] { --html-next-scope-owner: "ui-editor-insert-table-grid" !important; }
+}
 @scope ([data-component~="ui-editor-insert-table-grid"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-insert-table-grid"]) {
       padding: var(--ui-space-3);
       background: var(--ui-surface);
       border: var(--ui-border-width) solid var(--ui-border-strong);
@@ -40,7 +47,7 @@
         calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
-    :scope:dir(rtl) .grid {
+    :scope:where([data-component~="ui-editor-insert-table-grid"]):dir(rtl) .grid {
       --_ui-scroll-fade-direction: to left;
     }
 
@@ -89,7 +96,7 @@
       }
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-insert-table-grid"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-link-card.css

@@ -0,0 +1 @@
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */

package/styles/ui-editor-mention-menu-item.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-editor-mention-menu-item"] { --html-next-scope-owner: "ui-editor-mention-menu-item" !important; }
+}
 @scope ([data-component~="ui-editor-mention-menu-item"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-mention-menu-item"]) {
       display: flex;
       align-items: center;
       min-block-size: 44px;
@@ -10,19 +17,20 @@
       list-style: none;
     }
 
-    :scope[aria-selected="true"] {
+    :scope:where([data-component~="ui-editor-mention-menu-item"])[aria-selected="true"] {
       background: var(--ui-accent-subtle);
     }
 
     /* The highlight and the initials circle share a tint; on the highlighted row the circle takes
        the surface and a fine accent ring, so the initials stay visible. */
-    :scope[aria-selected="true"] .avatar {
+    :scope:where([data-component~="ui-editor-mention-menu-item"])[aria-selected="true"] .avatar {
       background: var(--ui-surface);
       box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
     }
 
-    /* A slotted Avatar (a person's photo) is its own circle. */
-    :scope .avatar:has(> [data-component~="ui-avatar"]) {
+    /* A slotted Avatar (a person's photo) is its own circle. Its root carries data-component in HTML
+       and its tag as a class in Vue; neither tool lowers a component tag inside :has(). */
+    :scope:where([data-component~="ui-editor-mention-menu-item"]) .avatar:has(> :is([data-component~="ui-avatar"], .ui-avatar)) {
       background: none;
       box-shadow: none;
     }
@@ -64,7 +72,7 @@
       font-size: var(--ui-font-size-xs);
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-mention-menu-item"])[hidden] {
       display: none;
     }
 }
@@ -72,5 +80,6 @@
 /* The highlight and the initials circle share a tint; on the highlighted row the circle takes
        the surface and a fine accent ring, so the initials stay visible. */
 
-    /* A slotted Avatar (a person's photo) is its own circle. */
+    /* A slotted Avatar (a person's photo) is its own circle. Its root carries data-component in HTML
+       and its tag as a class in Vue; neither tool lowers a component tag inside :has(). */
 }

package/styles/ui-editor-mention-menu.css

@@ -1,16 +1,23 @@
-/* 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-editor-mention-menu"] { --html-next-scope-owner: "ui-editor-mention-menu" !important; }
+}
 @scope ([data-component~="ui-editor-mention-menu"]) to ([data-component], [data-slotted]) {
-:scope[popover] {
+:scope:where([data-component~="ui-editor-mention-menu"])[popover] {
       position: fixed;
       inset: auto;
       margin: 0;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-mention-menu"]) {
       user-select: none;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-mention-menu"]) {
       display: flex;
       overflow: hidden;
       flex-direction: column;
@@ -32,7 +39,7 @@
       font-weight: var(--ui-font-semibold);
     }
 
-    :scope > .header:empty, :scope > .empty:empty {
+    :scope:where([data-component~="ui-editor-mention-menu"]) > .header:empty, :scope:where([data-component~="ui-editor-mention-menu"]) > .empty:empty {
       display: none;
     }
 
@@ -141,7 +148,7 @@
     }
 
     @media (max-width: 767px) {
-      :scope {
+      :scope:where([data-component~="ui-editor-mention-menu"]) {
         border-bottom: 0;
         border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
       }
@@ -151,7 +158,7 @@
       }
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-mention-menu"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-slash-menu-group.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-editor-slash-menu-group"] { --html-next-scope-owner: "ui-editor-slash-menu-group" !important; }
+}
 @scope ([data-component~="ui-editor-slash-menu-group"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-slash-menu-group"]) {
       display: block;
       list-style: none;
     }
@@ -15,7 +22,7 @@
       padding: 0;
       list-style: none;
     }
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-slash-menu-group"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-slash-menu-item.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-editor-slash-menu-item"] { --html-next-scope-owner: "ui-editor-slash-menu-item" !important; }
+}
 @scope ([data-component~="ui-editor-slash-menu-item"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-slash-menu-item"]) {
       display: flex;
       align-items: center;
       gap: var(--ui-space-3);
@@ -10,16 +17,16 @@
       list-style: none;
     }
 
-    :scope[aria-selected="true"] {
+    :scope:where([data-component~="ui-editor-slash-menu-item"])[aria-selected="true"] {
       background: var(--ui-accent-subtle);
     }
-    :scope[aria-disabled="true"] {
+    :scope:where([data-component~="ui-editor-slash-menu-item"])[aria-disabled="true"] {
       background: var(--ui-disabled-surface);
       cursor: not-allowed;
     }
-    :scope[aria-disabled="true"] .title,
-    :scope[aria-disabled="true"] .description,
-    :scope[aria-disabled="true"] .icon {
+    :scope:where([data-component~="ui-editor-slash-menu-item"])[aria-disabled="true"] .title,
+    :scope:where([data-component~="ui-editor-slash-menu-item"])[aria-disabled="true"] .description,
+    :scope:where([data-component~="ui-editor-slash-menu-item"])[aria-disabled="true"] .icon {
       color: var(--ui-disabled-text);
     }
 
@@ -61,7 +68,7 @@
       font-size: var(--ui-font-size-xs);
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-slash-menu-item"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-slash-menu.css

@@ -1,16 +1,23 @@
-/* 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-editor-slash-menu"] { --html-next-scope-owner: "ui-editor-slash-menu" !important; }
+}
 @scope ([data-component~="ui-editor-slash-menu"]) to ([data-component], [data-slotted]) {
-:scope[popover] {
+:scope:where([data-component~="ui-editor-slash-menu"])[popover] {
       position: fixed;
       inset: auto;
       margin: 0;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-slash-menu"]) {
       user-select: none;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-slash-menu"]) {
       background: var(--ui-surface);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-dialog);
@@ -21,7 +28,7 @@
     }
 
     @media (max-width: 767px) {
-      :scope {
+      :scope:where([data-component~="ui-editor-slash-menu"]) {
         border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
         border-bottom: none;
       }
@@ -40,7 +47,7 @@
       letter-spacing: 0.05em;
     }
 
-    :scope > .header:empty, :scope > .footer:empty, :scope > .empty:empty {
+    :scope:where([data-component~="ui-editor-slash-menu"]) > .header:empty, :scope:where([data-component~="ui-editor-slash-menu"]) > .footer:empty, :scope:where([data-component~="ui-editor-slash-menu"]) > .empty:empty {
       display: none;
     }
 
@@ -162,7 +169,7 @@
       color: var(--ui-text-muted);
     }
 
-    :scope kbd {
+    :scope:where([data-component~="ui-editor-slash-menu"]) kbd {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -175,7 +182,7 @@
       color: var(--ui-text-secondary);
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-slash-menu"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-surface.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-editor-surface"] { --html-next-scope-owner: "ui-editor-surface" !important; }
+}
 @scope ([data-component~="ui-editor-surface"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-surface"]) {
       display: flex;
       flex-direction: column;
       min-inline-size: 0;
       max-inline-size: 100%;
     }
     /* The document renderer consumes these inherited surface settings. They do not style controls. */
-    :scope[data-ui-editor-surface-state~="density=compact"] {
+    :scope:where([data-component~="ui-editor-surface"])[data-ui-editor-surface-state~="density=compact"] {
       --_ui-editor-content-min-height: 0px;
       --_ui-editor-content-padding-block: 0px;
       --_ui-editor-content-padding-inline: 0px;

package/styles/ui-editor-table-context-menu.css

@@ -1,12 +1,19 @@
-/* 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-editor-table-context-menu"] { --html-next-scope-owner: "ui-editor-table-context-menu" !important; }
+}
 @scope ([data-component~="ui-editor-table-context-menu"]) to ([data-component], [data-slotted]) {
-:scope[popover] {
+:scope:where([data-component~="ui-editor-table-context-menu"])[popover] {
       position: fixed;
       inset: auto;
       margin: 0;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) {
       /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
       box-sizing: border-box;
       min-width: min(14rem, calc(100vw - 24px));
@@ -31,7 +38,7 @@
       gap: 3px;
     }
 
-    :scope button {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) button {
       display: flex;
       align-items: center;
       gap: var(--ui-space-2);
@@ -47,20 +54,20 @@
       color: var(--ui-text);
     }
 
-    :scope button {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) button {
       --_ui-default-icon-size: 1rem;
       --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
-    :scope button:hover:not(:disabled) {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) button:hover:not(:disabled) {
       background: var(--ui-surface-hover);
     }
 
-    :scope button.selected {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) button.selected {
       background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
     }
 
-    :scope button.danger {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) button.danger {
       color: var(--ui-danger);
     }
 
@@ -72,7 +79,7 @@
     }
 
     /* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
-    :scope .swatch-button {
+    :scope:where([data-component~="ui-editor-table-context-menu"]) .swatch-button {
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-2);
@@ -131,7 +138,7 @@
       display: none;
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-table-context-menu"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-table-overlay.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-editor-table-overlay"] { --html-next-scope-owner: "ui-editor-table-overlay" !important; }
+}
 @scope ([data-component~="ui-editor-table-overlay"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-table-overlay"]) {
       display: block;
       width: 100%;
       height: 100%;
@@ -8,7 +15,7 @@
       pointer-events: none;
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-table-overlay"]) {
       position: relative;
       width: 100%;
       height: 100%;
@@ -231,7 +238,7 @@
       cursor: grabbing;
     }
 
-    .selector::before {
+    .selector:where(:not([data-component], [data-slotted]))::before {
       content: "";
       position: absolute;
       inset: 50% auto auto 50%;
@@ -256,8 +263,8 @@
         transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     }
 
-    .selector:hover::before,
-    .selector:focus-visible::before {
+    .selector:hover:where(:not([data-component], [data-slotted]))::before, 
+    .selector:focus-visible:where(:not([data-component], [data-slotted]))::before {
       opacity: 0;
     }
 
@@ -274,7 +281,7 @@
       transform: translateY(-50%);
     }
 
-    .selector.row::before {
+    .selector.row:where(:not([data-component], [data-slotted]))::before {
       width: 2px;
       height: 16px;
     }
@@ -286,13 +293,13 @@
       transform: translateX(-50%);
     }
 
-    .selector.column::before {
+    .selector.column:where(:not([data-component], [data-slotted]))::before {
       width: 16px;
       height: 2px;
     }
 
     @media (hover: none), (pointer: coarse) {
-      .selector::before {
+      .selector:where(:not([data-component], [data-slotted]))::before {
         opacity: 0;
       }
 
@@ -338,7 +345,7 @@
       display: none;
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-table-overlay"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-table-toolbar.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-editor-table-toolbar"] { --html-next-scope-owner: "ui-editor-table-toolbar" !important; }
+}
 @scope ([data-component~="ui-editor-table-toolbar"]) to ([data-component], [data-slotted]) {
-.looma-editor__mobile-toolbar-shell :scope {
+.looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-table-toolbar"]) {
       min-width: max-content;
       min-height: 100%;
       padding: 0;
@@ -11,17 +18,17 @@
       backdrop-filter: none;
     }
 
-    .looma-editor__mobile-toolbar-shell :scope button {
+    .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-table-toolbar"]) button {
       min-height: 44px;
       background: transparent;
     }
 
-    .looma-editor__mobile-toolbar-shell :scope button.active,
-    .looma-editor__mobile-toolbar-shell :scope button.selected {
+    .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-table-toolbar"]) button.active,
+    .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-table-toolbar"]) button.selected {
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) {
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-1);
@@ -50,7 +57,7 @@
       position: relative;
     }
 
-    :scope button {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) button {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -68,11 +75,11 @@
       white-space: nowrap;
     }
 
-    :scope button:hover {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) button:hover {
       background: var(--ui-surface-hover);
     }
 
-    :scope button.active {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) button.active {
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
       color: var(--ui-accent-active);
     }
@@ -85,16 +92,16 @@
       border-left: 0;
     }
 
-    :scope .more {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) .more {
       border: 0;
       border-radius: var(--ui-radius-sm);
     }
 
-    :scope button.danger {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) button.danger {
       color: var(--ui-danger);
     }
 
-    :scope {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) {
       --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
       --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
@@ -104,7 +111,7 @@
       --_ui-default-icon-size: 0.875rem;
     }
 
-    :scope .icon-button {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) .icon-button {
       width: 32px;
       padding-inline: 0;
     }
@@ -158,7 +165,7 @@
       gap: 2px;
     }
 
-    :scope .swatch-button {
+    :scope:where([data-component~="ui-editor-table-toolbar"]) .swatch-button {
       gap: var(--ui-space-1);
       justify-content: flex-start;
     }
@@ -182,7 +189,7 @@
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
     }
 
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-table-toolbar"])[hidden] {
       display: none;
     }
 }

package/styles/ui-editor-toolbar.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-editor-toolbar"] { --html-next-scope-owner: "ui-editor-toolbar" !important; }
+}
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope:where([data-component~="ui-editor-toolbar"]) {
       position: sticky;
       top: 0;
       z-index: var(--ui-editor-toolbar-z-index, 10);
@@ -27,7 +34,7 @@
       scrollbar-width: none;
     }
 
-    .strip::-webkit-scrollbar {
+    .strip:where(:not([data-component], [data-slotted]))::-webkit-scrollbar {
       display: none;
     }
 
@@ -52,11 +59,11 @@
         calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
-    :scope:dir(rtl) .strip {
+    :scope:where([data-component~="ui-editor-toolbar"]):dir(rtl) .strip {
       --_ui-scroll-fade-direction: to left;
     }
 
-    :scope[data-ui-editor-toolbar-state~="floating"] {
+    :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] {
       position: relative;
       top: auto;
       width: max-content;
@@ -71,7 +78,7 @@
     }
 
     @media (max-width: 767px) {
-      :scope {
+      :scope:where([data-component~="ui-editor-toolbar"]) {
         position: fixed;
         top: auto;
         bottom: env(safe-area-inset-bottom);
@@ -83,7 +90,7 @@
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
 
-      :scope[data-ui-editor-toolbar-state~="floating"] {
+      :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] {
         position: relative;
         inset: auto;
         min-height: auto;
@@ -94,7 +101,7 @@
     }
 
     /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-    .looma-editor__sticky-toolbar-shell :scope {
+    .looma-editor__sticky-toolbar-shell :scope:where([data-component~="ui-editor-toolbar"]) {
       position: relative;
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: transparent;
@@ -103,7 +110,7 @@
     }
 
     /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-    .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] {
+    .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] {
       width: 100%;
       max-width: none;
       min-height: 100%;
@@ -115,12 +122,12 @@
       backdrop-filter: none;
     }
 
-    .looma-editor__mobile-toolbar-shell :scope[data-ui-editor-toolbar-state~="floating"] .strip {
+    .looma-editor__mobile-toolbar-shell :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] .strip {
       scroll-snap-type: x mandatory;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-editor-toolbar"])[hidden] {
       display: none;
     }
 }