@lytjs/ui 6.4.0 → 6.5.0

package/dist/index.mjs

@@ -252,6 +252,14 @@ var Input = defineComponent({
     };
   }
 });
+var FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
 var Dialog = defineComponent({
   name: "LytDialog",
   props: {
@@ -267,6 +275,8 @@ var Dialog = defineComponent({
     ariaLabel: { type: String, default: "" },
     ariaDescribedBy: { type: String, default: "" },
     ariaModal: { type: Boolean, default: true },
+    initialFocus: { type: [String, Object], default: void 0 },
+    returnFocusOnClose: { type: Boolean, default: true },
     onBeforeOpen: { type: Function, default: void 0 },
     onBeforeClose: { type: Function, default: void 0 },
     onOpen: { type: Function, default: void 0 },
@@ -278,6 +288,8 @@ var Dialog = defineComponent({
   setup(props, { slots }) {
     const p = props;
     const visible = signal(p.modelValue);
+    const dialogRef = signal(null);
+    const previousActiveElement = signal(null);
     watch(() => p.modelValue, (newVal) => {
       visible.set(newVal);
       if (newVal) {
@@ -291,6 +303,12 @@ var Dialog = defineComponent({
       }
       visible.set(false);
       p.onClose?.();
+      if (p.returnFocusOnClose) {
+        const prevEl = previousActiveElement();
+        if (prevEl && prevEl.focus) {
+          prevEl.focus();
+        }
+      }
     };
     const handleKeydown = (e) => {
       if (p.closeOnPressEscape && e.key === "Escape") {
@@ -299,6 +317,58 @@ var Dialog = defineComponent({
       }
       p.onKeydown?.(e);
     };
+    const getFocusableElements = (container) => {
+      return Array.from(
+        container.querySelectorAll(FOCUSABLE_SELECTORS)
+      ).filter((el) => {
+        return el.offsetParent !== null && !el.hasAttribute("aria-hidden");
+      });
+    };
+    const handleTabKey = (e) => {
+      const dialog = dialogRef();
+      if (!dialog) return;
+      const focusableElements = getFocusableElements(dialog);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+    effect(() => {
+      if (visible()) {
+        previousActiveElement.set(document.activeElement);
+        setTimeout(() => {
+          const dialog = dialogRef();
+          if (dialog) {
+            if (p.initialFocus) {
+              const initialEl = typeof p.initialFocus === "string" ? dialog.querySelector(p.initialFocus) : p.initialFocus;
+              if (initialEl && initialEl.focus) {
+                initialEl.focus();
+              } else {
+                const focusableElements = getFocusableElements(dialog);
+                if (focusableElements.length > 0) {
+                  focusableElements[0].focus();
+                }
+              }
+            } else {
+              const focusableElements = getFocusableElements(dialog);
+              if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+              }
+            }
+          }
+        }, 0);
+      }
+    });
     return () => {
       if (!visible()) {
         return createVNode("div", { style: "display: none;" }, []);
@@ -355,7 +425,15 @@ var Dialog = defineComponent({
       });
       return createVNode("div", {
         class: "lyt-dialog__wrapper",
-        onKeydown: handleKeydown
+        onKeydown: (e) => {
+          if (e.key === "Tab") {
+            handleTabKey(e);
+          }
+          handleKeydown(e);
+        },
+        ref: (el) => {
+          dialogRef.set(el);
+        }
       }, [
         createVNode("div", {
           class: "lyt-dialog__overlay",
@@ -364,12 +442,22 @@ var Dialog = defineComponent({
         }),
         createVNode("div", mergeA11yProps(dialogA11yProps, {
           class: dialogClass,
-          style: dialogStyle
+          style: dialogStyle,
+          role: "dialog",
+          "aria-modal": p.ariaModal
         }), children)
       ]);
     };
   }
 });
+var FOCUSABLE_SELECTORS2 = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
 var Select = defineComponent({
   name: "LytSelect",
   props: {
@@ -387,6 +475,8 @@ var Select = defineComponent({
     ariaInvalid: { type: Boolean, default: false },
     ariaRequired: { type: Boolean, default: false },
     tabIndex: { type: Number, default: void 0 },
+    closeOnSelect: { type: Boolean, default: true },
+    filterable: { type: Boolean, default: false },
     onChange: { type: Function, default: void 0 },
     onClear: { type: Function, default: void 0 },
     onKeydown: { type: Function, default: void 0 },
@@ -398,6 +488,11 @@ var Select = defineComponent({
     const selectedValue = signal(/* @__PURE__ */ new Set());
     const searchValue = signal("");
     const highlightedIndex = signal(-1);
+    const triggerRef = signal(null);
+    const dropdownRef = signal(null);
+    const previousActiveElement = signal(null);
+    const listboxId = signal(`lyt-select-listbox-${Math.random().toString(36).substr(2, 9)}`);
+    const activeDescendant = signal("");
     effect(() => {
       if (Array.isArray(p.modelValue)) {
         selectedValue.set(new Set(p.modelValue));
@@ -408,11 +503,22 @@ var Select = defineComponent({
     const getFilteredOptions = () => {
       const opts = p.options || [];
       const query = searchValue();
-      return query ? opts.filter((opt) => opt.label.includes(query)) : opts;
+      if (!p.filterable || !query) return opts;
+      const lowerQuery = query.toLowerCase();
+      return opts.filter(
+        (opt) => opt.label.toLowerCase().includes(lowerQuery)
+      );
     };
     const getEnabledOptions = () => {
       return getFilteredOptions().filter((opt) => !opt.disabled);
     };
+    const getFocusableElements = (container) => {
+      return Array.from(
+        container.querySelectorAll(FOCUSABLE_SELECTORS2)
+      ).filter((el) => {
+        return el.offsetParent !== null && !el.hasAttribute("aria-hidden");
+      });
+    };
     const toggleDropdown = () => {
       if (p.disabled) return;
       const newOpen = !isOpen();
@@ -427,6 +533,25 @@ var Select = defineComponent({
             currentValue = foundIndex >= 0 ? foundIndex : 0;
           }
           highlightedIndex.set(currentValue);
+          const option = enabledOptions[currentValue];
+          if (option) {
+            activeDescendant.set(`lyt-select-option-${option.value}`);
+          }
+        }
+        previousActiveElement.set(document.activeElement);
+        setTimeout(() => {
+          const dropdown = dropdownRef();
+          if (dropdown) {
+            const focusable = getFocusableElements(dropdown);
+            if (focusable.length > 0) {
+              focusable[0]?.focus();
+            }
+          }
+        }, 10);
+      } else {
+        const prevEl = previousActiveElement();
+        if (prevEl && prevEl.focus) {
+          setTimeout(() => prevEl.focus(), 10);
         }
       }
       p.onVisibleChange?.(newOpen);
@@ -444,9 +569,15 @@ var Select = defineComponent({
         p.onChange?.(Array.from(newSelected));
       } else {
         selectedValue.set(/* @__PURE__ */ new Set([option.value]));
-        isOpen.set(false);
-        p.onVisibleChange?.(false);
+        if (p.closeOnSelect) {
+          isOpen.set(false);
+          p.onVisibleChange?.(false);
+        }
         p.onChange?.(option.value);
+        const prevEl = previousActiveElement();
+        if (prevEl && prevEl.focus) {
+          setTimeout(() => prevEl.focus(), 10);
+        }
       }
     };
     const handleClear = (event) => {
@@ -462,7 +593,9 @@ var Select = defineComponent({
       switch (event.key) {
         case "Enter":
         case " ":
-          event.preventDefault();
+          if (!p.filterable || !open) {
+            event.preventDefault();
+          }
           if (open) {
             if (hIndex >= 0 && hIndex < enabledOptions.length) {
               const option = enabledOptions[hIndex];
@@ -480,7 +613,12 @@ var Select = defineComponent({
             toggleDropdown();
           } else {
             if (enabledOptions.length > 0) {
-              highlightedIndex.set(Math.min(hIndex + 1, enabledOptions.length - 1));
+              const nextIndex = Math.min(hIndex + 1, enabledOptions.length - 1);
+              highlightedIndex.set(nextIndex);
+              const option = enabledOptions[nextIndex];
+              if (option) {
+                activeDescendant.set(`lyt-select-option-${option.value}`);
+              }
             }
           }
           break;
@@ -488,7 +626,12 @@ var Select = defineComponent({
           event.preventDefault();
           if (open) {
             if (enabledOptions.length > 0) {
-              highlightedIndex.set(Math.max(hIndex - 1, 0));
+              const prevIndex = Math.max(hIndex - 1, 0);
+              highlightedIndex.set(prevIndex);
+              const option = enabledOptions[prevIndex];
+              if (option) {
+                activeDescendant.set(`lyt-select-option-${option.value}`);
+              }
             }
           }
           break;
@@ -497,23 +640,64 @@ var Select = defineComponent({
             event.preventDefault();
             isOpen.set(false);
             p.onVisibleChange?.(false);
+            const prevEl = previousActiveElement();
+            if (prevEl && prevEl.focus) {
+              prevEl.focus();
+            }
           }
           break;
         case "Home":
           event.preventDefault();
           if (open && enabledOptions.length > 0) {
             highlightedIndex.set(0);
+            const option = enabledOptions[0];
+            if (option) {
+              activeDescendant.set(`lyt-select-option-${option.value}`);
+            }
           }
           break;
         case "End":
           event.preventDefault();
           if (open && enabledOptions.length > 0) {
-            highlightedIndex.set(enabledOptions.length - 1);
+            const lastIndex = enabledOptions.length - 1;
+            highlightedIndex.set(lastIndex);
+            const option = enabledOptions[lastIndex];
+            if (option) {
+              activeDescendant.set(`lyt-select-option-${option.value}`);
+            }
+          }
+          break;
+        case "Tab":
+          if (open) {
+            isOpen.set(false);
+            p.onVisibleChange?.(false);
           }
           break;
       }
       p.onKeydown?.(event);
     };
+    const handleTriggerKeydown = (event) => {
+      if (event.key === "ArrowDown" && !isOpen()) {
+        event.preventDefault();
+        toggleDropdown();
+      } else if (event.key === "ArrowUp" && !isOpen()) {
+        event.preventDefault();
+        toggleDropdown();
+      }
+    };
+    const handleOptionKeydown = (event, option) => {
+      if (event.key === "Tab") {
+        isOpen.set(false);
+        p.onVisibleChange?.(false);
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleSelect(option);
+        return;
+      }
+      handleKeydown(event);
+    };
     const getSelectedLabel = () => {
       const selected = Array.from(selectedValue());
       if (selected.length === 0) return "";
@@ -535,13 +719,19 @@ var Select = defineComponent({
       const filteredOptions = getFilteredOptions();
       const selected = selectedValue();
       const hIndex = highlightedIndex();
+      const listId = listboxId();
+      const activeId = activeDescendant();
       const dropdownContent = [];
       if (filteredOptions.length === 0) {
-        dropdownContent.push(createVNode("div", { class: "lyt-select__empty" }, [createVNode("span", {}, "\u65E0\u5339\u914D\u9009\u9879")]));
+        dropdownContent.push(createVNode("div", {
+          class: "lyt-select__empty",
+          role: "status"
+        }, [createVNode("span", {}, "\u65E0\u5339\u914D\u9009\u9879")]));
       } else {
         filteredOptions.forEach((option, index) => {
           const isSelected = selected.has(option.value);
           const isHighlighted = !option.disabled && index === hIndex;
+          const optionId = `lyt-select-option-${option.value}`;
           const optionChildren = [];
           if (isSelected) {
             optionChildren.push(createVNode("span", { class: "lyt-select__check" }, [createVNode("span", {}, "\u2713")]));
@@ -549,8 +739,10 @@ var Select = defineComponent({
           optionChildren.push(createVNode("span", {}, option.label));
           dropdownContent.push(createVNode("div", {
             key: String(option.value),
+            id: optionId,
             role: "option",
             "aria-selected": isSelected,
+            "aria-disabled": option.disabled,
             class: [
               "lyt-select__option",
               isSelected ? "lyt-select__option--selected" : "",
@@ -559,8 +751,12 @@ var Select = defineComponent({
             ].filter(Boolean).join(" "),
             onClick: () => handleSelect(option),
             onMouseenter: () => {
-              if (!option.disabled) highlightedIndex.set(index);
-            }
+              if (!option.disabled) {
+                highlightedIndex.set(index);
+                activeDescendant.set(optionId);
+              }
+            },
+            onKeydown: (e) => handleOptionKeydown(e, option)
           }, optionChildren));
         });
       }
@@ -574,33 +770,65 @@ var Select = defineComponent({
       if (p.clearable && selected.size > 0) {
         triggerChildren.push(createVNode("span", {
           class: "lyt-select__clear",
-          onClick: handleClear
+          onClick: handleClear,
+          role: "button",
+          "aria-label": "\u6E05\u9664\u9009\u62E9",
+          tabIndex: 0
         }, [createVNode("span", {}, "\xD7")]));
       }
       triggerChildren.push(createVNode("span", { class: "lyt-select__arrow" }, [createVNode("span", {}, "\u25BC")]));
-      const resultChildren = [
-        createVNode("div", {
-          class: "lyt-select__trigger",
-          onClick: toggleDropdown
-        }, triggerChildren)
-      ];
+      const resultChildren = [];
+      if (p.filterable) {
+        resultChildren.push(createVNode("input", {
+          class: "lyt-select__search",
+          type: "text",
+          placeholder: "\u641C\u7D22...",
+          value: searchValue(),
+          onInput: (e) => {
+            searchValue.set(e.target.value);
+          },
+          onKeydown: handleTriggerKeydown,
+          "aria-label": "\u641C\u7D22\u9009\u9879",
+          "aria-controls": listId
+        }));
+      }
+      resultChildren.push(createVNode("div", {
+        ref: (el) => triggerRef.set(el),
+        class: "lyt-select__trigger",
+        onClick: toggleDropdown,
+        onKeydown: handleTriggerKeydown,
+        tabIndex: p.disabled ? -1 : p.tabIndex ?? 0,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-activedescendant": open ? activeId : void 0
+      }, triggerChildren));
       if (open) {
         resultChildren.push(createVNode("div", {
+          ref: (el) => dropdownRef.set(el),
+          id: listId,
           class: "lyt-select__dropdown",
           role: "listbox",
-          "aria-multiselectable": p.multiple
+          "aria-multiselectable": p.multiple,
+          "aria-label": p.ariaLabel || "\u9009\u62E9\u9009\u9879"
         }, dropdownContent));
+        resultChildren.push(createVNode("div", {
+          class: "lyt-select__sro",
+          role: "status",
+          "aria-live": "polite"
+        }, `\u5DF2\u9009\u62E9 ${selected.size} \u4E2A\u9009\u9879`));
       }
       const a11yProps = getComboboxA11yProps({
         id: p.id,
-        ariaLabel: p.ariaLabel,
+        ariaLabel: p.ariaLabel || "\u9009\u62E9\u5668",
         ariaDescribedBy: p.ariaDescribedBy,
         ariaRequired: p.ariaRequired,
         ariaInvalid: p.ariaInvalid,
         disabled: p.disabled,
         tabIndex: p.tabIndex,
         expanded: open,
-        controls: void 0
+        controls: listId
       });
       return createVNode("div", mergeA11yProps(a11yProps, {
         class: selectClass,
@@ -654,6 +882,10 @@ var Tabs = defineComponent({
       dropIndex: -1
     });
     const activeIndex = signal(0);
+    const tabListRef = signal(null);
+    const previousActiveElement = signal(null);
+    const announcement = signal("");
+    const tablistId = signal(`lyt-tabs-${Math.random().toString(36).substr(2, 9)}`);
     const getPanes = () => {
       const defaultSlot = slots.default;
       const defaultSlotContent = defaultSlot ? defaultSlot() : [];
@@ -666,11 +898,28 @@ var Tabs = defineComponent({
     const getEnabledPanes = (panes) => {
       return panes.filter((pane) => !pane.props.disabled);
     };
+    const announce = (message) => {
+      announcement.set(message);
+      setTimeout(() => announcement.set(""), 1e3);
+    };
     const handleTabClick = (pane, index) => {
       if (pane.props.disabled) return;
+      const oldIndex = activeIndex();
+      activeIndex.set(index);
+      if (oldIndex !== index) {
+        const panes = getPanes();
+        announce(`\u5DF2\u5207\u6362\u5230\u6807\u7B7E\u9875 ${index + 1}\uFF1A${pane.props.label}\uFF0C\u5171 ${panes.length} \u4E2A\u6807\u7B7E\u9875`);
+      }
       p.onChange?.(pane.props.name);
       p.onTabClick?.(pane, index);
-      activeIndex.set(index);
+      previousActiveElement.set(document.activeElement);
+      setTimeout(() => {
+        const tabList = tabListRef();
+        if (tabList) {
+          const activeTab = tabList.querySelector('[role="tab"][aria-selected="true"]');
+          activeTab?.focus();
+        }
+      }, 10);
     };
     const handleKeydown = (e) => {
       const panes = getPanes();
@@ -715,18 +964,30 @@ var Tabs = defineComponent({
           }
           break;
         case "Enter":
-        case " ":
+        case " ": {
           e.preventDefault();
           const currentPane = panes[activeIndex()];
           if (currentPane && !currentPane.props.disabled) {
             handleTabClick(currentPane, activeIndex());
           }
           break;
+        }
+        case "Delete":
+        case "Backspace":
+          if (p.closable) {
+            const currentPane = panes[activeIndex()];
+            if (currentPane && currentPane.props.closable) {
+              e.preventDefault();
+              handleTabRemove(currentPane, new Event("keydown"));
+            }
+          }
+          break;
       }
       if (newIndex !== activeIndex()) {
-        activeIndex.set(newIndex);
         const pane = panes[newIndex];
         if (pane && !pane.props.disabled) {
+          activeIndex.set(newIndex);
+          announce(`\u5DF2\u5207\u6362\u5230\u6807\u7B7E\u9875 ${newIndex + 1}\uFF1A${pane.props.label}`);
           handleTabClick(pane, newIndex);
         }
       }
@@ -734,9 +995,27 @@ var Tabs = defineComponent({
     };
     const handleTabRemove = (pane, e) => {
       e.stopPropagation();
+      const panes = getPanes();
+      const index = panes.findIndex((p2) => p2.props.name === pane.props.name);
+      if (index > 0) {
+        const prevPane = panes[index - 1];
+        activeIndex.set(index - 1);
+        if (prevPane) {
+          announce(`\u5DF2\u5173\u95ED\u6807\u7B7E\u9875 ${pane.props.label}\uFF0C\u73B0\u5728\u663E\u793A\u6807\u7B7E\u9875 ${prevPane.props.label}`);
+        }
+      } else if (panes.length > 1) {
+        const nextPane = panes[index + 1];
+        activeIndex.set(0);
+        if (nextPane) {
+          announce(`\u5DF2\u5173\u95ED\u6807\u7B7E\u9875 ${pane.props.label}\uFF0C\u73B0\u5728\u663E\u793A\u6807\u7B7E\u9875 ${nextPane.props.label}`);
+        }
+      } else {
+        announce(`\u5DF2\u5173\u95ED\u6807\u7B7E\u9875 ${pane.props.label}\uFF0C\u73B0\u5728\u6CA1\u6709\u6807\u7B7E\u9875`);
+      }
       p.onTabRemove?.(pane.props.name);
     };
     const handleTabAdd = () => {
+      announce("\u6B63\u5728\u6DFB\u52A0\u65B0\u6807\u7B7E\u9875");
       p.onTabAdd?.();
     };
     const handleDragStart = (index) => {
@@ -758,6 +1037,7 @@ var Tabs = defineComponent({
     const handleDragEnd = () => {
       const { dragIndex, dropIndex } = dragState();
       if (dragIndex !== -1 && dropIndex !== -1 && dragIndex !== dropIndex) {
+        announce(`\u6807\u7B7E\u9875\u5DF2\u4ECE\u4F4D\u7F6E ${dragIndex + 1} \u79FB\u52A8\u5230\u4F4D\u7F6E ${dropIndex + 1}`);
         p.onTabDragEnd?.(dragIndex, dropIndex);
       }
       dragState.set({
@@ -778,6 +1058,7 @@ var Tabs = defineComponent({
         `lyt-tabs--${p.type || "normal"}`,
         p.class
       ].filter(Boolean).join(" ");
+      const tabListId = tablistId();
       const tabItems = panes.map((pane, index) => {
         const isActive = pane.props.name === currentName;
         const isDraggable = p.draggable;
@@ -786,7 +1067,7 @@ var Tabs = defineComponent({
         ];
         if (pane.props.closable || p.closable) {
           const closeBtnProps = getButtonA11yProps({
-            ariaLabel: "Close tab",
+            ariaLabel: `\u5173\u95ED\u6807\u7B7E\u9875 ${pane.props.label}`,
             disabled: pane.props.disabled
           });
           tabChildren.push(createVNode("span", mergeA11yProps(closeBtnProps, {
@@ -794,11 +1075,13 @@ var Tabs = defineComponent({
             onClick: (e) => handleTabRemove(pane, e)
           }), [createTextVNode("\xD7")]));
         }
+        const tabId = `${p.id || tabListId}-tab-${pane.props.name}`;
+        const panelId2 = `${p.id || tabListId}-panel-${pane.props.name}`;
         const tabA11yProps = getTabA11yProps({
-          id: `${p.id || "tabs"}-tab-${pane.props.name}`,
+          id: tabId,
           selected: isActive,
           disabled: pane.props.disabled,
-          controls: `${p.id || "tabs"}-panel-${pane.props.name}`
+          controls: panelId2
         });
         return createVNode("div", mergeA11yProps(tabA11yProps, {
           key: String(pane.props.name),
@@ -821,7 +1104,7 @@ var Tabs = defineComponent({
       });
       if (p.addable || p.editable) {
         const addBtnProps = getButtonA11yProps({
-          ariaLabel: "Add tab"
+          ariaLabel: "\u6DFB\u52A0\u65B0\u6807\u7B7E\u9875"
         });
         tabItems.push(createVNode("div", mergeA11yProps(addBtnProps, {
           class: "lyt-tabs__add-btn",
@@ -829,26 +1112,40 @@ var Tabs = defineComponent({
         }), [createTextVNode("+")]));
       }
       const content = panes.find((pane) => pane.props.name === currentName);
+      const panelId = `${p.id || tabListId}-panel-${content?.props.name || "default"}`;
       const tabpanelProps = content ? getTabpanelA11yProps({
-        id: `${p.id || "tabs"}-panel-${content.props.name}`,
-        labelledBy: `${p.id || "tabs"}-tab-${content.props.name}`
+        id: panelId,
+        labelledBy: `${p.id || tabListId}-tab-${content.props.name}`
       }) : {};
       const contentPane = content ? createVNode("div", mergeA11yProps(tabpanelProps, {
-        class: "lyt-tabs__pane"
-      }), content.children) : createVNode("div", { style: "display: none;" }, []);
+        class: "lyt-tabs__pane",
+        id: panelId,
+        role: "tabpanel"
+      }), content.children) : createVNode("div", { style: "display: none;", id: panelId }, []);
       const tablistA11yProps = getTablistA11yProps({
-        id: p.id,
-        ariaLabel: p.ariaLabel || "Tabs",
+        id: p.id || tabListId,
+        ariaLabel: p.ariaLabel || "\u6807\u7B7E\u9875\u5BFC\u822A",
         ariaDescribedBy: p.ariaDescribedBy
       });
       return createVNode("div", mergeA11yProps(tablistA11yProps, {
         class: tabsClass,
         onKeydown: handleKeydown
       }), [
-        createVNode("div", { class: "lyt-tabs__header" }, [
+        createVNode("div", {
+          ref: (el) => tabListRef.set(el),
+          class: "lyt-tabs__header",
+          role: "tablist",
+          "aria-label": p.ariaLabel || "\u6807\u7B7E\u9875"
+        }, [
           createVNode("div", { class: "lyt-tabs__nav" }, tabItems)
         ]),
-        createVNode("div", { class: "lyt-tabs__content" }, [contentPane])
+        createVNode("div", { class: "lyt-tabs__content" }, [contentPane]),
+        createVNode("div", {
+          class: "lyt-tabs__sro",
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true"
+        }, announcement())
       ]);
     };
   }
@@ -1021,6 +1318,22 @@ var Table = defineComponent({
     };
   }
 });
+var DEFAULT_LOCALE = {
+  required: "\u6B64\u5B57\u6BB5\u5FC5\u586B",
+  pattern: "\u683C\u5F0F\u4E0D\u6B63\u786E",
+  min: "\u957F\u5EA6\u4E0D\u80FD\u5C11\u4E8E {min} \u4E2A\u5B57\u7B26",
+  max: "\u957F\u5EA6\u4E0D\u80FD\u8D85\u8FC7 {max} \u4E2A\u5B57\u7B26",
+  type: "\u7C7B\u578B\u4E0D\u6B63\u786E",
+  validator: "\u9A8C\u8BC1\u5931\u8D25",
+  default: "\u9A8C\u8BC1\u5931\u8D25"
+};
+function formatMessage(template, params) {
+  let message = template;
+  for (const [key, value] of Object.entries(params)) {
+    message = message.replace(new RegExp(`\\{${key}\\}`, "g"), String(value));
+  }
+  return message;
+}
 var Form = defineComponent({
   name: "LytForm",
   props: {
@@ -1028,6 +1341,7 @@ var Form = defineComponent({
     rules: { type: Object, default: () => ({}) },
     labelWidth: { type: String, default: "100px" },
     labelPosition: { type: String, default: "right" },
+    locale: { type: Object, default: () => DEFAULT_LOCALE },
     class: { type: String, default: "" },
     id: { type: String, default: "" },
     ariaLabel: { type: String, default: "" },
@@ -1037,44 +1351,81 @@ var Form = defineComponent({
   setup(props, { slots }) {
     const p = props;
     const errors = signal({});
-    const validateField = (field) => {
+    const validating = signal({});
+    const locale = p.locale || DEFAULT_LOCALE;
+    const validateField = async (field) => {
       const rules = p.rules[field];
       if (!rules || rules.length === 0) return true;
       const value = p.model[field];
+      const fieldErrors = [];
       for (const rule of rules) {
         if (rule.required && (!value || value === "")) {
-          errors.set({ ...errors(), [field]: rule.message || "\u6B64\u5B57\u6BB5\u5FC5\u586B" });
-          return false;
-        }
-        if (rule.pattern && !rule.pattern.test(String(value || ""))) {
-          errors.set({ ...errors(), [field]: rule.message || "\u683C\u5F0F\u4E0D\u6B63\u786E" });
-          return false;
+          const message = rule.message || formatMessage(locale.required, { field });
+          fieldErrors.push(message);
+          continue;
+        }
+        if (value !== void 0 && value !== null && value !== "") {
+          if (rule.type) {
+            const typeValid = validateType(value, rule.type);
+            if (!typeValid) {
+              fieldErrors.push(rule.message || formatMessage(locale.type, { type: rule.type, field }));
+              continue;
+            }
+          }
+          if (rule.pattern && !rule.pattern.test(String(value))) {
+            fieldErrors.push(rule.message || formatMessage(locale.pattern, { field }));
+            continue;
+          }
+          if (typeof value === "string") {
+            if (rule.min !== void 0 && value.length < rule.min) {
+              fieldErrors.push(rule.message || formatMessage(locale.min, { min: rule.min, field }));
+              continue;
+            }
+            if (rule.max !== void 0 && value.length > rule.max) {
+              fieldErrors.push(rule.message || formatMessage(locale.max, { max: rule.max, field }));
+              continue;
+            }
+          }
         }
         if (rule.validator) {
-          const result = rule.validator(value, p.model);
-          if (result !== true) {
-            errors.set({ ...errors(), [field]: typeof result === "string" ? result : "\u9A8C\u8BC1\u5931\u8D25" });
-            return false;
+          validating.set({ ...validating(), [field]: true });
+          try {
+            const result = await Promise.resolve(rule.validator(value, p.model));
+            if (result !== true) {
+              const errorMessage = typeof result === "string" ? result : formatMessage(locale.validator, { field });
+              fieldErrors.push(errorMessage);
+            }
+          } catch (_error) {
+            fieldErrors.push(rule.message || formatMessage(locale.validator, { field }));
+          } finally {
+            validating.set({ ...validating(), [field]: false });
           }
         }
       }
+      if (fieldErrors.length > 0) {
+        errors.set({ ...errors(), [field]: fieldErrors[0] });
+        return false;
+      }
       const newErrors = { ...errors() };
       delete newErrors[field];
       errors.set(newErrors);
       return true;
     };
-    const validate = () => {
+    const validate = async () => {
       let isValid = true;
-      for (const field in p.rules) {
-        if (!validateField(field)) {
+      const fieldNames = Object.keys(p.rules);
+      for (const field of fieldNames) {
+        const fieldValid = await validateField(field);
+        if (!fieldValid) {
           isValid = false;
         }
       }
       return isValid;
     };
-    const handleSubmit = (event) => {
+    const handleSubmit = async (event) => {
       event.preventDefault();
-      if (validate()) {
+      const isValid = await validate();
+      if (isValid) {
         p.onSubmit?.(p.model);
       }
     };
@@ -1095,6 +1446,33 @@ var Form = defineComponent({
     };
   }
 });
+function validateType(value, type) {
+  switch (type) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+      return typeof value === "number" && !isNaN(value);
+    case "boolean":
+      return typeof value === "boolean";
+    case "array":
+      return Array.isArray(value);
+    case "date":
+      return value instanceof Date || !isNaN(Date.parse(String(value)));
+    case "email": {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return typeof value === "string" && emailRegex.test(value);
+    }
+    case "url":
+      try {
+        new URL(String(value));
+        return true;
+      } catch {
+        return false;
+      }
+    default:
+      return true;
+  }
+}
 var FormItem = defineComponent({
   name: "LytFormItem",
   props: {
@@ -1153,15 +1531,16 @@ var Transition = defineComponent({
     class: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const getTransitionClass = () => {
-      const classes = [`${props.name}-transition`];
-      if (props.class) {
-        classes.push(props.class);
+      const classes = [`${p.name}-transition`];
+      if (p.class) {
+        classes.push(p.class);
       }
       return classes.join(" ");
     };
     const getTransitionStyle = () => {
-      return `transition-duration: ${props.duration}ms;`;
+      return `transition-duration: ${p.duration}ms;`;
     };
     return () => {
       return createVNode("div", {
@@ -1180,17 +1559,18 @@ var TransitionGroup = defineComponent({
     class: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     return () => {
       const children = slots.default?.() || [];
       const wrappedChildren = children.map(
         (child, index) => createVNode("div", {
           key: child.key || index,
-          class: `${props.name}-item`,
-          style: `transition: all ${props.duration}ms ease;`
+          class: `${p.name}-item`,
+          style: `transition: all ${p.duration}ms ease;`
         }, [child])
       );
-      return createVNode(props.tag, {
-        class: `lyt-transition-group ${props.class}`
+      return createVNode(p.tag, {
+        class: `lyt-transition-group ${p.class}`
       }, wrappedChildren);
     };
   }
@@ -1657,24 +2037,167 @@ var Menu = defineComponent({
     const p = props;
     const activeIndex = signal(p.defaultActive);
     const openedIndexes = signal(new Set(p.defaultOpeneds));
+    const menuRef = signal(null);
+    const currentSubmenu = signal(null);
+    const focusedIndex = signal(-1);
+    const announcement = signal("");
+    const previousActiveElement = signal(null);
+    const menuId = signal(`lyt-menu-${Math.random().toString(36).substr(2, 9)}`);
+    const announce = (message) => {
+      announcement.set(message);
+      setTimeout(() => announcement.set(""), 1e3);
+    };
+    const getMenuItems = () => {
+      const items = slots.default?.() || [];
+      const menuItems = [];
+      items.forEach((item) => {
+        const itemProps = item.props;
+        if (!itemProps || !itemProps.index) return;
+        const hasChildren = !!(itemProps.children && itemProps.children.length > 0);
+        menuItems.push({
+          index: itemProps.index,
+          label: itemProps.label || "",
+          disabled: !!itemProps.disabled,
+          hasChildren,
+          element: null
+        });
+      });
+      return menuItems;
+    };
     const handleSelect = (index) => {
       activeIndex.set(index);
+      announce(`\u5DF2\u9009\u62E9\u83DC\u5355\u9879\uFF1A${index}`);
       p.onSelect?.(index);
     };
-    const toggleSubmenu = (index) => {
+    const toggleSubmenu = (index, itemLabel) => {
       const newOpened = new Set(openedIndexes());
       if (newOpened.has(index)) {
         newOpened.delete(index);
+        announce(`\u5DF2\u5173\u95ED\u5B50\u83DC\u5355\uFF1A${itemLabel}`);
         p.onClose?.(index);
+        currentSubmenu.set(null);
+        const prevEl = previousActiveElement();
+        if (prevEl && prevEl.focus) {
+          prevEl.focus();
+        }
       } else {
         if (p.uniqueOpened) {
           newOpened.clear();
+          if (currentSubmenu()) {
+            announce("\u5DF2\u5173\u95ED\u5176\u4ED6\u5B50\u83DC\u5355");
+          }
         }
         newOpened.add(index);
+        announce(`\u5DF2\u6253\u5F00\u5B50\u83DC\u5355\uFF1A${itemLabel}`);
         p.onOpen?.(index);
+        currentSubmenu.set(index);
+        previousActiveElement.set(document.activeElement);
+        setTimeout(() => {
+          const menu = menuRef();
+          if (menu) {
+            const submenu = menu.querySelector(`[data-submenu-id="${index}"] ul`);
+            if (submenu) {
+              const firstItem = submenu.querySelector('[role="menuitem"]');
+              firstItem?.focus();
+            }
+          }
+        }, 10);
       }
       openedIndexes.set(newOpened);
     };
+    const handleKeydown = (e, itemIndex, hasChildren, itemLabel) => {
+      const menuItems = getMenuItems();
+      const currentIndex = menuItems.findIndex((item) => item.index === itemIndex);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (hasChildren && !openedIndexes().has(itemIndex)) {
+            toggleSubmenu(itemIndex, itemLabel);
+          } else {
+            for (let i = 1; i <= menuItems.length; i++) {
+              const nextIndex = (currentIndex + i) % menuItems.length;
+              const nextItem = menuItems[nextIndex];
+              if (nextItem && !nextItem.disabled) {
+                announce(`\u5BFC\u822A\u5230\u83DC\u5355\u9879\uFF1A${nextItem.label}`);
+                focusedIndex.set(nextIndex);
+                break;
+              }
+            }
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          for (let i = 1; i <= menuItems.length; i++) {
+            const prevIndex = (currentIndex - i + menuItems.length) % menuItems.length;
+            const prevItem = menuItems[prevIndex];
+            if (prevItem && !prevItem.disabled) {
+              announce(`\u5BFC\u822A\u5230\u83DC\u5355\u9879\uFF1A${prevItem.label}`);
+              focusedIndex.set(prevIndex);
+              break;
+            }
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          for (let i = 1; i <= menuItems.length; i++) {
+            const nextIndex = (currentIndex + i) % menuItems.length;
+            const nextItem = menuItems[nextIndex];
+            if (nextItem && !nextItem.disabled) {
+              announce(`\u5BFC\u822A\u5230\u83DC\u5355\u9879\uFF1A${nextItem.label}`);
+              focusedIndex.set(nextIndex);
+              break;
+            }
+          }
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          for (let i = 1; i <= menuItems.length; i++) {
+            const prevIndex = (currentIndex - i + menuItems.length) % menuItems.length;
+            const prevItem = menuItems[prevIndex];
+            if (prevItem && !prevItem.disabled) {
+              announce(`\u5BFC\u822A\u5230\u83DC\u5355\u9879\uFF1A${prevItem.label}`);
+              focusedIndex.set(prevIndex);
+              break;
+            }
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (hasChildren) {
+            toggleSubmenu(itemIndex, itemLabel);
+          } else {
+            handleSelect(itemIndex);
+          }
+          break;
+        case "Escape":
+          if (openedIndexes().has(itemIndex)) {
+            e.preventDefault();
+            toggleSubmenu(itemIndex, itemLabel);
+          }
+          break;
+        case "Home": {
+          e.preventDefault();
+          const firstEnabled = menuItems.find((item) => !item.disabled);
+          if (firstEnabled) {
+            announce(`\u5BFC\u822A\u5230\u7B2C\u4E00\u4E2A\u83DC\u5355\u9879\uFF1A${firstEnabled.label}`);
+            focusedIndex.set(menuItems.indexOf(firstEnabled));
+          }
+          break;
+        }
+        case "End":
+          e.preventDefault();
+          for (let i = menuItems.length - 1; i >= 0; i--) {
+            const item = menuItems[i];
+            if (item && !item.disabled) {
+              announce(`\u5BFC\u822A\u5230\u6700\u540E\u4E00\u4E2A\u83DC\u5355\u9879\uFF1A${item.label}`);
+              focusedIndex.set(i);
+              break;
+            }
+          }
+          break;
+      }
+    };
     return () => {
       const menuClass = [
         "lyt-menu",
@@ -1682,66 +2205,105 @@ var Menu = defineComponent({
         p.class
       ].filter(Boolean).join(" ");
       const items = slots.default?.() || [];
-      const menuItems = items.map((item) => {
+      const menuListId = menuId();
+      const menuItems = items.map((item, index) => {
         const itemProps = item.props;
         if (!itemProps) return item;
         const isActive = itemProps.index === activeIndex();
         const isOpened = openedIndexes().has(itemProps.index);
+        const isFocused = focusedIndex() === index;
         const itemChildren = [];
         if (itemProps.icon) {
           itemChildren.push(createVNode("span", { class: "lyt-menu__icon" }, [itemProps.icon]));
         }
         itemChildren.push(createVNode("span", { class: "lyt-menu__title" }, [createVNode("span", {}, String(itemProps.label || ""))]));
-        if (itemProps.children && itemProps.children.length > 0) {
+        const hasChildren = !!(itemProps.children && itemProps.children.length > 0);
+        const itemId = `${menuListId}-item-${itemProps.index}`;
+        if (hasChildren) {
           itemChildren.push(createVNode("span", {
-            class: ["lyt-menu__arrow", isOpened ? "lyt-menu__arrow--opened" : ""].filter(Boolean).join(" ")
+            class: ["lyt-menu__arrow", isOpened ? "lyt-menu__arrow--opened" : ""].filter(Boolean).join(" "),
+            "aria-hidden": "true"
           }, [createVNode("span", {}, isOpened ? "\u25B2" : "\u25BC")]));
           const submenuChildren = itemProps.children.map((child) => {
             const childItem = child;
-            const childBtnProps = getButtonA11yProps({
-              ariaLabel: childItem.label,
-              disabled: childItem.disabled
-            });
-            return createVNode("li", mergeA11yProps(childBtnProps, {
+            const childItemId = `${itemId}-child-${childItem.index}`;
+            const isChildActive = childItem.index === activeIndex();
+            return createVNode("li", {
               key: childItem.index,
+              id: childItemId,
               class: [
                 "lyt-menu__item",
-                childItem.index === activeIndex() ? "lyt-menu__item--active" : "",
+                "lyt-menu__submenu-item",
+                isChildActive ? "lyt-menu__item--active" : "",
                 childItem.disabled ? "lyt-menu__item--disabled" : ""
               ].filter(Boolean).join(" "),
+              role: "menuitem",
+              "aria-disabled": childItem.disabled,
               onClick: () => {
                 if (childItem.disabled) return;
                 handleSelect(childItem.index);
               }
-            }), [
+            }, [
               childItem.icon ? createVNode("span", { class: "lyt-menu__icon" }, [childItem.icon]) : createVNode("span", {}, ""),
               createVNode("span", { class: "lyt-menu__title" }, [createVNode("span", {}, String(childItem.label || ""))])
             ]);
           });
-          itemChildren.push(createVNode("ul", { class: "lyt-menu__submenu" }, submenuChildren));
+          itemChildren.push(createVNode("div", {
+            "data-submenu-id": itemProps.index,
+            class: ["lyt-menu__submenu", isOpened ? "lyt-menu__submenu--opened" : ""].filter(Boolean).join(" "),
+            "aria-label": itemProps.label
+          }, [
+            createVNode("ul", {
+              class: "lyt-menu__submenu-list",
+              role: "menu"
+            }, submenuChildren)
+          ]));
         }
-        const itemBtnProps = getButtonA11yProps({
-          ariaLabel: itemProps.label,
-          disabled: itemProps.disabled
-        });
-        return createVNode("li", mergeA11yProps(itemBtnProps, {
+        const itemMenuitemProps = {
+          id: itemId,
+          "aria-disabled": itemProps.disabled ? true : void 0,
+          "aria-expanded": hasChildren ? isOpened : void 0,
+          "aria-haspopup": hasChildren ? true : void 0
+        };
+        return createVNode("li", mergeA11yProps(itemMenuitemProps, {
           key: itemProps.index,
           class: [
             "lyt-menu__item",
             isActive ? "lyt-menu__item--active" : "",
+            isFocused ? "lyt-menu__item--focused" : "",
             itemProps.disabled ? "lyt-menu__item--disabled" : ""
           ].filter(Boolean).join(" "),
+          role: "menuitem",
+          tabIndex: isFocused ? 0 : -1,
+          "aria-haspopup": hasChildren,
+          "aria-expanded": hasChildren ? isOpened : void 0,
           onClick: () => {
             if (itemProps.disabled) return;
-            if (itemProps.children && itemProps.children.length > 0) {
-              toggleSubmenu(itemProps.index);
+            if (hasChildren) {
+              toggleSubmenu(itemProps.index, itemProps.label || "");
             } else {
               handleSelect(itemProps.index);
             }
-          }
+          },
+          onKeydown: (e) => handleKeydown(e, itemProps.index, hasChildren, itemProps.label || "")
         }), itemChildren);
       });
-      return createVNode("ul", { class: menuClass, role: "menubar", id: p.id, "aria-label": p.ariaLabel }, menuItems);
+      return createVNode("div", {
+        ref: (el) => menuRef.set(el)
+      }, [
+        createVNode("ul", {
+          class: menuClass,
+          role: "menubar",
+          id: p.id || menuListId,
+          "aria-label": p.ariaLabel || "\u4E3B\u83DC\u5355"
+        }, menuItems),
+        createVNode("div", {
+          class: "lyt-menu__sro",
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true"
+        }, announcement())
+      ]);
     };
   }
 });
@@ -1811,7 +2373,7 @@ var Cascader = defineComponent({
       const newPath = [...activePath().slice(0, level), option.value];
       activePath.set(newPath);
       const nextOptions = option.children || [];
-      if (option.isLeaf || nextOptions.length === 0) {
+      if (option.isLeaf) {
         if (p.multiple) {
           const exists = selectedValues().some((item) => item.join("-") === newPath.join("-"));
           const newSelected = exists ? selectedValues().filter((item) => item.join("-") !== newPath.join("-")) : [...selectedValues(), newPath];
@@ -1822,7 +2384,7 @@ var Cascader = defineComponent({
           isDropdownOpen.set(false);
           p.onChange?.(newPath);
         }
-      } else if (p.load && nextOptions.length === 0) {
+      } else if (nextOptions.length === 0 && p.load) {
         option.loading = true;
         p.load(option, (children) => {
           option.loading = false;
@@ -3899,23 +4461,24 @@ var Icon = defineComponent({
     ariaDescribedBy: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const getIconClass = () => {
       const classes = ["lyt-icon"];
-      if (props.name) classes.push(`lyt-icon--${props.name}`);
-      if (props.spin) classes.push("lyt-icon--spin");
-      if (props.class) classes.push(props.class);
+      if (p.name) classes.push(`lyt-icon--${p.name}`);
+      if (p.spin) classes.push("lyt-icon--spin");
+      if (p.class) classes.push(p.class);
       return classes.join(" ");
     };
     const getIconStyle = () => {
       const style = {};
-      if (props.size) style.fontSize = props.size;
-      if (props.color) style.color = props.color;
-      if (props.style) {
-        if (isString(props.style)) {
-          return props.style;
+      if (p.size) style.fontSize = p.size;
+      if (p.color) style.color = p.color;
+      if (p.style) {
+        if (isString(p.style)) {
+          return p.style;
         }
-        if (isObject(props.style)) {
-          Object.assign(style, props.style);
+        if (isObject(p.style)) {
+          Object.assign(style, p.style);
         }
       }
       return style;
@@ -3926,9 +4489,9 @@ var Icon = defineComponent({
         children.push(...slots.default());
       }
       return createVNode("i", mergeA11yProps({
-        id: props.id,
-        "aria-label": props.ariaLabel,
-        "aria-describedby": props.ariaDescribedBy
+        id: p.id,
+        "aria-label": p.ariaLabel,
+        "aria-describedby": p.ariaDescribedBy
       }, {
         class: getIconClass(),
         style: getIconStyle()
@@ -4090,6 +4653,7 @@ var Spin = defineComponent({
     ariaDescribedBy: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const state = reactive({
       visible: props.spinning
     });
@@ -4097,10 +4661,10 @@ var Spin = defineComponent({
     watch(() => props.spinning, (val) => {
       if (delayTimer) clearTimeout(delayTimer);
       if (val) {
-        if (props.delay > 0) {
+        if (p.delay && p.delay > 0) {
           delayTimer = setTimeout(() => {
             state.visible = true;
-          }, props.delay);
+          }, p.delay);
         } else {
           state.visible = true;
         }
@@ -4114,14 +4678,14 @@ var Spin = defineComponent({
     const getSpinClass = () => {
       const classes = ["lyt-spin"];
       if (state.visible) classes.push("lyt-spin--spinning");
-      if (props.class) classes.push(props.class);
+      if (p.class) classes.push(p.class);
       return classes.join(" ");
     };
     const getSpinStyle = () => {
-      if (!props.style) return void 0;
-      if (isString(props.style)) return props.style;
-      if (isObject(props.style)) {
-        return Object.entries(props.style).map(([key, value]) => `${key}: ${value}`).join("; ");
+      if (!p.style) return void 0;
+      if (isString(p.style)) return p.style;
+      if (isObject(p.style)) {
+        return Object.entries(p.style).map(([key, value]) => `${key}: ${value}`).join("; ");
       }
       return void 0;
     };
@@ -4129,15 +4693,15 @@ var Spin = defineComponent({
       const children = [];
       if (state.visible) {
         const loadingChildren = [];
-        loadingChildren.push(createVNode("div", { class: `lyt-spin__icon lyt-spin__icon--${props.size}` }, [
+        loadingChildren.push(createVNode("div", { class: `lyt-spin__icon lyt-spin__icon--${p.size}` }, [
           createVNode("svg", { viewBox: "0 0 1024 1024", class: "lyt-spin__svg" }, [
             createVNode("path", {
               d: "M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V736a32 32 0 0 1 32-32zm-448-192a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm640 0a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H736a32 32 0 0 1-32-32z"
             })
           ])
         ]));
-        if (props.tip || slots.tip) {
-          loadingChildren.push(createVNode("div", { class: "lyt-spin__tip" }, slots.tip ? slots.tip() : [props.tip]));
+        if (p.tip || slots.tip) {
+          loadingChildren.push(createVNode("div", { class: "lyt-spin__tip" }, slots.tip ? slots.tip() : [createTextVNode(p.tip)]));
         }
         children.push(createVNode("div", { class: "lyt-spin__loading" }, loadingChildren));
       }
@@ -4147,9 +4711,9 @@ var Spin = defineComponent({
         }, slots.default()));
       }
       return createVNode("div", mergeA11yProps({
-        id: props.id,
-        "aria-label": props.ariaLabel,
-        "aria-describedby": props.ariaDescribedBy,
+        id: p.id,
+        "aria-label": p.ariaLabel,
+        "aria-describedby": p.ariaDescribedBy,
         role: "alert",
         "aria-live": "polite"
       }, {
@@ -4172,16 +4736,17 @@ var Empty = defineComponent({
     ariaDescribedBy: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const getEmptyClass = () => {
       const classes = ["lyt-empty"];
-      if (props.class) classes.push(props.class);
+      if (p.class) classes.push(p.class);
       return classes.join(" ");
     };
     const getEmptyStyle = () => {
-      if (!props.style) return void 0;
-      if (isString(props.style)) return props.style;
-      if (isObject(props.style)) {
-        return Object.entries(props.style).map(([key, value]) => `${key}: ${value}`).join("; ");
+      if (!p.style) return void 0;
+      if (isString(p.style)) return p.style;
+      if (isObject(p.style)) {
+        return Object.entries(p.style).map(([key, value]) => `${key}: ${value}`).join("; ");
       }
       return void 0;
     };
@@ -4189,12 +4754,12 @@ var Empty = defineComponent({
       const children = [];
       if (slots.image) {
         children.push(createVNode("div", { class: "lyt-empty__image" }, slots.image()));
-      } else if (props.image) {
+      } else if (p.image) {
         children.push(createVNode("div", { class: "lyt-empty__image" }, [
           createVNode("img", {
-            src: props.image,
+            src: p.image,
             alt: "empty",
-            style: { width: `${props.imageSize}px`, height: `${props.imageSize}px` }
+            style: { width: `${p.imageSize}px`, height: `${p.imageSize}px` }
           })
         ]));
       } else {
@@ -4202,7 +4767,7 @@ var Empty = defineComponent({
           createVNode("svg", {
             viewBox: "0 0 400 320",
             class: "lyt-empty__svg",
-            style: { width: `${props.imageSize}px`, height: `${props.imageSize * 0.8}px` }
+            style: { width: `${p.imageSize || 160}px`, height: `${(p.imageSize || 160) * 0.8}px` }
           }, [
             createVNode("g", { fill: "none", "fill-rule": "evenodd" }, [
               createVNode("g", { transform: "translate(40 40)" }, [
@@ -4220,16 +4785,16 @@ var Empty = defineComponent({
       }
       if (slots.description) {
         children.push(createVNode("div", { class: "lyt-empty__description" }, slots.description()));
-      } else if (props.description) {
-        children.push(createVNode("div", { class: "lyt-empty__description" }, [props.description]));
+      } else if (p.description) {
+        children.push(createVNode("div", { class: "lyt-empty__description" }, [createTextVNode(p.description)]));
       }
       if (slots.default) {
         children.push(createVNode("div", { class: "lyt-empty__bottom" }, slots.default()));
       }
       return createVNode("div", mergeA11yProps({
-        id: props.id,
-        "aria-label": props.ariaLabel,
-        "aria-describedby": props.ariaDescribedBy,
+        id: p.id,
+        "aria-label": p.ariaLabel,
+        "aria-describedby": p.ariaDescribedBy,
         role: "status",
         "aria-live": "polite"
       }, {
@@ -4330,21 +4895,22 @@ var Container = defineComponent({
     style: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const getContainerClass = () => {
       const classes = ["lyt-container"];
-      if (props.fluid) {
+      if (p.fluid) {
         classes.push("lyt-container--fluid");
       }
-      if (props.class) {
-        classes.push(props.class);
+      if (p.class) {
+        classes.push(p.class);
       }
       return classes.join(" ");
     };
     const getContainerStyle = () => {
-      if (!props.style) return void 0;
-      if (isString(props.style)) return props.style;
-      if (isObject(props.style)) {
-        return Object.entries(props.style).map(([key, value]) => `${key}: ${value}`).join("; ");
+      if (!p.style) return void 0;
+      if (isString(p.style)) return p.style;
+      if (isObject(p.style)) {
+        return Object.entries(p.style).map(([key, value]) => `${key}: ${value}`).join("; ");
       }
       return void 0;
     };
@@ -4372,24 +4938,25 @@ var Divider = defineComponent({
     ariaDescribedBy: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const getDividerClass = () => {
       const classes = ["lyt-divider"];
-      if (props.type !== "horizontal") {
-        classes.push(`lyt-divider--${props.type}`);
+      if (p.type !== "horizontal") {
+        classes.push(`lyt-divider--${p.type}`);
       }
       if (slots.default) {
-        classes.push(`lyt-divider--${props.contentPosition}`);
+        classes.push(`lyt-divider--${p.contentPosition}`);
       }
-      if (props.class) {
-        classes.push(props.class);
+      if (p.class) {
+        classes.push(p.class);
       }
       return classes.join(" ");
     };
     const getDividerStyle = () => {
-      if (!props.style) return void 0;
-      if (isString(props.style)) return props.style;
-      if (isObject(props.style)) {
-        return Object.entries(props.style).map(([key, value]) => `${key}: ${value}`).join("; ");
+      if (!p.style) return void 0;
+      if (isString(p.style)) return p.style;
+      if (isObject(p.style)) {
+        return Object.entries(p.style).map(([key, value]) => `${key}: ${value}`).join("; ");
       }
       return void 0;
     };
@@ -4399,9 +4966,9 @@ var Divider = defineComponent({
         children.push(createVNode("span", { class: "lyt-divider__text" }, slots.default()));
       }
       return createVNode("div", mergeA11yProps({
-        id: props.id,
-        "aria-label": props.ariaLabel,
-        "aria-describedby": props.ariaDescribedBy,
+        id: p.id,
+        "aria-label": p.ariaLabel,
+        "aria-describedby": p.ariaDescribedBy,
         role: "separator"
       }, {
         class: getDividerClass(),
@@ -4613,59 +5180,60 @@ var Tooltip = defineComponent({
     ariaDescribedBy: { type: String, default: "" }
   },
   setup(props, { slots }) {
+    const p = props;
     const state = reactive({
-      visible: false,
-      openTimer: null,
-      closeTimer: null
+      visible: false
     });
+    let openTimer = null;
+    let closeTimer = null;
     const handleMouseEnter = () => {
-      if (props.disabled || props.trigger !== "hover") return;
-      clearTimeout(state.closeTimer);
-      if (props.openDelay > 0) {
-        state.openTimer = setTimeout(() => {
+      if (p.disabled || p.trigger !== "hover") return;
+      if (closeTimer) clearTimeout(closeTimer);
+      if (p.openDelay && p.openDelay > 0) {
+        openTimer = setTimeout(() => {
           state.visible = true;
-        }, props.openDelay);
+        }, p.openDelay);
       } else {
         state.visible = true;
       }
     };
     const handleMouseLeave = () => {
-      if (props.disabled || props.trigger !== "hover") return;
-      clearTimeout(state.openTimer);
-      if (props.closeDelay > 0) {
-        state.closeTimer = setTimeout(() => {
+      if (p.disabled || p.trigger !== "hover") return;
+      if (openTimer) clearTimeout(openTimer);
+      if (p.closeDelay && p.closeDelay > 0) {
+        closeTimer = setTimeout(() => {
           state.visible = false;
-        }, props.closeDelay);
+        }, p.closeDelay);
       } else {
         state.visible = false;
       }
     };
     const handleClick = () => {
-      if (props.disabled || props.trigger !== "click") return;
+      if (p.disabled || p.trigger !== "click") return;
       state.visible = !state.visible;
     };
     const handleFocus = () => {
-      if (props.disabled || props.trigger !== "focus") return;
+      if (p.disabled || p.trigger !== "focus") return;
       state.visible = true;
     };
     const handleBlur = () => {
-      if (props.disabled || props.trigger !== "focus") return;
+      if (p.disabled || p.trigger !== "focus") return;
       state.visible = false;
     };
     const getTooltipClass = () => {
       const classes = ["lyt-tooltip"];
-      classes.push(`lyt-tooltip--${props.placement}`);
-      if (props.class) classes.push(props.class);
+      classes.push(`lyt-tooltip--${p.placement}`);
+      if (p.class) classes.push(p.class);
       return classes.join(" ");
     };
     const getTooltipStyle = () => {
       const style = {};
-      if (props.style) {
-        if (isString(props.style)) {
-          return props.style;
+      if (p.style) {
+        if (isString(p.style)) {
+          return p.style;
         }
-        if (isObject(props.style)) {
-          Object.assign(style, props.style);
+        if (isObject(p.style)) {
+          Object.assign(style, p.style);
         }
       }
       return style;
@@ -4682,17 +5250,17 @@ var Tooltip = defineComponent({
           onBlur: handleBlur
         }, slots.default()));
       }
-      if (state.visible && !props.disabled) {
+      if (state.visible && !p.disabled) {
         const contentChildren = [];
-        if (props.showArrow) {
+        if (p.showArrow) {
           contentChildren.push(createVNode("div", {
             class: "lyt-tooltip__arrow"
           }, []));
         }
-        if (props.content) {
+        if (p.content) {
           contentChildren.push(createVNode("div", {
             class: "lyt-tooltip__content"
-          }, [props.content]));
+          }, [createTextVNode(p.content)]));
         } else if (slots.content) {
           contentChildren.push(createVNode("div", {
             class: "lyt-tooltip__content"
@@ -4704,9 +5272,9 @@ var Tooltip = defineComponent({
         }, contentChildren));
       }
       return createVNode("div", mergeA11yProps({
-        id: props.id,
-        "aria-label": props.ariaLabel,
-        "aria-describedby": props.ariaDescribedBy
+        id: p.id,
+        "aria-label": p.ariaLabel,
+        "aria-describedby": p.ariaDescribedBy
       }, {
         class: "lyt-tooltip-wrapper"
       }), children);
@@ -5760,7 +6328,7 @@ var Slider = defineComponent({
         } else {
           state.secondValue = Math.max(newValue, state.firstValue);
         }
-        const newModelValue = [state.firstValue, state.secondValue];
+        const newModelValue = _props.range ? [state.firstValue, state.secondValue] : state.firstValue;
         emit("update:modelValue", newModelValue);
         emit("input", newModelValue);
         _props.onInput?.(newModelValue);