@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiTabs.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'
@@ -182,7 +182,7 @@ provide('html-next:ui-tabs:internalValue', internalValue)
 provide('html-next:ui-tabs:tabs', tabs)
 checkHydratedRoot('div', 'ui-tabs')
 
-/** 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',
@@ -260,20 +260,23 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   <div
     class="ui-tabs"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-tabs
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-activation="reflectedProp('activation', 'activation', checkedProps.activation, undefined, false)"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-group="reflectedProp('group', 'group', checkedProps.group, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
-    :data-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-tabs-prop-activation="reflectedProp('activation', 'activation', checkedProps.activation, undefined, false)"
+    :data-ui-tabs-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-tabs-prop-group="reflectedProp('group', 'group', checkedProps.group, undefined, false)"
+    :data-ui-tabs-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-tabs-prop-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-ui-tabs-prop-stretch="reflectedProp('stretch', 'stretch', checkedProps.stretch, undefined, false)"
+    :data-ui-tabs-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-tabs-state="hostState || undefined"
     ref="root"
   >
     <div
       class="list"
       role="tablist"
+      data-hn-ui-tabs
       :aria-label="checkedProps.label ?? undefined"
       :aria-orientation="checkedProps.orientation ?? undefined"
       ref="listElement"
@@ -283,6 +286,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
             :key="tab.id"
             type="button"
             role="tab"
+            data-hn-ui-tabs
             :id="concat(tab.id, '-tab')"
             :value="tab.id"
             :aria-controls="tab.id"
@@ -291,7 +295,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
             {{ tab.label }}
           </button></KeyedBoundary></slot>
     </div>
-    <div class="panels" ref="panelsElement"><slot /></div>
+    <div class="panels" data-hn-ui-tabs ref="panelsElement"><slot /></div>
   </div>
 </template>
 
@@ -318,8 +322,8 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-tabs) {
-  :scope:where(:scope) {
+@scope (.ui-tabs) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-tabs])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
     --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
@@ -330,19 +334,19 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     --_tab-padding-inline: var(--ui-space-3);
   }
 
-  :scope:where(:scope):is([data-ui-tabs-state~="density=compact"]) {
+  :global(:scope[data-ui-tabs-state~="density=compact"]:where([data-hn-ui-tabs])) {
     --_tab-min-block-size: var(--ui-control-size-sm);
     --_tab-padding-block: var(--ui-space-1);
     --_tab-padding-inline: var(--ui-space-2);
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-tabs])) {
     display: grid;
     inline-size: 100%;
     min-inline-size: 0;
   }
 
-  .list {
+  :global(.list:where([data-hn-ui-tabs])) {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
@@ -359,7 +363,8 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  .list button, .list > :slotted(button[slot="tab"]) {
+  :global(.list button:where([data-hn-ui-tabs])),
+  :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"])) {
     min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
     margin: 0 0 calc(-1 * var(--ui-border-width));
     padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
@@ -378,7 +383,8 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
       border-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
   @supports (text-box-trim: trim-both) {
-    .list button, .list > :slotted(button[slot="tab"]) {
+    :global(.list button:where([data-hn-ui-tabs])),
+    :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"])) {
       display: block;
       text-align: center;
       align-content: center;
@@ -387,23 +393,27 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     }
   }
 
-  :scope[data-ui-tabs-state~="stretch"] .list {
+  :global(:scope[data-ui-tabs-state~="stretch"] .list:where([data-hn-ui-tabs])) {
     grid-auto-columns: minmax(max-content, 1fr);
   }
 
-  .list button, .list > :slotted(button[slot="tab"]) {
+  :global(.list button:where([data-hn-ui-tabs])),
+  :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"])) {
     white-space: nowrap;
   }
 
-  .list button:hover, .list > :slotted(button[slot="tab"]:hover) {
+  :global(.list button:hover:where([data-hn-ui-tabs])),
+  :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"]:hover)) {
     color: var(--ui-text-primary);
     background: var(--ui-surface-muted);
   }
-  .list button[aria-selected="true"], .list > :slotted(button[slot="tab"][aria-selected="true"]) {
+  :global(.list button[aria-selected="true"]:where([data-hn-ui-tabs])),
+  :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"][aria-selected="true"])) {
     color: var(--ui-accent-solid);
     border-block-end-color: var(--ui-accent-solid);
   }
-  .list button:focus-visible, .list > :slotted(button[slot="tab"]:focus-visible) {
+  :global(.list button:focus-visible:where([data-hn-ui-tabs])),
+  :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"]:focus-visible)) {
     position: relative;
     outline: none;
     box-shadow: inset 0 0 0 var(--ui-focus-width)
@@ -411,46 +421,51 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
     border-radius: var(--ui-radius-sm);
   }
 
-  .panels {
+  :global(.panels:where([data-hn-ui-tabs])) {
     min-inline-size: 0;
   }
-  .panels > :slotted(*) {
+  :global(.panels > :where(:not([data-hn-ui-tabs])):is(*)) {
     padding: var(--ui-space-4);
   }
 
-  :scope:where(:scope):is([data-ui-tabs-state~="orientation=vertical"]) {
+  :global(:scope[data-ui-tabs-state~="orientation=vertical"]:where([data-hn-ui-tabs])) {
     grid-template-columns: max-content minmax(0, 1fr);
     align-items: start;
   }
 
-  :scope[data-ui-tabs-state~="orientation=vertical"] .list {
+  :global(:scope[data-ui-tabs-state~="orientation=vertical"] .list:where([data-hn-ui-tabs])) {
     grid-auto-flow: row;
     grid-auto-columns: auto;
     border-block-end: 0;
     border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
   }
 
-  :scope[data-ui-tabs-state~="orientation=vertical"] .list button,
-  :scope[data-ui-tabs-state~="orientation=vertical"] .list > :slotted(button[slot="tab"]) {
+  :global(:scope[data-ui-tabs-state~="orientation=vertical"] .list button:where([data-hn-ui-tabs])),
+  :global(:scope[data-ui-tabs-state~="orientation=vertical"]
+    .list
+    > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"])) {
     margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
     border-block-end: 0;
     border-inline-end: var(--ui-accent-line-width) solid transparent;
     text-align: start;
   }
 
-  :scope[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"],
-  :scope[data-ui-tabs-state~="orientation=vertical"]
+  :global(:scope[data-ui-tabs-state~="orientation=vertical"]
+    .list
+    button[aria-selected="true"]:where([data-hn-ui-tabs])),
+  :global(:scope[data-ui-tabs-state~="orientation=vertical"]
     .list
-    > :slotted(button[slot="tab"][aria-selected="true"]) {
+    > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"][aria-selected="true"])) {
     border-inline-end-color: var(--ui-accent-solid);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .list button, .list > :slotted(button[slot="tab"]) {
+    :global(.list button:where([data-hn-ui-tabs])),
+    :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"])) {
       transition: none;
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-tabs])) {
     display: none;
   }
 }