@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiEditorSlashMenuGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -45,34 +45,40 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-group')
     class="ui-editor-slash-menu-group"
     role="presentation"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-slash-menu-group
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-editor-slash-menu-group-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
   >
-    <div role="group" :aria-label="checkedProps.label ?? undefined">
-      <div class="heading">{{ checkedProps.label }}</div>
-      <ul role="presentation"><slot /></ul>
+    <div
+      role="group"
+      data-hn-ui-editor-slash-menu-group
+      :aria-label="checkedProps.label ?? undefined"
+    >
+      <div class="heading" data-hn-ui-editor-slash-menu-group>{{ checkedProps.label }}</div>
+      <ul role="presentation" data-hn-ui-editor-slash-menu-group><slot /></ul>
     </div>
   </li>
 </template>
 
 <style scoped>
-@scope (.ui-editor-slash-menu-group) {
-  :scope:where(:scope) {
+@scope (.ui-editor-slash-menu-group) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-editor-slash-menu-group])) {
     display: block;
     list-style: none;
   }
-  .heading {
+  :global(.heading:where([data-hn-ui-editor-slash-menu-group])) {
     padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
   }
-  ul {
+  :global(ul:where([data-hn-ui-editor-slash-menu-group])) {
     margin: 0;
     padding: 0;
     list-style: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-editor-slash-menu-group])) {
     display: none;
   }
 }

package/vue/UiEditorSlashMenuItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -114,28 +114,37 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
     role="option"
     tabindex="-1"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-slash-menu-item
     :aria-disabled="checkedProps.disabled ?? undefined"
+    :data-value="checkedProps.value ?? undefined"
+    :data-keywords="checkedProps.keywords ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-description="reflectedProp('description', 'description', checkedProps.description, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-icon="reflectedProp('icon', 'icon', checkedProps.icon, undefined, false)"
-    :data-keywords="reflectedProp('keywords', 'keywords', checkedProps.keywords, undefined, true)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
+    :data-ui-editor-slash-menu-item-prop-description="reflectedProp('description', 'description', checkedProps.description, undefined, false)"
+    :data-ui-editor-slash-menu-item-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-editor-slash-menu-item-prop-icon="reflectedProp('icon', 'icon', checkedProps.icon, undefined, false)"
+    :data-ui-editor-slash-menu-item-prop-keywords="reflectedProp('keywords', 'keywords', checkedProps.keywords, undefined, false)"
+    :data-ui-editor-slash-menu-item-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
   >
-    <span v-if="checkedProps.icon" class="icon" aria-hidden="true"><UiIcon
-        class="ui-icon"
-        :name="checkedProps.icon"
-      /></span>
-    <span class="body"><span class="title"><slot /></span>
-      <span v-if="checkedProps.description" class="description">{{
+    <span
+      v-if="checkedProps.icon"
+      class="icon"
+      aria-hidden="true"
+      data-hn-ui-editor-slash-menu-item
+    ><UiIcon class="ui-icon" :name="checkedProps.icon" /></span>
+    <span class="body" data-hn-ui-editor-slash-menu-item><span
+        class="title"
+        data-hn-ui-editor-slash-menu-item
+      ><slot /></span>
+      <span v-if="checkedProps.description" class="description" data-hn-ui-editor-slash-menu-item>{{
         checkedProps.description
       }}</span></span>
   </li>
 </template>
 
 <style scoped>
-@scope (.ui-editor-slash-menu-item) to (.ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-editor-slash-menu-item) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-editor-slash-menu-item])) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-3);
@@ -144,19 +153,19 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
     cursor: pointer;
     list-style: none;
   }
-  :scope:where(:scope):is([aria-selected="true"]) {
+  :global(:scope[aria-selected="true"]:where([data-hn-ui-editor-slash-menu-item])) {
     background: var(--ui-accent-subtle);
   }
-  :scope:where(:scope):is([aria-disabled="true"]) {
+  :global(:scope[aria-disabled="true"]:where([data-hn-ui-editor-slash-menu-item])) {
     background: var(--ui-disabled-surface);
     cursor: not-allowed;
   }
-  :scope[aria-disabled="true"] .title,
-  :scope[aria-disabled="true"] .description,
-  :scope[aria-disabled="true"] .icon {
+  :global(:scope[aria-disabled="true"] .title:where([data-hn-ui-editor-slash-menu-item])),
+  :global(:scope[aria-disabled="true"] .description:where([data-hn-ui-editor-slash-menu-item])),
+  :global(:scope[aria-disabled="true"] .icon:where([data-hn-ui-editor-slash-menu-item])) {
     color: var(--ui-disabled-text);
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-editor-slash-menu-item])) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -168,30 +177,31 @@ checkHydratedRoot('li', 'ui-editor-slash-menu-item')
     border: var(--ui-border-width) solid var(--ui-border);
     border-radius: var(--ui-radius-md);
   }
-  .icon {
+  :global(.icon:where([data-hn-ui-editor-slash-menu-item])) {
     --_ui-default-icon-size: 1rem;
   }
-  .body {
+  :global(.body:where([data-hn-ui-editor-slash-menu-item])) {
     display: flex;
     min-inline-size: 0;
     flex-direction: column;
     gap: 1px;
   }
-  .title, .description {
+  :global(.title:where([data-hn-ui-editor-slash-menu-item])),
+  :global(.description:where([data-hn-ui-editor-slash-menu-item])) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .title {
+  :global(.title:where([data-hn-ui-editor-slash-menu-item])) {
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-sm);
     font-weight: var(--ui-font-medium);
   }
-  .description {
+  :global(.description:where([data-hn-ui-editor-slash-menu-item])) {
     color: var(--ui-text-muted);
     font-size: var(--ui-font-size-xs);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-editor-slash-menu-item])) {
     display: none;
   }
 }

package/vue/UiEditorSurface.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -44,7 +44,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-editor-surface')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',
@@ -58,8 +58,10 @@ const hostState = computed(() =>
   <div
     class="ui-editor-surface"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-editor-surface
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-editor-surface-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-ui-editor-surface-state="hostState || undefined"
   >
     <slot />
@@ -68,14 +70,14 @@ const hostState = computed(() =>
 
 <style scoped>
 /* The document renderer consumes these inherited surface settings. They do not style controls. */
-@scope (.ui-editor-surface) {
-  :scope:where(:scope) {
+@scope (.ui-editor-surface) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-editor-surface])) {
     display: flex;
     flex-direction: column;
     min-inline-size: 0;
     max-inline-size: 100%;
   }
-  :scope:where(:scope):is([data-ui-editor-surface-state~="density=compact"]) {
+  :global(:scope[data-ui-editor-surface-state~="density=compact"]:where([data-hn-ui-editor-surface])) {
     --_ui-editor-content-min-height: 0px;
     --_ui-editor-content-padding-block: 0px;
     --_ui-editor-content-padding-inline: 0px;

package/vue/UiEditorTableContextMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -442,14 +442,15 @@ useComponentHost(
     class="ui-editor-table-context-menu"
     role="menu"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :hidden="!checkedProps.open"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
-    :data-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
-    :data-header-column="reflectedProp('headerColumn', 'header-column', checkedProps.headerColumn, undefined, false)"
-    :data-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
-    :data-scope="reflectedProp('scope', 'scope', checkedProps.scope, undefined, false)"
+    :data-ui-editor-table-context-menu-prop-actions="reflectedProp('actions', 'actions', checkedProps.actions, undefined, false)"
+    :data-ui-editor-table-context-menu-prop-cell-background="reflectedProp('cellBackground', 'cell-background', checkedProps.cellBackground, undefined, false)"
+    :data-ui-editor-table-context-menu-prop-header-column="reflectedProp('headerColumn', 'header-column', checkedProps.headerColumn, undefined, false)"
+    :data-ui-editor-table-context-menu-prop-header-row="reflectedProp('headerRow', 'header-row', checkedProps.headerRow, undefined, false)"
+    :data-ui-editor-table-context-menu-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-editor-table-context-menu-prop-scope="reflectedProp('scope', 'scope', checkedProps.scope, undefined, false)"
     ref="root"
   >
     <div v-if="swatches.length" class="section" role="none">
@@ -531,13 +532,13 @@ useComponentHost(
 
 /* Separators divide sections, so none sits above the first. */
 
-@scope (.ui-editor-table-context-menu) to (.ui-icon) {
-  :scope:where(:scope):is([popover]) {
+@scope (.ui-editor-table-context-menu) to ([data-hn]) {
+  :global(:scope[popover]) {
     position: fixed;
     inset: auto;
     margin: 0;
   }
-  :scope:where(:scope) {
+  :global(:scope) {
     /* 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));
@@ -555,12 +556,12 @@ useComponentHost(
     overscroll-behavior: contain;
     scrollbar-width: thin;
   }
-  .section {
+  :global(.section) {
     display: flex;
     flex-direction: column;
     gap: 3px;
   }
-  :scope button {
+  :global(:scope button) {
     display: flex;
     align-items: center;
     gap: var(--ui-space-2);
@@ -575,25 +576,25 @@ useComponentHost(
     cursor: pointer;
     color: var(--ui-text);
   }
-  :scope button {
+  :global(:scope 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) {
+  :global(:scope button:hover:not(:disabled)) {
     background: var(--ui-surface-hover);
   }
-  :scope button.selected {
+  :global(:scope button.selected) {
     background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
   }
-  :scope button.danger {
+  :global(:scope button.danger) {
     color: var(--ui-danger);
   }
-  .swatches {
+  :global(.swatches) {
     display: flex;
     flex-wrap: wrap;
     gap: 3px;
   }
-  :scope .swatch-button {
+  :global(:scope .swatch-button) {
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-2);
@@ -603,7 +604,7 @@ useComponentHost(
     padding-inline-end: var(--ui-space-1);
   }
 
-  .swatch {
+  :global(.swatch) {
     display: inline-flex;
     width: 1rem;
     height: 1rem;
@@ -614,7 +615,7 @@ useComponentHost(
     flex-shrink: 0;
   }
 
-  .swatch.default {
+  :global(.swatch.default) {
     position: relative;
     background:
       linear-gradient(
@@ -627,12 +628,12 @@ useComponentHost(
       var(--ui-surface);
   }
 
-  .swatch-label {
+  :global(.swatch-label) {
     min-width: 0;
     white-space: nowrap;
   }
 
-  .heading {
+  :global(.heading) {
     padding: var(--ui-space-1) var(--ui-space-2);
     font-size: var(--ui-font-size-2xs);
     font-weight: 700;
@@ -641,16 +642,16 @@ useComponentHost(
     color: var(--ui-text-muted);
   }
 
-  .sep {
+  :global(.sep) {
     height: 1px;
     background: var(--ui-border-divider);
     margin: var(--ui-space-1) 0;
   }
-  .sep:first-child {
+  :global(.sep:first-child) {
     display: none;
   }
 
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }

package/vue/UiEditorTableOverlay.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.52 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -638,10 +638,11 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     class="ui-editor-table-overlay"
     aria-label="Table controls"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :hidden="!checkedProps.open"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-geometry="reflectedProp('geometry', 'geometry', checkedProps.geometry, undefined, false)"
-    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
+    :data-ui-editor-table-overlay-prop-geometry="reflectedProp('geometry', 'geometry', checkedProps.geometry, undefined, false)"
+    :data-ui-editor-table-overlay-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
     <div class="rows">
@@ -734,39 +735,39 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
 </template>
 
 <style scoped>
-@scope (.ui-editor-table-overlay) to (.ui-icon) {
-  :scope:where(:scope) {
+@scope (.ui-editor-table-overlay) to ([data-hn]) {
+  :global(:scope) {
     display: block;
     width: 100%;
     height: 100%;
     overflow: visible;
     pointer-events: none;
   }
-  :scope:where(:scope) {
+  :global(:scope) {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: visible;
     pointer-events: none;
   }
-  .rows, .cols {
+  :global(.rows), :global(.cols) {
     pointer-events: none;
     position: absolute;
   }
-  .rows {
+  :global(.rows) {
     inset: 0;
     width: 100%;
   }
-  .cols {
+  :global(.cols) {
     inset: 0;
     height: 100%;
   }
-  .control {
+  :global(.control) {
     position: absolute;
     z-index: 1;
     pointer-events: none;
   }
-  .handle {
+  :global(.handle) {
     position: absolute;
     display: inline-flex;
     align-items: center;
@@ -793,60 +794,64 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     pointer-events: auto;
     cursor: pointer;
   }
-  .handle {
+  :global(.handle) {
     --_ui-default-icon-size: 14px;
     --_ui-default-icon-stroke-width: 2;
   }
-  .handle[data-ui-proximity="near"], .control.active .handle, .handle:focus-visible {
+  :global(.handle[data-ui-proximity="near"]),
+  :global(.control.active .handle),
+  :global(.handle:focus-visible) {
     opacity: 1;
     scale: 1;
   }
-  .control.active .handle, .handle:focus-visible {
+  :global(.control.active .handle), :global(.handle:focus-visible) {
     border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
     background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
     color: var(--ui-text-on-accent);
     box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
   }
-  .handle:focus-visible, .selector:focus-visible, .cell-menu:focus-visible {
+  :global(.handle:focus-visible),
+  :global(.selector:focus-visible),
+  :global(.cell-menu:focus-visible) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-focus-width);
   }
-  .control.row {
+  :global(.control.row) {
     left: 0;
     width: 100%;
     height: 0;
   }
-  .control.row .handle {
+  :global(.control.row .handle) {
     top: -12px;
     left: -30px;
   }
-  .control.col {
+  :global(.control.col) {
     top: 0;
     width: 0;
     height: 100%;
   }
-  .control.col .handle {
+  :global(.control.col .handle) {
     top: -30px;
     left: -12px;
   }
-  .line {
+  :global(.line) {
     position: absolute;
     background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
     opacity: 0;
     transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   }
-  .control.row .line {
+  :global(.control.row .line) {
     inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
     height: var(--ui-accent-line-width);
   }
-  .control.col .line {
+  :global(.control.col .line) {
     inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
     width: var(--ui-accent-line-width);
   }
-  .control.active .line {
+  :global(.control.active .line) {
     opacity: 0.8;
   }
-  .guide {
+  :global(.guide) {
     position: absolute;
     width: var(--ui-affordance-guide-size);
     height: var(--ui-affordance-guide-size);
@@ -855,18 +860,18 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
     transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   }
-  .control.row .guide {
+  :global(.control.row .guide) {
     left: -10px;
     top: -2px;
   }
-  .control.col .guide {
+  :global(.control.col .guide) {
     left: -2px;
     top: -10px;
   }
-  .control:has(.handle[data-ui-proximity="near"]) .guide, .control.active .guide {
+  :global(.control:has(.handle[data-ui-proximity="near"]) .guide), :global(.control.active .guide) {
     opacity: 0;
   }
-  .tooltip {
+  :global(.tooltip) {
     position: absolute;
     z-index: 2;
     top: calc(100% + 6px);
@@ -885,16 +890,16 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     pointer-events: none;
   }
-  .control.row .tooltip {
+  :global(.control.row .tooltip) {
     top: 50%;
     left: auto;
     right: calc(100% + 8px);
     transform: translateY(-50%);
   }
-  .control.active .tooltip, .handle:focus-visible .tooltip {
+  :global(.control.active .tooltip), :global(.handle:focus-visible .tooltip) {
     opacity: 1;
   }
-  .selector, .cell-menu {
+  :global(.selector), :global(.cell-menu) {
     position: absolute;
     z-index: 2;
     display: inline-flex;
@@ -913,20 +918,20 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
       border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
       box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   }
-  .selector:hover, .cell-menu:hover {
+  :global(.selector:hover), :global(.cell-menu:hover) {
     background: var(--ui-surface-muted);
     color: var(--ui-text-primary);
     box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
   }
-  .selector {
+  :global(.selector) {
     border-radius: var(--ui-radius-round);
     touch-action: none;
     cursor: grab;
   }
-  .selector:active {
+  :global(.selector:active) {
     cursor: grabbing;
   }
-  .selector::before {
+  :global(.selector::before) {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -937,7 +942,7 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
     transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     pointer-events: none;
   }
-  .selector .glyph {
+  :global(.selector .glyph) {
     display: block;
     width: 14px;
     height: 14px;
@@ -949,74 +954,74 @@ useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-t
       opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
       transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   }
-  .selector:hover::before, .selector:focus-visible::before {
+  :global(.selector:hover::before), :global(.selector:focus-visible::before) {
     opacity: 0;
   }
-  .selector:hover .glyph, .selector:focus-visible .glyph {
+  :global(.selector:hover .glyph), :global(.selector:focus-visible .glyph) {
     opacity: 1;
     transform: scale(1);
   }
-  .selector.row {
+  :global(.selector.row) {
     left: -9px;
     width: 18px;
     height: 32px;
     transform: translateY(-50%);
   }
-  .selector.row::before {
+  :global(.selector.row::before) {
     width: 2px;
     height: 16px;
   }
-  .selector.column {
+  :global(.selector.column) {
     top: -9px;
     width: 32px;
     height: 18px;
     transform: translateX(-50%);
   }
-  .selector.column::before {
+  :global(.selector.column::before) {
     width: 16px;
     height: 2px;
   }
   @media (hover: none), (pointer: coarse) {
-    .selector::before {
+    :global(.selector::before) {
       opacity: 0;
     }
 
-    .selector .glyph {
+    :global(.selector .glyph) {
       opacity: 1;
       transform: none;
     }
   }
-  .cell-menu {
+  :global(.cell-menu) {
     width: 24px;
     height: 24px;
     border-radius: var(--ui-radius-sm);
     background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
   }
-  .cell-menu {
+  :global(.cell-menu) {
     --_ui-default-icon-size: 15px;
     --_ui-default-icon-stroke-width: 2;
   }
-  .drop-indicator {
+  :global(.drop-indicator) {
     position: absolute;
     z-index: 3;
     background: var(--ui-accent-solid);
     box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
     pointer-events: none;
   }
-  .drop-indicator.row {
+  :global(.drop-indicator.row) {
     left: 0;
     width: 100%;
     height: var(--ui-accent-line-width);
   }
-  .drop-indicator.column {
+  :global(.drop-indicator.column) {
     top: 0;
     width: var(--ui-accent-line-width);
     height: 100%;
   }
-  .drop-indicator[hidden] {
+  :global(.drop-indicator[hidden]) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }