@threadlabs/looma 0.26.16 → 0.26.17

package/vue/UiMeter.vue

@@ -370,11 +370,30 @@ const propValidityContract = {
     max: {
       type: { kind: 'terminal', name: 'number' },
       required: false,
-      target: { attribute: 'aria-valuemax' },
+      target: { attribute: 'max' },
       description:
         'The value of a full bar, as on a native meter: 1 for a fraction, or the whole amount (a total, a count of items) with value as the part of it. Must be\n      above 0; otherwise the bar is empty.',
       default: 1,
     },
+    parts: {
+      type: {
+        kind: 'list',
+        item: {
+          kind: 'object',
+          fields: [{ name: 'value', type: { kind: 'terminal', name: 'number' }, optional: false }, {
+            name: 'color',
+            type: { kind: 'terminal', name: 'string' },
+            optional: false,
+          }],
+          open: false,
+        },
+      },
+      required: false,
+      target: { attribute: 'parts' },
+      description:
+        'Categories in display order for distribution. Positive finite values determine each share without rounding; zero\n      and negative values draw nothing. Supply label and valueText to describe every category, and a visible text legend so colour is never the only\n      explanation.',
+      default: [],
+    },
     segments: {
       type: { kind: 'terminal', name: 'number' },
       required: false,
@@ -417,11 +436,26 @@ const propValidityContract = {
         '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: '',
     },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'progress measures one value against max. distribution shows mutually exclusive parts of a whole as a full-width proportional bar; it uses parts rather than\n      value/max and is an image, not a progress reading.',
+      values: ['progress', 'distribution'],
+      default: 'progress',
+    },
   },
 } as const
 const props = defineProps({
   label: { type: null as unknown as PropType<string | null>, default: '' },
   max: { type: null as unknown as PropType<number | null>, default: 1 },
+  parts: {
+    type: null as unknown as PropType<
+      readonly ({ readonly value: number; readonly color: string })[] | null
+    >,
+    default: () => [],
+  },
   segments: { type: null as unknown as PropType<number | null>, default: 0 },
   size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
   tone: {
@@ -432,15 +466,21 @@ const props = defineProps({
   },
   value: { type: null as unknown as PropType<number | null>, default: 0 },
   valueText: { type: null as unknown as PropType<string | null>, default: '' },
+  variant: {
+    type: null as unknown as PropType<'progress' | 'distribution' | null>,
+    default: 'progress',
+  },
 })
 const acceptedProps: Record<string, unknown> = {
   label: '',
   max: 1,
+  parts: () => [],
   segments: 0,
   size: 'md',
   tone: 'neutral',
   value: 0,
   valueText: '',
+  variant: 'progress',
 }
 const checkedProps = computed(() => ({
   label: checkedProp<string>(
@@ -457,6 +497,24 @@ const checkedProps = computed(() => ({
     'max',
     acceptedProps,
   ) as number,
+  parts: checkedProp<readonly ({ readonly value: number; readonly color: string })[]>(
+    props['parts'],
+    {
+      kind: 'list',
+      item: {
+        kind: 'object',
+        fields: [{ name: 'value', type: { kind: 'terminal', name: 'number' }, optional: false }, {
+          name: 'color',
+          type: { kind: 'terminal', name: 'string' },
+          optional: false,
+        }],
+        open: false,
+      },
+    },
+    false,
+    'parts',
+    acceptedProps,
+  ) as readonly ({ readonly value: number; readonly color: string })[],
   segments: checkedProp<number>(
     props['segments'],
     { kind: 'terminal', name: 'number' },
@@ -492,6 +550,13 @@ const checkedProps = computed(() => ({
     'valueText',
     acceptedProps,
   ) as string,
+  variant: checkedProp<'progress' | 'distribution'>(
+    props['variant'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'variant',
+    acceptedProps,
+  ) as 'progress' | 'distribution',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -599,6 +664,142 @@ const percent = cycleCheckedComputed(() => {
 })
 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])(
+      { true: 'img', false: 'meter' },
+      concat(checkedProps.value.variant === 'distribution'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = 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: 'img', false: 'meter' },
+      concat(checkedProps.value.variant === 'distribution'),
+    ))
+})
+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: null, false: 0 },
+      concat(checkedProps.value.variant === 'distribution'),
+    )
+  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: null, false: 0 },
+        concat(checkedProps.value.variant === 'distribution'),
+      )) === '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: null, false: 0 },
+        concat(checkedProps.value.variant === 'distribution'),
+      ))
+    : 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: null, false: 0 },
+        concat(checkedProps.value.variant === 'distribution'),
+      ))
+})
+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: null, false: checkedProps.value.max },
+      concat(checkedProps.value.variant === 'distribution'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding2Previous
+  }
+  return guardedBinding2Previous = 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: null, false: checkedProps.value.max },
+        concat(checkedProps.value.variant === 'distribution'),
+      )) === '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: null, false: checkedProps.value.max },
+        concat(checkedProps.value.variant === 'distribution'),
+      ))
+    : 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: null, false: checkedProps.value.max },
+        concat(checkedProps.value.variant === 'distribution'),
+      ))
+})
+let guardedBinding3Previous: any = null
+const guardedBinding3 = 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: null, false: amount.value },
+      concat(checkedProps.value.variant === 'distribution'),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedBinding3Previous
+  }
+  return guardedBinding3Previous = 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: null, false: amount.value },
+        concat(checkedProps.value.variant === 'distribution'),
+      )) === '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: null, false: amount.value },
+        concat(checkedProps.value.variant === 'distribution'),
+      ))
+    : 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: null, false: amount.value },
+        concat(checkedProps.value.variant === 'distribution'),
+      ))
+})
+let guardedBinding4Previous: any = null
+const guardedBinding4 = computed(() => {
   const candidate: any = ((objectValue: any, indexValue: any) =>
     objectValue === Symbol.for('html-next.invalid-result')
       || indexValue === Symbol.for('html-next.invalid-result')
@@ -606,16 +807,33 @@ const guarded = computed(() => {
       : 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 },
-          ),
+          true: null,
+          false: ((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 !== ''),
+            ),
         }
         return Object.values(value).some((entry: unknown) =>
             entry === Symbol.for('html-next.invalid-result')
@@ -623,28 +841,45 @@ const guarded = computed(() => {
           ? Symbol.for('html-next.invalid-result')
           : value
       })(),
-      concat(checkedProps.value.valueText !== ''),
+      concat(checkedProps.value.variant === 'distribution'),
     )
   if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedPrevious
+    return guardedBinding4Previous
   }
-  return guardedPrevious = typeof (((objectValue: any, indexValue: any) =>
+  return guardedBinding4Previous = 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 },
-            ),
+            true: null,
+            false: ((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 !== ''),
+              ),
           }
           return Object.values(value).some((entry: unknown) =>
               entry === Symbol.for('html-next.invalid-result')
@@ -652,7 +887,7 @@ const guarded = computed(() => {
             ? Symbol.for('html-next.invalid-result')
             : value
         })(),
-        concat(checkedProps.value.valueText !== ''),
+        concat(checkedProps.value.variant === 'distribution'),
       )) === 'boolean'
     ? String(((objectValue: any, indexValue: any) =>
       objectValue === Symbol.for('html-next.invalid-result')
@@ -661,16 +896,33 @@ const guarded = computed(() => {
         : 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 },
-            ),
+            true: null,
+            false: ((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 !== ''),
+              ),
           }
           return Object.values(value).some((entry: unknown) =>
               entry === Symbol.for('html-next.invalid-result')
@@ -678,7 +930,7 @@ const guarded = computed(() => {
             ? Symbol.for('html-next.invalid-result')
             : value
         })(),
-        concat(checkedProps.value.valueText !== ''),
+        concat(checkedProps.value.variant === 'distribution'),
       ))
     : attribute(((objectValue: any, indexValue: any) =>
       objectValue === Symbol.for('html-next.invalid-result')
@@ -687,16 +939,33 @@ const guarded = computed(() => {
         : 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 },
-            ),
+            true: null,
+            false: ((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 !== ''),
+              ),
           }
           return Object.values(value).some((entry: unknown) =>
               entry === Symbol.for('html-next.invalid-result')
@@ -704,28 +973,88 @@ const guarded = computed(() => {
             ? Symbol.for('html-next.invalid-result')
             : value
         })(),
-        concat(checkedProps.value.valueText !== ''),
+        concat(checkedProps.value.variant === 'distribution'),
       ))
 })
-let guardedBindingPrevious: any = null
-const guardedBinding = computed(() => {
+let guardedBinding5Previous: any = null
+const guardedBinding5 = 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 },
+      (() => {
+        const value = {
+          true: ((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: concat(checkedProps.value.label, ': ', checkedProps.value.valueText),
+                  false: checkedProps.value.label,
+                }
+                return Object.values(value).some((entry: unknown) =>
+                    entry === Symbol.for('html-next.invalid-result')
+                  )
+                  ? Symbol.for('html-next.invalid-result')
+                  : value
+              })(),
+              concat(
+                checkedProps.value.variant === 'distribution'
+                  && checkedProps.value.valueText !== '',
+              ),
+            ),
+          false: null,
+        }
+        return Object.values(value).some((entry: unknown) =>
+            entry === Symbol.for('html-next.invalid-result')
+          )
+          ? Symbol.for('html-next.invalid-result')
+          : value
+      })(),
       concat(checkedProps.value.label !== ''),
     )
   if (candidate === Symbol.for('html-next.invalid-result')) {
-    return guardedBindingPrevious
+    return guardedBinding5Previous
   }
-  return guardedBindingPrevious = typeof (((objectValue: any, indexValue: any) =>
+  return guardedBinding5Previous = 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 },
+        (() => {
+          const value = {
+            true: ((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: concat(checkedProps.value.label, ': ', checkedProps.value.valueText),
+                    false: checkedProps.value.label,
+                  }
+                  return Object.values(value).some((entry: unknown) =>
+                      entry === Symbol.for('html-next.invalid-result')
+                    )
+                    ? Symbol.for('html-next.invalid-result')
+                    : value
+                })(),
+                concat(
+                  checkedProps.value.variant === 'distribution'
+                    && checkedProps.value.valueText !== '',
+                ),
+              ),
+            false: null,
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
         concat(checkedProps.value.label !== ''),
       )) === 'boolean'
     ? String(((objectValue: any, indexValue: any) =>
@@ -733,7 +1062,37 @@ const guardedBinding = computed(() => {
         || indexValue === Symbol.for('html-next.invalid-result')
         ? Symbol.for('html-next.invalid-result')
         : objectValue[indexValue])(
-        { true: checkedProps.value.label, false: null },
+        (() => {
+          const value = {
+            true: ((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: concat(checkedProps.value.label, ': ', checkedProps.value.valueText),
+                    false: checkedProps.value.label,
+                  }
+                  return Object.values(value).some((entry: unknown) =>
+                      entry === Symbol.for('html-next.invalid-result')
+                    )
+                    ? Symbol.for('html-next.invalid-result')
+                    : value
+                })(),
+                concat(
+                  checkedProps.value.variant === 'distribution'
+                    && checkedProps.value.valueText !== '',
+                ),
+              ),
+            false: null,
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
         concat(checkedProps.value.label !== ''),
       ))
     : attribute(((objectValue: any, indexValue: any) =>
@@ -741,12 +1100,42 @@ const guardedBinding = computed(() => {
         || indexValue === Symbol.for('html-next.invalid-result')
         ? Symbol.for('html-next.invalid-result')
         : objectValue[indexValue])(
-        { true: checkedProps.value.label, false: null },
+        (() => {
+          const value = {
+            true: ((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: concat(checkedProps.value.label, ': ', checkedProps.value.valueText),
+                    false: checkedProps.value.label,
+                  }
+                  return Object.values(value).some((entry: unknown) =>
+                      entry === Symbol.for('html-next.invalid-result')
+                    )
+                    ? Symbol.for('html-next.invalid-result')
+                    : value
+                })(),
+                concat(
+                  checkedProps.value.variant === 'distribution'
+                    && checkedProps.value.valueText !== '',
+                ),
+              ),
+            false: null,
+          }
+          return Object.values(value).some((entry: unknown) =>
+              entry === Symbol.for('html-next.invalid-result')
+            )
+            ? Symbol.for('html-next.invalid-result')
+            : value
+        })(),
         concat(checkedProps.value.label !== ''),
       ))
 })
-let guardedBinding2Previous: any = null
-const guardedBinding2 = computed(() => {
+let guardedBinding6Previous: any = null
+const guardedBinding6 = computed(() => {
   const candidate: any = ((objectValue: any, indexValue: any) =>
     objectValue === Symbol.for('html-next.invalid-result')
       || indexValue === Symbol.for('html-next.invalid-result')
@@ -754,32 +1143,34 @@ const guardedBinding2 = computed(() => {
       : objectValue[indexValue])(
       { true: checkedProps.value.segments, false: null },
       concat(
-        number(checkedProps.value.segments) === undefined || number(1) === undefined
-          ? undefined
-          : number(checkedProps.value.segments)! > number(1)!,
+        checkedProps.value.variant === 'progress'
+          && (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 guardedBinding6Previous
   }
-  return guardedBinding2Previous = attribute(((objectValue: any, indexValue: any) =>
+  return guardedBinding6Previous = 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)!,
+        checkedProps.value.variant === 'progress'
+          && (number(checkedProps.value.segments) === undefined || number(1) === undefined
+            ? undefined
+            : number(checkedProps.value.segments)! > number(1)!),
       ),
     ))
 })
-let guardedBinding3Previous: any = null
-const guardedBinding3 = computed(() => {
+let guardedBinding7Previous: any = null
+const guardedBinding7 = computed(() => {
   const candidate: any = concat(percent.value, '%')
-  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding3Previous
-  return guardedBinding3Previous = candidate
+  if (candidate === Symbol.for('html-next.invalid-result')) return guardedBinding7Previous
+  return guardedBinding7Previous = candidate
 })
 const hydrationNode = hydrationInstance?.vnode.el
 if (
@@ -802,6 +1193,9 @@ const hostState = computed(() =>
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+    checkedProps.value.variant && 'variant',
+    checkedProps.value.variant != null
+    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -923,24 +1317,39 @@ function math(
 <template>
   <span
     data-component="ui-meter"
-    role="meter"
-    aria-valuemin="0"
     v-bind="nativeAttrs($attrs)"
-    :aria-valuemax="checkedProps.max ?? undefined"
-    :aria-valuenow="amount"
-    :aria-valuetext="guarded"
-    :aria-label="guardedBinding"
-    :data-ui-meter-segments="guardedBinding2"
+    :role="guarded"
+    :aria-valuemin="guardedBinding"
+    :aria-valuemax="guardedBinding2"
+    :aria-valuenow="guardedBinding3"
+    :aria-valuetext="guardedBinding4"
+    :aria-label="guardedBinding5"
+    :data-ui-meter-segments="guardedBinding6"
     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)"
+    :data-parts="reflectedProp('parts', 'parts', checkedProps.parts, undefined, false)"
     :data-segments="reflectedProp('segments', 'segments', checkedProps.segments, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
     :data-value-text="reflectedProp('valueText', 'value-text', checkedProps.valueText, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-meter-state="hostState || undefined"
-  ><span class="fill" :style="{ 'inline-size': guardedBinding3 }"></span></span>
+  ><span
+      v-if="checkedProps.variant === 'progress'"
+      class="fill"
+      :style="{ 'inline-size': guardedBinding7 }"
+    ></span>
+    <template v-if="checkedProps.variant === 'distribution'"><template
+        v-for="(part, index) in checkedProps.parts"
+        :key="index"
+      ><span
+          v-if="part.value > 0 && (part.value - part.value) === 0"
+          class="part"
+          aria-hidden="true"
+          :style="{ 'flex-grow': part.value, 'background-color': part.color }"
+        ></span></template></template></span>
 </template>
 
 <style scoped>
@@ -1070,6 +1479,34 @@ function math(
   --_meter-gap: var(--ui-space-0-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);
+}
+
+[data-component~="ui-meter"][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));
+  }
+}
+
 /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
 @media (forced-colors: active) {
   .fill {