@xleddyl/443-components-vue 0.5.0 → 0.6.2

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

@@ -17,12 +17,15 @@ declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     form?: string | undefined;
     pattern?: string | undefined;
+    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+    indeterminate?: boolean | undefined;
     title?: string | undefined;
     style?: unknown;
     list?: string | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
+    dir?: string | undefined;
     class?: unknown;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -180,7 +183,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -233,9 +235,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
-    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
     crossorigin?: string | undefined;
-    indeterminate?: boolean | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;
@@ -262,12 +262,15 @@ declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     form?: string | undefined;
     pattern?: string | undefined;
+    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+    indeterminate?: boolean | undefined;
     title?: string | undefined;
     style?: unknown;
     list?: string | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     name?: string | undefined;
+    dir?: string | undefined;
     class?: unknown;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -425,7 +428,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accesskey?: string | undefined;
     contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextmenu?: string | undefined;
-    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     enterKeyHint?: import("vue").HTMLAttributes["enterkeyhint"];
@@ -478,9 +480,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     accept?: string | undefined;
     alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
-    checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
     crossorigin?: string | undefined;
-    indeterminate?: boolean | undefined;
     maxlength?: (string | number) | undefined;
     minlength?: (string | number) | undefined;
     multiple?: (boolean | "true" | "false") | undefined;

package/dist/components/forms/DatePicker.vue

@@ -11,11 +11,19 @@
       <button
          ref="triggerRef"
          :id="control.id.value"
+         :aria-labelledby="
+  control.labelledBy.value && !$attrs['aria-label'] ? `${control.labelledBy.value} ${valueId}` : void 0
+"
          v-bind="$attrs"
          :disabled="control.disabled.value || void 0"
-         :aria-required="control.required.value ? 'true' : void 0"
          :aria-invalid="control.invalid.value ? 'true' : void 0"
-         :aria-describedby="joinIds($attrs['aria-describedby'], control.describedBy.value)"
+         :aria-describedby="
+  joinIds(
+    $attrs['aria-describedby'],
+    control.describedBy.value,
+    readonly ? readonlyId : void 0
+  )
+"
          :popovertarget="interactive ? panelId : void 0"
          type="button"
          class="k-field k-date-picker-trigger"
@@ -32,15 +40,17 @@
          :aria-controls="panelId"
       >
          <Icon name="calendar" class="k-date-picker-icon" />
-         <span class="k-date-picker-value">{{ displayValue || placeholderText }}</span>
+         <span :id="valueId" class="k-date-picker-value">{{
+            displayValue || placeholderText
+         }}</span>
          <Icon name="chevron-up-down" class="k-date-picker-chevron" />
       </button>
+      <span v-if="readonly" :id="readonlyId" hidden>{{ t("common.readonly") }}</span>
       <button
          v-if="showClear"
          type="button"
          class="k-date-picker-clear"
          :aria-label="clearText"
-         :title="clearText"
          @click="clear"
       >
          <Icon name="x-mark" />
@@ -53,7 +63,7 @@
          class="k-floating k-form-popover k-date-picker-panel"
          :data-side="layer.side.value"
          :aria-label="dialogText"
-         @keydown.esc.stop
+         @keydown.esc.stop="close"
       >
          <Calendar
             ref="calendarRef"
@@ -64,6 +74,7 @@
             :is-date-disabled="isDateDisabled"
             :locale="resolvedLocale"
             :week-starts-on="weekStartsOn"
+            :level="level"
             @update:model-value="onCalendarChange"
          >
             <template v-if="$slots.footer" #footer><slot name="footer" :close="close" /></template>
@@ -104,6 +115,7 @@ const props = defineProps({
   clearLabel: { type: String, required: false },
   dialogLabel: { type: String, required: false },
   closeOnSelect: { type: Boolean, required: false, default: true },
+  level: { type: Number, required: false },
   invalid: { type: Boolean, required: false, default: void 0 },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
@@ -119,13 +131,16 @@ const dialogText = computed(() => props.dialogLabel ?? t("datePicker.dialog"));
 const model = defineModel({ type: null });
 const baseId = useId();
 const panelId = `${baseId}-dialog`;
+const valueId = `${baseId}-value`;
+const readonlyId = `${baseId}-readonly`;
 const triggerRef = useTemplateRef("triggerRef");
 const panelRef = useTemplateRef("panelRef");
 const calendarRef = useTemplateRef("calendarRef");
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
-  required: () => props.required
+  required: () => props.required,
+  requiredHint: true
 });
 const layer = useFloatingLayer({
   floating: panelRef,
@@ -146,7 +161,8 @@ const displayValue = computed(() => {
   if (!props.range) return show(singleValue.value);
   const { start, end } = rangeValue.value;
   if (!start) return "";
-  return t("datePicker.range", { start: show(start), end: end ? show(end) : "..." });
+  if (!end) return t("datePicker.rangePending", { start: show(start) });
+  return t("datePicker.range", { start: show(start), end: show(end) });
 });
 const showClear = computed(
   () => props.clearable && interactive.value && Boolean(displayValue.value)

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

@@ -22,6 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     clearLabel?: string;
     dialogLabel?: string;
     closeOnSelect?: boolean;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     invalid?: boolean;
     disabled?: (boolean | "true" | "false") | undefined;
     readonly?: boolean;
@@ -35,6 +36,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     title?: string | undefined | undefined;
     results?: (string | number) | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -190,7 +192,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;
@@ -250,6 +251,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     clearLabel?: string;
     dialogLabel?: string;
     closeOnSelect?: boolean;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     invalid?: boolean;
     disabled?: (boolean | "true" | "false") | undefined;
     readonly?: boolean;
@@ -263,6 +265,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     title?: string | undefined | undefined;
     results?: (string | number) | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -418,7 +421,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/forms/FileInput.vue

@@ -19,9 +19,11 @@
          ref="buttonRef"
          :id="control.id.value"
          data-k-shake
+         :aria-labelledby="
+  $attrs['aria-label'] ? void 0 : joinIds(control.labelledBy.value, titleId)
+"
          v-bind="$attrs"
          :disabled="control.disabled.value || void 0"
-         :aria-required="control.required.value ? 'true' : void 0"
          :aria-invalid="control.invalid.value ? 'true' : void 0"
          :aria-disabled="readonly || loading ? 'true' : void 0"
          :aria-busy="loading ? 'true' : void 0"
@@ -41,7 +43,7 @@
             <Icon v-else :name="over ? 'arrow-up-tray' : icon" />
          </span>
          <span class="k-file-input-dropzone-text">
-            <span class="k-file-input-dropzone-title">
+            <span :id="titleId" class="k-file-input-dropzone-title">
                <slot name="title" :over="over" :loading="loading">{{ currentTitle }}</slot>
             </span>
             <span v-if="hasHint" :id="hintId" class="k-file-input-dropzone-hint">
@@ -108,13 +110,13 @@
                variant="ghost"
                tone="neutral"
                icon="x-mark"
-               :aria-label="`${removeText} ${walksFolders ? filePath(file) : file.name}`"
-               :title="removeText"
+               :aria-label="removeText(walksFolders ? filePath(file) : file.name)"
+               :title="removeText(walksFolders ? filePath(file) : file.name)"
                @click="removeFile(file)"
             />
          </li>
       </ul>
-      <span class="k-visually-hidden" role="status" aria-live="polite">{{ announcement }}</span>
+      <LiveRegion :message="live.message.value" />
    </div>
 </template>
 
@@ -131,6 +133,7 @@ import {
 } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
+import { translateOr } from "../../locale";
 import { joinIds } from "../../internal/forms/control";
 import { readDroppedFiles, useFileDrop } from "../../composables/useFileDrop";
 import {
@@ -143,6 +146,8 @@ import {
   parseAccept,
   setFilePath
 } from "../../internal/forms/files";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
+import { useLiveMessage } from "../../internal/core/live";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 import Spinner from "../core/Spinner.vue";
@@ -192,7 +197,9 @@ const directoryActionText = computed(
 );
 const loadingLabel = computed(() => props.loadingText ?? t("fileInput.loading"));
 const dropLabel = computed(() => props.dropText ?? t("fileInput.drop"));
-const removeText = computed(() => props.removeLabel ?? t("common.remove"));
+function removeText(label) {
+  return translateOr(appLocale.value, props.removeLabel, "common.removeItem", { label });
+}
 const listText = computed(() => props.listLabel ?? t("fileInput.list"));
 function announceCount(count) {
   return props.announce ? props.announce(count) : t("fileInput.selected", { count });
@@ -202,18 +209,21 @@ function announceAdded(count) {
 }
 const model = defineModel({ type: null });
 const emit = defineEmits(["invalid", "reject", "add", "remove"]);
-const hintId = `${useId()}-hint`;
+const baseId = useId();
+const hintId = `${baseId}-hint`;
+const titleId = `${baseId}-title`;
 const rootRef = useTemplateRef("rootRef");
 const inputRef = useTemplateRef("inputRef");
 const directoryInputRef = useTemplateRef("directoryInputRef");
 const buttonRef = useTemplateRef("buttonRef");
 const previews = reactive({});
-const announcement = ref("");
+const live = useLiveMessage();
 const mounted = ref(false);
 const control = useFieldControl({
   invalid: () => props.invalid,
   disabled: () => props.disabled,
-  required: () => props.required
+  required: () => props.required,
+  requiredHint: true
 });
 const files = computed(() => {
   const value = model.value;
@@ -309,13 +319,21 @@ function addEntries(incomingEntries, origin) {
   if (!multiple && incoming.length > 1)
     for (const file of incoming.slice(1)) reject({ reason: "count", file, limit: 1 });
   const detail = { ...origin, entries: toEntries(accepted) };
+  const rejectedText = rejected.length ? t("fileInput.rejected", { count: rejected.length }) : void 0;
   if (rejected.length) emit("reject", rejected, detail);
-  if (!accepted.length && !origin.directories.length) return;
+  if (rejectedText) control.setControlError(rejectedText);
+  else if (accepted.length) control.setControlError(void 0);
+  const announceRejected = control.field ? void 0 : rejectedText;
+  if (!accepted.length && !origin.directories.length) {
+    if (announceRejected) live.announce(announceRejected);
+    return;
+  }
   if (props.list && accepted.length)
     model.value = multiple ? [...files.value, ...accepted] : accepted[0];
   emit("add", accepted, detail);
-  if (!accepted.length) return;
-  announcement.value = props.list ? announceCount(multiple ? files.value.length : 1) : announceAdded(accepted.length);
+  const addedText = accepted.length ? props.list ? announceCount(multiple ? files.value.length : 1) : announceAdded(accepted.length) : void 0;
+  const text = [addedText, announceRejected].filter(Boolean).join(". ");
+  if (text) live.announce(text);
 }
 function onNativeChange(event) {
   const target = event.target;
@@ -339,7 +357,7 @@ function removeFile(file) {
   const key = fileKey(file);
   model.value = isMultiple.value ? files.value.filter((entry) => fileKey(entry) !== key) : null;
   emit("remove", file);
-  announcement.value = announceCount(isMultiple.value ? files.value.length : 0);
+  live.announce(announceCount(isMultiple.value ? files.value.length : 0));
   buttonRef.value?.focus();
 }
 function syncPreviews(current) {

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

@@ -54,6 +54,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -208,7 +209,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;
@@ -296,6 +296,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     form?: string | undefined | undefined;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -450,7 +451,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/forms/InputAddon.vue

@@ -1,15 +1,31 @@
 <template>
-   <span class="k-input-addon" :class="`k-input-addon-${size}`">
+   <span :id="id" class="k-input-addon" :class="`k-input-addon-${size}`">
       <Icon v-if="icon" :name="icon" />
       <slot>{{ label }}</slot>
    </span>
 </template>
 
 <script setup>
+import { computed, inject, onBeforeUnmount, useId, useSlots, watch } from "vue";
+import { INPUT_GROUP_KEY } from "../../internal/forms/keys";
 import Icon from "../core/Icon.vue";
-defineProps({
+const props = defineProps({
   label: { type: String, required: false },
   icon: { type: null, required: false },
   size: { type: String, required: false, default: "md" }
 });
+const id = useId();
+const slots = useSlots();
+const group = inject(INPUT_GROUP_KEY, null);
+const hasText = computed(() => Boolean(props.label || slots.default));
+let unregister;
+watch(
+  hasText,
+  (value) => {
+    unregister?.();
+    unregister = value ? group?.register(id) : void 0;
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => unregister?.());
 </script>

package/dist/components/forms/InputGroup.vue

@@ -3,14 +3,41 @@
       class="k-input-group"
       :class="[`k-input-group-${size}`, { 'is-block': block }]"
       role="group"
+      :aria-label="label"
+      :aria-labelledby="
+  label ? void 0 : field?.hasLabel?.value ?? true ? field?.labelId : void 0
+"
+      :aria-describedby="field ? void 0 : addonIds"
    >
       <slot />
    </div>
 </template>
 
 <script setup>
+import { computed, provide, shallowReactive } from "vue";
+import { useField } from "../../composables/useField";
+import { FIELD_KEY } from "../../internal/keys";
+import { joinIds } from "../../internal/forms/control";
+import { INPUT_GROUP_KEY } from "../../internal/forms/keys";
 defineProps({
+  label: { type: String, required: false },
   size: { type: String, required: false, default: "md" },
   block: { type: Boolean, required: false, default: true }
 });
+const field = useField();
+const ids = shallowReactive(/* @__PURE__ */ new Set());
+const addonIds = computed(() => joinIds(...ids));
+provide(INPUT_GROUP_KEY, {
+  register(id) {
+    ids.add(id);
+    return () => ids.delete(id);
+  }
+});
+if (field) {
+  const context = {
+    ...field,
+    describedBy: computed(() => joinIds(field.describedBy.value, addonIds.value))
+  };
+  provide(FIELD_KEY, context);
+}
 </script>

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

@@ -4,6 +4,7 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
+    label?: string;
     size?: FieldSize;
     block?: boolean;
     innerHTML?: string | undefined | undefined;
@@ -199,6 +200,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    label?: string;
     size?: FieldSize;
     block?: boolean;
     innerHTML?: string | undefined | undefined;

package/dist/components/forms/NumberInput.vue

@@ -79,8 +79,10 @@
 import { computed, onBeforeUnmount, ref, useTemplateRef } from "vue";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
+import { numberFormat } from "../../internal/core/intl";
 import { joinIds } from "../../internal/forms/control";
 import Icon from "../core/Icon.vue";
+import { isClient } from "../../internal/core/env";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   min: { type: Number, required: false },
@@ -121,15 +123,12 @@ const control = useFieldControl({
   required: () => props.required
 });
 const isPercent = computed(() => props.formatOptions?.style === "percent");
-const formatter = computed(() => new Intl.NumberFormat(resolvedLocale.value, props.formatOptions));
+const formatter = computed(() => numberFormat(resolvedLocale.value, props.formatOptions));
 const editFormatter = computed(
-  () => new Intl.NumberFormat(resolvedLocale.value, {
-    useGrouping: false,
-    maximumFractionDigits: 20
-  })
+  () => numberFormat(resolvedLocale.value, { useGrouping: false, maximumFractionDigits: 20 })
 );
 const separators = computed(() => {
-  const parts = new Intl.NumberFormat(resolvedLocale.value).formatToParts(-12345.6);
+  const parts = numberFormat(resolvedLocale.value).formatToParts(-12345.6);
   return {
     decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
     group: parts.find((part) => part.type === "group")?.value ?? ","
@@ -275,7 +274,7 @@ function onStepClick(event, direction) {
 onBeforeUnmount(() => {
   clearTimeout(repeatDelay);
   clearInterval(repeatTimer);
-  if (typeof window !== "undefined") {
+  if (isClient()) {
     window.removeEventListener("pointerup", stopRepeat);
     window.removeEventListener("pointercancel", stopRepeat);
   }

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

@@ -27,10 +27,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     form?: string | undefined | 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;
@@ -188,7 +191,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;
@@ -231,9 +233,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;
@@ -271,10 +271,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     value?: any;
     form?: string | undefined | 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;
@@ -432,7 +435,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;
@@ -475,9 +477,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     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;

package/dist/components/forms/PasswordInput.vue

@@ -8,7 +8,7 @@
          ref="inputRef"
          :spellcheck="false"
          autocapitalize="off"
-         :autocomplete="autocomplete"
+         :autocomplete="autocompleteValue"
          v-bind="$attrs"
          :aria-describedby="
   joinIds($attrs['aria-describedby'], strength && value ? meterId : void 0)
@@ -43,7 +43,7 @@
                   type="button"
                   class="k-password-input-action"
                   :class="{ 'is-done': copied }"
-                  :aria-label="copied ? copiedText : copyText"
+                  :aria-label="copyText"
                   :title="copied ? copiedText : copyText"
                   :disabled="!value || disabled || void 0"
                   @click="copyValue"
@@ -77,16 +77,18 @@
          </span>
          <span class="k-password-meter-label">{{ label }}</span>
       </div>
+      <LiveRegion v-if="copy" :message="message" />
    </div>
 </template>
 
 <script setup>
 import { computed, ref, useId, useTemplateRef } from "vue";
-import { useCopy } from "../../composables/useCopy";
+import { useAnnouncedCopy } from "../../internal/core/copy";
 import { useFieldControl } from "../../composables/useField";
 import { useLocale } from "../../composables/useLocale";
 import { generatePassword, usePasswordStrength } from "../../composables/usePasswordStrength";
 import { joinIds } from "../../internal/forms/control";
+import LiveRegion from "../../internal/core/LiveRegion.vue";
 import Icon from "../core/Icon.vue";
 import Input from "../core/Input.vue";
 defineOptions({ inheritAttrs: false });
@@ -96,7 +98,7 @@ const props = defineProps({
   strength: { type: Boolean, required: false },
   minLength: { type: Number, required: false, default: 8 },
   strengthLabels: { type: Array, required: false },
-  autocomplete: { type: String, required: false, default: "current-password" },
+  autocomplete: { type: String, required: false },
   icon: { type: null, required: false },
   size: { type: String, required: false, default: "md" },
   showLabel: { type: String, required: false },
@@ -124,7 +126,10 @@ const emit = defineEmits(["generate"]);
 const meterId = `${useId()}-strength`;
 const inputRef = useTemplateRef("inputRef");
 const visible = ref(false);
-const { copied, copy: writeClipboard } = useCopy();
+const { copied, copy: writeClipboard, message } = useAnnouncedCopy(() => copiedText.value);
+const autocompleteValue = computed(
+  () => props.autocomplete ?? (props.generate || props.strength ? "new-password" : "current-password")
+);
 const { score, label } = usePasswordStrength(() => value.value, {
   minLength: () => props.minLength,
   labels: () => props.strengthLabels
@@ -142,7 +147,8 @@ function regenerate() {
   emit("generate", next);
 }
 async function copyValue() {
-  if (value.value) await writeClipboard(value.value);
+  if (!value.value) return;
+  await writeClipboard(value.value);
 }
 defineExpose({ focus: () => inputRef.value?.focus() });
 </script>