@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiMeter.vue

@@ -1,362 +1,24 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 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>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import {
+  attribute,
+  checkHydratedRoot,
+  concat,
+  cycleCheckedComputed,
+  decimalMultiply,
+  decimalSubtract,
+  formatValue,
+  math,
+  nativeAttrs,
+  number,
+  useReflectedProp,
+} from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
 
-const formatValue = moduleFormatValue
-
 const propValidityContract = {
   props: {
     label: {
@@ -562,63 +224,8 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
-const hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
-// Vue may return an in-progress computed value on a cyclic read; guard the public value access instead.
-function cycleCheckedComputed<T>(evaluate: () => T) {
-  const value = computed(evaluate)
-  let reading = false
-  return new Proxy(value, {
-    get(target, property) {
-      if (property !== 'value') return Reflect.get(target, property)
-      if (reading) {
-        const message = 'A reactive computed value depends on itself.'
-        throw Object.assign(new Error(`HR006: ${message}`), {
-          name: 'HtmlDiagnosticError',
-          diagnostic: Object.freeze({ code: 'HR006', message }),
-        })
-      }
-      reading = true
-      try {
-        return target.value
-      } finally {
-        reading = false
-      }
-    },
-  })
-}
 let amountPrevious: any = null
 const amount = cycleCheckedComputed(() => {
   const next: any = math('clamp', ['number', 'number', 'number'], [
@@ -644,11 +251,14 @@ const percent = cycleCheckedComputed(() => {
                   : 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)!,
+            : decimalMultiply(
+              number(
+                number(amount.value) === undefined || number(checkedProps.value.max) === undefined
+                  ? undefined
+                  : number(amount.value)! / number(checkedProps.value.max)!,
+              )!,
+              number(100)!,
+            ),
         false: 0,
       },
       concat(
@@ -1172,19 +782,7 @@ const guardedBinding7 = computed(() => {
   if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
   return guardedBinding7Previous = candidate
 })
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-meter> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-meter> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('span', 'ui-meter')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -1198,125 +796,11 @@ const hostState = computed(() =>
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
   ].filter(Boolean).join(' ')
 )
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-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>
   <span
-    data-component="ui-meter"
+    class="ui-meter"
     v-bind="nativeAttrs($attrs)"
     :role="guarded"
     :aria-valuemin="guardedBinding"
@@ -1345,7 +829,7 @@ function math(
         v-for="(part, index) in checkedProps.parts"
         :key="index"
       ><span
-          v-if="part.value > 0 && (part.value - part.value) === 0"
+          v-if="part.value > 0 && (decimalSubtract(part.value, part.value)) === 0"
           class="part"
           aria-hidden="true"
           :style="{ 'flex-grow': part.value, 'background-color': part.color }"
@@ -1361,56 +845,6 @@ function math(
   inherits: false;
 }
 
-[data-component~="ui-meter"] {
-  --_meter-fill: var(--ui-text-muted);
-
-  display: inline-block;
-  flex: none;
-  vertical-align: middle;
-  inline-size: var(--ui-meter-inline-size, 8rem);
-  max-inline-size: 100%;
-  block-size: var(--ui-space-2);
-  overflow: hidden;
-  border-radius: var(--ui-radius-round);
-  background: var(--ui-border);
-  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1), inset 0 -1px rgb(255 255 255 / 0.22);
-  /* Unseen until forced colours draw it, where the track's own colour is gone. */
-  outline: var(--ui-border-width) solid transparent;
-}
-
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"] {
-  inline-size: var(--ui-meter-inline-size, 5rem);
-  block-size: var(--ui-space-1);
-}
-
-.fill {
-  display: block;
-  block-size: 100%;
-  background-color: var(--_meter-fill);
-  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
-  box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
-}
-
-[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"] {
-  --_meter-fill: var(--ui-accent-solid);
-}
-
-[data-component~="ui-meter"][data-ui-meter-state~="tone=info"] {
-  --_meter-fill: var(--ui-info-solid);
-}
-
-[data-component~="ui-meter"][data-ui-meter-state~="tone=success"] {
-  --_meter-fill: var(--ui-success-solid);
-}
-
-[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"] {
-  --_meter-fill: var(--ui-warning-solid);
-}
-
-[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"] {
-  --_meter-fill: var(--ui-danger-solid);
-}
-
 /* Segments: the track and its fill show through a mask of equal segments with a gap between them.
    A mask over the whole meter, rather than one element per segment, because the expression
    language has no range to render N elements from, and one mask lines the fill up with the track
@@ -1419,118 +853,170 @@ function math(
    The count arrives as an attribute, not an inline custom property (which would add a style
    attribute to every meter), so a continuous meter renders exactly as before, and the rules below
    turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
-[data-component~="ui-meter"][data-ui-meter-segments="2"] {
-  --_segments: 2;
-}
 
-[data-component~="ui-meter"][data-ui-meter-segments="3"] {
-  --_segments: 3;
-}
+/* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
+   identical geometry before hydration. It has no progress mask or growing-value animation. */
 
-[data-component~="ui-meter"][data-ui-meter-segments="4"] {
-  --_segments: 4;
-}
+/* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
 
-[data-component~="ui-meter"][data-ui-meter-segments="5"] {
-  --_segments: 5;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-meter"][data-ui-meter-segments="6"] {
-  --_segments: 6;
-}
+@scope (.ui-meter) {
+  :scope:where(:scope) {
+    --_meter-fill: var(--ui-text-muted);
+
+    display: inline-block;
+    flex: none;
+    vertical-align: middle;
+    inline-size: var(--ui-meter-inline-size, 8rem);
+    max-inline-size: 100%;
+    block-size: var(--ui-space-2);
+    overflow: hidden;
+    border-radius: var(--ui-radius-round);
+    background: var(--ui-border);
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1), inset 0 -1px rgb(255 255 255 / 0.22);
+    /* Unseen until forced colours draw it, where the track's own colour is gone. */
+    outline: var(--ui-border-width) solid transparent;
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments="7"] {
-  --_segments: 7;
-}
+  :scope:where(:scope):is([data-ui-meter-state~="size=sm"]) {
+    inline-size: var(--ui-meter-inline-size, 5rem);
+    block-size: var(--ui-space-1);
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments="8"] {
-  --_segments: 8;
-}
+  .fill {
+    display: block;
+    block-size: 100%;
+    background-color: var(--_meter-fill);
+    background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
+    box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments="9"] {
-  --_segments: 9;
-}
+  :scope:where(:scope):is([data-ui-meter-state~="tone=accent"]) {
+    --_meter-fill: var(--ui-accent-solid);
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments="10"] {
-  --_segments: 10;
-}
+  :scope:where(:scope):is([data-ui-meter-state~="tone=info"]) {
+    --_meter-fill: var(--ui-info-solid);
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments="11"] {
-  --_segments: 11;
-}
+  :scope:where(:scope):is([data-ui-meter-state~="tone=success"]) {
+    --_meter-fill: var(--ui-success-solid);
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments="12"] {
-  --_segments: 12;
-}
+  :scope:where(:scope):is([data-ui-meter-state~="tone=warning"]) {
+    --_meter-fill: var(--ui-warning-solid);
+  }
+
+  :scope:where(:scope):is([data-ui-meter-state~="tone=danger"]) {
+    --_meter-fill: var(--ui-danger-solid);
+  }
+  :scope:where(:scope):is([data-ui-meter-segments="2"]) {
+    --_segments: 2;
+  }
 
-[data-component~="ui-meter"][data-ui-meter-segments] {
-  --_meter-gap: var(--ui-space-1);
-  --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
-  --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
+  :scope:where(:scope):is([data-ui-meter-segments="3"]) {
+    --_segments: 3;
+  }
 
-  mask-image: repeating-linear-gradient(
-    to right,
-    #000 0 var(--_meter-segment),
-    transparent 0 var(--_meter-period)
-  );
-}
+  :scope:where(:scope):is([data-ui-meter-segments="4"]) {
+    --_segments: 4;
+  }
 
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments] {
-  --_meter-gap: var(--ui-space-0-5);
-}
+  :scope:where(:scope):is([data-ui-meter-segments="5"]) {
+    --_segments: 5;
+  }
 
-/* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
-   identical geometry before hydration. It has no progress mask or growing-value animation. */
-[data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"] {
-  display: flex;
-  inline-size: 100%;
-  block-size: var(--ui-space-4);
-  gap: var(--ui-space-0-5);
-}
+  :scope:where(:scope):is([data-ui-meter-segments="6"]) {
+    --_segments: 6;
+  }
 
-[data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][size="sm"] {
-  block-size: var(--ui-space-2);
-}
+  :scope:where(:scope):is([data-ui-meter-segments="7"]) {
+    --_segments: 7;
+  }
 
-.part {
-  flex-basis: 0;
-  min-inline-size: 0;
-  block-size: 100%;
-}
+  :scope:where(:scope):is([data-ui-meter-segments="8"]) {
+    --_segments: 8;
+  }
 
-@media (forced-colors: active) {
-  .part {
-    forced-color-adjust: none;
-    background: CanvasText !important;
-    outline: var(--ui-border-width) solid Canvas;
-    outline-offset: calc(-1 * var(--ui-border-width));
+  :scope:where(:scope):is([data-ui-meter-segments="9"]) {
+    --_segments: 9;
   }
-}
 
-/* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
-@media (forced-colors: active) {
-  .fill {
-    forced-color-adjust: none;
-    background: CanvasText;
+  :scope:where(:scope):is([data-ui-meter-segments="10"]) {
+    --_segments: 10;
+  }
+
+  :scope:where(:scope):is([data-ui-meter-segments="11"]) {
+    --_segments: 11;
   }
 
-  /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
-     top and bottom edges and the gradient the ends. */
-  [data-component~="ui-meter"][data-ui-meter-segments] {
-    forced-color-adjust: none;
-    background: repeating-linear-gradient(
+  :scope:where(:scope):is([data-ui-meter-segments="12"]) {
+    --_segments: 12;
+  }
+
+  :scope:where(:scope):is([data-ui-meter-segments]) {
+    --_meter-gap: var(--ui-space-1);
+    --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
+    --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
+
+    mask-image: repeating-linear-gradient(
       to right,
-      CanvasText 0 1px,
-      Canvas 0 calc(var(--_meter-segment) - 1px),
-      CanvasText 0 var(--_meter-segment),
+      #000 0 var(--_meter-segment),
       transparent 0 var(--_meter-period)
     );
-    box-shadow: inset 0 0 0 1px CanvasText;
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-meter"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-meter-state~="size=sm"][data-ui-meter-segments]) {
+    --_meter-gap: var(--ui-space-0-5);
+  }
+  :scope:where(:scope):is([data-ui-meter-state~="variant=distribution"]) {
+    display: flex;
+    inline-size: 100%;
+    block-size: var(--ui-space-4);
+    gap: var(--ui-space-0-5);
+  }
+
+  :scope:where(:scope):is([data-ui-meter-state~="variant=distribution"][size="sm"]) {
+    block-size: var(--ui-space-2);
+  }
+
+  .part {
+    flex-basis: 0;
+    min-inline-size: 0;
+    block-size: 100%;
+  }
+
+  @media (forced-colors: active) {
+    .part {
+      forced-color-adjust: none;
+      background: CanvasText !important;
+      outline: var(--ui-border-width) solid Canvas;
+      outline-offset: calc(-1 * var(--ui-border-width));
+    }
+  }
+  @media (forced-colors: active) {
+    .fill {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
+       top and bottom edges and the gradient the ends. */
+    :scope:where(:scope):is([data-ui-meter-segments]) {
+      forced-color-adjust: none;
+      background: repeating-linear-gradient(
+        to right,
+        CanvasText 0 1px,
+        Canvas 0 calc(var(--_meter-segment) - 1px),
+        CanvasText 0 var(--_meter-segment),
+        transparent 0 var(--_meter-period)
+      );
+      box-shadow: inset 0 0 0 1px CanvasText;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>