@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiSwatch.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'
@@ -62,7 +62,7 @@ const toneName = cycleCheckedComputed(() =>
 )
 checkHydratedRoot('input', 'ui-swatch')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',
@@ -76,10 +76,11 @@ const hostState = computed(() =>
     class="ui-swatch"
     type="radio"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :value.attr="checkedProps.tone ?? undefined"
     :aria-label="typeof toneName === 'boolean' ? String(toneName) : attribute(toneName)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-ui-swatch-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-ui-swatch-state="hostState || undefined"
   >
 </template>
@@ -96,8 +97,8 @@ const hostState = computed(() =>
 /* The chosen swatch and the focused one share one ring at the focus width (2px by default), in
    the tone or the focus colour. */
 
-@scope (.ui-swatch) {
-  :scope:where(:scope) {
+@scope (.ui-swatch) to ([data-hn]) {
+  :global(:scope) {
     --_surface: var(--ui-surface-subtle);
     --_text: var(--ui-text-secondary);
 
@@ -113,36 +114,36 @@ const hostState = computed(() =>
     cursor: pointer;
   }
 
-  :scope:where(:scope):is([data-ui-swatch-state~="tone=blue"]) {
+  :global(:scope[data-ui-swatch-state~="tone=blue"]) {
     --_surface: var(--ui-info-soft);
     --_text: var(--ui-info-subtle-text);
   }
 
-  :scope:where(:scope):is([data-ui-swatch-state~="tone=green"]) {
+  :global(:scope[data-ui-swatch-state~="tone=green"]) {
     --_surface: var(--ui-success-soft);
     --_text: var(--ui-success-subtle-text);
   }
 
-  :scope:where(:scope):is([data-ui-swatch-state~="tone=yellow"]) {
+  :global(:scope[data-ui-swatch-state~="tone=yellow"]) {
     --_surface: var(--ui-warning-soft);
     --_text: var(--ui-warning-subtle-text);
   }
 
-  :scope:where(:scope):is([data-ui-swatch-state~="tone=red"]) {
+  :global(:scope[data-ui-swatch-state~="tone=red"]) {
     --_surface: var(--ui-danger-soft);
     --_text: var(--ui-danger-subtle-text);
   }
 
-  :scope:where(:scope):is([data-ui-swatch-state~="tone=purple"]) {
+  :global(:scope[data-ui-swatch-state~="tone=purple"]) {
     --_surface: var(--ui-accent-soft);
     --_text: var(--ui-accent-subtle-text);
   }
-  :scope:where(:scope):is(:checked) {
+  :global(:scope:checked) {
     outline: var(--ui-focus-width) solid var(--_text);
     outline-offset: var(--ui-focus-width);
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
     outline-offset: var(--ui-focus-width);
   }

package/vue/UiSwitch.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -154,7 +154,7 @@ const internalChecked = ref(false)
 provide('html-next:ui-switch:internalChecked', internalChecked)
 checkHydratedRoot('label', 'ui-switch')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.disabled && 'disabled',
@@ -212,18 +212,21 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   <label
     class="ui-switch"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-switch
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-switch-prop-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-ui-switch-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-switch-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-switch-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-switch-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-switch-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-switch-state="hostState || undefined"
     ref="root"
   ><input
       type="checkbox"
       role="switch"
+      data-hn-ui-switch
       v-bind-control="{
         tag: 'input',
         name: 'checked',
@@ -237,8 +240,8 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
       :value.attr="checkedProps.value ?? undefined"
       ref="inputElement"
     >
-    <span class="text"><span class="label"><slot /></span>
-      <span class="description" aria-hidden="true" ref="descriptionElement"><slot
+    <span class="text" data-hn-ui-switch><span class="label" data-hn-ui-switch><slot /></span>
+      <span class="description" aria-hidden="true" data-hn-ui-switch ref="descriptionElement"><slot
           name="description"
         /></span></span></label>
 </template>
@@ -268,8 +271,8 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-switch) {
-  :scope:where(:scope) {
+@scope (.ui-switch) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-switch])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-switch-track-width: var(--ui-switch-track-width);
     --_ui-switch-track-height: var(--ui-switch-track-height);
@@ -281,29 +284,29 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     color: var(--ui-text-primary);
     cursor: pointer;
   }
-  .text {
+  :global(.text:where([data-hn-ui-switch])) {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-1);
     min-inline-size: 0;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-switch])) {
     min-inline-size: 0;
     line-height: var(--ui-line-height-md);
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-switch])) {
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
     line-height: var(--ui-line-height);
   }
 
-  .description:empty {
+  :global(.description:empty:where([data-hn-ui-switch])) {
     display: none;
   }
 
-  input {
+  :global(input:where([data-hn-ui-switch])) {
     appearance: none;
     -webkit-appearance: none;
     position: relative;
@@ -322,7 +325,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     margin: 0;
   }
 
-  input::after {
+  :global(input:where([data-hn-ui-switch])::after) {
     content: "";
     position: absolute;
     top: 3px;
@@ -337,71 +340,72 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
       background-color var(--ui-motion-base) var(--ui-motion-ease);
   }
 
-  input:checked {
+  :global(input:checked:where([data-hn-ui-switch])) {
     background-color: var(--ui-accent-solid);
     border-color: var(--ui-accent-solid);
   }
 
-  input:checked::after {
+  :global(input:checked:where([data-hn-ui-switch])::after) {
     transform: translateX(1rem);
     background: var(--ui-text-on-accent);
   }
 
-  input:focus-visible {
+  :global(input:focus-visible:where([data-hn-ui-switch])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
     outline-offset: var(--ui-focus-width);
   }
 
-  :scope:where(:scope):is([data-ui-switch-state~="disabled"]) {
+  :global(:scope[data-ui-switch-state~="disabled"]:where([data-hn-ui-switch])) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
-  :scope[data-ui-switch-state~="disabled"] .description {
+  :global(:scope[data-ui-switch-state~="disabled"] .description:where([data-hn-ui-switch])) {
     color: var(--ui-disabled-text);
   }
-  :scope[data-ui-switch-state~="disabled"] input {
+  :global(:scope[data-ui-switch-state~="disabled"] input:where([data-hn-ui-switch])) {
     border-color: var(--ui-disabled-border);
     background-color: var(--ui-disabled-surface);
     box-shadow: none;
     cursor: not-allowed;
   }
 
-  :scope[data-ui-switch-state~="disabled"] input::after {
+  :global(:scope[data-ui-switch-state~="disabled"] input:where([data-hn-ui-switch])::after) {
     background-color: var(--ui-disabled-text);
     box-shadow: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    input, input::after {
+    :global(input:where([data-hn-ui-switch])), :global(input:where([data-hn-ui-switch])::after) {
       transition: none;
     }
   }
-  :scope:where(:scope):is([data-ui-switch-state~="size=sm"]) {
+  :global(:scope[data-ui-switch-state~="size=sm"]:where([data-hn-ui-switch])) {
     --_font: var(--ui-font-size-sm);
     --_row: var(--ui-control-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-switch-state~="size=lg"]) {
+  :global(:scope[data-ui-switch-state~="size=lg"]:where([data-hn-ui-switch])) {
     --_font: var(--ui-font-size-md);
     --_row: var(--ui-control-size-lg);
   }
 
-  :scope:where(:scope):is([data-ui-switch-state~="size=sm"]),
-  :scope:where(:scope):is([data-ui-switch-state~="size=lg"]) {
+  :global(:scope[data-ui-switch-state~="size=sm"]:where([data-hn-ui-switch])),
+  :global(:scope[data-ui-switch-state~="size=lg"]:where([data-hn-ui-switch])) {
     --_line: calc(var(--_font) * var(--ui-line-height-md));
     font-size: var(--_font);
     padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
   }
-  :scope[data-ui-switch-state~="size=sm"] .text, :scope[data-ui-switch-state~="size=lg"] .text {
+  :global(:scope[data-ui-switch-state~="size=sm"] .text:where([data-hn-ui-switch])),
+  :global(:scope[data-ui-switch-state~="size=lg"] .text:where([data-hn-ui-switch])) {
     margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
   }
 
   @media (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-switch-state~="size=sm"]) {
+    :global(:scope[data-ui-switch-state~="size=sm"]:where([data-hn-ui-switch])) {
       --_row: var(--ui-control-min-block-size);
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-switch])) {
     display: none;
   }
 }

package/vue/UiSwitcher.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'
@@ -106,7 +106,7 @@ const overLimit = ref(false)
 provide('html-next:ui-switcher:overLimit', overLimit)
 checkHydratedRoot('div', 'ui-switcher')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     overLimit.value && 'overLimit',
@@ -154,11 +154,13 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
   <div
     class="ui-switcher"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-switcher
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
-    :data-limit="reflectedProp('limit', 'limit', checkedProps.limit, undefined, false)"
-    :data-threshold="reflectedProp('threshold', 'threshold', checkedProps.threshold, undefined, false)"
+    :data-ui-switcher-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-switcher-prop-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-ui-switcher-prop-limit="reflectedProp('limit', 'limit', checkedProps.limit, undefined, false)"
+    :data-ui-switcher-prop-threshold="reflectedProp('threshold', 'threshold', checkedProps.threshold, undefined, false)"
     :data-ui-switcher-state="hostState || undefined"
     ref="root"
   >
@@ -179,8 +181,8 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-switcher) {
-  :scope:where(:scope) {
+@scope (.ui-switcher) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-switcher])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-switcher-threshold: var(--ui-switcher-threshold);
 
@@ -193,51 +195,54 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
     margin: 0;
   }
 
-  :scope > :slotted(*) {
+  :global(:scope > :where(:not([data-hn-ui-switcher])):is(*)) {
     min-inline-size: 0;
     flex-grow: 1;
     /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
     flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
   }
 
-  :scope[data-ui-switcher-state~="overLimit"] > :slotted(*) {
+  :global(:scope[data-ui-switcher-state~="overLimit"] > :where(:not([data-hn-ui-switcher])):is(*)) {
     flex-basis: 100%;
   }
 
-  :scope:where(:scope):is([data-ui-switcher-state~="gap=xs"]) {
+  :global(:scope[data-ui-switcher-state~="gap=xs"]:where([data-hn-ui-switcher])) {
     --_switcher-gap: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="gap=s"]) {
+  :global(:scope[data-ui-switcher-state~="gap=s"]:where([data-hn-ui-switcher])) {
     --_switcher-gap: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="gap=m"]) {
+  :global(:scope[data-ui-switcher-state~="gap=m"]:where([data-hn-ui-switcher])) {
     --_switcher-gap: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="gap=l"]) {
+  :global(:scope[data-ui-switcher-state~="gap=l"]:where([data-hn-ui-switcher])) {
     --_switcher-gap: var(--ui-space-5);
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="gap=xl"]) {
+  :global(:scope[data-ui-switcher-state~="gap=xl"]:where([data-hn-ui-switcher])) {
     --_switcher-gap: var(--ui-space-6);
   }
-  :scope[data-ui-switcher-state~="threshold=xs"] > :slotted(*) {
+  :global(:scope[data-ui-switcher-state~="threshold=xs"]
+    > :where(:not([data-hn-ui-switcher])):is(*)) {
     flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
   }
-  :scope[data-ui-switcher-state~="threshold=md"] > :slotted(*) {
+  :global(:scope[data-ui-switcher-state~="threshold=md"]
+    > :where(:not([data-hn-ui-switcher])):is(*)) {
     flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
   }
-  :scope[data-ui-switcher-state~="threshold=lg"] > :slotted(*) {
+  :global(:scope[data-ui-switcher-state~="threshold=lg"]
+    > :where(:not([data-hn-ui-switcher])):is(*)) {
     flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="align=start"]) {
+  :global(:scope[data-ui-switcher-state~="align=start"]:where([data-hn-ui-switcher])) {
     align-items: flex-start;
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="align=center"]) {
+  :global(:scope[data-ui-switcher-state~="align=center"]:where([data-hn-ui-switcher])) {
     align-items: center;
   }
-  :scope:where(:scope):is([data-ui-switcher-state~="align=end"]) {
+  :global(:scope[data-ui-switcher-state~="align=end"]:where([data-hn-ui-switcher])) {
     align-items: flex-end;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-switcher])) {
     display: none;
   }
 }

package/vue/UiTable.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, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -68,7 +68,7 @@ const hydrationInstance = getCurrentInstance()
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('div', 'ui-table')
 
-/** 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',
@@ -105,9 +105,11 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
   <div
     class="ui-table"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-table
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-sticky-header="reflectedProp('stickyHeader', 'sticky-header', checkedProps.stickyHeader, undefined, false)"
+    :data-ui-table-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-table-prop-sticky-header="reflectedProp('stickyHeader', 'sticky-header', checkedProps.stickyHeader, undefined, false)"
     :data-ui-table-state="hostState || undefined"
     ref="root"
   >
@@ -129,8 +131,8 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-table) {
-  :scope:where(:scope) {
+@scope (.ui-table) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-table])) {
     --_pad-block: var(--ui-space-1);
     --_pad-inline: var(--ui-space-3);
     --_row-size: var(--ui-control-size);
@@ -165,21 +167,21 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
       calc(100% - var(--_ui-scroll-fade-size)) 100%;
   }
 
-  :scope:where(:scope):is(:dir(rtl)) {
+  :global(:scope:dir(rtl):where([data-hn-ui-table])) {
     --_ui-scroll-fade-direction: to left;
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible:where([data-hn-ui-table])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: calc(-1 * var(--ui-focus-width));
   }
 
-  :scope:where(:scope):is([data-ui-table-state~="density=compact"]) {
+  :global(:scope[data-ui-table-state~="density=compact"]:where([data-hn-ui-table])) {
     --_pad-block: var(--ui-space-0-5);
     --_pad-inline: var(--ui-space-2);
     --_row-size: var(--ui-control-size-sm);
   }
-  :slotted(table) {
+  :global(:where(:not([data-hn-ui-table])):is(table)) {
     inline-size: 100%;
     border-collapse: separate;
     border-spacing: 0;
@@ -189,13 +191,14 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
     font-variant-numeric: tabular-nums;
   }
 
-  :slotted(caption) {
+  :global(:where(:not([data-hn-ui-table])):is(caption)) {
     padding-block-end: var(--ui-space-2);
     color: var(--ui-text-secondary);
     font-weight: var(--ui-font-medium);
     text-align: start;
   }
-  :slotted(th), :slotted(td) {
+  :global(:where(:not([data-hn-ui-table])):is(th)),
+  :global(:where(:not([data-hn-ui-table])):is(td)) {
     block-size: var(--_row-size);
     padding: var(--_pad-block) var(--_pad-inline);
     border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
@@ -203,7 +206,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
     vertical-align: middle;
   }
 
-  :slotted(thead th) {
+  :global(:where(:not([data-hn-ui-table])):is(thead th)) {
     block-size: auto;
     padding-block: var(--ui-space-2);
     border-block-end-color: var(--ui-border-divider);
@@ -214,28 +217,29 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
     vertical-align: bottom;
   }
 
-  :slotted(tbody th) {
+  :global(:where(:not([data-hn-ui-table])):is(tbody th)) {
     font-weight: var(--ui-font-medium);
   }
 
-  :slotted(tbody tr:last-child > *) {
+  :global(:where(:not([data-hn-ui-table])):is(tbody tr:last-child > *)) {
     border-block-end-width: 0;
   }
 
-  :slotted([data-ui-align="center"]) {
+  :global(:where(:not([data-hn-ui-table])):is([data-ui-align="center"])) {
     text-align: center;
   }
 
-  :slotted([data-ui-align="end"]) {
+  :global(:where(:not([data-hn-ui-table])):is([data-ui-align="end"])) {
     text-align: end;
   }
 
-  :scope[data-ui-table-state~="stickyHeader"] :slotted(thead th) {
+  :global(:scope[data-ui-table-state~="stickyHeader"]
+    :where(:not([data-hn-ui-table])):is(thead th)) {
     position: sticky;
     inset-block-start: 0;
     z-index: 1;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-table])) {
     display: none;
   }
 }