@threadlabs/looma 0.28.13 → 0.28.15

package/vue/UiTopBar.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 { checkHydratedRoot, nativeAttrs } from './host'
 
@@ -8,11 +8,11 @@ checkHydratedRoot('header', 'ui-top-bar')
 </script>
 
 <template>
-  <header class="ui-top-bar" v-bind="nativeAttrs($attrs)">
-    <div class="leading"><slot name="leading" /></div>
-    <div class="title"><slot /></div>
-    <div class="search"><slot name="search" /></div>
-    <div class="actions"><slot name="actions" /></div>
+  <header class="ui-top-bar" v-bind="nativeAttrs($attrs)" data-hn data-hn-ui-top-bar>
+    <div class="leading" data-hn-ui-top-bar><slot name="leading" /></div>
+    <div class="title" data-hn-ui-top-bar><slot /></div>
+    <div class="search" data-hn-ui-top-bar><slot name="search" /></div>
+    <div class="actions" data-hn-ui-top-bar><slot name="actions" /></div>
   </header>
 </template>
 
@@ -51,8 +51,8 @@ checkHydratedRoot('header', 'ui-top-bar')
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-top-bar) {
-  :scope:where(:scope) {
+@scope (.ui-top-bar) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-top-bar])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-top-bar-actions-gap: var(--ui-top-bar-actions-gap);
 
@@ -77,24 +77,28 @@ checkHydratedRoot('header', 'ui-top-bar')
       var(--ui-top-bar-border, var(--ui-border-divider));
   }
 
-  .leading, .search, .actions {
+  :global(.leading:where([data-hn-ui-top-bar])),
+  :global(.search:where([data-hn-ui-top-bar])),
+  :global(.actions:where([data-hn-ui-top-bar])) {
     display: flex;
     align-items: center;
     flex-shrink: 0;
   }
 
-  .actions {
+  :global(.actions:where([data-hn-ui-top-bar])) {
     gap: var(--_ui-top-bar-actions-gap, var(--ui-space-1));
   }
 
-  .title {
+  :global(.title:where([data-hn-ui-top-bar])) {
     min-inline-size: 0;
     flex: 1;
   }
-  .leading:empty, .search:empty, .actions:empty {
+  :global(.leading:empty:where([data-hn-ui-top-bar])),
+  :global(.search:empty:where([data-hn-ui-top-bar])),
+  :global(.actions:empty:where([data-hn-ui-top-bar])) {
     display: none;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-top-bar])) {
     display: none;
   }
 }

package/vue/UiTree.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'
@@ -203,7 +203,7 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('div', 'ui-tree')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.marquee && 'marquee',
@@ -320,20 +320,22 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     class="ui-tree"
     role="tree"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-tree
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
-    :data-hover-expand-delay="reflectedProp(
+    :data-ui-tree-prop-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-tree-prop-hover-expand-delay="reflectedProp(
       'hoverExpandDelay',
       'hover-expand-delay',
       checkedProps.hoverExpandDelay,
       undefined,
       false,
     )"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
-    :data-marquee="reflectedProp('marquee', 'marquee', checkedProps.marquee, undefined, false)"
-    :data-max-depth="reflectedProp('maxDepth', 'max-depth', checkedProps.maxDepth, undefined, false)"
-    :data-move-activation="reflectedProp('moveActivation', 'move-activation', checkedProps.moveActivation, undefined, false)"
-    :data-selection="reflectedProp('selection', 'selection', checkedProps.selection, undefined, false)"
+    :data-ui-tree-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-tree-prop-marquee="reflectedProp('marquee', 'marquee', checkedProps.marquee, undefined, false)"
+    :data-ui-tree-prop-max-depth="reflectedProp('maxDepth', 'max-depth', checkedProps.maxDepth, undefined, false)"
+    :data-ui-tree-prop-move-activation="reflectedProp('moveActivation', 'move-activation', checkedProps.moveActivation, undefined, false)"
+    :data-ui-tree-prop-selection="reflectedProp('selection', 'selection', checkedProps.selection, undefined, false)"
     :data-ui-tree-state="hostState || undefined"
     ref="root"
   >
@@ -363,17 +365,17 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-tree) {
-  :scope:where(:scope):is([data-ui-tree-state~="marquee"]) {
+@scope (.ui-tree) to ([data-hn]) {
+  :global(:scope[data-ui-tree-state~="marquee"]:where([data-hn-ui-tree])) {
     --_ui-default-tree-item-marquee: 1;
   }
-  :scope:where(:scope):is([data-ui-tree-state~="density=compact"]) {
+  :global(:scope[data-ui-tree-state~="density=compact"]:where([data-hn-ui-tree])) {
     --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
     --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
     --_ui-default-tree-item-label-padding-block: 0;
   }
 
-  :scope:where(:scope) {
+  :global(:scope:where([data-hn-ui-tree])) {
     /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
        starts again from its own settings. */
     --_ui-tree-indent: var(--ui-tree-indent);
@@ -387,14 +389,14 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
     padding-inline-start: var(--ui-tree-gutter, 0px);
   }
 
-  :scope:where(:scope):is([data-move-mode])::after {
+  :global(:scope[data-move-mode]:where([data-hn-ui-tree])::after) {
     content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
     display: block;
     padding: var(--ui-space-2);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-sm);
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-tree])) {
     display: none;
   }
 }