@threadlabs/looma 0.31.2 → 0.31.4

package/vue/UiPopover.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -27,6 +27,14 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    bare: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'bare' },
+      description:
+        'Delegates the surface to its content, with no padding, border, background, shadow, or overflow clipping.',
+      default: false,
+    },
     for: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -75,6 +83,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  bare: { type: null as unknown as PropType<boolean | null> },
   for: { type: null as unknown as PropType<string | null> },
   open: { type: null as unknown as PropType<boolean | null> },
   placement: {
@@ -98,18 +107,22 @@ const props = defineProps({
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
+  bare: false,
   for: '',
   open: false,
   placement: 'bottom-start',
   size: 'content',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
+  bare: false,
   for: '',
   open: false,
   placement: 'bottom-start',
   size: 'content',
 }, (name, value, source, values) => {
   switch (name) {
+    case 'bare':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'for':
       return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
     case 'open':
@@ -128,6 +141,11 @@ const propInputs = inputTracking.inputs
 const checkedProps = computed(() => {
   void inputTracking.version.value
   return ({
+    bare: propInputs.value<boolean | null>(
+      'bare',
+      props['bare'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
     for: propInputs.value<string | null>('for', props['for'], props[BINDING_INPUTS_PROP]) as string,
     open: propInputs.value<boolean | null>(
       'open',
@@ -209,6 +227,7 @@ checkHydratedRoot('span', 'ui-popover')
 /** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.bare && 'bare',
     internalOpen.value && 'internalOpen',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
@@ -260,7 +279,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['for', 'open', 'placement', 'size'],
+  propNames: ['bare', 'for', 'open', 'placement', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
@@ -274,6 +293,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     data-hn
     data-hn-ui-popover
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-popover-prop-bare="reflectedProp('bare', 'bare', checkedProps.bare, undefined, false)"
     :data-ui-popover-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-ui-popover-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     :data-ui-popover-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
@@ -313,6 +333,9 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   syntax: "*";
   inherits: false;
 }
+
+/* A toolbar or card can supply its own surface, including an unclipped shadow. */
+
 @scope (.ui-popover) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-popover])) {
     --_ui-popover-surface: var(--ui-popover-surface);
@@ -350,6 +373,13 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
   }
+  :global(:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover])) {
+    overflow: visible;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
 
   :global(:scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover])) {
     display: none;

package/vue/UiRadio.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 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/UiRadioGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiReel.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiScrollArea.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSearchResultRow.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSearchShell.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 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.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSelect.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSeparator.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSidebar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 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/UiSpinner.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiStack.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiStatusMessage.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSwatch.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiSwitch.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 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/UiSwitcher.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiTable.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiTabs.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 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/UiText.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiTextarea.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiToast.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -281,4 +281,65 @@ useComponentHost(() => import('../components/ui-toast/ui-toast.js'), {
     display: none;
   }
 }
+@scope ([data-slotted~="ui-toast"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-toast):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
+    --_ui-toast-accent: var(--ui-border-strong);
+    --_ui-toast-surface: var(--ui-surface-muted);
+
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    padding: var(--ui-space-3) var(--ui-space-4);
+    /* The close button's internal space supplies the rest of the trailing inset. */
+    padding-inline-end: var(--ui-space-2);
+    border: var(--ui-border-width) solid
+      var(
+        --ui-toast-border,
+        var(--ui-overlay-border, var(--ui-toast-accent, var(--_ui-toast-accent)))
+      );
+    border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--_ui-toast-surface)));
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --ui-toast-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    pointer-events: auto;
+  }
+
+  :global(:where(.ui-toast)[data-ui-toast-state~="tone=info"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
+    --_ui-toast-accent: var(--ui-info-solid);
+    --_ui-toast-surface: var(--ui-info-soft);
+  }
+  :global(:where(.ui-toast)[data-ui-toast-state~="tone=success"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
+    --_ui-toast-accent: var(--ui-success-solid);
+    --_ui-toast-surface: var(--ui-success-soft);
+  }
+  :global(:where(.ui-toast)[data-ui-toast-state~="tone=warning"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
+    --_ui-toast-accent: var(--ui-warning-solid);
+    --_ui-toast-surface: var(--ui-warning-soft);
+  }
+  :global(:where(.ui-toast)[data-ui-toast-state~="tone=danger"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
+    --_ui-toast-accent: var(--ui-danger-solid);
+    --_ui-toast-surface: var(--ui-danger-soft);
+  }
+
+  :global(.message:where(:scope, :scope *):where([data-hn-ui-toast])) {
+    min-inline-size: 0;
+    flex: 1;
+  }
+  :global(.action:not(:has(> *)):where(:scope, :scope *):where([data-hn-ui-toast])) {
+    display: none;
+  }
+  :global(:where(.ui-toast)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast])) {
+    display: none;
+  }
+}
 </style>

package/vue/UiToastRegion.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -512,4 +512,145 @@ useComponentHost(() => import('../components/ui-toast-region/ui-toast-region.js'
     display: none;
   }
 }
+
+@scope ([data-slotted~="ui-toast-region"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+  :global(:where(.ui-toast-region):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-toast-region-surface: var(--ui-toast-region-surface);
+    --_ui-toast-region-border: var(--ui-toast-region-border);
+    --_ui-toast-region-radius: var(--ui-toast-region-radius);
+    --_ui-toast-region-shadow: var(--ui-toast-region-shadow);
+    --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
+    --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
+
+    position: fixed;
+    top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: grid;
+    gap: var(--ui-space-2);
+    inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  :global(:where(.ui-toast-region):not(:popover-open):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    display: none;
+  }
+
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=top-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])),
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    left: auto;
+    right: auto;
+    inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
+    transform: none;
+  }
+
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=top-end"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])),
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    left: auto;
+    right: auto;
+    inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
+    transform: none;
+  }
+
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])),
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])),
+  :global(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    top: auto;
+    bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
+  }
+
+  :global(.toast:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    --_ui-toast-region-accent: var(--ui-border-strong);
+    --_ui-toast-region-tone-surface: var(--ui-surface-muted);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--ui-space-2);
+    align-items: start;
+    border: var(--ui-border-width) solid
+      var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
+    border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    padding: var(--ui-space-3) var(--ui-space-4);
+    /* The close button's internal space supplies the rest of the trailing inset. */
+    padding-inline-end: var(--ui-space-2);
+    background: var(
+      --_ui-toast-region-surface,
+      var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
+    );
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --_ui-toast-region-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s)
+      var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+  }
+
+  :global(.toast[data-tone="info"]:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    --_ui-toast-region-accent: var(--ui-info-solid);
+    --_ui-toast-region-tone-surface: var(--ui-info-soft);
+  }
+  :global(.toast[data-tone="success"]:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    --_ui-toast-region-accent: var(--ui-success-solid);
+    --_ui-toast-region-tone-surface: var(--ui-success-soft);
+  }
+  :global(.toast[data-tone="warning"]:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    --_ui-toast-region-accent: var(--ui-warning-solid);
+    --_ui-toast-region-tone-surface: var(--ui-warning-soft);
+  }
+  :global(.toast[data-tone="danger"]:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    --_ui-toast-region-accent: var(--ui-danger-solid);
+    --_ui-toast-region-tone-surface: var(--ui-danger-soft);
+  }
+  :global(.toast.closing:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+      both;
+    pointer-events: none;
+  }
+
+  :global(:is(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    animation-name: ui-toast-enter-bottom;
+  }
+
+  :global(:is(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast.closing:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    animation-name: ui-toast-exit-bottom;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.toast:where(:scope, :scope *):where([data-hn-ui-toast-region])),
+    :global(.toast.closing:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+      animation: none;
+    }
+  }
+
+  :global(.message:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    min-inline-size: 0;
+    align-self: center;
+  }
+
+  :global(.dismiss:where(:scope, :scope *):where([data-hn-ui-toast-region])) {
+    align-self: center;
+  }
+  :global(:where(.ui-toast-region)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region])) {
+    display: none;
+  }
+}
 </style>

package/vue/UiTooltip.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiTopBar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 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.67 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'