@threadlabs/looma 0.24.1 → 0.25.1

package/vue/UiSidebar.vue

@@ -1,8 +1,20 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<script lang="ts">
+const htmlNextAuthoredCheck2Reported = new Set<string>()
+function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
+  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+    htmlNextAuthoredCheck2Reported.add(location)
+    console.warn(message)
+  }
+  return accepted
+}
+</script>
+
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -221,15 +233,23 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const resizerElement = useTemplateRef<HTMLElement>('resizer')
+const resizerElement = useTemplateRef<HTMLElement>('resizerElement')
 const internalCollapsed = ref(false)
 const drawer = ref(false)
 const resizing = ref(false)
 let guardedPrevious: any
 const guarded = computed(() => {
   if (
-    !((drawer.value == null || typeof drawer.value === 'boolean')
-      && (internalCollapsed.value == null || typeof internalCollapsed.value === 'boolean'))
+    !(htmlNextAuthoredCheck2(
+      drawer.value == null || typeof drawer.value === 'boolean',
+      'not resizable or drawer or internalCollapsed:drawer',
+      './components/ui-sidebar/ui-sidebar.html: HR007: Reference drawer does not satisfy its declared type.',
+    )
+      && htmlNextAuthoredCheck2(
+        internalCollapsed.value == null || typeof internalCollapsed.value === 'boolean',
+        'not resizable or drawer or internalCollapsed:internalCollapsed',
+        './components/ui-sidebar/ui-sidebar.html: HR007: Reference internalCollapsed does not satisfy its declared type.',
+      ))
   ) return guardedPrevious
   return guardedPrevious = !checkedProps.value.resizable || drawer.value || internalCollapsed.value
 })
@@ -263,23 +283,25 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isResizeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isResizeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && (typeof (detail as Record<string, unknown>)['width'] === 'number'
     && Number.isFinite((detail as Record<string, unknown>)['width']))
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['width', 'trigger'].includes(key))
-const isToggleDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Object.keys(detail as object).every((key) => ['width', 'trigger'].includes(key)))
+const isToggleDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
   && ((detail as Record<string, unknown>)['mode'] === 'docked'
     || (detail as Record<string, unknown>)['mode'] === 'drawer')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['open', 'mode', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['open', 'mode', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     resize: isResizeDetail,
@@ -291,6 +313,16 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        internalCollapsed: { kind: 'terminal', name: 'boolean' },
+        drawer: { kind: 'terminal', name: 'boolean' },
+        resizing: { kind: 'terminal', name: 'boolean' },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-sidebar/ui-sidebar.js',
     definition: './components/ui-sidebar/ui-sidebar.html',
@@ -347,7 +379,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
       data-ui-affordance="resize"
       :aria-label="checkedProps.resizeLabel ?? undefined"
       :hidden="guarded"
-      ref="resizer"
+      ref="resizerElement"
     >
       <span class="guide" aria-hidden="true"></span>
     </div>
@@ -450,7 +482,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 [data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
   transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
   .content {
   transform: translateX(100%);
 }

package/vue/UiSpinner.vue

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

package/vue/UiStack.vue

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

package/vue/UiStatusMessage.vue

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

package/vue/UiSwitch.d.ts

@@ -1,11 +1,7 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    description?: (props: typeof __VLS_3) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     checked: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -78,10 +74,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     disabled: boolean | null;
     checked: boolean | null;
     required: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    description?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/vue/UiSwitch.vue

@@ -1,9 +1,21 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<script lang="ts">
+const htmlNextAuthoredCheck2Reported = new Set<string>()
+function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
+  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
+    htmlNextAuthoredCheck2Reported.add(location)
+    console.warn(message)
+  }
+  return accepted
+}
+</script>
+
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { vBindControl } from './control'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -172,14 +184,18 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const inputElement = useTemplateRef<HTMLElement>('input')
-const descriptionElement = useTemplateRef<HTMLElement>('description')
+const inputElement = useTemplateRef<HTMLElement>('inputElement')
+const descriptionElement = useTemplateRef<HTMLElement>('descriptionElement')
 const internalChecked = ref(false)
 let guardedPrevious: any
 const guarded = computed(() => {
-  if (!(internalChecked.value == null || typeof internalChecked.value === 'boolean')) {
-    return guardedPrevious
-  }
+  if (
+    !(htmlNextAuthoredCheck2(
+      internalChecked.value == null || typeof internalChecked.value === 'boolean',
+      'internalChecked:internalChecked',
+      './components/ui-switch/ui-switch.html: HR007: Reference internalChecked does not satisfy its declared type.',
+    ))
+  ) return guardedPrevious
   return guardedPrevious = internalChecked.value
 })
 provide('html-next:ui-switch:internalChecked', internalChecked)
@@ -206,14 +222,15 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isChangeDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isChangeDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['checked'] === 'boolean'
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['checked', 'value', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['checked', 'value', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     change: isChangeDetail,
@@ -224,6 +241,12 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({ internalChecked: { kind: 'terminal', name: 'boolean' } } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-switch/ui-switch.js',
     definition: './components/ui-switch/ui-switch.html',
@@ -271,10 +294,10 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
       :required="checkedProps.required ?? undefined"
       :name="checkedProps.name ?? undefined"
       :value.attr="checkedProps.value ?? undefined"
-      ref="input"
+      ref="inputElement"
     >
     <span class="text"><span class="label"><slot /></span>
-      <span class="description" aria-hidden="true" ref="description"><slot
+      <span class="description" aria-hidden="true" ref="descriptionElement"><slot
           name="description"
         /></span></span></label>
 </template>

package/vue/UiSwitcher.vue

@@ -1,8 +1,9 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -164,6 +165,12 @@ const dispatch = createDispatch(root)
 useComponentHost(() => import('../components/ui-switcher/ui-switcher.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({ overLimit: { kind: 'terminal', name: 'boolean' } } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-switcher/ui-switcher.js',
     definition: './components/ui-switcher/ui-switcher.html',

package/vue/UiTable.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 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.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,
@@ -12,6 +12,7 @@ import {
 } from 'vue'
 import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -213,8 +214,8 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const listElement = useTemplateRef<HTMLElement>('list')
-const panelsElement = useTemplateRef<HTMLElement>('panels')
+const listElement = useTemplateRef<HTMLElement>('listElement')
+const panelsElement = useTemplateRef<HTMLElement>('panelsElement')
 const internalValue = ref('')
 const tabs = ref<{ id: string; label: string }[]>([])
 provide('html-next:ui-tabs:internalValue', internalValue)
@@ -246,8 +247,9 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isSelectDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isSelectDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['value'] === 'string'
   && typeof (detail as Record<string, unknown>)['previousValue'] === 'string'
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
@@ -255,7 +257,7 @@ const isSelectDetail = (detail: unknown): boolean =>
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
   && Object.keys(detail as object).every((key) =>
     ['value', 'previousValue', 'trigger'].includes(key)
-  )
+  ))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     select: isSelectDetail,
@@ -266,6 +268,26 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
 useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   root,
   dispatch,
+  acceptsState: (name: string, keys: readonly string[], value: unknown) =>
+    acceptsControllerWrite(
+      value,
+      ({
+        internalValue: { kind: 'terminal', name: 'string' },
+        tabs: {
+          kind: 'list',
+          item: {
+            kind: 'object',
+            fields: [{ name: 'id', type: { kind: 'terminal', name: 'string' }, optional: false }, {
+              name: 'label',
+              type: { kind: 'terminal', name: 'string' },
+              optional: false,
+            }],
+            open: false,
+          },
+        },
+      } as Record<string, any>)[name],
+      keys,
+    ),
   controllerSource: {
     specifier: '../components/ui-tabs/ui-tabs.js',
     definition: './components/ui-tabs/ui-tabs.html',
@@ -356,7 +378,7 @@ function uniqueKeys<T>(
       role="tablist"
       :aria-label="checkedProps.label ?? undefined"
       :aria-orientation="checkedProps.orientation ?? undefined"
-      ref="list"
+      ref="listElement"
     >
       <slot name="tab"><KeyedBoundary><button
             v-for="tab in uniqueKeys(tabs, (tab, index, loop) => tab.id)"
@@ -371,7 +393,7 @@ function uniqueKeys<T>(
             {{ tab.label }}
           </button></KeyedBoundary></slot>
     </div>
-    <div class="panels" ref="panels"><slot /></div>
+    <div class="panels" ref="panelsElement"><slot /></div>
   </div>
 </template>
 

package/vue/UiText.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, 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.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -271,7 +271,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     :data-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
-    v-bind-control="{ tag: 'textarea', name: 'value', value: model, defaultValue: '' }"
+    v-bind-control="{ tag: 'textarea', name: 'value', value: model, optionalValue: true, defaultValue: '' }"
     @input="model = readBoundControl(
       $event.currentTarget as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
     ) as any"
@@ -282,6 +282,30 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-textarea-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-focus-outline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-surface {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-textarea-focus-shadow {
   syntax: "*";
   inherits: false;
@@ -314,13 +338,29 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
   resize: vertical;
-  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
-  background: var(--ui-control-surface, var(--ui-surface-elevated));
+  border: var(
+    --ui-textarea-border-width,
+    var(--_ui-default-textarea-border-width, var(--ui-border-width))
+  ) solid
+    var(
+      --ui-textarea-border,
+      var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
+    );
+  border-radius: var(
+    --ui-textarea-radius,
+    var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
+  );
+  background: var(
+    --ui-textarea-surface,
+    var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+  );
   color: var(--ui-text-primary);
   font: inherit;
   line-height: var(--ui-line-height-md);
-  box-shadow: var(--ui-textarea-shadow, var(--ui-control-inset));
+  box-shadow: var(
+    --ui-textarea-shadow,
+    var(--_ui-default-textarea-shadow, var(--ui-control-inset))
+  );
   transition:
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -339,33 +379,54 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
 }
 
 [data-component~="ui-textarea"]:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+  border-color: var(
+    --ui-textarea-border-hover,
+    var(
+      --_ui-default-textarea-border-hover,
+      var(--ui-control-border-hover, var(--ui-text-secondary))
+    )
+  );
 }
 
 [data-component~="ui-textarea"]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
-  outline: none;
+  border-color: var(
+    --ui-textarea-focus-border,
+    var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
+  );
+  outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
   box-shadow: var(
     --ui-textarea-focus-shadow,
-    var(--ui-control-inset),
-    var(--ui-control-focus-halo-shadow)
+    var(
+      --_ui-default-textarea-focus-shadow,
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow)
+    )
   );
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 [data-component~="ui-textarea"][aria-invalid="true"],
 [data-component~="ui-textarea"]:is(:user-invalid, [data-user-invalid]) {
-  border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
+  border-color: var(
+    --ui-textarea-invalid-border,
+    var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+  );
 }
 
 [data-component~="ui-textarea"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-textarea-invalid-focus-shadow,
-    var(--ui-control-inset),
-    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-      in srgb,
-      var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-      transparent
+    var(
+      --_ui-default-textarea-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(
+          --ui-textarea-invalid-border,
+          var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+        ) 22%,
+        transparent
+      )
     )
   );
 }

package/vue/UiToast.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.26 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -104,7 +104,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-const actionElement = useTemplateRef<HTMLElement>('action')
+const actionElement = useTemplateRef<HTMLElement>('actionElement')
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -127,15 +127,16 @@ const hostState = computed(() =>
   ].filter(Boolean).join(' ')
 )
 
-const isDismissDetail = (detail: unknown): boolean =>
-  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+const isDismissDetail = (
+  detail: unknown,
+): boolean => (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
   && typeof (detail as Record<string, unknown>)['id'] === 'string'
   && ((detail as Record<string, unknown>)['reason'] === 'action'
     || (detail as Record<string, unknown>)['reason'] === 'timeout')
   && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
     || (detail as Record<string, unknown>)['trigger'] === 'pointer'
     || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
-  && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key))
+  && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key)))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     dismiss: isDismissDetail,
@@ -197,7 +198,7 @@ function attribute(value: unknown): any {
     ref="root"
   >
     <div class="message"><slot /></div>
-    <div class="action" ref="action"><slot name="action" /></div>
+    <div class="action" ref="actionElement"><slot name="action" /></div>
     <UiIconButton
       class="dismiss"
       size="sm"

package/vue/UiToastRegion.d.ts

@@ -12,14 +12,19 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | null>;
         default: string;
     };
-}>, {
-    show: (...args: unknown[]) => Promise<any>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (event: CustomEvent<{
         readonly id: string;
         readonly reason: "action" | "timeout";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any;
+    "update:duration": (value: number) => any;
+    "show-toast": (event: CustomEvent<{
+        readonly message: string;
+        readonly id?: string;
+        readonly tone?: "neutral" | "info" | "success" | "warning" | "danger";
+        readonly duration?: number;
+    }>) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     duration: {
         type: PropType<number | null>;
@@ -35,6 +40,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly reason: "action" | "timeout";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
+    "onUpdate:duration"?: ((value: number) => any) | undefined;
+    "onShow-toast"?: ((event: CustomEvent<{
+        readonly message: string;
+        readonly id?: string;
+        readonly tone?: "neutral" | "info" | "success" | "warning" | "danger";
+        readonly duration?: number;
+    }>) => any) | undefined;
 }>, {
     duration: number | null;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | null;