@threadlabs/looma 0.28.12 → 0.28.14

package/vue/UiImage.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, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -166,7 +166,7 @@ const root = ref<HTMLElement | null>(null)
 const frameElement = useTemplateRef<HTMLElement>('frameElement')
 checkHydratedRoot('figure', 'ui-image')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.placement && 'placement',
@@ -222,30 +222,38 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
   <figure
     class="ui-image"
     v-bind="nativeAttrs($attrs)"
+    data-hn
+    data-hn-ui-image
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
-    :data-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
-    :data-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
-    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
-    :data-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
-    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
-    :data-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
-    :data-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
+    :data-ui-image-prop-alt="reflectedProp('alt', 'alt', checkedProps.alt, undefined, false)"
+    :data-ui-image-prop-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
+    :data-ui-image-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
+    :data-ui-image-prop-resizable="reflectedProp('resizable', 'resizable', checkedProps.resizable, undefined, false)"
+    :data-ui-image-prop-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-ui-image-prop-src="reflectedProp('src', 'src', checkedProps.src, undefined, false)"
+    :data-ui-image-prop-width="reflectedProp('width', 'width', checkedProps.width, undefined, false)"
     :data-ui-image-state="hostState || undefined"
     ref="root"
   >
-    <div class="frame" ref="frameElement">
+    <div class="frame" data-hn-ui-image ref="frameElement">
       <slot name="media"><img
+          data-hn-ui-image
           :src="checkedProps.src ?? undefined"
           :alt="checkedProps.alt ?? undefined"
           :width="checkedProps.width?.toString()"
           :height="checkedProps.height?.toString()"
         ></slot>
-      <div class="handles" :hidden="!(checkedProps.selected && checkedProps.resizable)">
+      <div
+        class="handles"
+        data-hn-ui-image
+        :hidden="!(checkedProps.selected && checkedProps.resizable)"
+      >
         <button
           type="button"
           class="handle"
           data-corner="top-left"
           aria-label="Resize image from top left"
+          data-hn-ui-image
         >
         </button>
         <button
@@ -253,6 +261,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
           class="handle"
           data-corner="top-right"
           aria-label="Resize image from top right"
+          data-hn-ui-image
         >
         </button>
         <button
@@ -260,6 +269,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
           class="handle"
           data-corner="bottom-left"
           aria-label="Resize image from bottom left"
+          data-hn-ui-image
         >
         </button>
         <button
@@ -267,6 +277,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
           class="handle"
           data-corner="bottom-right"
           aria-label="Resize image from bottom right"
+          data-hn-ui-image
         >
         </button>
       </div>
@@ -276,8 +287,8 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
 </template>
 
 <style scoped>
-@scope (.ui-image) {
-  :scope:where(:scope) {
+@scope (.ui-image) to ([data-hn]) {
+  :global(:scope:where([data-hn-ui-image])) {
     display: flex;
     justify-content: flex-start;
     box-sizing: border-box;
@@ -286,33 +297,33 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
     margin: 0;
     padding: var(--ui-space-3) 0;
   }
-  :scope:where(:scope):is([data-ui-image-state~="placement=center"]) {
+  :global(:scope[data-ui-image-state~="placement=center"]:where([data-hn-ui-image])) {
     justify-content: center;
   }
-  :scope:where(:scope):is([data-ui-image-state~="placement=wrap-left"]) {
+  :global(:scope[data-ui-image-state~="placement=wrap-left"]:where([data-hn-ui-image])) {
     float: left;
     padding-inline-end: var(--ui-space-4);
   }
-  :scope:where(:scope):is([data-ui-image-state~="placement=wrap-right"]) {
+  :global(:scope[data-ui-image-state~="placement=wrap-right"]:where([data-hn-ui-image])) {
     float: right;
     padding-inline-start: var(--ui-space-4);
   }
-  :scope:where(:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+  :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]):where([data-hn-ui-image])) {
     inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
   }
-  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-    .frame {
+  :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    .frame:where([data-hn-ui-image])) {
     inline-size: 100%;
   }
-  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+  :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
     .frame
-    img,
-  :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+    img:where([data-hn-ui-image])),
+  :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
     .frame
-    :slotted(img) {
+    :where(:not([data-hn-ui-image])):is(img)) {
     inline-size: 100%;
   }
-  .frame {
+  :global(.frame:where([data-hn-ui-image])) {
     position: relative;
     flex: 0 1 auto;
     inline-size: var(--_ui-image-width, fit-content);
@@ -321,21 +332,23 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
     align-self: flex-start;
     border-radius: var(--ui-radius-md);
   }
-  .frame img, .frame :slotted(img) {
+  :global(.frame img:where([data-hn-ui-image])),
+  :global(.frame :where(:not([data-hn-ui-image])):is(img)) {
     display: block;
     max-inline-size: 100%;
     block-size: auto;
     margin: 0;
     border-radius: inherit;
   }
-  :scope[data-resizing] .frame img, :scope[data-resizing] .frame :slotted(img) {
+  :global(:scope[data-resizing] .frame img:where([data-hn-ui-image])),
+  :global(:scope[data-resizing] .frame :where(:not([data-hn-ui-image])):is(img)) {
     inline-size: 100%;
   }
-  :scope[data-ui-image-state~="selected"] .frame {
+  :global(:scope[data-ui-image-state~="selected"] .frame:where([data-hn-ui-image])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     outline-offset: var(--ui-border-width);
   }
-  .handle {
+  :global(.handle:where([data-hn-ui-image])) {
     position: absolute;
     z-index: 1;
     inline-size: 24px;
@@ -345,7 +358,7 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
     background: transparent;
     touch-action: none;
   }
-  .handle::after {
+  :global(.handle:where([data-hn-ui-image])::after) {
     content: "";
     position: absolute;
     inset: 8px;
@@ -353,74 +366,76 @@ useComponentHost(() => import('../components/ui-image/ui-image.js'), {
     border: var(--ui-border-width) solid var(--ui-focus-ring);
     border-radius: var(--ui-radius-sm);
   }
-  .handle:focus-visible {
+  :global(.handle:focus-visible:where([data-hn-ui-image])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
     border-radius: var(--ui-radius-sm);
   }
-  .handle[data-corner="top-left"] {
+  :global(.handle[data-corner="top-left"]:where([data-hn-ui-image])) {
     top: -12px;
     left: -12px;
     cursor: nwse-resize;
   }
-  .handle[data-corner="top-right"] {
+  :global(.handle[data-corner="top-right"]:where([data-hn-ui-image])) {
     top: -12px;
     right: -12px;
     cursor: nesw-resize;
   }
-  .handle[data-corner="bottom-left"] {
+  :global(.handle[data-corner="bottom-left"]:where([data-hn-ui-image])) {
     bottom: -12px;
     left: -12px;
     cursor: nesw-resize;
   }
-  .handle[data-corner="bottom-right"] {
+  :global(.handle[data-corner="bottom-right"]:where([data-hn-ui-image])) {
     bottom: -12px;
     right: -12px;
     cursor: nwse-resize;
   }
-  .handles[hidden], :scope:where(:scope):is([hidden]) {
+  :global(.handles[hidden]:where([data-hn-ui-image])),
+  :global(:scope[hidden]:where([data-hn-ui-image])) {
     display: none;
   }
   @media (max-width: 767px) {
-    :scope:where(:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+    :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"]):where([data-hn-ui-image])) {
       float: none;
       inline-size: 100%;
       padding-inline: 0;
     }
-    :scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-      .handles {
+    :global(:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+      .handles:where([data-hn-ui-image])) {
       display: none;
     }
   }
   @media (pointer: coarse) {
-    .handle {
+    :global(.handle:where([data-hn-ui-image])) {
       inline-size: 44px;
       block-size: 44px;
     }
-    .handle::after {
+    :global(.handle:where([data-hn-ui-image])::after) {
       inset: 18px;
     }
-    .handle[data-corner="top-left"] {
+    :global(.handle[data-corner="top-left"]:where([data-hn-ui-image])) {
       top: -22px;
       left: -22px;
     }
-    .handle[data-corner="top-right"] {
+    :global(.handle[data-corner="top-right"]:where([data-hn-ui-image])) {
       top: -22px;
       right: -22px;
     }
-    .handle[data-corner="bottom-left"] {
+    :global(.handle[data-corner="bottom-left"]:where([data-hn-ui-image])) {
       bottom: -22px;
       left: -22px;
     }
-    .handle[data-corner="bottom-right"] {
+    :global(.handle[data-corner="bottom-right"]:where([data-hn-ui-image])) {
       bottom: -22px;
       right: -22px;
     }
   }
   @media (forced-colors: active) {
-    :scope[data-ui-image-state~="selected"] .frame, .handle:focus-visible {
+    :global(:scope[data-ui-image-state~="selected"] .frame:where([data-hn-ui-image])),
+    :global(.handle:focus-visible:where([data-hn-ui-image])) {
       outline-color: Highlight;
     }
-    .handle::after {
+    :global(.handle:where([data-hn-ui-image])::after) {
       border-color: Highlight;
       background: Canvas;
     }

package/vue/UiInput.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"
@@ -400,7 +400,7 @@ const model = computed({
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('input', 'ui-input')
 
-/** The values the styles' :host-state() rules test. */
+/** The values the styles' :host() prop and state rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',
@@ -438,19 +438,20 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   <input
     class="ui-input"
     v-bind="nativeAttrs($attrs)"
+    data-hn
     :type="checkedProps.type ?? undefined"
     :disabled="checkedProps.disabled ?? undefined"
     :readonly="checkedProps.readonly ?? undefined"
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props, type: checkedProps['type'] } }"
-    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
-    :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
-    :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
-    :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
-    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
-    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
-    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-ui-input-prop-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-ui-input-prop-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-ui-input-prop-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
+    :data-ui-input-prop-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
+    :data-ui-input-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-ui-input-prop-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-ui-input-prop-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     v-bind-control="{ tag: 'input', name: 'value', value: model, optionalValue: true, defaultValue: '' }"
     @input="model = readBoundControl(
       $event.currentTarget as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
@@ -532,8 +533,8 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 
-@scope (.ui-input) {
-  :scope:where(:scope) {
+@scope (.ui-input) to ([data-hn]) {
+  :global(:scope) {
     box-sizing: border-box;
     display: inline-block;
     inline-size: var(--ui-input-inline-size, 100%);
@@ -571,7 +572,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
   }
-  :scope:where(:scope):is([data-ui-input-state~="size=sm"]) {
+  :global(:scope[data-ui-input-state~="size=sm"]) {
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
@@ -580,7 +581,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     font-size: var(--ui-font-size-sm);
   }
 
-  :scope:where(:scope):is([data-ui-input-state~="size=lg"]) {
+  :global(:scope[data-ui-input-state~="size=lg"]) {
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
@@ -589,7 +590,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     font-size: var(--ui-font-size-md);
   }
   @media (pointer: coarse) {
-    :scope:where(:scope) {
+    :global(:scope) {
       min-block-size: var(
         --ui-input-min-block-size,
         var(
@@ -599,30 +600,30 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       );
     }
 
-    :scope:where(:scope),
-    :scope:where(:scope):is([data-ui-input-state~="size=sm"]),
-    :scope:where(:scope):is([data-ui-input-state~="size=lg"]) {
+    :global(:scope),
+    :global(:scope[data-ui-input-state~="size=sm"]),
+    :global(:scope[data-ui-input-state~="size=lg"]) {
       font-size: var(--ui-font-size-md);
     }
 
-    :scope:where(:scope):is([data-ui-input-state~="size=sm"]) {
+    :global(:scope[data-ui-input-state~="size=sm"]) {
       min-block-size: var(
         --ui-input-min-block-size,
         var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
       );
     }
   }
-  :scope:where(:scope)::selection {
+  :global(:scope::selection) {
     background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
     color: inherit;
   }
 
-  :scope:where(:scope)::placeholder {
+  :global(:scope::placeholder) {
     color: var(--ui-control-placeholder, var(--ui-text-secondary));
     opacity: 1;
   }
 
-  :scope:where(:scope):is(:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
+  :global(:scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
     border-color: var(
       --ui-input-border-hover,
       var(
@@ -632,7 +633,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     );
   }
 
-  :scope:where(:scope):is(:focus-visible) {
+  :global(:scope:focus-visible) {
     border-color: var(
       --ui-input-focus-border,
       var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
@@ -647,15 +648,14 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       )
     );
   }
-  :scope:where(:scope):is([aria-invalid="true"]),
-  :scope:where(:scope):is(:is(:user-invalid, [data-user-invalid])) {
+  :global(:scope[aria-invalid="true"]), :global(:scope:is(:user-invalid, [data-user-invalid])) {
     border-color: var(
       --ui-input-invalid-border,
       var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
     );
   }
 
-  :scope:where(:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+  :global(:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
     box-shadow: var(
       --ui-input-invalid-focus-shadow,
       var(
@@ -670,14 +670,14 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     );
   }
 
-  :scope:where(:scope):is(:disabled) {
+  :global(:scope:disabled) {
     background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-disabled-text);
     box-shadow: none;
     cursor: not-allowed;
   }
   @media (forced-colors: active) {
-    :scope:where(:scope):is(:focus-visible) {
+    :global(:scope:focus-visible) {
       outline: var(
         --ui-input-focus-outline,
         var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
@@ -685,7 +685,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
       outline-offset: var(--ui-border-width);
     }
   }
-  :scope:where(:scope):is([hidden]) {
+  :global(:scope[hidden]) {
     display: none;
   }
 }