@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/components/overlays/ContextMenu.vue.d.ts

@@ -17,6 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -172,7 +173,6 @@ declare const __VLS_base: 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"];
@@ -232,6 +232,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -387,7 +388,6 @@ declare const __VLS_base: 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"];

package/dist/components/overlays/Drawer.vue

@@ -6,6 +6,7 @@
       :root-class="[`k-drawer-${side}`, `k-drawer-${size}`]"
       :title="title"
       :description="description"
+      :label="label"
       :dismissible="dismissible"
       :hide-close="hideClose"
       :close-label="closeLabel"
@@ -28,6 +29,7 @@ import DialogFrame from "../../internal/overlays/DialogFrame.vue";
 defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
+  label: { type: String, required: false },
   side: { type: String, required: false, default: "right" },
   size: { type: String, required: false, default: "md" },
   dismissible: { type: Boolean, required: false, default: true },

package/dist/components/overlays/Drawer.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Slots = DialogFrameSlots;
 declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined;
     description?: string;
+    label?: string;
     side?: DrawerSide;
     size?: DrawerSize;
     dismissible?: boolean | undefined;
@@ -18,6 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -173,7 +175,6 @@ declare const __VLS_base: 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"];
@@ -224,6 +225,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     title?: string | undefined;
     description?: string;
+    label?: string;
     side?: DrawerSide;
     size?: DrawerSize;
     dismissible?: boolean | undefined;
@@ -238,6 +240,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -393,7 +396,6 @@ declare const __VLS_base: 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"];

package/dist/components/overlays/DropdownMenu.vue

@@ -11,14 +11,16 @@
       :offset="offset"
       :label="label"
       :labelledby="label ? void 0 : triggerId"
-      @open-change="onOpenChange"
+      @open-change="isOpen = $event"
       @select="(item, event) => emit('select', item, event)"
    />
 </template>
 
 <script setup>
 import { computed, onBeforeUnmount, ref, useId, useTemplateRef, watch } from "vue";
+import { syncOpenModel } from "../../internal/floating/layer";
 import MenuList from "../../internal/overlays/MenuList.vue";
+import { menuTriggerHandlers } from "../../internal/overlays/menu";
 import { setAttributes, useInvoker, useSlotTrigger } from "../../internal/floating/trigger";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -39,26 +41,16 @@ const triggerId = computed(() => trigger.value?.id || `${generatedId}-trigger`);
 useInvoker(trigger, menuElement, () => {
   menuRef.value?.toggle("first", trigger.value);
 });
-function onOpenChange(value) {
-  isOpen.value = value;
-  if (open.value !== value) open.value = value;
-}
-watch(open, (value) => {
-  if (value === isOpen.value) return;
-  if (value) menuRef.value?.show("first", trigger.value);
-  else menuRef.value?.hide();
-});
-function onTriggerKeydown(event) {
-  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-    event.preventDefault();
-    menuRef.value?.show(event.key === "ArrowDown" ? "first" : "last", trigger.value);
-    return;
-  }
-  if (event.key === "Enter" || event.key === " ") menuRef.value?.setPendingFocus("first");
-}
-function onTriggerPointerDown(event) {
-  menuRef.value?.setPendingFocus(event.pointerType === "mouse" ? "menu" : "first");
-}
+syncOpenModel(
+  open,
+  isOpen,
+  () => menuRef.value?.show("first", trigger.value),
+  () => menuRef.value?.hide()
+);
+const { onKeydown: onTriggerKeydown, onPointerDown: onTriggerPointerDown } = menuTriggerHandlers(
+  () => menuRef.value,
+  () => trigger.value
+);
 watch(
   [trigger, isOpen],
   ([element, expanded], previous) => {

package/dist/components/overlays/DropdownMenu.vue.d.ts

@@ -18,6 +18,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -172,7 +173,6 @@ declare const __VLS_base: 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"];
@@ -232,6 +232,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -386,7 +387,6 @@ declare const __VLS_base: 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"];

package/dist/components/overlays/HoverCard.vue

@@ -51,7 +51,13 @@ useHoverTrigger({
   hide: layer.hide,
   openDelay: () => props.openDelay,
   closeDelay: () => props.closeDelay,
-  enabled: () => !props.disabled
+  enabled: () => !props.disabled,
+  touch: true
 });
-syncOpenModel(open, layer, () => trigger.value);
+syncOpenModel(
+  open,
+  layer.isOpen,
+  () => layer.show(trigger.value),
+  () => layer.hide()
+);
 </script>

package/dist/components/overlays/HoverCard.vue.d.ts

@@ -21,6 +21,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 +177,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;
@@ -223,6 +223,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;
@@ -378,7 +379,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/overlays/Modal.vue

@@ -6,6 +6,7 @@
       :root-class="[`k-modal-${size}`, { 'is-sheet': sheet && size !== 'fullscreen' }]"
       :title="title"
       :description="description"
+      :label="label"
       :dismissible="dismissible"
       :hide-close="hideClose"
       :close-label="closeLabel"
@@ -28,6 +29,7 @@ import DialogFrame from "../../internal/overlays/DialogFrame.vue";
 defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
+  label: { type: String, required: false },
   size: { type: String, required: false, default: "md" },
   dismissible: { type: Boolean, required: false, default: true },
   hideClose: { type: Boolean, required: false },

package/dist/components/overlays/Modal.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Slots = DialogFrameSlots;
 declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined;
     description?: string;
+    label?: string;
     size?: ModalSize;
     dismissible?: boolean | undefined;
     hideClose?: boolean;
@@ -18,6 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -173,7 +175,6 @@ declare const __VLS_base: 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"];
@@ -224,6 +225,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     title?: string | undefined;
     description?: string;
+    label?: string;
     size?: ModalSize;
     dismissible?: boolean | undefined;
     hideClose?: boolean;
@@ -238,6 +240,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
+    dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -393,7 +396,6 @@ declare const __VLS_base: 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"];

package/dist/components/overlays/Popover.vue

@@ -12,6 +12,7 @@
       :class="{ 'has-arrow': arrow }"
       :role="role"
       :aria-label="label"
+      :aria-labelledby="fallbackLabelledBy"
       tabindex="-1"
    >
       <span v-if="arrow" class="k-floating-arrow" aria-hidden="true" />
@@ -20,11 +21,12 @@
 </template>
 
 <script setup>
-import { useId, useTemplateRef, watch } from "vue";
+import { computed, ref, useAttrs, useId, useTemplateRef, watch } from "vue";
 import FieldBoundary from "../core/FieldBoundary.vue";
-import { focusFirst } from "../../internal/overlays/focus";
+import { focusFirst, hasFocusWithin } from "../../internal/core/focus";
 import { ARROW_OFFSET, syncOpenModel, useFloatingLayer } from "../../internal/floating/layer";
 import { setAttributes, useInvoker, useSlotTrigger } from "../../internal/floating/trigger";
+import { hasNameAttrs } from "../../internal/forms/name";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   placement: { type: null, required: false, default: "bottom-start" },
@@ -40,6 +42,12 @@ const contentId = `${useId()}-popover`;
 const triggerRef = useTemplateRef("triggerRef");
 const floatingRef = useTemplateRef("floatingRef");
 const trigger = useSlotTrigger(triggerRef);
+const attrs = useAttrs();
+const triggerId = ref();
+const fallbackLabelledBy = computed(() => {
+  if (props.label || hasNameAttrs(attrs)) return void 0;
+  return props.role === "dialog" ? triggerId.value : void 0;
+});
 const layer = useFloatingLayer({
   floating: floatingRef,
   anchor: () => trigger.value,
@@ -50,16 +58,23 @@ const layer = useFloatingLayer({
   onOpen: () => {
     const element = floatingRef.value;
     if (!props.initialFocus || !element) return;
-    if (element.contains(document.activeElement)) return;
+    if (hasFocusWithin(element)) return;
     if (!focusFirst(element)) element.focus({ preventScroll: true });
   }
 });
 useInvoker(trigger, floatingRef, () => layer.toggle(trigger.value));
-syncOpenModel(open, layer, () => trigger.value);
+syncOpenModel(
+  open,
+  layer.isOpen,
+  () => layer.show(trigger.value),
+  () => layer.hide()
+);
 watch(
   [trigger, layer.isOpen],
   ([element, isOpen]) => {
     if (!element) return;
+    if (!element.id) element.id = `${contentId}-trigger`;
+    triggerId.value = element.id;
     setAttributes(element, {
       "aria-haspopup": props.haspopup,
       "aria-expanded": String(isOpen),

package/dist/components/overlays/Popover.vue.d.ts

@@ -25,6 +25,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;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -179,7 +180,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;
@@ -231,6 +231,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;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -385,7 +386,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/overlays/Toaster.vue

@@ -18,8 +18,9 @@
             tabindex="-1"
             @pointerenter="onPointerEnter"
             @pointerleave="onPointerLeave"
-            @focusin="focusInside = true"
+            @focusin="onFocusIn"
             @focusout="onFocusOut"
+            @keydown.esc="onEscape"
          >
             <ol class="k-toaster-list">
                <li
@@ -79,7 +80,7 @@
                         variant="ghost"
                         tone="neutral"
                         :aria-label="dismissText"
-                        @click="dismiss(entry.id)"
+                        @click="dismissFromToast(entry.id)"
                      />
                   </div>
                   <span
@@ -112,9 +113,11 @@ import { useLocale } from "../../composables/useLocale";
 import { toast } from "../../composables/useToast";
 import { toastList } from "../../internal/overlays/toast";
 import { isPopoverOpen, supportsPopover } from "../../internal/floating/support";
-import { toneIcons } from "../../internal/core/tone";
+import { spokenToneKey, toneIcons } from "../../internal/core/tone";
 import { modalStack } from "../../internal/overlays/dialog";
 import { useHostClaim } from "../../internal/overlays/host";
+import { LIVE_DELAY } from "../../internal/core/live";
+import { activeElement } from "../../internal/core/focus";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 import Spinner from "../core/Spinner.vue";
@@ -122,6 +125,7 @@ const props = defineProps({
   position: { type: String, required: false, default: "bottom-right" },
   max: { type: Number, required: false, default: 4 },
   duration: { type: Number, required: false, default: 4e3 },
+  actionDuration: { type: Number, required: false, default: 1e4 },
   gap: { type: Number, required: false, default: 8 },
   expand: { type: Boolean, required: false },
   progress: { type: Boolean, required: false },
@@ -274,7 +278,8 @@ function syncEntries() {
 }
 const timers = /* @__PURE__ */ new Map();
 function durationOf(item) {
-  return item.duration ?? props.duration;
+  if (item.duration !== void 0) return item.duration;
+  return item.action ? Math.max(props.duration, props.actionDuration) : props.duration;
 }
 function hasTimer(item) {
   const duration = durationOf(item);
@@ -343,11 +348,32 @@ function resumeTimers() {
   for (const [id, timer] of timers) if (timer.handle === void 0) run(id, timer);
 }
 watch(paused, (value) => value ? pauseTimers() : resumeTimers());
+function actionHint(item) {
+  if (!item.action || !props.hotkey) return "";
+  return t("toaster.actionHint", {
+    hotkey: ariaKeyShortcuts(props.hotkey, false),
+    action: item.action.label
+  });
+}
+function toneText(item) {
+  const key = spokenToneKey(item.tone);
+  return key ? t(key) : "";
+}
+const pending = { polite: [], assertive: [] };
+const flushTimers = {};
 function announce(item) {
-  const text = [item.title, ...descriptionLines(item)].filter(Boolean).join(". ");
-  const target = item.tone === "danger" ? assertiveMessage : politeMessage;
+  const text = [toneText(item), item.title, ...descriptionLines(item), actionHint(item)].filter(Boolean).join(". ");
+  if (!text) return;
+  const kind = item.tone === "danger" ? "assertive" : "polite";
+  const target = kind === "assertive" ? assertiveMessage : politeMessage;
+  pending[kind].push(text);
+  clearTimeout(flushTimers[kind]);
   target.value = "";
-  nextTick(() => target.value = text);
+  flushTimers[kind] = setTimeout(() => {
+    flushTimers[kind] = void 0;
+    target.value = pending[kind].join(" ");
+    pending[kind] = [];
+  }, LIVE_DELAY);
 }
 function raise() {
   const element = toasterRef.value;
@@ -408,9 +434,29 @@ watch(active, async (value) => {
 function dismiss(id) {
   toast.dismiss(id);
 }
+let returnFocus = null;
+function focusInToaster() {
+  const active2 = document.activeElement;
+  return Boolean(active2 && toasterRef.value?.contains(active2));
+}
+function restoreFocus() {
+  const target = returnFocus;
+  returnFocus = null;
+  const next = toasterRef.value?.querySelector(
+    '.k-toast[data-visible="true"]:not([data-removed="true"]) button'
+  );
+  if (target?.isConnected) target.focus({ preventScroll: true });
+  else if (next) next.focus({ preventScroll: true });
+  if (!focusInToaster()) focusInside.value = false;
+}
+function dismissFromToast(id) {
+  const hadFocus = focusInToaster();
+  dismiss(id);
+  if (hadFocus) nextTick(restoreFocus);
+}
 function runAction(item, event) {
   item.action?.onClick(event);
-  if (!item.action?.keepOpen) dismiss(item.id);
+  if (!item.action?.keepOpen) dismissFromToast(item.id);
 }
 function onPointerEnter(event) {
   if (event.pointerType === "mouse") hovered.value = true;
@@ -418,9 +464,23 @@ function onPointerEnter(event) {
 function onPointerLeave() {
   hovered.value = false;
 }
+function onFocusIn(event) {
+  focusInside.value = true;
+  const previous = event.relatedTarget;
+  if (previous instanceof HTMLElement && !toasterRef.value?.contains(previous))
+    returnFocus = previous;
+}
+function onEscape(event) {
+  const target = returnFocus;
+  if (!target?.isConnected) return;
+  event.preventDefault();
+  returnFocus = null;
+  target.focus({ preventScroll: true });
+}
 function onFocusOut(event) {
   const next = event.relatedTarget;
   if (next && toasterRef.value?.contains(next)) return;
+  if (next) returnFocus = null;
   focusInside.value = false;
 }
 function onSwipeStart(event, item) {
@@ -451,6 +511,7 @@ function onVisibilityChange() {
 useHotkey(
   () => props.hotkey ? [props.hotkey] : [],
   () => {
+    if (!focusInToaster()) returnFocus = activeElement();
     const first = toasterRef.value?.querySelector(
       '.k-toast[data-visible="true"] button'
     );
@@ -468,5 +529,7 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect();
   for (const timer of timers.values()) clearTimeout(timer.handle);
   timers.clear();
+  clearTimeout(flushTimers.polite);
+  clearTimeout(flushTimers.assertive);
 });
 </script>

package/dist/components/overlays/Toaster.vue.d.ts

@@ -3,6 +3,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -214,6 +215,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -426,6 +428,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     duration: number;
     position: ToasterPosition;
     gap: number;
+    actionDuration: number;
     hotkey: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/overlays/Tooltip.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script setup>
-import { onBeforeUnmount, useId, useTemplateRef, watch } from "vue";
-import { formatHotkey } from "../../composables/useHotkey";
+import { computed, onBeforeUnmount, useId, useSlots, useTemplateRef, watch } from "vue";
+import { ariaKeyShortcuts, formatHotkey } from "../../composables/useHotkey";
 import { useHoverTrigger } from "../../internal/overlays/hover";
 import { ARROW_OFFSET, useFloatingLayer } from "../../internal/floating/layer";
 import { useApplePlatform } from "../../internal/core/env";
@@ -65,29 +65,54 @@ useHoverTrigger({
   hide: layer.hide,
   openDelay: () => props.openDelay,
   closeDelay: () => props.closeDelay,
-  enabled: () => !props.disabled && Boolean(props.text || props.shortcut),
+  enabled: () => !props.disabled && Boolean(props.text || props.shortcut || slots.content),
   warmup: true
 });
+const slots = useSlots();
+const hasContent = computed(() => Boolean(props.text || slots.content));
+let shortcutOwner = null;
+function accessibleName(element) {
+  return (element.getAttribute("aria-label") ?? element.textContent ?? "").trim();
+}
+function release(element) {
+  removeToken(element, "aria-describedby", tooltipId);
+  if (shortcutOwner === element) {
+    element.removeAttribute("aria-keyshortcuts");
+    shortcutOwner = null;
+  }
+}
+function sync(element) {
+  if (!element) return;
+  if (props.disabled) {
+    release(element);
+    return;
+  }
+  const duplicate = !slots.content && Boolean(props.text) && props.text.trim() === accessibleName(element);
+  if (hasContent.value && !duplicate) addToken(element, "aria-describedby", tooltipId);
+  else removeToken(element, "aria-describedby", tooltipId);
+  if (props.shortcut && (shortcutOwner === element || !element.hasAttribute("aria-keyshortcuts"))) {
+    element.setAttribute("aria-keyshortcuts", ariaKeyShortcuts(props.shortcut, apple.value));
+    shortcutOwner = element;
+  } else if (!props.shortcut && shortcutOwner === element) {
+    element.removeAttribute("aria-keyshortcuts");
+    shortcutOwner = null;
+  }
+}
 watch(
-  trigger,
-  (element, previous) => {
-    if (previous) removeToken(previous, "aria-describedby", tooltipId);
-    if (element && !props.disabled) addToken(element, "aria-describedby", tooltipId);
+  [trigger, () => props.disabled, () => props.text, () => props.shortcut, hasContent, apple],
+  ([element], [previous]) => {
+    if (previous && previous !== element) release(previous);
+    sync(element);
   },
   { flush: "post" }
 );
 watch(
   () => props.disabled,
   (disabled) => {
-    const element = trigger.value;
-    if (!element) return;
-    if (disabled) {
-      removeToken(element, "aria-describedby", tooltipId);
-      layer.hide();
-    } else addToken(element, "aria-describedby", tooltipId);
+    if (disabled) layer.hide();
   }
 );
 onBeforeUnmount(() => {
-  if (trigger.value) removeToken(trigger.value, "aria-describedby", tooltipId);
+  if (trigger.value) release(trigger.value);
 });
 </script>