@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/components/data/Tree.vue

@@ -1,5 +1,6 @@
 <template>
    <ul
+      v-if="visible.length"
       ref="tree"
       :id="control.id.value"
       :aria-label="ariaLabel"
@@ -7,20 +8,11 @@
       v-bind="$attrs"
       :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
       :aria-invalid="control.invalid.value ? 'true' : void 0"
-      :aria-required="control.required.value ? 'true' : void 0"
+      :aria-required="control.required.value && !control.labelledBy.value ? 'true' : void 0"
       :aria-disabled="control.disabled.value ? 'true' : void 0"
       class="k-tree"
       role="tree"
-      :class="[
-  `k-tree-${size}`,
-  {
-    'is-bordered': bordered,
-    'is-reorderable': canReorder,
-    'is-dragging': dragId !== null,
-    'is-invalid': control.invalid.value,
-    'is-disabled': control.disabled.value
-  }
-]"
+      :class="rootClass"
       data-k-shake
    >
       <li
@@ -35,7 +27,8 @@
          :aria-expanded="entry.hasChildren ? isExpanded(entry.node.id) : void 0"
          :aria-selected="selectable ? selected === entry.node.id : void 0"
          :aria-disabled="entry.node.disabled ? 'true' : void 0"
-         :aria-describedby="canReorder && !entry.node.disabled ? hintId : void 0"
+         :aria-labelledby="$slots.label ? textId(entry.node.id) : labelId(entry.node.id)"
+         :aria-describedby="describedBy(entry)"
          :aria-keyshortcuts="canReorder && !entry.node.disabled ? keyShortcuts : void 0"
          :tabindex="entry.node.id === rovingId ? 0 : -1"
          :class="{ 'is-moving': dragId === entry.node.id }"
@@ -76,39 +69,65 @@
          <span v-if="entry.node.icon" class="k-tree-icon" aria-hidden="true">
             <Icon :name="entry.node.icon" />
          </span>
-         <span class="k-tree-text">
+         <span :id="textId(entry.node.id)" class="k-tree-text">
             <slot name="label" :node="entry.node" :level="entry.level">
-               <span class="k-tree-label">{{ entry.node.label }}</span>
+               <span :id="labelId(entry.node.id)" class="k-tree-label">{{ entry.node.label }}</span>
                <span
                   v-if="entry.node.description"
+                  :id="descriptionId(entry.node.id)"
                   class="k-tree-description"
                   :class="`k-tree-description-${entry.node.descriptionVariant ?? descriptionVariant}`"
                   >{{ entry.node.description }}</span
                >
             </slot>
          </span>
-         <span v-if="entry.node.meta || $slots.meta" class="k-tree-meta">
+         <span
+            v-if="entry.node.meta || $slots.meta"
+            :id="metaId(entry.node.id)"
+            class="k-tree-meta"
+         >
             <slot name="meta" :node="entry.node">{{ entry.node.meta }}</slot>
          </span>
          <span v-if="checkmark && selectable" class="k-tree-check" aria-hidden="true">
             <Icon v-if="selected === entry.node.id" name="check" />
          </span>
-      </li>
-      <li v-if="!visible.length" class="k-tree-empty" role="none">
-         <slot name="empty">{{ emptyLabel }}</slot>
+         <span v-if="canReorder && !entry.node.disabled" class="k-tree-actions" @click.stop>
+            <Button
+               v-for="action in rowActions(entry)"
+               :key="action.direction"
+               variant="ghost"
+               tone="neutral"
+               size="xs"
+               tabindex="-1"
+               :icon="action.icon"
+               :aria-label="action.label"
+               :title="action.label"
+               :disabled="!action.move"
+               @click="action.move && commit(action.move)"
+            />
+         </span>
       </li>
    </ul>
+   <div v-else :id="control.id.value" v-bind="$attrs" class="k-tree" :class="rootClass">
+      <p class="k-tree-empty">
+         <slot name="empty">{{ emptyLabel }}</slot>
+      </p>
+   </div>
    <template v-if="canReorder">
       <span :id="hintId" class="k-visually-hidden">{{ hintText }}</span>
-      <span class="k-visually-hidden" role="status" aria-live="polite">{{ announcement }}</span>
+      <LiveRegion :message="live.message.value" />
    </template>
 </template>
 
 <script setup>
-import { computed, nextTick, ref, useId, useTemplateRef } from "vue";
+import { computed, nextTick, ref, useId, useSlots, useTemplateRef } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { useLiveMessage } from "../../internal/core/live";
+import { useTypeahead } from "../../internal/core/roving";
 import { joinIds } from "../../internal/forms/control";
+import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 import { rowDelay } from "../../internal/data/stagger";
 defineOptions({ inheritAttrs: false });
@@ -130,6 +149,7 @@ const props = defineProps({
   required: { type: Boolean, required: false }
 });
 const { t } = useLocale();
+const slots = useSlots();
 const emit = defineEmits(["select", "move"]);
 const expanded = defineModel("expanded", { type: Array, ...{ default: () => [] } });
 const selected = defineModel("selected", { type: [String, Number, null], ...{ default: null } });
@@ -146,14 +166,12 @@ const focusId = ref(selected.value ?? props.nodes[0]?.id ?? null);
 const revealAnchor = ref(-1);
 const dragId = ref(null);
 const dropState = ref(null);
-const announcement = ref("");
+const live = useLiveMessage();
 const ariaLabel = computed(() => {
   if (props.label) return props.label;
-  return control.field ? void 0 : t("tree.label");
+  return control.labelledBy.value ? void 0 : t("tree.label");
 });
-const ariaLabelledby = computed(
-  () => !props.label && control.field ? control.field.labelId : void 0
-);
+const ariaLabelledby = computed(() => props.label ? void 0 : control.labelledBy.value);
 const emptyLabel = computed(() => props.emptyText ?? t("tree.empty"));
 const canReorder = computed(() => props.reorderable && !control.disabled.value);
 const hintText = computed(
@@ -166,6 +184,36 @@ const expandedSet = computed(() => new Set(expanded.value));
 function rowId(id) {
   return `${baseId}-node-${id}`;
 }
+function labelId(id) {
+  return `${rowId(id)}-label`;
+}
+function textId(id) {
+  return `${rowId(id)}-text`;
+}
+function descriptionId(id) {
+  return `${rowId(id)}-description`;
+}
+function metaId(id) {
+  return `${rowId(id)}-meta`;
+}
+const rootClass = computed(() => [
+  `k-tree-${props.size}`,
+  {
+    "is-bordered": props.bordered,
+    "is-reorderable": canReorder.value,
+    "is-dragging": dragId.value !== null,
+    "is-invalid": control.invalid.value,
+    "is-disabled": control.disabled.value
+  }
+]);
+function describedBy(entry) {
+  const hasMeta = Boolean(entry.node.meta || slots.meta);
+  return joinIds(
+    !slots.label && entry.node.description ? descriptionId(entry.node.id) : void 0,
+    hasMeta ? metaId(entry.node.id) : void 0,
+    canReorder.value && !entry.node.disabled ? hintId : void 0
+  );
+}
 function isExpanded(id) {
   return expandedSet.value.has(id);
 }
@@ -264,7 +312,7 @@ function announce(move) {
     parent: parent?.node.label ?? ""
   };
   const key = parent && move.to.parent !== move.from.parent ? "tree.movedInto" : "tree.moved";
-  announcement.value = t(key, params);
+  live.announce(t(key, params));
 }
 function commit(move) {
   if (move.to.parent !== null && !isExpanded(move.to.parent))
@@ -273,23 +321,76 @@ function commit(move) {
   announce(move);
   focusNode(move.node.id);
 }
-function keyboardMove(event, entry) {
+function moveFor(entry, direction) {
   const source = index.value.get(entry.node.id);
-  if (!source) return false;
+  if (!source) return null;
   const previous = source.siblings[source.index - 1];
   const next = source.siblings[source.index + 1];
-  let move = null;
-  if (event.key === "ArrowUp" && previous) move = buildMove(entry.node.id, previous.id, "before");
-  else if (event.key === "ArrowDown" && next) move = buildMove(entry.node.id, next.id, "after");
-  else if (event.key === "ArrowRight" && props.nestable && previous)
-    move = buildMove(entry.node.id, previous.id, "inside");
-  else if (event.key === "ArrowLeft" && props.nestable && source.parent !== null)
-    move = buildMove(entry.node.id, source.parent, "after");
-  else return false;
+  if (direction === "up") return previous ? buildMove(entry.node.id, previous.id, "before") : null;
+  if (direction === "down") return next ? buildMove(entry.node.id, next.id, "after") : null;
+  if (!props.nestable) return null;
+  if (direction === "indent")
+    return previous ? buildMove(entry.node.id, previous.id, "inside") : null;
+  return source.parent !== null ? buildMove(entry.node.id, source.parent, "after") : null;
+}
+const moveKeys = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowRight: "indent",
+  ArrowLeft: "outdent"
+};
+function keyboardMove(event, entry) {
+  const direction = moveKeys[event.key];
+  if (!direction) return false;
+  if ((direction === "indent" || direction === "outdent") && !props.nestable) return false;
+  const move = moveFor(entry, direction);
   if (move) commit(move);
   return true;
 }
+const actionIcons = {
+  up: "arrow-up",
+  down: "arrow-down",
+  indent: "arrow-right",
+  outdent: "arrow-left"
+};
+const actionKeys = {
+  up: "tree.moveUp",
+  down: "tree.moveDown",
+  indent: "tree.indent",
+  outdent: "tree.outdent"
+};
+function rowActions(entry) {
+  const directions = props.nestable ? ["up", "down", "outdent", "indent"] : ["up", "down"];
+  return directions.map((direction) => ({
+    direction,
+    icon: actionIcons[direction],
+    label: t(actionKeys[direction], { label: entry.node.label }),
+    move: moveFor(entry, direction)
+  }));
+}
+const typeahead = useTypeahead();
+function onTypeahead(event, position) {
+  if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return false;
+  if (event.key === " " && !typeahead.typing()) return false;
+  const { query, cycle } = typeahead.type(event.key);
+  const list = visible.value;
+  const start = cycle ? position + 1 : position;
+  for (let offset = 0; offset < list.length; offset++) {
+    const entry = list[(start + offset) % list.length];
+    if (!entry || entry.node.disabled) continue;
+    if (entry.node.label.toLowerCase().startsWith(query)) {
+      focusNode(entry.node.id);
+      break;
+    }
+  }
+  return true;
+}
 function onKeydown(event, entry, position) {
+  if (event.target !== event.currentTarget) return;
+  if (onTypeahead(event, position)) {
+    event.preventDefault();
+    return;
+  }
   if (event.altKey && canReorder.value && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
     if (keyboardMove(event, entry)) event.preventDefault();
     return;

package/dist/components/data/Tree.vue.d.ts

@@ -1,17 +1,16 @@
-import type { TreeDescriptionVariant, TreeMove, TreeNode, TreeSize } from './types';
-type NodeId = TreeNode['id'];
+import type { TreeDescriptionVariant, TreeMove, TreeNode, TreeNodeId, TreeSize } from './types';
 declare var __VLS_12: {
     node: TreeNode;
     level: number;
 }, __VLS_14: {
     node: TreeNode;
-}, __VLS_21: {};
+}, __VLS_29: {};
 type __VLS_Slots = {} & {
     label?: (props: typeof __VLS_12) => any;
 } & {
     meta?: (props: typeof __VLS_14) => any;
 } & {
-    empty?: (props: typeof __VLS_21) => any;
+    empty?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     nodes: TreeNode[];
@@ -29,14 +28,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
-    expanded?: NodeId[];
-    selected?: NodeId | null;
+    expanded?: TreeNodeId[];
+    selected?: TreeNodeId | null;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -191,7 +191,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -225,8 +224,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     move: (move: TreeMove) => any;
     select: (node: TreeNode) => any;
-    "update:selected": (value: string | number | null) => any;
-    "update:expanded": (value: (string | number)[]) => any;
+    "update:selected": (value: TreeNodeId | null) => any;
+    "update:expanded": (value: TreeNodeId[]) => any;
 }, string, import("vue").PublicProps, Readonly<{
     nodes: TreeNode[];
     label?: string;
@@ -243,14 +242,15 @@ declare const __VLS_base: import("vue").DefineComponent<{
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
-    expanded?: NodeId[];
-    selected?: NodeId | null;
+    expanded?: TreeNodeId[];
+    selected?: TreeNodeId | null;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -405,7 +405,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -439,8 +438,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     onMove?: ((move: TreeMove) => any) | undefined;
     onSelect?: ((node: TreeNode) => any) | undefined;
-    "onUpdate:selected"?: ((value: string | number | null) => any) | undefined;
-    "onUpdate:expanded"?: ((value: (string | number)[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: TreeNodeId | null) => any) | undefined;
+    "onUpdate:expanded"?: ((value: TreeNodeId[]) => any) | undefined;
 }>, {
     invalid: boolean;
     size: TreeSize;

package/dist/components/data/types.d.ts

@@ -53,8 +53,9 @@ export interface TimelineItem {
     icon?: string;
     tone?: Tone;
 }
+export type TreeNodeId = string | number;
 export interface TreeNode {
-    id: string | number;
+    id: TreeNodeId;
     label: string;
     description?: string;
     descriptionVariant?: TreeDescriptionVariant;

package/dist/components/feedback/Alert.vue

@@ -2,20 +2,22 @@
    <Transition name="k-alert">
       <div
          v-if="open"
+         ref="root"
          class="k-alert"
          :class="[`k-alert-${tone}`, `k-alert-${variant}`, { 'has-actions': $slots.actions }]"
          :role="resolvedRole"
-         :aria-labelledby="title || $slots.title ? titleId : void 0"
+         :aria-labelledby="resolvedRole && hasTitle ? titleId : void 0"
       >
          <span v-if="resolvedIcon || $slots.icon" class="k-alert-icon" aria-hidden="true">
             <slot name="icon"><Icon v-if="resolvedIcon" :name="resolvedIcon" /></slot>
          </span>
          <div class="k-alert-body">
-            <p v-if="title || $slots.title" :id="titleId" class="k-alert-title">
+            <p v-if="hasTitle" :id="titleId" class="k-alert-title">
                <slot name="title">{{ title }}</slot>
             </p>
             <div v-if="description || $slots.default" class="k-alert-description">
-               <slot>{{ description }}</slot>
+               <span v-if="!hasTitle && toneText" class="k-visually-hidden">{{ toneText }}: </span
+               ><slot>{{ description }}</slot>
             </div>
             <div v-if="$slots.actions" class="k-alert-actions">
                <slot name="actions" />
@@ -36,11 +38,12 @@
 </template>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useId, useSlots, useTemplateRef } from "vue";
+import { hasFocusWithin, neighborFocusTarget } from "../../internal/core/focus";
 import { useLocale } from "../../composables/useLocale";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
-import { toneIcons } from "../../internal/core/tone";
+import { spokenToneKey, toneIcons } from "../../internal/core/tone";
 const props = defineProps({
   tone: { type: String, required: false, default: "neutral" },
   variant: { type: String, required: false, default: "soft" },
@@ -59,12 +62,18 @@ const titleId = useId();
 const resolvedIcon = computed(
   () => props.icon === false ? null : props.icon ?? toneIcons[props.tone]
 );
-const resolvedRole = computed(() => {
-  if (props.role === "none") return void 0;
-  if (props.role) return props.role;
-  return props.tone === "danger" || props.tone === "warning" ? "alert" : "status";
+const slots = useSlots();
+const root = useTemplateRef("root");
+const hasTitle = computed(() => Boolean(props.title || slots.title));
+const resolvedRole = computed(() => props.role === "none" ? void 0 : props.role);
+const toneText = computed(() => {
+  const key = spokenToneKey(props.tone);
+  return key ? t(key) : "";
 });
 function dismiss() {
+  const element = root.value;
+  if (element && hasFocusWithin(element))
+    neighborFocusTarget(element)?.focus({ preventScroll: true });
   open.value = false;
   emit("dismiss");
 }

package/dist/components/feedback/Alert.vue.d.ts

@@ -27,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -183,7 +184,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -267,6 +267,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
     name?: string;
+    dir?: string | undefined | undefined;
     class?: import("vue").ClassValue;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -423,7 +424,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     accesskey?: string | undefined | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/components/feedback/LoadingOverlay.vue

@@ -1,6 +1,7 @@
 <template>
    <div class="k-loading-overlay" :class="{ 'is-loading': loading, 'is-blur': blur }">
       <div
+         ref="content"
          class="k-loading-overlay-content"
          :inert="loading || void 0"
          :aria-busy="loading ? 'true' : void 0"
@@ -8,21 +9,31 @@
          <slot />
       </div>
       <Transition name="k-loading-overlay">
-         <div v-if="loading" class="k-loading-overlay-layer">
+         <div
+            v-if="loading"
+            ref="layer"
+            class="k-loading-overlay-layer"
+            role="group"
+            tabindex="-1"
+            :aria-label="text"
+         >
             <span class="k-loading-overlay-indicator">
-               <Spinner :size="spinnerSize" :label="text" />
+               <Spinner :size="spinnerSize" decorative />
                <span v-if="showLabel" class="k-loading-overlay-label" aria-hidden="true">{{
                   text
                }}</span>
             </span>
          </div>
       </Transition>
+      <LiveRegion :message="loading ? text : ''" />
    </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, nextTick, useTemplateRef, watch } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { activeElement, hasFocusWithin, isFocusLost } from "../../internal/core/focus";
 import Spinner from "../core/Spinner.vue";
 const props = defineProps({
   loading: { type: Boolean, required: false },
@@ -33,4 +44,25 @@ const props = defineProps({
 });
 const { t } = useLocale();
 const text = computed(() => props.label ?? t("common.loading"));
+const content = useTemplateRef("content");
+const layer = useTemplateRef("layer");
+let returnTarget = null;
+watch(
+  () => props.loading,
+  async (loading) => {
+    if (loading) {
+      returnTarget = hasFocusWithin(content.value) ? activeElement() : null;
+      if (!returnTarget) return;
+      await nextTick();
+      layer.value?.focus({ preventScroll: true });
+      return;
+    }
+    const target = returnTarget;
+    returnTarget = null;
+    if (!target) return;
+    await nextTick();
+    if (isFocusLost(layer.value) && target.isConnected) target.focus({ preventScroll: true });
+  },
+  { flush: "pre" }
+);
 </script>

package/dist/components/feedback/Meter.vue

@@ -18,7 +18,8 @@
          :low="low"
          :high="high"
          :optimum="optimum"
-         :aria-valuetext="valueText ? displayValue : void 0"
+         :aria-label="label ? void 0 : t('meter.label')"
+         :aria-valuetext="ariaValueText"
       >
          {{ displayValue }}
       </meter>
@@ -27,6 +28,8 @@
 
 <script setup>
 import { computed, useId } from "vue";
+import { useLocale } from "../../composables/useLocale";
+import { percentText } from "../../internal/feedback/progress";
 const props = defineProps({
   value: { type: Number, required: true },
   min: { type: Number, required: false, default: 0 },
@@ -41,12 +44,34 @@ const props = defineProps({
   size: { type: String, required: false, default: "sm" },
   id: { type: String, required: false }
 });
+const { t } = useLocale();
 const generatedId = useId();
 const meterId = computed(() => props.id ?? generatedId);
 const displayValue = computed(() => {
   if (props.valueText) return props.valueText(props.value, props.max);
   const span = props.max - props.min;
-  const ratio = span > 0 ? (props.value - props.min) / span : 0;
-  return `${Math.round(ratio * 100)}%`;
+  return percentText(span > 0 ? (props.value - props.min) / span : 0);
+});
+const state = computed(() => {
+  if (props.low === void 0 && props.high === void 0 && props.optimum === void 0)
+    return null;
+  const min = props.min;
+  const max = Math.max(props.max, min);
+  const clamp = (value2, lower, upper) => Math.min(Math.max(value2, lower), upper);
+  const low = clamp(props.low ?? min, min, max);
+  const high = clamp(props.high ?? max, low, max);
+  const optimum = clamp(props.optimum ?? (min + max) / 2, min, max);
+  const value = clamp(props.value, min, max);
+  const region = (point) => point < low ? "low" : point > high ? "high" : "middle";
+  const best = region(optimum);
+  const current = region(value);
+  if (current === best) return "good";
+  if (best === "middle" || current === "middle") return "fair";
+  return "poor";
+});
+const ariaValueText = computed(() => {
+  if (state.value)
+    return t("meter.valueText", { value: displayValue.value, state: t(`meter.${state.value}`) });
+  return props.valueText ? displayValue.value : void 0;
 });
 </script>

package/dist/components/feedback/Progress.vue

@@ -20,7 +20,6 @@
          :aria-valuemax="max"
          :aria-valuenow="indeterminate ? void 0 : clamped"
          :aria-valuetext="indeterminate ? void 0 : displayValue"
-         :aria-busy="indeterminate ? 'true' : void 0"
       >
          <span class="k-progress-bar" :style="{ '--k-progress': ratio }" />
       </div>
@@ -30,6 +29,7 @@
 <script setup>
 import { computed, useId } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { useProgressValue } from "../../internal/feedback/progress";
 const props = defineProps({
   value: { type: [Number, null], required: false, default: null },
   max: { type: Number, required: false, default: 100 },
@@ -43,10 +43,5 @@ const props = defineProps({
 const { t } = useLocale();
 const text = computed(() => props.label ?? t("progress.label"));
 const labelId = useId();
-const indeterminate = computed(() => props.value === null || props.value === void 0);
-const clamped = computed(() => Math.min(Math.max(props.value ?? 0, 0), props.max));
-const ratio = computed(() => props.max > 0 ? clamped.value / props.max : 0);
-const displayValue = computed(
-  () => props.valueText ? props.valueText(clamped.value, props.max) : `${Math.round(ratio.value * 100)}%`
-);
+const { indeterminate, clamped, ratio, displayValue } = useProgressValue(props);
 </script>

package/dist/components/feedback/Progress.vue.d.ts

@@ -408,9 +408,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_key?: string | undefined | undefined;
 }> & Readonly<{}>, {
     value: number | null;
+    tone: Tone;
     max: number;
     size: ProgressSize;
-    tone: Tone;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/feedback/ProgressRing.vue

@@ -37,6 +37,7 @@
 <script setup>
 import { computed } from "vue";
 import { useLocale } from "../../composables/useLocale";
+import { useProgressValue } from "../../internal/feedback/progress";
 const props = defineProps({
   value: { type: [Number, null], required: false, default: null },
   max: { type: Number, required: false, default: 100 },
@@ -53,12 +54,7 @@ const sizeValue = computed(
 );
 const radius = computed(() => 18 - props.thickness / 2);
 const circumference = computed(() => 2 * Math.PI * radius.value);
-const indeterminate = computed(() => props.value === null || props.value === void 0);
 const { t } = useLocale();
 const text = computed(() => props.label ?? t("progress.label"));
-const clamped = computed(() => Math.min(Math.max(props.value ?? 0, 0), props.max));
-const ratio = computed(() => props.max > 0 ? clamped.value / props.max : 0);
-const displayValue = computed(
-  () => props.valueText ? props.valueText(clamped.value, props.max) : `${Math.round(ratio.value * 100)}%`
-);
+const { indeterminate, clamped, ratio, displayValue } = useProgressValue(props);
 </script>