@hina-ui/vue 1.7.5 → 1.7.7

package/src/components/spoiler/SpoilerPainter.ts

@@ -1,197 +1 @@
-import { workletSource } from './worklet'
-import { prefersReducedMotion } from '../../motion'
-
-export const isPaintWorkletSupported =
-  typeof CSS !== 'undefined' && (CSS as { paintWorklet?: unknown }).paintWorklet !== undefined
-
-let workletRegistered = false
-
-export function registerSpoilerWorklet() {
-  if (workletRegistered || !isPaintWorkletSupported) return
-  workletRegistered = true
-  const paintWorklet = (CSS as unknown as { paintWorklet: { addModule(url: string): void } })
-    .paintWorklet
-  paintWorklet.addModule(
-    URL.createObjectURL(new Blob([workletSource], { type: 'application/javascript' })),
-  )
-}
-
-export interface SpoilerPainterOptions {
-  fps?: number
-  gap?: number
-  density?: number
-  mimicWords?: boolean
-  accent?: string
-}
-
-const DEFAULTS = {
-  fps: 24,
-  gap: 6,
-  density: 0.12,
-  mimicWords: true,
-  accent: '0 0% 20%',
-} as const
-
-const BLOCK_MAX_TILE = 293
-const INLINE_MAX_TILE = 333
-const GAP_RATIO = 8
-const DEFAULT_FADE_S = 1.5
-
-export class SpoilerPainter {
-  readonly el: HTMLElement
-  maxFPS: number = DEFAULTS.fps
-
-  private t = 0
-  private t0 = 0
-  private tstop: number | null = null
-  private raf: number | null = null
-  private fadeS = 0
-  private hidden = false
-  private destroyed = false
-
-  constructor(el: HTMLElement, options: SpoilerPainterOptions = {}) {
-    registerSpoilerWorklet()
-    this.el = el
-    this.update(options)
-  }
-
-  get isHidden() {
-    return this.hidden
-  }
-
-  update({
-    fps = DEFAULTS.fps,
-    gap = DEFAULTS.gap,
-    density = DEFAULTS.density,
-    mimicWords = DEFAULTS.mimicWords,
-    accent = DEFAULTS.accent,
-  }: SpoilerPainterOptions = {}) {
-    if (this.destroyed) return
-
-    this.maxFPS = prefersReducedMotion() ? 0 : fps
-
-    this.el.style.setProperty('--hn-nz-density', String(density))
-    this.el.style.setProperty('--hn-nz-accent', accent)
-
-    const isBlockElement = getComputedStyle(this.el).getPropertyValue('display') !== 'inline'
-    this.useBackgroundStyle('auto', 'auto', false)
-
-    if (isBlockElement) {
-      this.el.style.setProperty('--hn-nz-words', 'false')
-      const rect = this.el.getBoundingClientRect()
-
-      if (rect.width * rect.height > BLOCK_MAX_TILE * BLOCK_MAX_TILE) {
-        this.useBackgroundStyle(
-          Math.min(rect.width, BLOCK_MAX_TILE),
-          Math.min(rect.height, BLOCK_MAX_TILE),
-          true,
-        )
-      } else {
-        const capGap = Math.floor(Math.min(gap, rect.width / GAP_RATIO, rect.height / GAP_RATIO))
-        this.el.style.setProperty('--hn-nz-gap', `${capGap}px ${capGap}px`)
-      }
-      return
-    }
-
-    this.el.style.setProperty('--hn-nz-words', String(mimicWords))
-    const rects = [...this.el.getClientRects()]
-    const heightOfLine = Math.min(...rects.map(r => r.height))
-
-    this.useBackgroundStyle(INLINE_MAX_TILE, heightOfLine, true)
-    const capGap = Math.floor(Math.min(heightOfLine / GAP_RATIO, gap))
-    this.el.style.setProperty('--hn-nz-gap', `0 ${capGap}px`)
-  }
-
-  private useBackgroundStyle(ws: string | number, hs: string | number, tile: boolean) {
-    const w = typeof ws === 'number' ? `${ws}px` : ws
-    const h = typeof hs === 'number' ? `${hs}px` : hs
-    const repeatAndPosition = tile ? 'repeat left center' : 'no-repeat center center'
-    this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`
-  }
-
-  private setFade(value: number) {
-    this.fadeS = value
-    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
-  }
-
-  private setT(value: number) {
-    this.t = value
-    this.el.style.setProperty('--hn-nz-t', value.toFixed(3))
-  }
-
-  private setTstop(value: number | null) {
-    this.tstop = value
-    if (value !== null) {
-      this.el.style.setProperty('--hn-nz-stop', value.toFixed(3))
-    } else {
-      this.el.style.removeProperty('--hn-nz-stop')
-    }
-  }
-
-  private parseFade(value: number | boolean | undefined) {
-    if (this.maxFPS <= 0) return 0
-    return value === true || value === undefined ? DEFAULT_FADE_S : Number(value)
-  }
-
-  hide(animate?: number | boolean) {
-    if (this.destroyed) return
-    this.hidden = true
-    this.setFade(this.parseFade(animate))
-    this.setTstop(null)
-    this.setT(0)
-    this.startAnimation()
-  }
-
-  reveal(animate?: number | boolean) {
-    if (this.destroyed) return
-    this.hidden = false
-    const duration = this.parseFade(animate)
-    this.setFade(duration)
-    this.setTstop(this.t)
-    if (duration <= 0) this.stopAnimation()
-  }
-
-  private frame = (now: DOMHighResTimeStamp) => {
-    if (this.destroyed) return
-    const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS
-
-    if (this.maxFPS > 0 && !shouldStop) {
-      this.raf = requestAnimationFrame(this.frame)
-    }
-
-    const dt = now - this.t0
-    if (dt > 0 && dt < 1000 / this.maxFPS) return
-
-    this.setT(this.t + dt / 1000)
-    this.t0 = now
-  }
-
-  private startAnimation() {
-    this.t0 = performance.now()
-    this.frame(this.t0)
-  }
-
-  private stopAnimation() {
-    if (this.raf !== null) {
-      cancelAnimationFrame(this.raf)
-      this.raf = null
-    }
-  }
-
-  destroy() {
-    this.destroyed = true
-    this.stopAnimation()
-    this.el.style.removeProperty('background')
-    for (const prop of [
-      '--hn-nz-t',
-      '--hn-nz-stop',
-      '--hn-nz-fade',
-      '--hn-nz-gap',
-      '--hn-nz-words',
-      '--hn-nz-density',
-      '--hn-nz-accent',
-    ]) {
-      this.el.style.removeProperty(prop)
-    }
-  }
-}
+export * from '../../../../shared/src/behavior/spoiler/painter'

package/src/components/spoiler/utils/irisOrigin.ts

@@ -1,40 +1 @@
-export interface IrisOrigin {
-  x: number
-  y: number
-}
-
-export function irisOrigin(
-  rects: readonly DOMRect[],
-  clientX: number,
-  clientY: number,
-): IrisOrigin | null {
-  const valid = rects.filter(r => r.width > 0 && r.height > 0)
-  if (valid.length === 0) return null
-
-  const totalWidth = valid.reduce((sum, r) => sum + r.width, 0)
-  const lineHeight = valid[0]!.height
-
-  let virtualX: number | null = null
-  let virtualY = 0
-  let walked = 0
-  for (const r of valid) {
-    const inside =
-      clientY >= r.top - 2 &&
-      clientY <= r.bottom + 2 &&
-      clientX >= r.left - 2 &&
-      clientX <= r.right + 2
-    if (inside) {
-      virtualX = walked + (clientX - r.left)
-      virtualY = clientY - r.top
-      break
-    }
-    walked += r.width
-  }
-
-  if (virtualX === null || totalWidth === 0 || lineHeight === 0) return null
-
-  return {
-    x: (virtualX / totalWidth) * 100,
-    y: (virtualY / lineHeight) * 100,
-  }
-}
+export * from '../../../../../shared/src/lib/iris-origin'

package/src/components/spoiler/worklet.ts

@@ -1,199 +1 @@
-declare function registerPaint(name: string, painter: unknown): void
-
-const workletMain = () => {
-  const M = Math
-
-  const lcgrand =
-    (seed = 1) =>
-    (a = 0, b = 1) =>
-      a +
-      (M.abs(b - a) * (M.imul(48271, (seed = M.imul(214013, seed) + 2531011)) & 0x7fffffff)) /
-        0x7fffffff
-
-  const pol2vec = (l: number, a = 0) => [l * M.cos(a), l * M.sin(a)] as const
-  const vecmag = ([x, y]: readonly number[]) => M.sqrt(x! * x! + y! * y!)
-  const vecnorm = ([x, y]: readonly number[], l = vecmag([x!, y!])) =>
-    l === 0 ? ([0, 0] as const) : ([x! / l, y! / l] as const)
-
-  const trapezoidalWave = (l: number, a: number, b: number) => {
-    const s = M.max(a, l - b)
-    return (t: number) => {
-      if (t < a) return M.max(0, t / a)
-      if (t > s) return M.max(0, 1 - (t - s) / (l - s))
-      return 1
-    }
-  }
-
-  const cycle = (x: number, n: number) => ((x % n) + n) % n
-  const mirror = (x: number, n: number, r: number) => (x < r ? n + x : x > n - r ? x - n : x)
-  const clamp = (min: number, x: number, max: number) => M.max(min, M.min(x, max))
-
-  const cycleBounds = ([x, y]: readonly number[], [w, h]: readonly number[], r: number) => {
-    const tx = cycle(x!, w!)
-    const ty = cycle(y!, h!)
-    return [
-      [tx, ty],
-      [mirror(tx, w!, r), mirror(ty, h!, r)],
-    ] as const
-  }
-
-  const easeOutCubic = (t: number) => --t * t * t + 1
-
-  type World = { t: number; tStop: number; tStart: number; n: number }
-
-  const animateFadeInOut = (world: World, idx: number, duration: number) => {
-    const direction = world.tStop <= world.t ? 'out' : 'in'
-    const animationStartT = direction === 'in' ? world.tStart : world.tStop
-    const t = animationStartT + ((2 / 3) * duration * idx) / world.n
-    const fadeFor = (1 / 3) * duration
-
-    let progress = 0
-    if (direction === 'in') {
-      progress = (fadeFor + t - world.t) / fadeFor || 0
-    } else {
-      progress = (world.t - t) / fadeFor || 1
-    }
-
-    return easeOutCubic(1 - clamp(0, progress, 1))
-  }
-
-  const FAKE_WORDS = [5, 3, 4, 4, 2, 4, 7, 6, 8, 6, 3, 1, 6]
-
-  const makeWordDistribution = (line: number, em: number, space: number) => {
-    let marker = 0
-    let i = 0
-    let wordslen = 0
-    const chunks: [number, number][] = []
-
-    do {
-      const endOfWord = M.min(line, marker + FAKE_WORDS[i++ % FAKE_WORDS.length]! * em)
-      wordslen += endOfWord - marker
-      chunks.push([marker, (marker = endOfWord)])
-    } while ((marker += space) < line)
-
-    if (chunks.length >= 0) chunks[chunks.length - 1]![1] = line
-
-    return (t: number) => {
-      const w = t * wordslen
-      let m = 0
-      for (const [start, end] of chunks) {
-        const wordLength = end - start
-        if (m < w && w <= m + wordLength) return start + w - m
-        m += wordLength
-      }
-      return 0
-    }
-  }
-
-  const getVar = (props: { get(name: string): unknown }, name: string) => {
-    const val = props.get(name)
-    if (typeof val === 'string') return val
-    return String(val ?? '')
-  }
-
-  class HnSpoilerWorklet {
-    static get contextOptions() {
-      return { alpha: true }
-    }
-
-    static get inputProperties() {
-      return [
-        '--hn-nz-t',
-        '--hn-nz-stop',
-        '--hn-nz-fade',
-        '--hn-nz-gap',
-        '--hn-nz-accent',
-        '--hn-nz-words',
-        '--hn-nz-density',
-      ]
-    }
-
-    paint(
-      ctx: CanvasRenderingContext2D,
-      size: { width: number; height: number },
-      props: { get(name: string): unknown },
-    ) {
-      const rand = lcgrand(4011505)
-
-      const accent = (getVar(props, '--hn-nz-accent') || '0 0% 0%').split(' ')
-      const mimicWords = getVar(props, '--hn-nz-words').trim() === 'true'
-      const vmin = 2
-      const vmax = 12
-      const width = size.width
-      const height = size.height
-      const gaps = (getVar(props, '--hn-nz-gap') || '0px 0px').split(' ').map(parseFloat)
-      const hgap = gaps[0] ?? 0
-      const vgap = gaps[1] ?? 0
-      const density = parseFloat(getVar(props, '--hn-nz-density')) || 0.08
-      const sizedev = (globalThis as { devicePixelRatio?: number }).devicePixelRatio! > 1 ? 0.5 : 0
-      const fadeDuration = parseFloat(getVar(props, '--hn-nz-fade')) || 0
-
-      const world: World = {
-        t: parseFloat(getVar(props, '--hn-nz-t') || '0'),
-        tStop: parseFloat(getVar(props, '--hn-nz-stop') || 'Infinity'),
-        tStart: 0,
-        n: M.round(M.min(5000, density * (width - 2 * hgap) * (height - 2 * vgap))),
-      }
-
-      const lineWidth = width - 2 * hgap
-      const lineHeight = height - 2 * vgap
-
-      const wordDist = mimicWords
-        ? makeWordDistribution(lineWidth, lineHeight, M.max(12, lineHeight / 4))
-        : (x: number) => x * (width - 2 * hgap)
-
-      ctx.clearRect(0, 0, size.width, size.height)
-
-      for (let i = 0; i < world.n; ++i) {
-        const x0 = hgap + wordDist(rand())
-        const y0 = rand(vgap, height - vgap)
-        const v0mag = rand(vmin, vmax)
-        const size0 = rand(1, 1 + sizedev)
-
-        const l = parseInt(accent[2] ?? '0')
-        const ldir = l > 50 ? -1 : 1
-        const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100))
-
-        const v0 = pol2vec(v0mag, rand(0, M.PI * 2))
-        const vx0 = v0[0]
-        const vy0 = v0[1]
-        vecnorm(v0)
-
-        const shape = rand() > 0.5 ? 'square' : 'circle'
-        const lifetime = rand(0.3, 1.5)
-        const respawn = rand(0, 1)
-        const visibilityFn = trapezoidalWave(lifetime, 0.15, 0.3)
-        const phase = rand(0, lifetime + respawn)
-
-        const cantSpawnNoMore =
-          M.floor((world.tStop + phase) / (lifetime + respawn)) <
-          M.floor((world.t + phase) / (lifetime + respawn))
-        if (cantSpawnNoMore) continue
-
-        const t = M.min(lifetime, (world.t + phase) % (lifetime + respawn))
-        const x = x0 + vx0 * t
-        const y = y0 + vy0 * t
-
-        const fade = animateFadeInOut(world, i, fadeDuration)
-        const alpha = fade * (1 - t / lifetime)
-        const psize = fade * (size0 * visibilityFn(t))
-
-        for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
-          ctx.beginPath()
-          ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`
-          if (shape === 'square') {
-            ctx.rect(wx!, wy!, psize, psize)
-          } else {
-            ctx.arc(wx!, wy!, psize / 2, 0, M.PI * 2)
-          }
-          ctx.closePath()
-          ctx.fill()
-        }
-      }
-    }
-  }
-
-  registerPaint('hn-spoiler', HnSpoilerWorklet)
-}
-
-export const workletSource = `(${workletMain.toString()})()`
+export * from '../../../../shared/src/behavior/spoiler/worklet'

package/src/components/statistic/Statistic.vue

@@ -60,7 +60,7 @@
     <div :class="statisticBody()">
       <span :class="statisticLabel()">{{ props.label }}</span>
       <span :class="statisticValue({ size: props.size })">
-        <Skeleton v-if="props.loading" class="h-[1.25em] w-24" />
+        <Skeleton v-if="props.loading" class="h-[1lh] w-24" />
         <template v-else>
           <span v-if="props.prefix" :class="statisticAffix()">{{ props.prefix }}</span>
           <NumberFormat
@@ -75,7 +75,7 @@
         </template>
       </span>
       <span v-if="deltaText" :class="statisticDelta({ tone: deltaTone })">
-        <Skeleton v-if="props.loading" class="h-[1.25em] w-16" />
+        <Skeleton v-if="props.loading" class="h-[1lh] w-16" />
         <template v-else>
           <TrendingUp v-if="props.delta! > 0" aria-hidden="true" />
           <TrendingDown v-else-if="props.delta! < 0" aria-hidden="true" />

package/src/components/stepper/Stepper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends StepperItem = StepperItem">
-  import { StepperRoot } from 'reka-ui'
+  import { StepperRoot } from '../../primitives/stepper'
   import { useId } from 'vue'
   import { cn } from '../../lib/cn'
   import { useDirection } from '../../lib/useDirection'

package/src/components/stepper/StepperStep.vue

@@ -7,7 +7,7 @@
     StepperDescription,
     StepperIndicator,
     StepperSeparator,
-  } from 'reka-ui'
+  } from '../../primitives/stepper'
   import { useUiLocale } from '../../locale'
   import Spinner from '../spinner/Spinner.vue'
   import { stepperIndicator, stepperTrigger } from './stepper.variants'

package/src/components/switch/Switch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { SwitchRoot } from 'reka-ui'
+  import { SwitchRoot } from '../../primitives/switch'
   import { useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/table/Table.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { cn } from '../../lib/cn'
   import { tableWrapper, type TableVariants } from './table.variants'
@@ -15,10 +16,18 @@
     }>(),
     { variant: 'primary', hover: true, stickyHeader: false },
   )
+
+  const area = shallowRef<InstanceType<typeof ScrollArea> | null>(null)
+
+  defineExpose({
+    viewport: computed(() => area.value?.viewport),
+    instance: computed(() => area.value?.instance),
+  })
 </script>
 
 <template>
   <ScrollArea
+    ref="area"
     :direction="props.stickyHeader ? 'both' : 'horizontal'"
     :class="
       cn(

package/src/components/tabs/Tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsRoot } from 'reka-ui'
+  import { TabsRoot } from '../../primitives/tabs'
   import { useId } from 'vue'
   import { cn } from '../../lib/cn'
   import { provideTabsStyle } from './context'

package/src/components/tabs/TabsContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsContent } from 'reka-ui'
+  import { TabsContent } from '../../primitives/tabs'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnTabsContent' })

package/src/components/tabs/TabsList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { TabsList } from 'reka-ui'
+  import { computed, shallowRef } from 'vue'
+  import { TabsList } from '../../primitives/tabs'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { cn } from '../../lib/cn'
   import { useTabsStyle } from './context'
@@ -13,10 +14,18 @@
   }>()
 
   const { variant, orientation } = useTabsStyle()
+
+  const area = shallowRef<InstanceType<typeof ScrollArea> | null>(null)
+
+  defineExpose({
+    viewport: computed(() => area.value?.viewport),
+    instance: computed(() => area.value?.instance),
+  })
 </script>
 
 <template>
   <ScrollArea
+    ref="area"
     :direction="orientation"
     :scrollbar="false"
     :class="cn(tabsScroll({ variant, orientation }), props.class)"

package/src/components/tabs/TabsTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TabsTrigger, injectTabsRootContext } from 'reka-ui'
+  import { TabsTrigger, injectTabsRootContext } from '../../primitives/tabs'
   import { computed } from 'vue'
   import Highlight from '../highlight/Highlight.vue'
   import Ripple from '../ripple/Ripple.vue'

package/src/components/tag/Tag.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { tag, type TagVariants } from './tag.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnTag' })
 

package/src/components/text/Text.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { text, type TextVariants } from './text.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnText' })
 

package/src/components/time/Time.vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
   import { computed } from 'vue'
+  import { injectTooltipProviderContext } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
+  import Tooltip from '../tooltip/Tooltip.vue'
   import { relativeTime } from './utils/relativeTime'
   import { useNow } from './composables/useNow'
 
-  defineOptions({ name: 'HnTime' })
+  defineOptions({ name: 'HnTime', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
       value?: string | number | Date | null
       format?: 'datetime' | 'date' | 'time' | 'relative'
+      tooltip?: boolean
       class?: string
     }>(),
-    { format: 'datetime' },
+    { format: 'datetime', tooltip: true },
   )
 
   const t = useUiLocale()
@@ -49,16 +52,30 @@
       ? new Intl.DateTimeFormat(t.value.tag, absoluteOptions.datetime).format(date.value)
       : undefined,
   )
+
+  const provider = injectTooltipProviderContext(null)
+  const hint = computed(() => !!provider && props.tooltip && props.format === 'relative')
 </script>
 
 <template>
+  <Tooltip v-if="date && hint" :content="absolute">
+    <time
+      :datetime="date.toISOString()"
+      data-allow-mismatch="text"
+      :class="cn(props.class)"
+      v-bind="$attrs"
+    >
+      {{ text }}
+    </time>
+  </Tooltip>
   <time
-    v-if="date"
+    v-else-if="date"
     :datetime="date.toISOString()"
-    :title="format === 'relative' ? absolute : undefined"
+    data-allow-mismatch="text"
     :class="cn(props.class)"
+    v-bind="$attrs"
   >
     {{ text }}
   </time>
-  <span v-else :class="cn(props.class)">{{ text }}</span>
+  <span v-else :class="cn(props.class)" v-bind="$attrs">{{ text }}</span>
 </template>

package/src/components/time/utils/relativeTime.ts

@@ -1,20 +1 @@
-const DIVISIONS = [
-  [60, 'second'],
-  [60, 'minute'],
-  [24, 'hour'],
-  [7, 'day'],
-  [4.34524, 'week'],
-  [12, 'month'],
-  [Infinity, 'year'],
-] as const
-
-export function relativeTime(target: Date, nowMs: number, tag: string, justNow: string): string {
-  let duration = (target.getTime() - nowMs) / 1000
-  if (Math.abs(duration) < 45) return justNow
-  const rtf = new Intl.RelativeTimeFormat(tag, { numeric: 'auto' })
-  for (const [amount, unit] of DIVISIONS) {
-    if (Math.abs(duration) < amount) return rtf.format(Math.round(duration), unit)
-    duration /= amount
-  }
-  return ''
-}
+export * from '../../../../../shared/src/lib/relative-time'

package/src/components/toast/Toaster.vue

@@ -154,6 +154,7 @@
     </ToastRoot>
     <ToastPortal>
       <ToastViewport
+        aria-live="off"
         :label="props.label ?? t.toast.regionLabel"
         :data-pos="props.position ?? 'auto'"
         :data-expanded="expanded ? '' : undefined"