@threadlabs/looma 0.23.16 → 0.23.17

package/vue/UiMeter.vue

@@ -1,4 +1,353 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
+<script lang="ts">
+function createFormatValue(): any {
+  // FIFO bounds native instances and retained keys; only constructor inputs, never values, are cached.
+  const cache = new Map()
+  function formatterFor(name: any, locale: any, options: any) {
+    const constructor = Reflect.get(Intl, name)
+    // There is no cheap native query for changes to the default time zone. Keep native lookup for
+    // instants without an explicit zone; civil HTML values already supply their fixed UTC anchor.
+    if (name === 'DateTimeFormat' && options.timeZone === undefined) {
+      return new constructor(locale, options)
+    }
+    const entries = []
+    for (const key of Object.keys(options).sort()) {
+      const value = options[key]
+      if (value === undefined) {
+        continue
+      }
+      // Native option coercion can observe mutable objects. Bypass caching rather than stringify
+      // them or collapse NaN/infinity into null, which would change validation and side effects.
+      if (
+        value !== null && typeof value !== 'string' && typeof value !== 'boolean'
+          && typeof value !== 'number'
+        || typeof value === 'number' && !Number.isFinite(value)
+      ) {
+        return new constructor(locale, options)
+      }
+      entries.push([key, typeof value, Object.is(value, -0) ? '-0' : value])
+    }
+    const language = locale === undefined && typeof navigator !== 'undefined'
+      ? navigator.language
+      : undefined
+    const key = JSON.stringify([name, locale, language, entries])
+    if (key.length > 4096) {
+      return new constructor(locale, options)
+    }
+    const cached = cache.get(key)
+    if (cached !== undefined && cached.constructor === constructor) {
+      return cached.value
+    }
+    const value = new constructor(locale, options)
+    if (cache.size >= 128 && !cache.has(key)) {
+      cache.delete(cache.keys().next().value)
+    }
+    cache.set(key, { constructor, value })
+    return value
+  }
+  /**
+   * The native Intl adapter. Self-contained so converters emit this same implementation only when
+   * authored expressions use formatting, without importing the live parser or interpreter.
+   * undefined is absence; the shared invalid-result symbol tells each target to retain its output.
+   */
+  return function formatValue(value: any, inputType: any, operation: any, ...args: any[]) {
+    const invalid = Symbol.for('html-next.invalid-result')
+    if (value === invalid || args.includes(invalid)) {
+      return invalid
+    }
+    if (value === undefined || value === null || args.some((arg: any) => arg === undefined)) {
+      return undefined
+    }
+    const end = operation === 'formatRange' ? args.shift() : undefined
+    if (operation === 'formatRange' && (end === null || end === undefined)) {
+      return undefined
+    }
+    const explicit = typeof args[0] === 'string'
+    const defaults = {
+      number: 'number',
+      integer: 'number',
+      percentage: 'percent',
+      date: 'date',
+      time: 'time',
+      datetime: 'dateTime',
+      'datetime-local': 'dateTime',
+      duration: 'duration',
+      list: 'list',
+    }
+    const format = explicit ? args.shift() : Reflect.get(defaults, inputType ?? '')
+    const options = args.length > 0 ? args.shift() : {}
+    const locale = args.shift()
+    if (
+      args.length > 0 || !format || options === null || typeof options !== 'object'
+      || Array.isArray(options) || locale !== undefined && typeof locale !== 'string'
+    ) {
+      return invalid
+    }
+    try {
+      const durationFields = [
+        'years',
+        'months',
+        'weeks',
+        'days',
+        'hours',
+        'minutes',
+        'seconds',
+        'milliseconds',
+        'microseconds',
+        'nanoseconds',
+      ]
+      const settings = { ...options }
+      let formatter
+      let input = value
+      let last = end
+      let zoneFree = false
+      if (['number', 'currency', 'percent', 'unit'].includes(format)) {
+        if (format !== 'number') {
+          if (settings.style !== undefined && settings.style !== format) {
+            return invalid
+          }
+          settings.style = format
+        }
+        const quantity = (candidate: any) => {
+          if (
+            inputType === 'percentage' && typeof candidate === 'string'
+            && /^-?(?:\d+(?:\.\d+)?|\.\d+)%$/.test(candidate)
+          ) {
+            return Number(candidate.slice(0, -1)) / 100
+          }
+          return candidate
+        }
+        input = quantity(input)
+        last = quantity(last)
+        if (
+          typeof input !== 'number' || !Number.isFinite(input)
+          || operation === 'formatRange' && (typeof last !== 'number' || !Number.isFinite(last))
+        ) {
+          return invalid
+        }
+        formatter = formatterFor('NumberFormat', locale, settings)
+      } else if (['date', 'time', 'dateTime'].includes(format)) {
+        const civil = inputType === 'date' || inputType === 'time' || inputType === 'datetime-local'
+          || typeof input === 'string' && !/(?:Z|[+-]\d\d:\d\d)$/.test(input)
+        zoneFree = civil
+        if (civil && (settings.timeZone !== undefined || settings.timeZoneName !== undefined)) {
+          return invalid
+        }
+        if (
+          format === 'date'
+            && (settings.timeStyle !== undefined
+              || ['hour', 'minute', 'second', 'dayPeriod', 'fractionalSecondDigits'].some((
+                key: any,
+              ) => settings[key] !== undefined))
+          || format === 'time'
+            && (settings.dateStyle !== undefined
+              || ['year', 'month', 'day', 'weekday', 'era'].some((key: any) =>
+                settings[key] !== undefined
+              ))
+        ) {
+          return invalid
+        }
+        const fields = [
+          'year',
+          'month',
+          'day',
+          'weekday',
+          'era',
+          'hour',
+          'minute',
+          'second',
+          'dayPeriod',
+          'fractionalSecondDigits',
+        ]
+        if (
+          settings.dateStyle === undefined && settings.timeStyle === undefined
+          && !fields.some((key: any) => settings[key] !== undefined)
+        ) {
+          if (format !== 'time') {
+            settings.dateStyle = 'medium'
+          }
+          if (format !== 'date') {
+            settings.timeStyle = 'medium'
+          }
+        }
+        if (civil) {
+          settings.timeZone = 'UTC'
+        }
+        const asDate = (candidate: any) => {
+          if (typeof candidate === 'number' && Number.isFinite(candidate)) {
+            return new Date(candidate)
+          }
+          if (typeof candidate !== 'string') {
+            return undefined
+          }
+          let written = candidate.replace(' ', 'T')
+          if (/^\d\d:\d\d(?::\d\d(?:\.\d{1,3})?)?$/.test(written)) {
+            if (format !== 'time') {
+              return undefined
+            }
+            written = '1970-01-01T' + written + 'Z'
+          } else if (/^\d{4,}-\d\d-\d\d$/.test(written)) {
+            if (format !== 'date') {
+              return undefined
+            }
+            written += 'T00:00:00Z'
+          } else if (/^\d{4,}-\d\d-\d\dT\d\d:\d\d(?::\d\d(?:\.\d{1,3})?)?$/.test(written)) {
+            written += 'Z'
+          } else if (
+            !/^\d{4,}-\d\d-\d\dT\d\d:\d\d(?::\d\d(?:\.\d{1,3})?)?(?:Z|[+-]\d\d:\d\d)$/.test(written)
+          ) {
+            return undefined
+          }
+          const date = new Date(
+            written.replace(/^(\d{5,})-/, (_match: any, year: any) =>
+              '+' + year.padStart(6, '0') + '-'),
+          )
+          if (!Number.isFinite(date.getTime())) {
+            return undefined
+          }
+          // Native Date normalizes invalid days; authored HTML dates must not roll into another day.
+          const match = /^(\d{4,})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d))?/.exec(written)
+          if (!match) {
+            return undefined
+          }
+          const probe = new Date(0)
+          probe.setUTCFullYear(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+          if (
+            Number(match[1]) === 0 || probe.getUTCMonth() !== Number(match[2]) - 1
+            || probe.getUTCDate() !== Number(match[3]) || Number(match[4]) > 23
+            || Number(match[5]) > 59 || Number(match[6] ?? 0) > 59
+          ) {
+            return undefined
+          }
+          return date
+        }
+        input = asDate(input)
+        last = operation === 'formatRange' ? asDate(last) : undefined
+        if (!input || operation === 'formatRange' && !last) {
+          return invalid
+        }
+        formatter = formatterFor('DateTimeFormat', locale, settings)
+      } else {
+        if (operation === 'formatRange') {
+          return invalid
+        }
+        if (format === 'relativeTime') {
+          if (
+            typeof input !== 'number' || !Number.isFinite(input)
+            || typeof settings.unit !== 'string'
+          ) {
+            return invalid
+          }
+          const unit = settings.unit
+          delete settings.unit
+          formatter = formatterFor('RelativeTimeFormat', locale, settings)
+          return operation === 'formatParts'
+            ? formatter.formatToParts(input, unit)
+            : formatter.format(input, unit)
+        }
+        if (format === 'list') {
+          if (!Array.isArray(input) || input.some((item: any) => typeof item !== 'string')) {
+            return invalid
+          }
+          formatter = formatterFor('ListFormat', locale, settings)
+        } else if (format === 'duration') {
+          if (inputType === 'duration' && typeof input === 'string') {
+            const match = /^(-?(?:\d+(?:\.\d+)?|\.\d+))(ms|s)$/.exec(input)
+            if (!match) {
+              return invalid
+            }
+            const milliseconds = Number(match[1]) * (match[2] === 's' ? 1000 : 1)
+            if (!Number.isFinite(milliseconds)) {
+              return invalid
+            }
+            const hours = Math.trunc(milliseconds / 3600000)
+            const minutes = Math.trunc((milliseconds % 3600000) / 60000)
+            const seconds = Math.trunc((milliseconds % 60000) / 1000)
+            input = {
+              hours,
+              minutes,
+              seconds,
+              milliseconds: Math.trunc(milliseconds % 1000),
+              microseconds: Math.trunc((milliseconds - Math.trunc(milliseconds)) * 1000),
+              nanoseconds: Math.round(
+                (milliseconds * 1000 - Math.trunc(milliseconds * 1000)) * 1000,
+              ),
+            }
+          }
+          if (
+            input === null || typeof input !== 'object' || Array.isArray(input)
+            || Object.keys(input).some((key: any) => !durationFields.includes(key))
+          ) {
+            return invalid
+          }
+          const DurationFormat = Reflect.get(Intl, 'DurationFormat')
+          if (!DurationFormat) {
+            return invalid
+          }
+          formatter = formatterFor('DurationFormat', locale, settings)
+        } else if (format === 'displayName') {
+          if (typeof input !== 'string' || operation === 'formatParts') {
+            return invalid
+          }
+          return formatterFor('DisplayNames', locale, settings).of(input)
+        } else if (format === 'plural') {
+          if (typeof input !== 'number' || !Number.isFinite(input) || operation === 'formatParts') {
+            return invalid
+          }
+          const forms = settings.forms
+          if (
+            !forms || typeof forms !== 'object' || Array.isArray(forms)
+            || typeof forms.other !== 'string' || Object.entries(forms).some(([key, entry]: any) =>
+              !['zero', 'one', 'two', 'few', 'many', 'other'].includes(key)
+              || typeof entry !== 'string'
+            )
+          ) {
+            return invalid
+          }
+          delete settings.forms
+          const category = formatterFor('PluralRules', locale, settings).select(input)
+          const message = forms[category] ?? forms.other
+          const numberOptions = { ...settings }
+          delete numberOptions.type
+          delete numberOptions.forms
+          const number = formatterFor('NumberFormat', locale, numberOptions).format(input)
+          return message.replace(/#/g, () => number)
+        }
+      }
+      if (!zoneFree && operation !== 'formatParts') {
+        return operation === 'formatRange'
+          ? formatter.formatRange(input, last)
+          : formatter.format(input)
+      }
+      const parts = operation === 'formatRange'
+        ? formatter.formatRangeToParts(input, last)
+        : formatter.formatToParts(input)
+      if (
+        zoneFree && operation !== 'formatParts'
+        && !parts.some((part: any) => part.type === 'timeZoneName')
+      ) {
+        return operation === 'formatRange'
+          ? formatter.formatRange(input, last)
+          : formatter.format(input)
+      }
+      const visible = zoneFree
+        ? parts.filter((part: any, index: any) =>
+          part.type !== 'timeZoneName'
+          && !(part.type === 'literal' && /^[\s(),]*$/.test(part.value)
+            && (parts[index - 1]?.type === 'timeZoneName'
+              || parts[index + 1]?.type === 'timeZoneName'))
+        )
+        : parts
+      return operation === 'formatParts' ? visible : visible.map((part: any) => part.value).join('')
+    } catch {
+      return invalid
+    }
+  }
+}
+
+const moduleFormatValue = createFormatValue()
+</script>
+
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
@@ -6,6 +355,8 @@ import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
+const formatValue = moduleFormatValue
+
 const propValidityContract = {
   props: {
     label: {
@@ -63,7 +414,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'valuetext' },
       description:
-        'The value as assistive technology reads it ("$750 of $1,240 collected", "3 of 5 done, overdue"). Empty reads the percentage.',
+        'The value as assistive technology reads it ("$750 of $1,240 collected", "3 of 5 done, overdue"). Empty reads the whole percentage in the current\n      locale.',
       default: '',
     },
   },
@@ -203,73 +554,233 @@ function cycleCheckedComputed<T>(evaluate: () => T) {
     },
   })
 }
-const amount = cycleCheckedComputed(() =>
-  ((values: (number | undefined)[]) =>
-    values.includes(undefined)
-      ? undefined
-      : Math.min(
-        Math.max((values as number[])[0]!, (values as number[])[1]!),
-        (values as number[])[2]!,
-      ))([number(0), number(checkedProps.value.value), number(checkedProps.value.max)])
-)
-const percent = cycleCheckedComputed(() =>
-  (({
-    true: number(
-            number(amount.value) === undefined || number(checkedProps.value.max) === undefined
-              ? undefined
-              : number(amount.value)! / number(checkedProps.value.max)!,
-          ) === undefined || number(100) === undefined
-      ? undefined
-      : number(
-        number(amount.value) === undefined || number(checkedProps.value.max) === undefined
-          ? undefined
-          : number(amount.value)! / number(checkedProps.value.max)!,
-      )! * number(100)!,
-    false: 0,
-  }) as Record<string, any>)[
-    `${(number(checkedProps.value.max) === undefined || number(0) === undefined
-      ? undefined
-      : number(checkedProps.value.max)! > number(0)!)}`
-  ]
-)
-const whole = cycleCheckedComputed(
-  () => (number(
-          number(percent.value) === undefined || number(0.5) === undefined
-            ? undefined
-            : number(percent.value)! + number(0.5)!,
-        ) === undefined
-      || number(
+let amountPrevious: any = null
+const amount = cycleCheckedComputed(() => {
+  const next: any = math('clamp', ['number', 'number', 'number'], [
+    0,
+    checkedProps.value.value,
+    checkedProps.value.max,
+  ]) as number | symbol | undefined
+  if (next === Symbol.for('html-next.invalid-result')) return amountPrevious
+  return amountPrevious = next
+})
+let percentPrevious: any = null
+const percent = cycleCheckedComputed(() => {
+  const next: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      {
+        true:
           number(
-                number(percent.value) === undefined || number(0.5) === undefined
+                number(amount.value) === undefined || number(checkedProps.value.max) === undefined
                   ? undefined
-                  : number(percent.value)! + number(0.5)!,
-              ) === undefined || number(1) === undefined
+                  : number(amount.value)! / number(checkedProps.value.max)!,
+              ) === undefined || number(100) === undefined
             ? undefined
             : number(
-              number(percent.value) === undefined || number(0.5) === undefined
+              number(amount.value) === undefined || number(checkedProps.value.max) === undefined
                 ? undefined
-                : number(percent.value)! + number(0.5)!,
-            )! % number(1)!,
-        ) === undefined
-    ? undefined
-    : number(
-      number(percent.value) === undefined || number(0.5) === undefined
-        ? undefined
-        : number(percent.value)! + number(0.5)!,
-    )! - number(
-      number(
-            number(percent.value) === undefined || number(0.5) === undefined
+                : number(amount.value)! / number(checkedProps.value.max)!,
+            )! * number(100)!,
+        false: 0,
+      },
+      concat(
+        number(checkedProps.value.max) === undefined || number(0) === undefined
+          ? undefined
+          : number(checkedProps.value.max)! > number(0)!,
+      ),
+    )
+  if (next === Symbol.for('html-next.invalid-result')) {
+    return percentPrevious
+  }
+  return percentPrevious = next
+})
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      (() => {
+        const value = {
+          true: checkedProps.value.valueText,
+          false: formatValue(
+            number(percent.value) === undefined || number(100) === undefined
               ? undefined
-              : number(percent.value)! + number(0.5)!,
-          ) === undefined || number(1) === undefined
-        ? undefined
-        : number(
-          number(percent.value) === undefined || number(0.5) === undefined
-            ? undefined
-            : number(percent.value)! + number(0.5)!,
-        )! % number(1)!,
-    )!)
-)
+              : number(percent.value)! / number(100)!,
+            'number',
+            'format',
+            'percent',
+            { maximumFractionDigits: 0 },
+          ),
+        }
+        return Object.values(value).some((entry: unknown) =>
+            entry === Symbol.for('html-next.invalid-result')
+          )
+          ? Symbol.for('html-next.invalid-result')
+          : value
+      })(),
+      concat(checkedProps.value.valueText !== ''),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = typeof (((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        (() => {
+          const value = {
+            true: checkedProps.value.valueText,
+            false: formatValue(
+              number(percent.value) === undefined || number(100) === undefined
+                ? undefined
+                : number(percent.value)! / number(100)!,
+              'number',
+              'format',
+              'percent',
+              { maximumFractionDigits: 0 },
+            ),
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
+        concat(checkedProps.value.valueText !== ''),
+      )) === 'boolean'
+    ? String(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        (() => {
+          const value = {
+            true: checkedProps.value.valueText,
+            false: formatValue(
+              number(percent.value) === undefined || number(100) === undefined
+                ? undefined
+                : number(percent.value)! / number(100)!,
+              'number',
+              'format',
+              'percent',
+              { maximumFractionDigits: 0 },
+            ),
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
+        concat(checkedProps.value.valueText !== ''),
+      ))
+    : attribute(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        (() => {
+          const value = {
+            true: checkedProps.value.valueText,
+            false: formatValue(
+              number(percent.value) === undefined || number(100) === undefined
+                ? undefined
+                : number(percent.value)! / number(100)!,
+              'number',
+              'format',
+              'percent',
+              { maximumFractionDigits: 0 },
+            ),
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
+        concat(checkedProps.value.valueText !== ''),
+      ))
+})
+let guardedBindingPrevious: any = null
+const guardedBinding = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: checkedProps.value.label, false: null },
+      concat(checkedProps.value.label !== ''),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = typeof (((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: checkedProps.value.label, false: null },
+        concat(checkedProps.value.label !== ''),
+      )) === 'boolean'
+    ? String(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: checkedProps.value.label, false: null },
+        concat(checkedProps.value.label !== ''),
+      ))
+    : attribute(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: checkedProps.value.label, false: null },
+        concat(checkedProps.value.label !== ''),
+      ))
+})
+let guardedBinding2Previous: any = null
+const guardedBinding2 = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: checkedProps.value.segments, false: null },
+      concat(
+        number(checkedProps.value.segments) === undefined || number(1) === undefined
+          ? undefined
+          : number(checkedProps.value.segments)! > number(1)!,
+      ),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding2Previous
+  }
+  return guardedBinding2Previous = attribute(((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: checkedProps.value.segments, false: null },
+      concat(
+        number(checkedProps.value.segments) === undefined || number(1) === undefined
+          ? undefined
+          : number(checkedProps.value.segments)! > number(1)!,
+      ),
+    ))
+})
+let guardedBinding3Previous: any = null
+const guardedBinding3 = computed(() => {
+  const candidate: any = concat(percent.value, '%')
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
+  return guardedBinding3Previous = candidate
+})
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -310,6 +821,103 @@ function attribute(value: unknown): any {
 function number(value: unknown): number | undefined {
   return typeof value === 'number' && !Number.isNaN(value) ? value : undefined
 }
+
+// A nonempty scalar call cannot produce the invalid-result sentinel.
+type ConcatResult<T extends unknown[]> = T extends
+  [
+    string | number | boolean | null | undefined,
+    ...(string | number | boolean | null | undefined)[],
+  ] ? string | undefined
+  : string | symbol | undefined
+function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
+  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
+  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
+}
+
+function math(
+  fn: string,
+  kinds: readonly string[],
+  values: readonly unknown[],
+): number | string | symbol | undefined {
+  if (values.includes(Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result')
+  }
+  if (values.some(value => value === undefined || value === null)) return undefined
+  if (
+    (fn === 'abs' || fn === 'negate') && values.length !== 1
+    || fn === 'round' && (values.length < 1 || values.length > 2)
+    || (fn === 'min' || fn === 'max') && values.length === 0
+    || fn === 'clamp' && values.length !== 3
+  ) return Symbol.for('html-next.invalid-result')
+  const kind = kinds[0]
+  const dimensional = kind === 'length' || kind === 'percentage' || kind === 'duration'
+  if (!dimensional && kind !== 'number') return Symbol.for('html-next.invalid-result')
+  let unit: string | undefined
+  const numbers: number[] = []
+  for (let index = 0; index < values.length; index++) {
+    if (kinds[index] !== kind) return Symbol.for('html-next.invalid-result')
+    const value = values[index]
+    if (!dimensional) {
+      if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return Symbol.for('html-next.invalid-result')
+      }
+      numbers.push(value)
+      continue
+    }
+    if (typeof value !== 'string') return Symbol.for('html-next.invalid-result')
+    const match =
+      /^(-?(?:\d+(?:\.\d+)?|\.\d+))(vmin|vmax|rem|px|em|vw|vh|ch|ex|cm|mm|in|pt|pc|q|ms|s|%)$/.exec(
+        value,
+      )
+    if (match === null || unit !== undefined && match[2] !== unit) {
+      return Symbol.for('html-next.invalid-result')
+    }
+    unit = match[2]
+    if (
+      (unit === '%' ? 'percentage' : unit === 'ms' || unit === 's' ? 'duration' : 'length') !== kind
+    ) return Symbol.for('html-next.invalid-result')
+    const number = Number(match[1])
+    if (!Number.isFinite(number)) return Symbol.for('html-next.invalid-result')
+    numbers.push(number)
+  }
+  let result: number
+  switch (fn) {
+    case 'abs':
+      result = Math.abs(numbers[0]!)
+      break
+    case 'negate':
+      result = -numbers[0]!
+      break
+    case 'round': {
+      const step = Math.abs(numbers[1] ?? 1)
+      if (step === 0) return Symbol.for('html-next.invalid-result')
+      result = Math.round(numbers[0]! / step) * step
+      break
+    }
+    case 'min':
+      result = Math.min(...numbers)
+      break
+    case 'max':
+      result = Math.max(...numbers)
+      break
+    case 'clamp':
+      result = Math.max(numbers[0]!, Math.min(numbers[1]!, numbers[2]!))
+      break
+    default:
+      return Symbol.for('html-next.invalid-result')
+  }
+  return !Number.isFinite(result)
+    ? Symbol.for('html-next.invalid-result')
+    : unit === undefined
+    ? result
+    : String(result) + unit
+}
 </script>
 
 <template>
@@ -320,39 +928,9 @@ function number(value: unknown): number | undefined {
     v-bind="nativeAttrs($attrs)"
     :aria-valuemax="checkedProps.max ?? undefined"
     :aria-valuenow="amount"
-    :aria-valuetext="typeof ((({ true: checkedProps.valueText, false: `${whole ?? ''}%` }) as Record<string, any>)[
-      `${checkedProps.valueText !== ''}`
-    ]) === 'boolean'
-    ? String(
-      (({ true: checkedProps.valueText, false: `${whole ?? ''}%` }) as Record<string, any>)[
-        `${checkedProps.valueText !== ''}`
-      ],
-    )
-    : attribute(
-      (({ true: checkedProps.valueText, false: `${whole ?? ''}%` }) as Record<string, any>)[
-        `${checkedProps.valueText !== ''}`
-      ],
-    )"
-    :aria-label="typeof ((({ true: checkedProps.label, false: null }) as Record<string, any>)[
-      `${checkedProps.label !== ''}`
-    ]) === 'boolean'
-    ? String(
-      (({ true: checkedProps.label, false: null }) as Record<string, any>)[
-        `${checkedProps.label !== ''}`
-      ],
-    )
-    : attribute(
-      (({ true: checkedProps.label, false: null }) as Record<string, any>)[
-        `${checkedProps.label !== ''}`
-      ],
-    )"
-    :data-ui-meter-segments="attribute(
-      (({ true: checkedProps.segments, false: null }) as Record<string, any>)[
-        `${(number(checkedProps.segments) === undefined || number(1) === undefined
-          ? undefined
-          : number(checkedProps.segments)! > number(1)!)}`
-      ],
-    )"
+    :aria-valuetext="guarded"
+    :aria-label="guardedBinding"
+    :data-ui-meter-segments="guardedBinding2"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
@@ -362,7 +940,7 @@ function number(value: unknown): number | undefined {
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-value-text="reflectedProp('valueText', 'value-text', checkedProps.valueText, undefined, false)"
     :data-ui-meter-state="hostState || undefined"
-  ><span class="fill" :style="{ 'inline-size': `${text(percent)}%` }"></span></span>
+  ><span class="fill" :style="{ 'inline-size': guardedBinding3 }"></span></span>
 </template>
 
 <style scoped>