@threadlabs/looma 0.29.17 → 0.30.0

package/vue/UiNavItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -236,7 +236,7 @@ const guardedBinding = computed(() => {
 })
 checkHydratedRoot((checkedProps.value.as === 'a') ? 'a' : ('button'), 'ui-nav-item')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',

package/vue/UiPageHeader.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -41,7 +41,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('header', 'ui-page-header')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.align && 'align',

package/vue/UiPopover.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -177,7 +177,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-popover:internalOpen', internalOpen)
 checkHydratedRoot('span', 'ui-popover')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     internalOpen.value && 'internalOpen',

package/vue/UiRadio.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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'
@@ -155,7 +155,7 @@ const internalChecked = ref(false)
 provide('html-next:ui-radio:internalChecked', internalChecked)
 checkHydratedRoot('label', 'ui-radio')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.disabled && 'disabled',

package/vue/UiRadioGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -201,7 +201,7 @@ const internalValue = ref('')
 provide('html-next:ui-radio-group:internalValue', internalValue)
 checkHydratedRoot('fieldset', 'ui-radio-group')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.invalid && 'invalid',

package/vue/UiReel.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -72,7 +72,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-reel')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.gap && 'gap',
@@ -121,12 +121,14 @@ const hostState = computed(() =>
 
 @scope (.ui-reel) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-reel])) {
-    /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-reel-item-width: var(--ui-reel-item-width);
-
     --_reel-gap: var(--ui-space-4);
-    --_reel-item-width: auto;
-    display: flex;
+    --_reel-item-width: max-content;
+    /* Sizes its children from its own box: one row of columns, each the item width, that never
+       shrinks to fit, so the reel scrolls once they overflow. */
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--ui-reel-item-width, var(--_reel-item-width));
+    justify-content: start;
     inline-size: 100%;
     gap: var(--ui-reel-gap, var(--_reel-gap));
     min-inline-size: 0;
@@ -163,11 +165,6 @@ const hostState = computed(() =>
     --_ui-scroll-fade-direction: to left;
   }
 
-  :global(:scope > :where(:not([data-hn-ui-reel])):is(*)) {
-    min-inline-size: 0;
-    flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
-  }
-
   :global(:scope[data-ui-reel-state~="gap=xs"]:where([data-hn-ui-reel])) {
     --_reel-gap: var(--ui-space-2);
   }

package/vue/UiScrollArea.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -131,11 +131,10 @@ const root = ref<HTMLElement | null>(null)
 const contentElement = useTemplateRef<HTMLElement>('contentElement')
 checkHydratedRoot('div', 'ui-scroll-area')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.fill && 'fill',
-    checkedProps.value.trim && 'trim',
     checkedProps.value.orientation && 'orientation',
     checkedProps.value.orientation != null
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
@@ -144,6 +143,7 @@ const hostState = computed(() =>
     checkedProps.value.padding && 'padding',
     checkedProps.value.padding != null
     && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
+    checkedProps.value.trim && 'trim',
   ].filter(Boolean).join(' ')
 )
 

package/vue/UiSearchResultRow.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -80,7 +80,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('button', 'ui-search-result-row')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',

package/vue/UiSearchShell.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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'

package/vue/UiSection.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -77,7 +77,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('section', 'ui-section')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.variant && 'variant',

package/vue/UiSelect.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -131,7 +131,7 @@ const model = computed({
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('select', 'ui-select')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',

package/vue/UiSeparator.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -98,7 +98,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('hr', 'ui-separator')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.emphasis && 'emphasis',

package/vue/UiSidebar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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'
@@ -206,7 +206,7 @@ provide('html-next:ui-sidebar:drawer', drawer)
 provide('html-next:ui-sidebar:resizing', resizing)
 checkHydratedRoot('aside', 'ui-sidebar')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.side && 'side',

package/vue/UiSpinner.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -192,7 +192,7 @@ const guardedBinding3 = computed(() => {
 })
 checkHydratedRoot('span', 'ui-spinner')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',

package/vue/UiStack.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -118,7 +118,7 @@ const reflectedProp = useReflectedProp()
 
 checkHydratedRoot('div', 'ui-stack')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.fill && 'fill',

package/vue/UiStatusMessage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -102,7 +102,7 @@ const guarded = computed(() => {
 })
 checkHydratedRoot('div', 'ui-status-message')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.kind && 'kind',

package/vue/UiSwatch.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',

package/vue/UiSwitch.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.disabled && 'disabled',

package/vue/UiSwitcher.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     overLimit.value && 'overLimit',
@@ -183,27 +183,26 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
 
 @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);
-
     --_switcher-gap: var(--ui-space-4);
-    display: flex;
-    flex-wrap: wrap;
+    --_switcher-threshold: 30rem;
+    --_switcher-track: clamp(
+      1px,
+      (var(--ui-switcher-threshold, var(--_switcher-threshold)) - 100%) * 999,
+      100%
+    );
+    /* Lays its children out from its own box: below the threshold each track takes the full width;
+       at or above it, tracks shrink to 1px so every child fits one row and empty tracks collapse.
+       The large multiplier makes the whole row flip at once. */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--_switcher-track), 1fr));
     gap: var(--ui-switcher-gap, var(--_switcher-gap));
     min-inline-size: 0;
     max-inline-size: 100%;
     margin: 0;
   }
 
-  :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);
-  }
-
-  :global(:scope[data-ui-switcher-state~="overLimit"] > :where(:not([data-hn-ui-switcher])):is(*)) {
-    flex-basis: 100%;
+  :global(:scope[data-ui-switcher-state~="overLimit"]:where([data-hn-ui-switcher])) {
+    grid-template-columns: minmax(0, 1fr);
   }
 
   :global(:scope[data-ui-switcher-state~="gap=xs"]:where([data-hn-ui-switcher])) {
@@ -221,26 +220,23 @@ useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
   :global(:scope[data-ui-switcher-state~="gap=xl"]:where([data-hn-ui-switcher])) {
     --_switcher-gap: var(--ui-space-6);
   }
-  :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);
+  :global(:scope[data-ui-switcher-state~="threshold=xs"]:where([data-hn-ui-switcher])) {
+    --_switcher-threshold: 20rem;
   }
-  :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);
+  :global(:scope[data-ui-switcher-state~="threshold=md"]:where([data-hn-ui-switcher])) {
+    --_switcher-threshold: 45rem;
   }
-  :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);
+  :global(:scope[data-ui-switcher-state~="threshold=lg"]:where([data-hn-ui-switcher])) {
+    --_switcher-threshold: 60rem;
   }
   :global(:scope[data-ui-switcher-state~="align=start"]:where([data-hn-ui-switcher])) {
-    align-items: flex-start;
+    align-items: start;
   }
   :global(:scope[data-ui-switcher-state~="align=center"]:where([data-hn-ui-switcher])) {
     align-items: center;
   }
   :global(:scope[data-ui-switcher-state~="align=end"]:where([data-hn-ui-switcher])) {
-    align-items: flex-end;
+    align-items: end;
   }
   :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.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',

package/vue/UiTabs.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.density && 'density',

package/vue/UiText.d.ts

@@ -117,7 +117,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     size: "inherit" | "xs" | "sm" | "md" | "lg" | null;
     trim: boolean | null;
     font: "inherit" | "sans" | null;
-    tone: "default" | "secondary" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
+    tone: "default" | "secondary" | "muted" | "info" | "accent" | "success" | "warning" | "danger" | null;
     variant: "code" | "body" | "eyebrow" | null;
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;

package/vue/UiText.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -280,7 +280,7 @@ checkHydratedRoot(
   'ui-text',
 )
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.grow && 'grow',

package/vue/UiTextarea.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -196,7 +196,7 @@ const model = computed({
 const root = ref<HTMLElement | null>(null)
 checkHydratedRoot('textarea', 'ui-textarea')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',

package/vue/UiToast.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -83,7 +83,7 @@ const root = ref<HTMLElement | null>(null)
 const actionElement = useTemplateRef<HTMLElement>('actionElement')
 checkHydratedRoot('div', 'ui-toast')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.tone && 'tone',

package/vue/UiToastRegion.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -110,7 +110,7 @@ const toasts = ref<
 provide('html-next:ui-toast-region:toasts', toasts)
 checkHydratedRoot('div', 'ui-toast-region')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.placement && 'placement',

package/vue/UiTooltip.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -227,7 +227,7 @@ const internalOpen = ref(false)
 provide('html-next:ui-tooltip:internalOpen', internalOpen)
 checkHydratedRoot('span', 'ui-tooltip')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.inverse && 'inverse',

package/vue/UiTopBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { checkHydratedRoot, nativeAttrs } from './host'
 

package/vue/UiTree.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.marquee && 'marquee',

package/vue/UiTreeItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.57 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.58 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'
@@ -404,7 +404,7 @@ provide('html-next:ui-tree-item:isContainer', isContainer)
 provide('html-next:ui-tree-item:moving', moving)
 checkHydratedRoot('div', 'ui-tree-item')
 
-/** The values the styles' :host() prop and state rules test. */
+/** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
     checkedProps.value.selected && 'selected',

package/vue/chunks/UiActionBar.js

@@ -37,6 +37,6 @@ var UiActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			])], 16);
 		};
 	}
-}), [["__scopeId", "data-v-a9a73360"]]);
+}), [["__scopeId", "data-v-cb03112d"]]);
 //#endregion
 export { UiActionBar_default as t };

package/vue/chunks/UiAffordanceScope.js

@@ -71,7 +71,7 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const engaged = ref(false);
 		provide("html-next:ui-affordance-scope:engaged", engaged);
 		checkHydratedRoot("span", "ui-affordance-scope");
-		/** The values the styles' :host() prop and state rules test. */
+		/** The values the styles' :host() and :state() rules test. */
 		const hostState = computed(() => [
 			engaged.value && "engaged",
 			checkedProps.value.guide && "guide",
@@ -117,6 +117,6 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4341ad4c"]]);
+}), [["__scopeId", "data-v-3d2e92af"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiAvatar.js

@@ -207,7 +207,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		provide("html-next:ui-avatar:initials", initials);
 		provide("html-next:ui-avatar:showGlyph", showGlyph);
 		checkHydratedRoot("span", "ui-avatar");
-		/** The values the styles' :host() prop and state rules test. */
+		/** The values the styles' :host() and :state() rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.size && "size",
 			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
@@ -324,6 +324,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-412de8b7"]]);
+}), [["__scopeId", "data-v-bea3455f"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -139,7 +139,7 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		provide("html-next:ui-avatar-group:overflowCount", overflowCount);
 		provide("html-next:ui-avatar-group:overflowAnnouncement", overflowAnnouncement);
 		checkHydratedRoot("div", "ui-avatar-group");
-		/** The values the styles' :host() prop and state rules test. */
+		/** The values the styles' :host() and :state() rules test. */
 		const hostState = computed(() => [checkedProps.value.size && "size", checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(() => import("@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.js"), {
@@ -216,6 +216,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9e8e1506"]]);
+}), [["__scopeId", "data-v-24eedda2"]]);
 //#endregion
 export { UiAvatarGroup_default as t };