@xleddyl/443-components-vue 0.5.0 → 0.6.2

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

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

package/dist/components/forms/Calendar.vue

@@ -4,28 +4,33 @@
       :class="{ 'is-range': range, 'is-disabled': disabled, 'is-readonly': readonly }"
    >
       <div class="k-calendar-header">
-         <Button
-            size="xs"
-            variant="ghost"
-            tone="neutral"
-            icon="chevron-left"
+         <button
+            type="button"
+            class="k-btn k-btn-xs k-btn-neutral k-btn-ghost is-icon"
             :aria-label="prevText"
             :title="prevText"
-            @click="shiftMonth(-1)"
-            :disabled="!canGoPrev || disabled"
-         />
-         <h2 :id="headingId" class="k-calendar-heading" aria-live="polite">{{ heading }}</h2>
-         <Button
-            size="xs"
-            variant="ghost"
-            tone="neutral"
-            icon="chevron-right"
+            :aria-disabled="!canGoPrev ? 'true' : void 0"
+            :disabled="disabled || void 0"
+            @click="onShift(-1)"
+         >
+            <Icon name="chevron-left" />
+         </button>
+         <component :is="`h${level}`" :id="headingId" class="k-calendar-heading">{{
+            heading
+         }}</component>
+         <button
+            type="button"
+            class="k-btn k-btn-xs k-btn-neutral k-btn-ghost is-icon"
             :aria-label="nextText"
             :title="nextText"
-            @click="shiftMonth(1)"
-            :disabled="!canGoNext || disabled"
-         />
+            :aria-disabled="!canGoNext ? 'true' : void 0"
+            :disabled="disabled || void 0"
+            @click="onShift(1)"
+         >
+            <Icon name="chevron-right" />
+         </button>
       </div>
+      <LiveRegion :message="live.message.value" />
       <table
          ref="gridRef"
          role="grid"
@@ -99,7 +104,9 @@ import {
   weekdayNames
 } from "../../internal/forms/dates";
 import { useLocale } from "../../composables/useLocale";
-import Button from "../core/Button.vue";
+import Icon from "../core/Icon.vue";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { useLiveMessage } from "../../internal/core/live";
 const props = defineProps({
   range: { type: Boolean, required: false },
   min: { type: String, required: false },
@@ -110,7 +117,8 @@ const props = defineProps({
   prevLabel: { type: String, required: false },
   nextLabel: { type: String, required: false },
   disabled: { type: Boolean, required: false },
-  readonly: { type: Boolean, required: false }
+  readonly: { type: Boolean, required: false },
+  level: { type: Number, required: false, default: 2 }
 });
 const { locale: appLocale, t } = useLocale();
 const resolvedLocale = computed(() => props.locale ?? appLocale.value.code);
@@ -161,6 +169,18 @@ function isUnavailable(iso) {
   if (props.max && iso > props.max) return true;
   return Boolean(props.isDateDisabled?.(iso));
 }
+function dayLabel(iso, start, end) {
+  const label = formatIso(iso, resolvedLocale.value, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+  if (!props.range || !start) return label;
+  if (iso === start) return `${label}, ${t("calendar.rangeStart")}`;
+  if (iso === end) return `${label}, ${t("calendar.rangeEnd")}`;
+  return label;
+}
 const weeks = computed(() => {
   const currentMonth = monthKey(focusedDate.value);
   const { start, end } = selection.value;
@@ -175,12 +195,7 @@ const weeks = computed(() => {
       iso,
       inMonth,
       number: Number(iso.slice(8)),
-      label: formatIso(iso, resolvedLocale.value, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric"
-      }),
+      label: dayLabel(iso, start, end),
       unavailable: isUnavailable(iso),
       selected: selected || Boolean(props.range && start && end && iso > start && iso < end),
       rangeStart: Boolean(props.range && start && end && iso === start && start !== end),
@@ -199,8 +214,14 @@ function moveFocus(iso, fromKeyboard) {
 function focusCell() {
   gridRef.value?.querySelector(`[data-date="${focusedDate.value}"]`)?.focus({ preventScroll: false });
 }
-function shiftMonth(delta) {
+const live = useLiveMessage();
+function announceMonth() {
+  nextTick(() => live.announce(heading.value));
+}
+function onShift(delta) {
+  if (props.disabled || (delta < 0 ? !canGoPrev.value : !canGoNext.value)) return;
   moveFocus(addMonths(focusedDate.value, delta), false);
+  announceMonth();
 }
 function pick(iso) {
   if (props.disabled || props.readonly || isUnavailable(iso)) return;
@@ -256,7 +277,9 @@ function onKeydown(event) {
       return;
   }
   event.preventDefault();
+  const before = monthKey(current);
   moveFocus(next, true);
+  if (event.key.startsWith("Page") && monthKey(focusedDate.value) !== before) announceMonth();
   if (props.range) hoverDate.value = focusedDate.value;
 }
 watch(focusedDate, (iso) => {

package/dist/components/forms/Calendar.vue.d.ts

@@ -1,7 +1,7 @@
 import type { CalendarDateDisabled, CalendarRange } from './types';
-declare var __VLS_18: {};
+declare var __VLS_25: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_18) => any;
+    footer?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     range?: boolean;
@@ -14,6 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     nextLabel?: string;
     disabled?: boolean;
     readonly?: boolean;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     modelValue?: string | CalendarRange | null | undefined;
     month?: string | undefined;
     key?: PropertyKey | undefined;
@@ -22,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
@@ -176,7 +178,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,6 +226,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     nextLabel?: string;
     disabled?: boolean;
     readonly?: boolean;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     modelValue?: string | CalendarRange | null | undefined;
     month?: string | undefined;
     key?: PropertyKey | undefined;
@@ -233,6 +235,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     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;
@@ -387,7 +390,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;
@@ -422,7 +424,9 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onSelect?: ((iso: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | CalendarRange | null | undefined) => any) | undefined;
     "onUpdate:month"?: ((value: string | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    level: 1 | 2 | 4 | 3 | 5 | 6;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/forms/CheckboxGroup.vue

@@ -2,7 +2,7 @@
    <fieldset
       :id="control.id.value"
       data-k-shake
-      :aria-labelledby="!legend && control.field ? control.field.labelId : void 0"
+      :aria-labelledby="hasLegend ? void 0 : control.labelledBy.value"
       v-bind="$attrs"
       :disabled="control.disabled.value || void 0"
       :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
@@ -12,8 +12,8 @@
   { 'is-invalid': control.invalid.value, 'is-disabled': control.disabled.value }
 ]"
    >
-      <legend v-if="legend || $slots.legend" class="k-choice-group-legend">
-         <slot name="legend">{{ legend }}</slot>
+      <legend v-if="hasLegend" class="k-choice-group-legend">
+         <slot name="legend">{{ legendText }}</slot>
       </legend>
       <div class="k-choice-group-items">
          <slot>
@@ -31,14 +31,16 @@
 </template>
 
 <script setup>
-import { computed, provide } from "vue";
+import { computed, provide, useAttrs, useSlots } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { joinIds } from "../../internal/forms/control";
+import { hasNameAttrs, warnUnnamed } from "../../internal/forms/name";
 import { CHECKBOX_GROUP_KEY } from "../../internal/forms/keys";
 import Checkbox from "./Checkbox.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   options: { type: Array, required: false, default: () => [] },
+  label: { type: String, required: false },
   legend: { type: String, required: false },
   orientation: { type: String, required: false, default: "vertical" },
   size: { type: String, required: false, default: "md" },
@@ -55,6 +57,14 @@ const control = useFieldControl({
   required: () => props.required,
   labelable: false
 });
+const slots = useSlots();
+const attrs = useAttrs();
+const legendText = computed(() => props.label ?? props.legend);
+const hasLegend = computed(() => Boolean(legendText.value || slots.legend));
+warnUnnamed(
+  "CheckboxGroup",
+  () => hasLegend.value || Boolean(control.labelledBy.value) || hasNameAttrs(attrs)
+);
 provide(CHECKBOX_GROUP_KEY, {
   name: computed(() => props.name ?? control.field?.name.value),
   size: computed(() => props.size),

package/dist/components/forms/CheckboxGroup.vue.d.ts

@@ -3,6 +3,7 @@ import type { ChoiceOption, ChoiceOrientation, ChoiceValue } from './types';
 declare const __VLS_export: <T extends ChoiceValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         options?: ChoiceOption<T>[];
+        label?: string;
         legend?: string;
         orientation?: ChoiceOrientation;
         size?: FieldSize;

package/dist/components/forms/ColorInput.vue

@@ -22,8 +22,14 @@
             v-bind="$attrs"
             :disabled="control.disabled.value || void 0"
             :required="control.required.value || void 0"
-            :aria-invalid="control.invalid.value ? 'true' : void 0"
-            :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
+            :aria-invalid="control.invalid.value || draftInvalid ? 'true' : void 0"
+            :aria-describedby="
+  joinIds(
+    $attrs['aria-describedby'],
+    control.describedBy.value,
+    localError ? errorId : void 0
+  )
+"
             type="text"
             :class="[
   'k-field',
@@ -43,33 +49,42 @@
             @keydown.enter="commit"
          />
       </div>
+      <FieldMessage v-if="localError" :id="errorId" :message="invalidText" />
+      <LiveRegion v-if="!control.field" :message="localError ? invalidText : ''" />
       <div
-         v-if="swatches.length"
+         v-if="presets.length"
+         ref="swatchesRef"
          class="k-color-input-swatches"
-         role="group"
+         role="radiogroup"
          :aria-label="swatchesText"
+         @keydown="onSwatchKeydown"
       >
          <button
-            v-for="color in normalizedSwatches"
-            :key="color"
+            v-for="(preset, index) in presets"
+            :key="preset.value"
             type="button"
+            role="radio"
             class="k-color-input-preset"
-            :style="{ '--k-swatch': color }"
-            :aria-label="color"
-            :title="color"
-            :aria-pressed="color === normalized ? 'true' : 'false'"
+            :style="{ '--k-swatch': preset.value }"
+            :aria-label="preset.label"
+            :title="preset.label"
+            :aria-checked="preset.value === normalized ? 'true' : 'false'"
+            :tabindex="index === tabStop ? 0 : -1"
             :disabled="control.disabled.value || readonly || void 0"
-            @click="model = color"
+            @click="model = preset.value"
          />
       </div>
    </div>
 </template>
 
 <script setup>
-import { computed, ref, useTemplateRef, watch } from "vue";
+import { computed, ref, useId, useTemplateRef, watch } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
 import { joinIds } from "../../internal/forms/control";
+import { rovingIndex } from "../../internal/core/roving";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import FieldMessage from "../core/FieldMessage.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   swatches: { type: Array, required: false, default: () => [] },
@@ -77,6 +92,7 @@ const props = defineProps({
   placeholder: { type: String, required: false, default: "#000000" },
   pickerLabel: { type: String, required: false },
   swatchesLabel: { type: String, required: false },
+  invalidText: { type: String, required: false },
   invalid: { type: Boolean, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
@@ -87,8 +103,11 @@ const props = defineProps({
 const { t } = useLocale();
 const pickerText = computed(() => props.pickerLabel ?? t("colorInput.pick"));
 const swatchesText = computed(() => props.swatchesLabel ?? t("colorInput.swatches"));
+const invalidText = computed(() => props.invalidText ?? t("colorInput.invalid"));
 const model = defineModel({ type: null });
 const inputRef = useTemplateRef("inputRef");
+const swatchesRef = useTemplateRef("swatchesRef");
+const errorId = `${useId()}-error`;
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
@@ -103,11 +122,42 @@ function normalizeHex(value) {
   return null;
 }
 const normalized = computed(() => normalizeHex(model.value));
-const normalizedSwatches = computed(
-  () => props.swatches.map(normalizeHex).filter((color) => Boolean(color))
+const presets = computed(
+  () => props.swatches.flatMap((swatch) => {
+    const entry = typeof swatch === "string" ? { value: swatch } : swatch;
+    const value = normalizeHex(entry.value);
+    return value ? [{ value, label: entry.label || value }] : [];
+  })
 );
+const tabStop = computed(() => {
+  const index = presets.value.findIndex((preset) => preset.value === normalized.value);
+  return index >= 0 ? index : 0;
+});
 const draft = ref(normalized.value ?? "");
 const draftInvalid = computed(() => draft.value.trim() !== "" && !normalizeHex(draft.value));
+const committedInvalid = ref(false);
+const localError = computed(() => committedInvalid.value && !control.field);
+watch(draftInvalid, (value) => {
+  if (!value) committedInvalid.value = false;
+});
+watch(
+  () => committedInvalid.value && draftInvalid.value,
+  (value) => control.setControlError(value ? invalidText.value : void 0)
+);
+function onSwatchKeydown(event) {
+  const list = [
+    ...swatchesRef.value?.querySelectorAll('[role="radio"]') ?? []
+  ];
+  const index = list.indexOf(document.activeElement);
+  if (index === -1) return;
+  const next = rovingIndex(event.key, index, list.length, "both");
+  if (next === null) return;
+  event.preventDefault();
+  const preset = presets.value[next];
+  if (!preset) return;
+  model.value = preset.value;
+  list[next]?.focus();
+}
 const swatchColor = computed(() => normalized.value ?? "transparent");
 watch(normalized, (value) => {
   if (normalizeHex(draft.value) !== value) draft.value = value ?? "";
@@ -126,7 +176,10 @@ function commit() {
     return;
   }
   const parsed = normalizeHex(draft.value);
-  if (!parsed) return;
+  if (!parsed) {
+    committedInvalid.value = true;
+    return;
+  }
   model.value = parsed;
   draft.value = parsed;
 }

package/dist/components/forms/ColorInput.vue.d.ts

@@ -1,10 +1,12 @@
 import type { FieldSize } from '../core/types';
+import type { ColorSwatch } from './types';
 declare const __VLS_export: import("vue").DefineComponent<{
-    swatches?: string[];
+    swatches?: ColorSwatch[];
     size?: string | number | undefined;
     placeholder?: string | undefined;
     pickerLabel?: string;
     swatchesLabel?: string;
+    invalidText?: string;
     invalid?: boolean;
     disabled?: (boolean | "true" | "false") | undefined;
     readonly?: (boolean | "true" | "false") | undefined;
@@ -19,10 +21,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -181,7 +186,6 @@ declare const __VLS_export: 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;
@@ -211,7 +215,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
     autofocus?: (boolean | "true" | "false") | undefined;
     formaction?: string | undefined | undefined;
     formenctype?: string | undefined | undefined;
@@ -219,14 +223,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formnovalidate?: (boolean | "true" | "false") | undefined;
     formtarget?: string | undefined | undefined;
     popovertarget?: string | undefined;
-    popovertargetaction?: import("../..").PopoverTargetAction | undefined;
+    popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -238,11 +240,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | null | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    swatches?: string[];
+    swatches?: ColorSwatch[];
     size?: string | number | undefined;
     placeholder?: string | undefined;
     pickerLabel?: string;
     swatchesLabel?: string;
+    invalidText?: string;
     invalid?: boolean;
     disabled?: (boolean | "true" | "false") | undefined;
     readonly?: (boolean | "true" | "false") | undefined;
@@ -257,10 +260,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     min?: (string | number) | undefined;
     max?: (string | number) | undefined;
     pattern?: string | undefined | undefined;
+    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
+    indeterminate?: boolean | undefined | undefined;
     title?: string | undefined | undefined;
     list?: string | undefined | undefined;
     results?: (string | number) | undefined;
     name?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -419,7 +425,6 @@ declare const __VLS_export: 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;
@@ -449,7 +454,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
     autofocus?: (boolean | "true" | "false") | undefined;
     formaction?: string | undefined | undefined;
     formenctype?: string | undefined | undefined;
@@ -457,14 +462,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     formnovalidate?: (boolean | "true" | "false") | undefined;
     formtarget?: string | undefined | undefined;
     popovertarget?: string | undefined;
-    popovertargetaction?: import("../..").PopoverTargetAction | undefined;
+    popovertargetaction?: import("../../index.ts").PopoverTargetAction | undefined;
     autocomplete?: import("vue").InputAutoCompleteAttribute | undefined;
     accept?: string | undefined | undefined;
     alt?: string | undefined | undefined;
     capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: any[] | Set<any> | (boolean | "true" | "false") | undefined;
     crossorigin?: string | undefined | undefined;
-    indeterminate?: boolean | undefined | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -474,7 +477,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
     invalid: boolean;
-    swatches: string[];
+    swatches: ColorSwatch[];
     placeholder: string;
     size: FieldSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/forms/Combobox.vue

@@ -35,7 +35,7 @@
                   v-if="interactive"
                   type="button"
                   class="k-combobox-tag-remove"
-                  :aria-label="`${removeText} ${labelFor(value)}`"
+                  :aria-label="removeText(labelFor(value))"
                   @click.stop="remove(value)"
                >
                   <Icon name="x-mark" />
@@ -167,7 +167,7 @@
             <slot name="empty" :query="query">{{ emptyLabel }}</slot>
          </div>
       </div>
-      <span class="k-visually-hidden" role="status" aria-live="polite">{{ statusText }}</span>
+      <LiveRegion :message="live.message.value" />
       <template v-if="formName">
          <input
             v-for="value in selectedValues"
@@ -197,7 +197,10 @@ import { useLocale } from "../../composables/useLocale";
 import { useFloatingLayer } from "../../internal/floating/layer";
 import { nextEnabledIndex } from "../../internal/core/roving";
 import { useAsyncSearch } from "../../internal/core/search";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { useLiveMessage } from "../../internal/core/live";
 import { normalizeSearch } from "../../internal/core/text";
+import { translateOr } from "../../locale";
 import { joinIds } from "../../internal/forms/control";
 import Icon from "../core/Icon.vue";
 import Spinner from "../core/Spinner.vue";
@@ -233,12 +236,14 @@ const props = defineProps({
   class: { type: null, required: false },
   style: { type: null, required: false }
 });
-const { t } = useLocale();
+const { locale, t } = useLocale();
 const emptyLabel = computed(() => props.emptyText ?? t("common.noResults"));
 const loadingLabel = computed(() => props.loadingText ?? t("common.loading"));
 const clearText = computed(() => props.clearLabel ?? t("combobox.clear"));
 const toggleText = computed(() => props.toggleLabel ?? t("combobox.toggle"));
-const removeText = computed(() => props.removeLabel ?? t("common.remove"));
+function removeText(label) {
+  return translateOr(locale.value, props.removeLabel, "common.removeItem", { label });
+}
 const listText = computed(() => props.listLabel ?? t("combobox.list"));
 function buildCreateText(text) {
   return props.createText ? props.createText(text) : t("combobox.create", { query: text });
@@ -363,6 +368,11 @@ const statusText = computed(() => {
   const count = items.value.length;
   return props.resultsText ? props.resultsText(count) : t("combobox.results", { count });
 });
+const live = useLiveMessage();
+watch([statusText, query], ([text]) => {
+  if (text) live.announce(text);
+  else live.clear();
+});
 function keyOf(value) {
   return String(value);
 }
@@ -500,6 +510,10 @@ function onKeydown(event) {
       } else if (query.value) {
         event.preventDefault();
         resetQuery();
+      } else if (showClear.value && !props.multiple) {
+        event.preventDefault();
+        event.stopPropagation();
+        clear();
       }
       break;
     case "Backspace":