@threadlabs/looma 0.28.13 → 0.28.14

package/vue/UiCheckbox.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'
@@ -205,7 +205,7 @@ const internalChecked = ref(false)
 provide('html-next:ui-checkbox:internalChecked', internalChecked)
 checkHydratedRoot('label', 'ui-checkbox')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.invalid && 'invalid',
@@ -274,20 +274,23 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   <label
     class="ui-checkbox"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-checkbox
     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-indeterminate="reflectedProp('indeterminate', 'indeterminate', checkedProps.indeterminate, undefined, false)"
-    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
-    :data-label="reflectedProp('label', 'label', checkedProps.label, 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-checkbox-prop-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-ui-checkbox-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-checkbox-prop-indeterminate="reflectedProp('indeterminate', 'indeterminate', checkedProps.indeterminate, undefined, false)"
+    :data-ui-checkbox-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-checkbox-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-ui-checkbox-prop-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
+    :data-ui-checkbox-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-checkbox-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-checkbox-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-ui-checkbox-state="hostState || undefined"
     ref="root"
   ><input
       type="checkbox"
+      data-hn-ui-checkbox
       v-bind-control="{
         tag: 'input',
         name: 'checked',
@@ -304,10 +307,13 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.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
-          name="description"
-        /></span></span></label>
+    <span class="text" data-hn-ui-checkbox><span class="label" data-hn-ui-checkbox><slot /></span>
+      <span
+        class="description"
+        aria-hidden="true"
+        data-hn-ui-checkbox
+        ref="descriptionElement"
+      ><slot name="description" /></span></span></label>
 </template>
 
 <style scoped>
@@ -350,8 +356,8 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-checkbox) {
-  :scope:where(:scope) {
+@scope (.ui-checkbox) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-checkbox])) {
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-checkbox-size: var(--ui-checkbox-size);
     --_ui-checkbox-invalid-border: var(
@@ -366,29 +372,29 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     color: var(--ui-text-primary);
     cursor: pointer;
   }
-  .text {
+  :global(.text:where([data-hn-ui-checkbox])) {
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-1);
     min-inline-size: 0;
   }
 
-  .label {
+  :global(.label:where([data-hn-ui-checkbox])) {
     min-inline-size: 0;
     line-height: var(--ui-line-height-md);
   }
 
-  .description {
+  :global(.description:where([data-hn-ui-checkbox])) {
     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-checkbox])) {
     display: none;
   }
 
-  input {
+  :global(input:where([data-hn-ui-checkbox])) {
     appearance: none;
     -webkit-appearance: none;
     position: relative;
@@ -407,19 +413,20 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
   }
 
-  input::after {
+  :global(input:where([data-hn-ui-checkbox])::after) {
     content: "";
     position: absolute;
     opacity: 0;
     transition: opacity 120ms var(--ui-motion-ease);
   }
 
-  input:checked, input:indeterminate {
+  :global(input:checked:where([data-hn-ui-checkbox])),
+  :global(input:indeterminate:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-accent-solid);
     background: var(--ui-accent-solid);
     box-shadow: var(--ui-control-inset);
   }
-  input:checked::after {
+  :global(input:checked:where([data-hn-ui-checkbox])::after) {
     inset: 0;
     margin: auto;
     inline-size: 0.28rem;
@@ -435,7 +442,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
       both;
   }
 
-  input:indeterminate::after {
+  :global(input:indeterminate:where([data-hn-ui-checkbox])::after) {
     inset: 50% 0.23rem auto;
     block-size: 0.125rem;
     border-radius: var(--ui-radius-round);
@@ -445,65 +452,66 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    input::after {
+    :global(input:where([data-hn-ui-checkbox])::after) {
       transition: none;
       animation: none;
     }
   }
 
-  input:hover:enabled {
+  :global(input:hover:enabled:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-accent-solid);
   }
 
-  input:focus-visible {
+  :global(input:focus-visible:where([data-hn-ui-checkbox])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
     outline-offset: var(--ui-focus-width);
   }
 
-  :scope[data-ui-checkbox-state~="invalid"] input {
+  :global(:scope[data-ui-checkbox-state~="invalid"] input:where([data-hn-ui-checkbox])) {
     border-color: var(--_ui-checkbox-invalid-border);
   }
 
-  :scope:where(:scope):is([data-ui-checkbox-state~="disabled"]) {
+  :global(:scope[data-ui-checkbox-state~="disabled"]:where([data-hn-ui-checkbox])) {
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
-  :scope[data-ui-checkbox-state~="disabled"] .description {
+  :global(:scope[data-ui-checkbox-state~="disabled"] .description:where([data-hn-ui-checkbox])) {
     color: var(--ui-disabled-text);
   }
-  :scope[data-ui-checkbox-state~="disabled"] input {
+  :global(:scope[data-ui-checkbox-state~="disabled"] input:where([data-hn-ui-checkbox])) {
     border-color: var(--ui-disabled-border);
     background: var(--ui-disabled-surface);
     box-shadow: none;
     cursor: not-allowed;
   }
-  :scope:where(:scope):is([data-ui-checkbox-state~="size=sm"]) {
+  :global(:scope[data-ui-checkbox-state~="size=sm"]:where([data-hn-ui-checkbox])) {
     --_font: var(--ui-font-size-sm);
     --_row: var(--ui-control-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-checkbox-state~="size=lg"]) {
+  :global(:scope[data-ui-checkbox-state~="size=lg"]:where([data-hn-ui-checkbox])) {
     --_font: var(--ui-font-size-md);
     --_row: var(--ui-control-size-lg);
   }
 
-  :scope:where(:scope):is([data-ui-checkbox-state~="size=sm"]),
-  :scope:where(:scope):is([data-ui-checkbox-state~="size=lg"]) {
+  :global(:scope[data-ui-checkbox-state~="size=sm"]:where([data-hn-ui-checkbox])),
+  :global(:scope[data-ui-checkbox-state~="size=lg"]:where([data-hn-ui-checkbox])) {
     --_line: calc(var(--_font) * var(--ui-line-height-md));
     font-size: var(--_font);
     padding-block: calc((var(--_row) - var(--_line)) / 2);
   }
 
-  :scope[data-ui-checkbox-state~="size=sm"] input, :scope[data-ui-checkbox-state~="size=lg"] input {
+  :global(:scope[data-ui-checkbox-state~="size=sm"] input:where([data-hn-ui-checkbox])),
+  :global(:scope[data-ui-checkbox-state~="size=lg"] input:where([data-hn-ui-checkbox])) {
     margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
   }
 
   @media (pointer: coarse) {
-    :scope:where(:scope):is([data-ui-checkbox-state~="size=sm"]) {
+    :global(:scope[data-ui-checkbox-state~="size=sm"]:where([data-hn-ui-checkbox])) {
       --_row: var(--ui-control-min-block-size);
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-checkbox])) {
     display: none;
   }
 }

package/vue/UiCluster.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'
@@ -153,7 +153,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-cluster')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.fixed && 'fixed',
@@ -180,14 +180,16 @@ const hostState = computed(() =>
   <div
     class="ui-cluster"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-cluster
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
-    :data-fixed="reflectedProp('fixed', 'fixed', checkedProps.fixed, undefined, false)"
-    :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
-    :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
-    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
-    :data-padding-end="reflectedProp('paddingEnd', 'padding-end', checkedProps.paddingEnd, undefined, false)"
-    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
+    :data-ui-cluster-prop-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-ui-cluster-prop-fixed="reflectedProp('fixed', 'fixed', checkedProps.fixed, undefined, false)"
+    :data-ui-cluster-prop-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-ui-cluster-prop-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
+    :data-ui-cluster-prop-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-ui-cluster-prop-padding-end="reflectedProp('paddingEnd', 'padding-end', checkedProps.paddingEnd, undefined, false)"
+    :data-ui-cluster-prop-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-cluster-state="hostState || undefined"
   >
     <slot />
@@ -203,8 +205,8 @@ const hostState = computed(() =>
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-cluster) {
-  :scope:where(:scope) {
+@scope (.ui-cluster) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-3);
     display: flex;
     flex-wrap: wrap;
@@ -215,71 +217,71 @@ const hostState = computed(() =>
     margin: 0;
   }
 
-  :scope:where(:scope):is([data-ui-cluster-state~="fixed"]) {
+  :global(:scope[data-ui-cluster-state~="fixed"]:where([data-hn-ui-cluster])) {
     flex: none;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="padding=s"]) {
+  :global(:scope[data-ui-cluster-state~="padding=s"]:where([data-hn-ui-cluster])) {
     padding: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="padding=m"]) {
+  :global(:scope[data-ui-cluster-state~="padding=m"]:where([data-hn-ui-cluster])) {
     padding: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="padding=l"]) {
+  :global(:scope[data-ui-cluster-state~="padding=l"]:where([data-hn-ui-cluster])) {
     padding: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=s"]) {
+  :global(:scope[data-ui-cluster-state~="paddingEnd=s"]:where([data-hn-ui-cluster])) {
     padding-inline-end: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=m"]) {
+  :global(:scope[data-ui-cluster-state~="paddingEnd=m"]:where([data-hn-ui-cluster])) {
     padding-inline-end: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=l"]) {
+  :global(:scope[data-ui-cluster-state~="paddingEnd=l"]:where([data-hn-ui-cluster])) {
     padding-inline-end: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=xl"]) {
+  :global(:scope[data-ui-cluster-state~="paddingEnd=xl"]:where([data-hn-ui-cluster])) {
     padding-inline-end: calc(var(--ui-space-4) * 4);
   }
 
-  :scope:where(:scope):is([data-ui-cluster-state~="gap=xs"]) {
+  :global(:scope[data-ui-cluster-state~="gap=xs"]:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-2);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="gap=s"]) {
+  :global(:scope[data-ui-cluster-state~="gap=s"]:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-3);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="gap=m"]) {
+  :global(:scope[data-ui-cluster-state~="gap=m"]:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="gap=l"]) {
+  :global(:scope[data-ui-cluster-state~="gap=l"]:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-5);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="gap=xl"]) {
+  :global(:scope[data-ui-cluster-state~="gap=xl"]:where([data-hn-ui-cluster])) {
     --_layout-gap: var(--ui-space-6);
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="align=start"]) {
+  :global(:scope[data-ui-cluster-state~="align=start"]:where([data-hn-ui-cluster])) {
     align-items: flex-start;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="align=end"]) {
+  :global(:scope[data-ui-cluster-state~="align=end"]:where([data-hn-ui-cluster])) {
     align-items: flex-end;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="align=baseline"]) {
+  :global(:scope[data-ui-cluster-state~="align=baseline"]:where([data-hn-ui-cluster])) {
     align-items: baseline;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="align=stretch"]) {
+  :global(:scope[data-ui-cluster-state~="align=stretch"]:where([data-hn-ui-cluster])) {
     align-items: stretch;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="justify=center"]) {
+  :global(:scope[data-ui-cluster-state~="justify=center"]:where([data-hn-ui-cluster])) {
     justify-content: center;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="justify=end"]) {
+  :global(:scope[data-ui-cluster-state~="justify=end"]:where([data-hn-ui-cluster])) {
     justify-content: flex-end;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="justify=between"]) {
+  :global(:scope[data-ui-cluster-state~="justify=between"]:where([data-hn-ui-cluster])) {
     justify-content: space-between;
   }
-  :scope:where(:scope):is([data-ui-cluster-state~="wrap=nowrap"]) {
+  :global(:scope[data-ui-cluster-state~="wrap=nowrap"]:where([data-hn-ui-cluster])) {
     flex-wrap: nowrap;
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]:where([data-hn-ui-cluster])) {
     display: none;
   }
 }