@kdcloudjs/shoelace 1.0.46 → 1.0.48

package/dist/types/vue/index.d.ts

@@ -3,66 +3,67 @@ import type { DefineComponent } from "vue";
 import type { SlAlert } from "../../components/alert/alert.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
 import type { SlAnimation } from "../../components/animation/animation.component.js";
-import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
-import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlButton } from "../../components/button/button.component.js";
+import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { SlButton } from "../../components/button/button.component.js";
 import type { SlCalendar, CustomEvent } from "../../components/calendar/calendar.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCascader } from "../../components/cascader/cascader.component.js";
-import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { SlCol } from "../../components/col/col.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
-import type { SlCol } from "../../components/col/col.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
+import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
+import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
-import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
-import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
+import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
-import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
-import type { SlImagePreviewGroup } from "../../components/image-preview-group/image-preview-group.component.js";
-import type { SlImage } from "../../components/image/image.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
-import type { SlInput } from "../../components/input/input.component.js";
-import type { SlMenu } from "../../components/menu/menu.component.js";
+import type { SlImage } from "../../components/image/image.component.js";
 import type { SlInclude } from "../../components/include/include.component.js";
+import type { SlImagePreviewGroup } from "../../components/image-preview-group/image-preview-group.component.js";
+import type { SlInput } from "../../components/input/input.component.js";
+import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
 import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
+import type { SlMenu } from "../../components/menu/menu.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
-import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNotification } from "../../components/notification/notification.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
+import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
+import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
+import type { SlPopconfirm } from "../../components/popconfirm/popconfirm.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
+import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
-import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
-import type { SlRow } from "../../components/row/row.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSegmented } from "../../components/segmented/segmented.component.js";
+import type { SlRow } from "../../components/row/row.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
 import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
 import type { SlSenderHeader } from "../../components/sender-header/sender-header.component.js";
@@ -70,13 +71,13 @@ import type { SlSenderSwitch, CustomEvent } from "../../components/sender-switch
 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSpace } from "../../components/space/space.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
-import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSteps } from "../../components/steps/steps.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
+import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
-import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
+import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
@@ -87,11 +88,11 @@ import type { SlTimepicker } from "../../components/timepicker/timepicker.compon
 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTransfer } from "../../components/transfer/transfer.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
-import type { SlUpload } from "../../components/upload/upload.component.js";
-import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
+import type { SlUpload } from "../../components/upload/upload.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
+import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -183,16 +184,6 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: SlBreadcrumb["label"];
-  /**  */
-  defaultSlot?: SlBreadcrumb["defaultSlot"];
-  /**  */
-  separatorSlot?: SlBreadcrumb["separatorSlot"];
-};
-
 type SlBadgeProps = {
   /** The badge's theme variant. */
   variant?: SlBadge["variant"];
@@ -202,18 +193,6 @@ type SlBadgeProps = {
   pulse?: SlBadge["pulse"];
 };
 
-type SlBreadcrumbItemProps = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  href?: SlBreadcrumbItem["href"];
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  target?: SlBreadcrumbItem["target"];
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  rel?: SlBreadcrumbItem["rel"];
-  /**  */
-  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
-};
-
 type SlAvatarProps = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -230,6 +209,38 @@ type SlAvatarProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
+  /**  */
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+};
+
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
+type SlButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: SlButtonGroup["label"];
+  /**  */
+  defaultSlot?: SlButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: SlButtonGroup["disableRole"];
+};
+
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -299,16 +310,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: SlButtonGroup["label"];
-  /**  */
-  defaultSlot?: SlButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: SlButtonGroup["disableRole"];
-};
-
 type SlCalendarProps = {
   /** The display mode: 'month' shows days, 'year' shows months. */
   mode?: SlCalendar["mode"];
@@ -378,6 +379,8 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
+type SlCarouselItemProps = {};
+
 type SlCascaderProps = {
   /** The name of the cascader, submitted as a name/value pair with form data. */
   name?: SlCascader["name"];
@@ -459,6 +462,79 @@ type SlCascaderProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlColProps = {
+  /** Number of cells to span (out of 24) */
+  span?: SlCol["span"];
+  /** Number of cells to offset from the left */
+  offset?: SlCol["offset"];
+  /** Order of the column */
+  order?: SlCol["order"];
+  /** Number of cells to push from the left */
+  push?: SlCol["push"];
+  /** Number of cells to pull from the right */
+  pull?: SlCol["pull"];
+  /** Flex layout style */
+  flex?: SlCol["flex"];
+  /** Responsive config for xs screens (< 576px) */
+  xs?: SlCol["xs"];
+  /** Responsive config for sm screens (≥ 576px) */
+  sm?: SlCol["sm"];
+  /** Responsive config for md screens (≥ 768px) */
+  md?: SlCol["md"];
+  /** Responsive config for lg screens (≥ 992px) */
+  lg?: SlCol["lg"];
+  /** Responsive config for xl screens (≥ 1200px) */
+  xl?: SlCol["xl"];
+  /** Responsive config for xxl screens (≥ 1600px) */
+  xxl?: SlCol["xxl"];
+  /**  */
+  rowContext?: SlCol["rowContext"];
+};
+
+type SlCheckboxProps = {
+  /**  */
+  title?: SlCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: SlCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: SlCheckbox["value"];
+  /** The checkbox's size. */
+  size?: SlCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: SlCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: SlCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: SlCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: SlCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlCheckbox["helpText"];
+  /**  */
+  input?: SlCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type SlColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -525,50 +601,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCheckboxProps = {
-  /**  */
-  title?: SlCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: SlCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: SlCheckbox["value"];
-  /** The checkbox's size. */
-  size?: SlCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: SlCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: SlCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: SlCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: SlCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlCheckbox["helpText"];
-  /**  */
-  input?: SlCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type SlCopyButtonProps = {
   /** The text value to copy. */
   value?: SlCopyButton["value"];
@@ -611,72 +643,6 @@ scenarios. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlColProps = {
-  /** Number of cells to span (out of 24) */
-  span?: SlCol["span"];
-  /** Number of cells to offset from the left */
-  offset?: SlCol["offset"];
-  /** Order of the column */
-  order?: SlCol["order"];
-  /** Number of cells to push from the left */
-  push?: SlCol["push"];
-  /** Number of cells to pull from the right */
-  pull?: SlCol["pull"];
-  /** Flex layout style */
-  flex?: SlCol["flex"];
-  /** Responsive config for xs screens (< 576px) */
-  xs?: SlCol["xs"];
-  /** Responsive config for sm screens (≥ 576px) */
-  sm?: SlCol["sm"];
-  /** Responsive config for md screens (≥ 768px) */
-  md?: SlCol["md"];
-  /** Responsive config for lg screens (≥ 992px) */
-  lg?: SlCol["lg"];
-  /** Responsive config for xl screens (≥ 1200px) */
-  xl?: SlCol["xl"];
-  /** Responsive config for xxl screens (≥ 1600px) */
-  xxl?: SlCol["xxl"];
-  /**  */
-  rowContext?: SlCol["rowContext"];
-};
-
-type SlCarouselItemProps = {};
-
-type SlDatePanelProps = {
-  /**  */
-  open?: SlDatePanel["open"];
-  /**  */
-  value?: SlDatePanel["value"];
-  /**  */
-  type?: SlDatePanel["type"];
-  /**  */
-  min?: SlDatePanel["min"];
-  /**  */
-  max?: SlDatePanel["max"];
-  /**  */
-  format?: SlDatePanel["format"];
-  /**  */
-  calendar?: SlDatePanel["calendar"];
-  /**  */
-  yearColumn?: SlDatePanel["yearColumn"];
-  /**  */
-  monthColumn?: SlDatePanel["monthColumn"];
-  /**  */
-  hourColumn?: SlDatePanel["hourColumn"];
-  /**  */
-  minuteColumn?: SlDatePanel["minuteColumn"];
-  /**  */
-  secondColumn?: SlDatePanel["secondColumn"];
-  /**  */
-  "onsl-cancel"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onsl-clear"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onsl-confirm"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 type SlDatepickerProps = {
   /**  */
   type?: SlDatepicker["type"];
@@ -714,6 +680,102 @@ type SlDatepickerProps = {
   "onsl-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDaterangepickerProps = {
+  /** The name of the input, submitted as a name/value pair with form data. */
+  name?: SlDaterangepicker["name"];
+  /** The current value of the input, submitted as a name/value pair with form data. */
+  value?: SlDaterangepicker["value"];
+  /** The input's size. */
+  size?: SlDaterangepicker["size"];
+  /** Draws a filled input. */
+  filled?: SlDaterangepicker["filled"];
+  /** Draws a pill-style input with rounded edges. */
+  pill?: SlDaterangepicker["pill"];
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlDaterangepicker["label"];
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlDaterangepicker["helpText"];
+  /** Adds a clear button when the input is not empty. */
+  clearable?: SlDaterangepicker["clearable"];
+  /** Disables the input. */
+  disabled?: SlDaterangepicker["disabled"];
+  /** Placeholder text for the two inputs. Accepts a string in the format "startPlaceholder,endPlaceholder"
+as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via JavaScript. */
+  placeholder?: SlDaterangepicker["placeholder"];
+  /** Makes the input readonly. */
+  readonly?: SlDaterangepicker["readonly"];
+  /** Makes the input a required field. */
+  required?: SlDaterangepicker["required"];
+  /** The layout of the form control. `vertical` places the label above, `horizontal` places it to the left. */
+  layout?: SlDaterangepicker["layout"];
+  /** The visual variant of the input. `outlined` shows a full border, `underlined` shows only a bottom border. */
+  variant?: SlDaterangepicker["variant"];
+  /**  */
+  type?: SlDaterangepicker["type"];
+  /** The minimum allowed date (in YYYY-MM-DD format). */
+  min?: SlDaterangepicker["min"];
+  /** The maximum allowed date (in YYYY-MM-DD format). */
+  max?: SlDaterangepicker["max"];
+  /** 日期格式化字符串，支持以下占位符（与 dayjs/Ant Design 一致）：
+- YYYY: 4位数年份
+- MM: 2位数月份
+- DD: 2位数日期
+- HH: 24小时制小时
+- mm: 分钟
+- ss: 秒
+- hh: 12小时制小时
+- A: AM/PM
+也支持传入数组，允许输入框接受多种格式。
+默认值：type='date' 时为 'YYYY-MM-DD'，type='datetime' 时为 'YYYY-MM-DD HH:mm:ss' */
+  format?: SlDaterangepicker["format"];
+  /**  */
+  startInput?: SlDaterangepicker["startInput"];
+  /**  */
+  endInput?: SlDaterangepicker["endInput"];
+  /**  */
+  popup?: SlDaterangepicker["popup"];
+  /**  */
+  inputContainer?: SlDaterangepicker["inputContainer"];
+  /**  */
+  calendars?: SlDaterangepicker["calendars"];
+  /**  */
+  yearColumn?: SlDaterangepicker["yearColumn"];
+  /**  */
+  monthColumn?: SlDaterangepicker["monthColumn"];
+  /**  */
+  hourColumn?: SlDaterangepicker["hourColumn"];
+  /**  */
+  minuteColumn?: SlDaterangepicker["minuteColumn"];
+  /**  */
+  secondColumn?: SlDaterangepicker["secondColumn"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: SlDaterangepicker["defaultValue"];
+  /**  */
+  startPlaceholder?: SlDaterangepicker["startPlaceholder"];
+  /**  */
+  endPlaceholder?: SlDaterangepicker["endPlaceholder"];
+  /** The start date value. */
+  startDate?: SlDaterangepicker["startDate"];
+  /** The end date value. */
+  endDate?: SlDaterangepicker["endDate"];
+  /** Gets the validity state object */
+  validity?: SlDaterangepicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlDaterangepicker["validationMessage"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an alteration to the control's value is committed by the user. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the clear button is activated. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+};
+
 type SlDetailsProps = {
   /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
@@ -824,6 +886,41 @@ accessible way for users to dismiss the drawer. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type SlDatePanelProps = {
+  /**  */
+  open?: SlDatePanel["open"];
+  /**  */
+  value?: SlDatePanel["value"];
+  /**  */
+  type?: SlDatePanel["type"];
+  /**  */
+  min?: SlDatePanel["min"];
+  /**  */
+  max?: SlDatePanel["max"];
+  /**  */
+  format?: SlDatePanel["format"];
+  /**  */
+  calendar?: SlDatePanel["calendar"];
+  /**  */
+  yearColumn?: SlDatePanel["yearColumn"];
+  /**  */
+  monthColumn?: SlDatePanel["monthColumn"];
+  /**  */
+  hourColumn?: SlDatePanel["hourColumn"];
+  /**  */
+  minuteColumn?: SlDatePanel["minuteColumn"];
+  /**  */
+  secondColumn?: SlDatePanel["secondColumn"];
+  /**  */
+  "onsl-cancel"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onsl-clear"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onsl-confirm"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type SlDropdownProps = {
   /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
@@ -864,22 +961,6 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFloatButtonGroupProps = {
-  /** The shape applied to all child float buttons. */
-  shape?: SlFloatButtonGroup["shape"];
-  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
-  trigger?: SlFloatButtonGroup["trigger"];
-  /** Whether the menu is open (controlled mode, use with trigger). */
-  open?: SlFloatButtonGroup["open"];
-  /** The direction the menu items expand. */
-  placement?: SlFloatButtonGroup["placement"];
-
-  /** Emitted when the menu opens (menu mode only). */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the menu closes (menu mode only). */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlFloatButtonProps = {
   /** The button's type. */
   type?: SlFloatButton["type"];
@@ -892,117 +973,25 @@ type SlFloatButtonProps = {
   /** Tooltip text shown on hover. */
   tooltip?: SlFloatButton["tooltip"];
   /** Tooltip placement. */
-  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
-  /** Disables the button. */
-  disabled?: SlFloatButton["disabled"];
-  /** When set, the button will render as an anchor tag with this URL. */
-  href?: SlFloatButton["href"];
-  /** Where to display the linked URL (only used when href is set). */
-  target?: SlFloatButton["target"];
-
-  /** Emitted when the button is clicked. */
-  "onsl-click"?: (e: CustomEvent<never>) => void;
-};
-
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: SlFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: SlFormatBytes["display"];
-};
-
-type SlDaterangepickerProps = {
-  /** The name of the input, submitted as a name/value pair with form data. */
-  name?: SlDaterangepicker["name"];
-  /** The current value of the input, submitted as a name/value pair with form data. */
-  value?: SlDaterangepicker["value"];
-  /** The input's size. */
-  size?: SlDaterangepicker["size"];
-  /** Draws a filled input. */
-  filled?: SlDaterangepicker["filled"];
-  /** Draws a pill-style input with rounded edges. */
-  pill?: SlDaterangepicker["pill"];
-  /** The input's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlDaterangepicker["label"];
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlDaterangepicker["helpText"];
-  /** Adds a clear button when the input is not empty. */
-  clearable?: SlDaterangepicker["clearable"];
-  /** Disables the input. */
-  disabled?: SlDaterangepicker["disabled"];
-  /** Placeholder text for the two inputs. Accepts a string in the format "startPlaceholder,endPlaceholder"
-as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via JavaScript. */
-  placeholder?: SlDaterangepicker["placeholder"];
-  /** Makes the input readonly. */
-  readonly?: SlDaterangepicker["readonly"];
-  /** Makes the input a required field. */
-  required?: SlDaterangepicker["required"];
-  /**  */
-  type?: SlDaterangepicker["type"];
-  /** The minimum allowed date (in YYYY-MM-DD format). */
-  min?: SlDaterangepicker["min"];
-  /** The maximum allowed date (in YYYY-MM-DD format). */
-  max?: SlDaterangepicker["max"];
-  /** 日期格式化字符串，支持以下占位符（与 dayjs/Ant Design 一致）：
-- YYYY: 4位数年份
-- MM: 2位数月份
-- DD: 2位数日期
-- HH: 24小时制小时
-- mm: 分钟
-- ss: 秒
-- hh: 12小时制小时
-- A: AM/PM
-也支持传入数组，允许输入框接受多种格式。
-默认值：type='date' 时为 'YYYY-MM-DD'，type='datetime' 时为 'YYYY-MM-DD HH:mm:ss' */
-  format?: SlDaterangepicker["format"];
-  /**  */
-  startInput?: SlDaterangepicker["startInput"];
-  /**  */
-  endInput?: SlDaterangepicker["endInput"];
-  /**  */
-  popup?: SlDaterangepicker["popup"];
-  /**  */
-  inputContainer?: SlDaterangepicker["inputContainer"];
-  /**  */
-  calendars?: SlDaterangepicker["calendars"];
-  /**  */
-  yearColumn?: SlDaterangepicker["yearColumn"];
-  /**  */
-  monthColumn?: SlDaterangepicker["monthColumn"];
-  /**  */
-  hourColumn?: SlDaterangepicker["hourColumn"];
-  /**  */
-  minuteColumn?: SlDaterangepicker["minuteColumn"];
-  /**  */
-  secondColumn?: SlDaterangepicker["secondColumn"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: SlDaterangepicker["defaultValue"];
-  /**  */
-  startPlaceholder?: SlDaterangepicker["startPlaceholder"];
-  /**  */
-  endPlaceholder?: SlDaterangepicker["endPlaceholder"];
-  /** The start date value. */
-  startDate?: SlDaterangepicker["startDate"];
-  /** The end date value. */
-  endDate?: SlDaterangepicker["endDate"];
-  /** Gets the validity state object */
-  validity?: SlDaterangepicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlDaterangepicker["validationMessage"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when an alteration to the control's value is committed by the user. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the clear button is activated. */
-  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
+  /** Disables the button. */
+  disabled?: SlFloatButton["disabled"];
+  /** When set, the button will render as an anchor tag with this URL. */
+  href?: SlFloatButton["href"];
+  /** Where to display the linked URL (only used when href is set). */
+  target?: SlFloatButton["target"];
+
+  /** Emitted when the button is clicked. */
+  "onsl-click"?: (e: CustomEvent<never>) => void;
+};
+
+type SlFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: SlFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: SlFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: SlFormatBytes["display"];
 };
 
 type SlFormatDateProps = {
@@ -1034,6 +1023,22 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlFloatButtonGroupProps = {
+  /** The shape applied to all child float buttons. */
+  shape?: SlFloatButtonGroup["shape"];
+  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
+  trigger?: SlFloatButtonGroup["trigger"];
+  /** Whether the menu is open (controlled mode, use with trigger). */
+  open?: SlFloatButtonGroup["open"];
+  /** The direction the menu items expand. */
+  placement?: SlFloatButtonGroup["placement"];
+
+  /** Emitted when the menu opens (menu mode only). */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the menu closes (menu mode only). */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -1084,32 +1089,22 @@ that describes what the icon button does. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlImageComparerProps = {
-  /** The position of the divider as a percentage. */
-  position?: SlImageComparer["position"];
-  /**  */
-  base?: SlImageComparer["base"];
-  /**  */
-  handle?: SlImageComparer["handle"];
-  /** Emitted when the position changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-};
+type SlIconProps = {
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  name?: SlIcon["name"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: SlIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: SlIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: SlIcon["library"];
 
-type SlImagePreviewGroupProps = {
-  /** 预览配置，为 false 时禁用预览 */
-  preview?: SlImagePreviewGroup["preview"];
-  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
-  items?: SlImagePreviewGroup["items"];
-  /** 加载失败容错地址（组件级） */
-  fallback?: SlImagePreviewGroup["fallback"];
-  /**  */
-  previewOpen?: SlImagePreviewGroup["previewOpen"];
-  /** 预览打开时触发 */
-  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
-  /** 预览关闭时触发 */
-  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
-  /** 预览图片切换时触发，detail 包含 { current, prev } */
-  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
 type SlImageProps = {
@@ -1145,22 +1140,37 @@ type SlImageProps = {
   "onsl-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlIconProps = {
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  name?: SlIcon["name"];
-  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks. */
-  src?: SlIcon["src"];
-  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-ignored by assistive devices. */
-  label?: SlIcon["label"];
-  /** The name of a registered custom icon library. */
-  library?: SlIcon["library"];
+type SlIncludeProps = {
+  /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  src?: SlInclude["src"];
+  /** The fetch mode to use. */
+  mode?: SlInclude["mode"];
+  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  "allow-scripts"?: SlInclude["allowScripts"];
 
-  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  /** Emitted when the included file is loaded. */
   "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the included file fails to load due to an error. */
+  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
+};
+
+type SlImagePreviewGroupProps = {
+  /** 预览配置，为 false 时禁用预览 */
+  preview?: SlImagePreviewGroup["preview"];
+  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
+  items?: SlImagePreviewGroup["items"];
+  /** 加载失败容错地址（组件级） */
+  fallback?: SlImagePreviewGroup["fallback"];
+  /**  */
+  previewOpen?: SlImagePreviewGroup["previewOpen"];
+  /** 预览打开时触发 */
+  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
+  /** 预览关闭时触发 */
+  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
+  /** 预览图片切换时触发，detail 包含 { current, prev } */
+  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
 };
 
 type SlInputProps = {
@@ -1181,6 +1191,10 @@ to `text`. */
   filled?: SlInput["filled"];
   /** Draws a pill-style input with rounded edges. */
   pill?: SlInput["pill"];
+  /** The layout of the form control. `vertical` places the label above, `horizontal` places it to the left. */
+  layout?: SlInput["layout"];
+  /** The visual variant of the input. `outlined` shows a full border, `underlined` shows only a bottom border. */
+  variant?: SlInput["variant"];
   /** The input's label. If you need to display HTML, use the `label` slot instead. */
   label?: SlInput["label"];
   /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
@@ -1262,27 +1276,15 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlMenuProps = {
+type SlImageComparerProps = {
+  /** The position of the divider as a percentage. */
+  position?: SlImageComparer["position"];
   /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
-};
-
-type SlIncludeProps = {
-  /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
-code and can result in XSS attacks. */
-  src?: SlInclude["src"];
-  /** The fetch mode to use. */
-  mode?: SlInclude["mode"];
-  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
-code and can result in XSS attacks. */
-  "allow-scripts"?: SlInclude["allowScripts"];
-
-  /** Emitted when the included file is loaded. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the included file fails to load due to an error. */
-  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
+  base?: SlImageComparer["base"];
+  /**  */
+  handle?: SlImageComparer["handle"];
+  /** Emitted when the position changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
 };
 
 type SlMenuItemProps = {
@@ -1304,6 +1306,13 @@ type SlMenuItemProps = {
 
 type SlMenuLabelProps = {};
 
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+};
+
 type SlMutationObserverProps = {
   /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
 `attr="class id title"`. To watch all attributes, use `*`. */
@@ -1323,109 +1332,15 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
-type SlNavProps = {
-  /** Matches Antd's `mode` API. */
-  mode?: SlNav["mode"];
-  /** Matches Antd's `multiple` API. */
-  multiple?: SlNav["multiple"];
-  /** Matches Antd's `selectable` API. */
-  selectable?: SlNav["selectable"];
-  /** Matches Antd's `inlineCollapsed` API. */
-  "inline-collapsed"?: SlNav["inlineCollapsed"];
-  /** Matches Antd's `inlineIndent` API. */
-  "inline-indent"?: SlNav["inlineIndent"];
-  /** Matches Antd's `subMenuOpenDelay` API, in seconds. */
-  "sub-menu-open-delay"?: SlNav["subMenuOpenDelay"];
-  /** Matches Antd's `subMenuCloseDelay` API, in seconds. */
-  "sub-menu-close-delay"?: SlNav["subMenuCloseDelay"];
-  /** Matches Antd's `triggerSubMenuAction` API. */
-  "trigger-sub-menu-action"?: SlNav["triggerSubMenuAction"];
-  /** Matches Antd's `theme` API. Present for compatibility and future styling. */
-  theme?: SlNav["theme"];
-  /** Matches Antd's `forceSubMenuRender` API. */
-  "force-sub-menu-render"?: SlNav["forceSubMenuRender"];
-  /** Matches Antd's `disabledOverflow` API. Present for compatibility. */
-  "disabled-overflow"?: SlNav["disabledOverflow"];
-  /**  */
-  defaultSlot?: SlNav["defaultSlot"];
-  /** Matches Antd's `items` API. */
-  items?: SlNav["items"];
-  /** Matches Antd's `selectedKeys` API. */
-  selectedKeys?: SlNav["selectedKeys"];
-  /** Matches Antd's `defaultSelectedKeys` API. */
-  defaultSelectedKeys?: SlNav["defaultSelectedKeys"];
-  /** Matches Antd's `openKeys` API. */
-  openKeys?: SlNav["openKeys"];
-  /** Matches Antd's `defaultOpenKeys` API. */
-  defaultOpenKeys?: SlNav["defaultOpenKeys"];
-  /** Matches Antd's `expandIcon` API. */
-  expandIcon?: SlNav["expandIcon"];
-  /** Matches Antd's `overflowedIndicator` API. Present for compatibility. */
-  overflowedIndicator?: SlNav["overflowedIndicator"];
-  /** Matches Antd's `onClick` callback API. */
-  onClick?: SlNav["onClick"];
-  /** Matches Antd's `onSelect` callback API. */
-  onSelect?: SlNav["onSelect"];
-  /** Matches Antd's `onDeselect` callback API. */
-  onDeselect?: SlNav["onDeselect"];
-  /** Matches Antd's `onOpenChange` callback API. */
-  onOpenChange?: SlNav["onOpenChange"];
-  /** Emitted when the selected nav item changes. */
-  "onsl-change"?: (e: CustomEvent<{ item: SlNavItem | undefined; selectedKeys: string[] }>) => void;
-  /** Emitted when the open submenu keys change. */
-  "onsl-nav-open-change"?: (e: CustomEvent<{ openKeys: string[] }>) => void;
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
-};
-
-type SlNavGroupProps = {
-  /** Draws the nav group in an active (selected) state. */
-  active?: SlNavGroup["active"];
-  /** The mode of navigation. */
-  mode?: SlNavGroup["mode"];
-  /** Matches Antd's item group label. */
-  label?: SlNavGroup["label"];
-};
-
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
-
-React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
-  "item-key"?: SlNavItem["itemKey"];
-  /** Matches Antd's `danger` item flag. */
-  danger?: SlNavItem["danger"];
-  /** Tooltip text, primarily used when the menu is collapsed. */
-  title?: SlNavItem["title"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
-  /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavItem["collapsed"];
-  /** Shows a divider line above this nav item. */
-  divider?: SlNavItem["divider"];
-  /** Alternate label content when using Antd-style `items` configuration. */
-  label?: SlNavItem["label"];
-  /** Alternate icon content when using Antd-style `items` configuration. */
-  icon?: SlNavItem["icon"];
-  /** Extra content shown at the end of the item. */
-  extra?: SlNavItem["extra"];
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
-};
-
+type SlNavGroupProps = {
+  /** Draws the nav group in an active (selected) state. */
+  active?: SlNavGroup["active"];
+  /** The mode of navigation. */
+  mode?: SlNavGroup["mode"];
+  /** Matches Antd's item group label. */
+  label?: SlNavGroup["label"];
+};
+
 type SlNavSubmenuProps = {
   /** A stable key used by `sl-nav` to track open state. */
   key?: SlNavSubmenu["key"];
@@ -1477,6 +1392,45 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlNavItemProps = {
+  /** A stable key used by `sl-nav` to track selection. */
+  key?: SlNavItem["key"];
+  /** React-safe alias for `key`.
+
+React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
+  "item-key"?: SlNavItem["itemKey"];
+  /** Matches Antd's `danger` item flag. */
+  danger?: SlNavItem["danger"];
+  /** Tooltip text, primarily used when the menu is collapsed. */
+  title?: SlNavItem["title"];
+  /** Draws the nav item in a disabled state. */
+  disabled?: SlNavItem["disabled"];
+  /** Draws the nav item in an active (selected) state. */
+  active?: SlNavItem["active"];
+  /** The URL to link to. If set, the nav item will render as an anchor tag. */
+  href?: SlNavItem["href"];
+  /** The target attribute for the anchor tag. */
+  target?: SlNavItem["target"];
+  /** The download attribute for the anchor tag. */
+  download?: SlNavItem["download"];
+  /** The rel attribute for the anchor tag. */
+  rel?: SlNavItem["rel"];
+  /** The mode of navigation. */
+  mode?: SlNavItem["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavItem["collapsed"];
+  /** Shows a divider line above this nav item. */
+  divider?: SlNavItem["divider"];
+  /** Alternate label content when using Antd-style `items` configuration. */
+  label?: SlNavItem["label"];
+  /** Alternate icon content when using Antd-style `items` configuration. */
+  icon?: SlNavItem["icon"];
+  /** Extra content shown at the end of the item. */
+  extra?: SlNavItem["extra"];
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+};
+
 type SlNotificationProps = {
   /** Indicates whether or not the notification is open. */
   open?: SlNotification["open"];
@@ -1527,6 +1481,61 @@ multiple values. */
   hasHover?: SlOption["hasHover"];
 };
 
+type SlNavProps = {
+  /** Matches Antd's `mode` API. */
+  mode?: SlNav["mode"];
+  /** Matches Antd's `multiple` API. */
+  multiple?: SlNav["multiple"];
+  /** Matches Antd's `selectable` API. */
+  selectable?: SlNav["selectable"];
+  /** Matches Antd's `inlineCollapsed` API. */
+  "inline-collapsed"?: SlNav["inlineCollapsed"];
+  /** Matches Antd's `inlineIndent` API. */
+  "inline-indent"?: SlNav["inlineIndent"];
+  /** Matches Antd's `subMenuOpenDelay` API, in seconds. */
+  "sub-menu-open-delay"?: SlNav["subMenuOpenDelay"];
+  /** Matches Antd's `subMenuCloseDelay` API, in seconds. */
+  "sub-menu-close-delay"?: SlNav["subMenuCloseDelay"];
+  /** Matches Antd's `triggerSubMenuAction` API. */
+  "trigger-sub-menu-action"?: SlNav["triggerSubMenuAction"];
+  /** Matches Antd's `theme` API. Present for compatibility and future styling. */
+  theme?: SlNav["theme"];
+  /** Matches Antd's `forceSubMenuRender` API. */
+  "force-sub-menu-render"?: SlNav["forceSubMenuRender"];
+  /** Matches Antd's `disabledOverflow` API. Present for compatibility. */
+  "disabled-overflow"?: SlNav["disabledOverflow"];
+  /**  */
+  defaultSlot?: SlNav["defaultSlot"];
+  /** Matches Antd's `items` API. */
+  items?: SlNav["items"];
+  /** Matches Antd's `selectedKeys` API. */
+  selectedKeys?: SlNav["selectedKeys"];
+  /** Matches Antd's `defaultSelectedKeys` API. */
+  defaultSelectedKeys?: SlNav["defaultSelectedKeys"];
+  /** Matches Antd's `openKeys` API. */
+  openKeys?: SlNav["openKeys"];
+  /** Matches Antd's `defaultOpenKeys` API. */
+  defaultOpenKeys?: SlNav["defaultOpenKeys"];
+  /** Matches Antd's `expandIcon` API. */
+  expandIcon?: SlNav["expandIcon"];
+  /** Matches Antd's `overflowedIndicator` API. Present for compatibility. */
+  overflowedIndicator?: SlNav["overflowedIndicator"];
+  /** Matches Antd's `onClick` callback API. */
+  onClick?: SlNav["onClick"];
+  /** Matches Antd's `onSelect` callback API. */
+  onSelect?: SlNav["onSelect"];
+  /** Matches Antd's `onDeselect` callback API. */
+  onDeselect?: SlNav["onDeselect"];
+  /** Matches Antd's `onOpenChange` callback API. */
+  onOpenChange?: SlNav["onOpenChange"];
+  /** Emitted when the selected nav item changes. */
+  "onsl-change"?: (e: CustomEvent<{ item: SlNavItem | undefined; selectedKeys: string[] }>) => void;
+  /** Emitted when the open submenu keys change. */
+  "onsl-nav-open-change"?: (e: CustomEvent<{ openKeys: string[] }>) => void;
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
+};
+
 type SlPaginationProps = {
   /**  */
   currentPage?: SlPagination["currentPage"];
@@ -1634,15 +1643,6 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1678,6 +1678,28 @@ attribute can typically be omitted. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRadioButtonProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadioButton["value"];
+  /** Disables the radio button. */
+  disabled?: SlRadioButton["disabled"];
+  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+this attribute can typically be omitted. */
+  size?: SlRadioButton["size"];
+  /** Draws a pill-style radio button with rounded edges. */
+  pill?: SlRadioButton["pill"];
+  /**  */
+  input?: SlRadioButton["input"];
+  /**  */
+  hiddenInput?: SlRadioButton["hiddenInput"];
+  /** Emitted when the button loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the button gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
+type SlPopconfirmProps = {};
+
 type SlRadioGroupProps = {
   /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
 instead. */
@@ -1716,6 +1738,15 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
+};
+
 type SlRangeProps = {
   /**  */
   title?: SlRange["title"];
@@ -1766,6 +1797,20 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRelativeTimeProps = {
+  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
+string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
+a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
+  date?: SlRelativeTime["date"];
+  /** The formatting style to use. */
+  format?: SlRelativeTime["format"];
+  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
+"1 day ago" and "in 1 day" will be shown. */
+  numeric?: SlRelativeTime["numeric"];
+  /** Keep the displayed value up to date as time passes. */
+  sync?: SlRelativeTime["sync"];
+};
+
 type SlRatingProps = {
   /** A label that describes the rating to assistive devices. */
   label?: SlRating["label"];
@@ -1792,26 +1837,6 @@ well with `<sl-icon>` elements. */
   "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
 };
 
-type SlRadioButtonProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
-  /**  */
-  input?: SlRadioButton["input"];
-  /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlResizeObserverProps = {
   /** Disables the observer. */
   disabled?: SlResizeObserver["disabled"];
@@ -1820,31 +1845,6 @@ type SlResizeObserverProps = {
   "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
-type SlRelativeTimeProps = {
-  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
-string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
-a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
-  date?: SlRelativeTime["date"];
-  /** The formatting style to use. */
-  format?: SlRelativeTime["format"];
-  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
-"1 day ago" and "in 1 day" will be shown. */
-  numeric?: SlRelativeTime["numeric"];
-  /** Keep the displayed value up to date as time passes. */
-  sync?: SlRelativeTime["sync"];
-};
-
-type SlRowProps = {
-  /** Spacing between columns, can be a number or responsive object */
-  gutter?: SlRow["gutter"];
-  /** Vertical alignment of columns */
-  align?: SlRow["align"];
-  /** Horizontal arrangement of columns */
-  justify?: SlRow["justify"];
-  /** Whether to wrap columns */
-  wrap?: SlRow["wrap"];
-};
-
 type SlScreenProps = {
   /** The options for the GridStack instance. */
   options?: SlScreen["options"];
@@ -1883,6 +1883,17 @@ type SlSegmentedProps = {
   onChange?: SlSegmented["onChange"];
 };
 
+type SlRowProps = {
+  /** Spacing between columns, can be a number or responsive object */
+  gutter?: SlRow["gutter"];
+  /** Vertical alignment of columns */
+  align?: SlRow["align"];
+  /** Horizontal arrangement of columns */
+  justify?: SlRow["justify"];
+  /** Whether to wrap columns */
+  wrap?: SlRow["wrap"];
+};
+
 type SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -2056,52 +2067,27 @@ type SlSenderSwitchProps = {
   /** Emitted when the switch's checked state changes. Read `el.checked` for the new state. */
   "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
-
-type SlSkeletonProps = {
-  /** Determines which effect the skeleton will use. */
-  effect?: SlSkeleton["effect"];
-};
-
-type SlSpaceProps = {
-  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
-  orientation?: SlSpace["orientation"];
-  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
-  size?: SlSpace["size"];
-  /** 对齐方式 */
-  align?: SlSpace["align"];
-  /** 是否自动换行，仅在 horizontal 方向时有效 */
-  wrap?: SlSpace["wrap"];
-  /** 分隔符内容 */
-  separator?: SlSpace["separator"];
-};
-
-type SlSpinnerProps = {};
-
-type SlSplitPanelProps = {
-  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
-container's initial size. */
-  position?: SlSplitPanel["position"];
-  /** The current position of the divider from the primary panel's edge in pixels. */
-  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
-  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
-  vertical?: SlSplitPanel["vertical"];
-  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
-  disabled?: SlSplitPanel["disabled"];
-  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
-primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
-host element is resized. */
-  primary?: SlSplitPanel["primary"];
-  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
-or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
-  snap?: SlSplitPanel["snap"];
-  /** How close the divider must be to a snap point until snapping occurs. */
-  "snap-threshold"?: SlSplitPanel["snapThreshold"];
-  /**  */
-  divider?: SlSplitPanel["divider"];
-  /** Emitted when the divider's position changes. */
-  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+
+type SlSkeletonProps = {
+  /** Determines which effect the skeleton will use. */
+  effect?: SlSkeleton["effect"];
+};
+
+type SlSpaceProps = {
+  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
+  orientation?: SlSpace["orientation"];
+  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
+  size?: SlSpace["size"];
+  /** 对齐方式 */
+  align?: SlSpace["align"];
+  /** 是否自动换行，仅在 horizontal 方向时有效 */
+  wrap?: SlSpace["wrap"];
+  /** 分隔符内容 */
+  separator?: SlSpace["separator"];
 };
 
+type SlSpinnerProps = {};
+
 type SlStepsProps = {
   /** 步骤条数据 */
   items?: SlSteps["items"];
@@ -2185,6 +2171,31 @@ type SlTabProps = {
   "onsl-close"?: (e: CustomEvent<never>) => void;
 };
 
+type SlSplitPanelProps = {
+  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+container's initial size. */
+  position?: SlSplitPanel["position"];
+  /** The current position of the divider from the primary panel's edge in pixels. */
+  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  vertical?: SlSplitPanel["vertical"];
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  disabled?: SlSplitPanel["disabled"];
+  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+host element is resized. */
+  primary?: SlSplitPanel["primary"];
+  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
+or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
+  snap?: SlSplitPanel["snap"];
+  /** How close the divider must be to a snap point until snapping occurs. */
+  "snap-threshold"?: SlSplitPanel["snapThreshold"];
+  /**  */
+  divider?: SlSplitPanel["divider"];
+  /** Emitted when the divider's position changes. */
+  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -2209,13 +2220,6 @@ manual, the tab will receive focus but will not show until the user presses spac
   "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
 };
 
-type SlTabPanelProps = {
-  /** The tab panel's name. */
-  name?: SlTabPanel["name"];
-  /** When true, the tab panel will be shown. */
-  active?: SlTabPanel["active"];
-};
-
 type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -2299,6 +2303,13 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SlTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: SlTabPanel["active"];
+};
+
 type SlTagProps = {
   /** The tag's theme variant. */
   variant?: SlTag["variant"];
@@ -2579,6 +2590,8 @@ type SlTransferProps = {
   "selected-keys"?: SlTransfer["selectedKeys"];
   /** 自定义渲染每个列表项的内容，返回 TemplateResult 或字符串 */
   itemRender?: SlTransfer["itemRender"];
+  /** 自定义搜索过滤逻辑，返回 true 表示该项匹配 */
+  filterOption?: SlTransfer["filterOption"];
   /** 当数据穿梭完成时触发，返回目标键、方向和移动的键。 */
   "onsl-transfer-change"?: (e: CustomEvent<never>) => void;
   /** 当选中项变化时触发。 */
@@ -2605,44 +2618,113 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
   "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
 };
 
-type SlTreeItemProps = {
-  /** Expands the tree item. */
-  expanded?: SlTreeItem["expanded"];
-  /** Draws the tree item in a selected state. */
-  selected?: SlTreeItem["selected"];
-  /** Disables the tree item. */
-  disabled?: SlTreeItem["disabled"];
-  /** Enables lazy loading behavior. */
-  lazy?: SlTreeItem["lazy"];
-  /**  */
-  indeterminate?: SlTreeItem["indeterminate"];
-  /**  */
-  isLeaf?: SlTreeItem["isLeaf"];
-  /**  */
-  loading?: SlTreeItem["loading"];
+type SlTreeSelectProps = {
+  /** The name of the control, submitted as a name/value pair with form data. */
+  name?: SlTreeSelect["name"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: SlTreeSelect["defaultValue"];
+  /** The select's size. */
+  size?: SlTreeSelect["size"];
+  /** Placeholder text to show as a hint when the select is empty. */
+  placeholder?: SlTreeSelect["placeholder"];
+  /** Allows more than one node to be selected. Renders checkboxes in the tree. */
+  multiple?: SlTreeSelect["multiple"];
+  /** The maximum number of selected options to show when `multiple` is true.
+After the maximum, "+n" will be shown. Set to 0 to remove the limit. */
+  "max-options-visible"?: SlTreeSelect["maxOptionsVisible"];
+  /** Disables the control. */
+  disabled?: SlTreeSelect["disabled"];
+  /** Adds a clear button when the input is not empty. */
+  clearable?: SlTreeSelect["clearable"];
+  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown,
+or you can use the `show()` and `hide()` methods. */
+  open?: SlTreeSelect["open"];
+  /** Enable the use of `hoist` to position the dropdown panel using a fixed strategy,
+allowing it to break out of containers that have `overflow: hidden`. */
+  hoist?: SlTreeSelect["hoist"];
+  /** Draws a filled select. */
+  filled?: SlTreeSelect["filled"];
+  /** Draws a pill-style select with rounded edges. */
+  pill?: SlTreeSelect["pill"];
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlTreeSelect["label"];
+  /** The layout of the form control. `vertical` places the label above, `horizontal` places it to the left. */
+  layout?: SlTreeSelect["layout"];
+  /** The visual variant of the input. `outlined` shows a full border, `underlined` shows only a bottom border. */
+  variant?: SlTreeSelect["variant"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary
+to keep the panel inside of the viewport. */
+  placement?: SlTreeSelect["placement"];
+  /** The input's help text. */
+  "help-text"?: SlTreeSelect["helpText"];
+  /** The input's required attribute. */
+  required?: SlTreeSelect["required"];
+  /** The associated form element. */
+  form?: SlTreeSelect["form"];
+  /** Whether to enable search in the combobox input. Can be a boolean or a config object.
+When `true`, enables search with default settings.
+When an object, enables search with the specified configuration:
+- `autoClearSearchValue`: auto clear search after selection (default: true)
+- `filterTreeNode`: filter function or boolean (default: true)
+- `searchValue`: controlled search value
+- `treeNodeFilterProp`: which node property to filter on (default: 'value') */
+  "show-search"?: SlTreeSelect["showSearch"];
+  /** Whether parent nodes are selectable when `multiple` is false. Defaults to true. */
+  "tree-default-expand-all"?: SlTreeSelect["treeDefaultExpandAll"];
+  /** Whether to check children when parent is checked (only for multiple mode). */
+  "tree-checkable"?: SlTreeSelect["treeCheckable"];
+  /** Strategy for showing checked nodes: 'all' | 'parent' | 'child'. Defaults to 'all'. */
+  "show-checked-strategy"?: SlTreeSelect["showCheckedStrategy"];
+  /** Whether to show connecting lines between parent nodes in the tree. Leaf nodes are excluded. */
+  "tree-line"?: SlTreeSelect["treeLine"];
+  /** A function that generates a custom tag for each selected option in multiple mode.
+The function receives the node data and index, and should return a TemplateResult, string, or HTMLElement. */
+  getTag?: SlTreeSelect["getTag"];
   /**  */
-  selectable?: SlTreeItem["selectable"];
+  popup?: SlTreeSelect["popup"];
   /**  */
-  defaultSlot?: SlTreeItem["defaultSlot"];
+  combobox?: SlTreeSelect["combobox"];
   /**  */
-  childrenSlot?: SlTreeItem["childrenSlot"];
+  displayInput?: SlTreeSelect["displayInput"];
   /**  */
-  itemElement?: SlTreeItem["itemElement"];
+  valueInput?: SlTreeSelect["valueInput"];
   /**  */
-  childrenContainer?: SlTreeItem["childrenContainer"];
+  dropdown?: SlTreeSelect["dropdown"];
   /**  */
-  expandButtonSlot?: SlTreeItem["expandButtonSlot"];
-  /** Emitted when the tree item expands. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tree item expands and all animations are complete. */
-  "onsl-after-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tree item collapses. */
-  "onsl-collapse"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tree item collapses and all animations are complete. */
-  "onsl-after-collapse"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tree item's lazy state changes. */
-  "onsl-lazy-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree. */
+  displayLabel?: SlTreeSelect["displayLabel"];
+  /** The current value. When `multiple` is enabled, the value will be an array of strings.
+Values must not contain spaces when using multiple mode. */
+  value?: SlTreeSelect["value"];
+  /** Tree data. An array of `TreeSelectNodeData` objects describing the tree structure.
+Each node has `title`, `value`, and optionally `children`, `disabled`, `selectable`, `checkable`, `isLeaf`. */
+  treeData?: SlTreeSelect["treeData"];
+  /** Gets the validity state object */
+  validity?: SlTreeSelect["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlTreeSelect["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value is cleared. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the search value changes. */
+  "onsl-search"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy node is expanded and its children need to be loaded. */
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
@@ -2704,120 +2786,53 @@ type SlUploadProps = {
   /** 文件被移除时触发。调用 `event.preventDefault()` 可取消移除。`event.detail` 包含 `{ file }`。 */
   "onsl-remove"?: (e: CustomEvent<never>) => void;
   /** 请求预览文件时触发。`event.detail` 包含 `{ file }`。 */
-  "onsl-preview"?: (e: CustomEvent<never>) => void;
-  /** 请求下载文件时触发。调用 `event.preventDefault()` 可阻止默认打开 URL 行为。`event.detail` 包含 `{ file }`。 */
-  "onsl-download"?: (e: CustomEvent<never>) => void;
-  /** 拖放模式下放置文件时触发。`event.detail` 包含 `{ event }`，其中 `event` 是原生 `DragEvent`。 */
-  "onsl-drop"?: (e: CustomEvent<never>) => void;
-  /** 文件数量超过 maxCount 时触发。`event.detail` 包含 `{ files, maxCount }`。 */
-  "onsl-exceed"?: (e: CustomEvent<never>) => void;
-};
-
-type SlVisuallyHiddenProps = {};
-
-type SlTreeSelectProps = {
-  /** The name of the control, submitted as a name/value pair with form data. */
-  name?: SlTreeSelect["name"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  value?: SlTreeSelect["defaultValue"];
-  /** The select's size. */
-  size?: SlTreeSelect["size"];
-  /** Placeholder text to show as a hint when the select is empty. */
-  placeholder?: SlTreeSelect["placeholder"];
-  /** Allows more than one node to be selected. Renders checkboxes in the tree. */
-  multiple?: SlTreeSelect["multiple"];
-  /** The maximum number of selected options to show when `multiple` is true.
-After the maximum, "+n" will be shown. Set to 0 to remove the limit. */
-  "max-options-visible"?: SlTreeSelect["maxOptionsVisible"];
-  /** Disables the control. */
-  disabled?: SlTreeSelect["disabled"];
-  /** Adds a clear button when the input is not empty. */
-  clearable?: SlTreeSelect["clearable"];
-  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown,
-or you can use the `show()` and `hide()` methods. */
-  open?: SlTreeSelect["open"];
-  /** Enable the use of `hoist` to position the dropdown panel using a fixed strategy,
-allowing it to break out of containers that have `overflow: hidden`. */
-  hoist?: SlTreeSelect["hoist"];
-  /** Draws a filled select. */
-  filled?: SlTreeSelect["filled"];
-  /** Draws a pill-style select with rounded edges. */
-  pill?: SlTreeSelect["pill"];
-  /** The input's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlTreeSelect["label"];
-  /** The preferred placement of the dropdown panel. Note that the actual placement may vary
-to keep the panel inside of the viewport. */
-  placement?: SlTreeSelect["placement"];
-  /** The input's help text. */
-  "help-text"?: SlTreeSelect["helpText"];
-  /** The input's required attribute. */
-  required?: SlTreeSelect["required"];
-  /** The associated form element. */
-  form?: SlTreeSelect["form"];
-  /** Whether to enable search in the combobox input. Can be a boolean or a config object.
-When `true`, enables search with default settings.
-When an object, enables search with the specified configuration:
-- `autoClearSearchValue`: auto clear search after selection (default: true)
-- `filterTreeNode`: filter function or boolean (default: true)
-- `searchValue`: controlled search value
-- `treeNodeFilterProp`: which node property to filter on (default: 'value') */
-  "show-search"?: SlTreeSelect["showSearch"];
-  /** Whether parent nodes are selectable when `multiple` is false. Defaults to true. */
-  "tree-default-expand-all"?: SlTreeSelect["treeDefaultExpandAll"];
-  /** Whether to check children when parent is checked (only for multiple mode). */
-  "tree-checkable"?: SlTreeSelect["treeCheckable"];
-  /** Strategy for showing checked nodes: 'all' | 'parent' | 'child'. Defaults to 'all'. */
-  "show-checked-strategy"?: SlTreeSelect["showCheckedStrategy"];
-  /** Whether to show connecting lines between parent nodes in the tree. Leaf nodes are excluded. */
-  "tree-line"?: SlTreeSelect["treeLine"];
-  /** A function that generates a custom tag for each selected option in multiple mode.
-The function receives the node data and index, and should return a TemplateResult, string, or HTMLElement. */
-  getTag?: SlTreeSelect["getTag"];
+  "onsl-preview"?: (e: CustomEvent<never>) => void;
+  /** 请求下载文件时触发。调用 `event.preventDefault()` 可阻止默认打开 URL 行为。`event.detail` 包含 `{ file }`。 */
+  "onsl-download"?: (e: CustomEvent<never>) => void;
+  /** 拖放模式下放置文件时触发。`event.detail` 包含 `{ event }`，其中 `event` 是原生 `DragEvent`。 */
+  "onsl-drop"?: (e: CustomEvent<never>) => void;
+  /** 文件数量超过 maxCount 时触发。`event.detail` 包含 `{ files, maxCount }`。 */
+  "onsl-exceed"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTreeItemProps = {
+  /** Expands the tree item. */
+  expanded?: SlTreeItem["expanded"];
+  /** Draws the tree item in a selected state. */
+  selected?: SlTreeItem["selected"];
+  /** Disables the tree item. */
+  disabled?: SlTreeItem["disabled"];
+  /** Enables lazy loading behavior. */
+  lazy?: SlTreeItem["lazy"];
   /**  */
-  popup?: SlTreeSelect["popup"];
+  indeterminate?: SlTreeItem["indeterminate"];
   /**  */
-  combobox?: SlTreeSelect["combobox"];
+  isLeaf?: SlTreeItem["isLeaf"];
   /**  */
-  displayInput?: SlTreeSelect["displayInput"];
+  loading?: SlTreeItem["loading"];
   /**  */
-  valueInput?: SlTreeSelect["valueInput"];
+  selectable?: SlTreeItem["selectable"];
   /**  */
-  dropdown?: SlTreeSelect["dropdown"];
+  defaultSlot?: SlTreeItem["defaultSlot"];
   /**  */
-  displayLabel?: SlTreeSelect["displayLabel"];
-  /** The current value. When `multiple` is enabled, the value will be an array of strings.
-Values must not contain spaces when using multiple mode. */
-  value?: SlTreeSelect["value"];
-  /** Tree data. An array of `TreeSelectNodeData` objects describing the tree structure.
-Each node has `title`, `value`, and optionally `children`, `disabled`, `selectable`, `checkable`, `isLeaf`. */
-  treeData?: SlTreeSelect["treeData"];
-  /** Gets the validity state object */
-  validity?: SlTreeSelect["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlTreeSelect["validationMessage"];
-  /** Emitted when the control's value changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control's value is cleared. */
-  "onsl-clear"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the search value changes. */
-  "onsl-search"?: (e: CustomEvent<never>) => void;
-  /** Emitted when a lazy node is expanded and its children need to be loaded. */
+  childrenSlot?: SlTreeItem["childrenSlot"];
+  /**  */
+  itemElement?: SlTreeItem["itemElement"];
+  /**  */
+  childrenContainer?: SlTreeItem["childrenContainer"];
+  /**  */
+  expandButtonSlot?: SlTreeItem["expandButtonSlot"];
+  /** Emitted when the tree item expands. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tree item expands and all animations are complete. */
+  "onsl-after-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tree item collapses. */
+  "onsl-collapse"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tree item collapses and all animations are complete. */
+  "onsl-after-collapse"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tree item's lazy state changes. */
+  "onsl-lazy-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree. */
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
@@ -2840,6 +2855,8 @@ type SlXMarkdownProps = {
   streaming?: SlXMarkdown["streaming"];
 };
 
+type SlVisuallyHiddenProps = {};
+
 export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
@@ -2914,31 +2931,39 @@ export type CustomElements = {
   "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -2961,26 +2986,31 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
    *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
+
+  /**
+   * Button groups can be used to group related buttons into sections.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -3016,19 +3046,6 @@ export type CustomElements = {
    */
   "sl-button": DefineComponent<SlButtonProps>;
 
-  /**
-   * Button groups can be used to group related buttons into sections.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
-
   /**
    * 日历组件，用于按日历形式展示数据，支持全屏和卡片模式
    * ---
@@ -3121,6 +3138,19 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel item's content..
+   *
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   */
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+
   /**
    * Cascader is a cascade selection component that allows users to select from a set of hierarchical options.
    * ---
@@ -3165,66 +3195,17 @@ export type CustomElements = {
   "sl-cascader": DefineComponent<SlCascaderProps>;
 
   /**
-   * Color pickers allow the user to select a color.
+   * Col component for grid layout system.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the color picker loses focus.
-   * - **sl-change** - Emitted when the color picker's value changes.
-   * - **sl-focus** - Emitted when the color picker receives focus.
-   * - **sl-input** - Emitted when the color picker receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the color picker.
-   * - **blur()** - Removes focus from the color picker.
-   * - **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   *
    * ### **Slots:**
-   *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
-   *
-   * ### **CSS Properties:**
-   *  - **--grid-width** - The width of the color grid. _(default: undefined)_
-   * - **--grid-height** - The height of the color grid. _(default: undefined)_
-   * - **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_
-   * - **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_
-   * - **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_
-   * - **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_
+   *  - _default_ - The default slot for content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **trigger** - The color picker's dropdown trigger.
-   * - **swatches** - The container that holds the swatches.
-   * - **swatch** - Each individual swatch.
-   * - **grid** - The color grid.
-   * - **grid-handle** - The color grid's handle.
-   * - **slider** - Hue and opacity sliders.
-   * - **slider-handle** - Hue and opacity slider handles.
-   * - **hue-slider** - The hue slider.
-   * - **hue-slider-handle** - The hue slider's handle.
-   * - **opacity-slider** - The opacity slider.
-   * - **opacity-slider-handle** - The opacity slider's handle.
-   * - **preview** - The preview color.
-   * - **input** - The text input.
-   * - **eye-dropper-button** - The eye dropper button.
-   * - **eye-dropper-button__base** - The eye dropper button's exported `button` part.
-   * - **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.
-   * - **eye-dropper-button__label** - The eye dropper button's exported `label` part.
-   * - **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.
-   * - **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.
-   * - **format-button** - The format button.
-   * - **format-button__base** - The format button's exported `button` part.
-   * - **format-button__prefix** - The format button's exported `prefix` part.
-   * - **format-button__label** - The format button's exported `label` part.
-   * - **format-button__suffix** - The format button's exported `suffix` part.
-   * - **format-button__caret** - The format button's exported `caret` part.
    */
-  "sl-color-picker": DefineComponent<SlColorPickerProps>;
+  "sl-col": DefineComponent<SlColProps>;
 
   /**
    * Checkboxes allow the user to toggle an option on or off.
@@ -3254,15 +3235,77 @@ export type CustomElements = {
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
+
+  /**
+   * Color pickers allow the user to select a color.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the color picker loses focus.
+   * - **sl-change** - Emitted when the color picker's value changes.
+   * - **sl-focus** - Emitted when the color picker receives focus.
+   * - **sl-input** - Emitted when the color picker receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the color picker.
+   * - **blur()** - Removes focus from the color picker.
+   * - **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   *
+   * ### **Slots:**
+   *  - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.
+   *
+   * ### **CSS Properties:**
+   *  - **--grid-width** - The width of the color grid. _(default: undefined)_
+   * - **--grid-height** - The height of the color grid. _(default: undefined)_
+   * - **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_
+   * - **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_
+   * - **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_
+   * - **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **trigger** - The color picker's dropdown trigger.
+   * - **swatches** - The container that holds the swatches.
+   * - **swatch** - Each individual swatch.
+   * - **grid** - The color grid.
+   * - **grid-handle** - The color grid's handle.
+   * - **slider** - Hue and opacity sliders.
+   * - **slider-handle** - Hue and opacity slider handles.
+   * - **hue-slider** - The hue slider.
+   * - **hue-slider-handle** - The hue slider's handle.
+   * - **opacity-slider** - The opacity slider.
+   * - **opacity-slider-handle** - The opacity slider's handle.
+   * - **preview** - The preview color.
+   * - **input** - The text input.
+   * - **eye-dropper-button** - The eye dropper button.
+   * - **eye-dropper-button__base** - The eye dropper button's exported `button` part.
+   * - **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.
+   * - **eye-dropper-button__label** - The eye dropper button's exported `label` part.
+   * - **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.
+   * - **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.
+   * - **format-button** - The format button.
+   * - **format-button__base** - The format button's exported `button` part.
+   * - **format-button__prefix** - The format button's exported `prefix` part.
+   * - **format-button__label** - The format button's exported `label` part.
+   * - **format-button__suffix** - The format button's exported `suffix` part.
+   * - **format-button__caret** - The format button's exported `caret` part.
    */
-  "sl-checkbox": DefineComponent<SlCheckboxProps>;
+  "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
@@ -3295,46 +3338,22 @@ export type CustomElements = {
   "sl-copy-button": DefineComponent<SlCopyButtonProps>;
 
   /**
-   * Col component for grid layout system.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot for content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-col": DefineComponent<SlColProps>;
-
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
-  /**
-   *
+   * Datepickers allow users to select a date using a calendar interface.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-cancel**
-   * - **sl-clear**
-   * - **sl-confirm**
-   * - **sl-date-change**
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **sl-clear** - Emitted when the clear button is activated.
    */
-  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+  "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
   /**
-   * Datepickers allow users to select a date using a calendar interface.
+   * Date range inputs allow users to select a range of dates.
    * ---
    *
    *
@@ -3345,8 +3364,34 @@ export type CustomElements = {
    * - **sl-input** - Emitted when the control receives input.
    * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    * - **sl-clear** - Emitted when the clear button is activated.
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
+   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
+   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
+   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
+   * - **focus(options: _FocusOptions_)** - 聚焦到开始日期输入框并打开面板
+   * - **blur()** - 移除焦点并关闭面板
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The input's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **base** - The component's base wrapper.
+   * - **start-input** - The internal `<input>` for the start date.
+   * - **end-input** - The internal `<input>` for the end date.
+   * - **separator** - The separator between the two inputs.
+   * - **suffix** - The container that wraps the suffix icon.
+   * - **clear-button** - The clear button.
+   * - **popup** - The popup that contains the calendars.
+   * - **calendars** - The container that wraps the calendars.
    */
-  "sl-datepicker": DefineComponent<SlDatepickerProps>;
+  "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
 
   /**
    * Details show a brief summary and expand to show additional content.
@@ -3476,6 +3521,19 @@ export type CustomElements = {
    */
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel**
+   * - **sl-clear**
+   * - **sl-confirm**
+   * - **sl-date-change**
+   */
+  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+
   /**
    * Dropdowns expose additional content that "drops down" in a panel.
    * ---
@@ -3505,28 +3563,6 @@ export type CustomElements = {
    */
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
-  /**
-   * Groups multiple float buttons together, with optional menu trigger.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the menu opens (menu mode only).
-   * - **sl-hide** - Emitted when the menu closes (menu mode only).
-   *
-   * ### **Slots:**
-   *  - _default_ - The float buttons to display.
-   * - **trigger-icon** - Custom icon for the trigger button.
-   * - **close-icon** - Custom icon shown when the menu is open.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The group's base wrapper.
-   * - **list** - The container for the float button items.
-   * - **trigger** - The trigger button (menu mode only).
-   * - **trigger-icon** - The trigger button's icon.
-   */
-  "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
-
   /**
    * A floating action button that stays fixed on the page.
    * ---
@@ -3554,52 +3590,33 @@ export type CustomElements = {
   "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
-   * Date range inputs allow users to select a range of dates.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
+   */
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
+
+  /**
+   * Groups multiple float buttons together, with optional menu trigger.
+   * ---
    *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   * - **sl-clear** - Emitted when the clear button is activated.
    *
-   * ### **Methods:**
-   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
-   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
-   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
-   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
-   * - **focus(options: _FocusOptions_)** - 聚焦到开始日期输入框并打开面板
-   * - **blur()** - 移除焦点并关闭面板
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the menu opens (menu mode only).
+   * - **sl-hide** - Emitted when the menu closes (menu mode only).
    *
    * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   *  - _default_ - The float buttons to display.
+   * - **trigger-icon** - Custom icon for the trigger button.
+   * - **close-icon** - Custom icon shown when the menu is open.
    *
    * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The input's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **base** - The component's base wrapper.
-   * - **start-input** - The internal `<input>` for the start date.
-   * - **end-input** - The internal `<input>` for the end date.
-   * - **separator** - The separator between the two inputs.
-   * - **suffix** - The container that wraps the suffix icon.
-   * - **clear-button** - The clear button.
-   * - **popup** - The popup that contains the calendars.
-   * - **calendars** - The container that wraps the calendars.
-   */
-  "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
-
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
+   *  - **base** - The group's base wrapper.
+   * - **list** - The container for the float button items.
+   * - **trigger** - The trigger button (menu mode only).
+   * - **trigger-icon** - The trigger button's icon.
    */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
+  "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
   /**
    * Formats a number using the specified locale and options.
@@ -3628,53 +3645,19 @@ export type CustomElements = {
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
   /**
-   * Compare visual differences between similar photos with a sliding panel.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the position changes.
-   *
-   * ### **Slots:**
-   *  - **before** - The before image, an `<img>` or `<svg>` element.
-   * - **after** - The after image, an `<img>` or `<svg>` element.
-   * - **handle** - The icon used inside the handle.
-   *
-   * ### **CSS Properties:**
-   *  - **--divider-width** - The width of the dividing line. _(default: undefined)_
-   * - **--handle-size** - The size of the compare handle. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **before** - The container that wraps the before image.
-   * - **after** - The container that wraps the after image.
-   * - **divider** - The divider that separates the images.
-   * - **handle** - The handle that the user drags to expose the after image.
-   */
-  "sl-image-comparer": DefineComponent<SlImageComparerProps>;
-
-  /**
-   * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
+   * Icons are symbols that can be used to represent various options within an application.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-preview-open** - 预览打开时触发
-   * - **sl-preview-close** - 预览关闭时触发
-   * - **sl-preview-change** - 预览图片切换时触发，detail 包含 { current, prev }
-   *
-   * ### **Slots:**
-   *  - _default_ - 默认插槽，放置 sl-image 组件
+   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
    *
    * ### **CSS Parts:**
-   *  - **preview-mask** - 预览遮罩背景
-   * - **preview-body** - 预览主体
-   * - **preview-img** - 预览图片
-   * - **preview-actions** - 预览工具栏
-   * - **preview-close** - 预览关闭按钮
-   * - **preview-counter** - 预览计数器
+   *  - **svg** - The internal SVG element.
+   * - **use** - The <use> element generated when using `spriteSheet: true`
    */
-  "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
+  "sl-icon": DefineComponent<SlIconProps>;
 
   /**
    * 图片组件，支持预览、缩放、旋转、翻转等功能。
@@ -3705,19 +3688,38 @@ export type CustomElements = {
   "sl-image": DefineComponent<SlImageProps>;
 
   /**
-   * Icons are symbols that can be used to represent various options within an application.
+   * Includes give you the power to embed external HTML files into the page.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the included file is loaded.
+   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   */
+  "sl-include": DefineComponent<SlIncludeProps>;
+
+  /**
+   * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
-   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+   * ### **Events:**
+   *  - **sl-preview-open** - 预览打开时触发
+   * - **sl-preview-close** - 预览关闭时触发
+   * - **sl-preview-change** - 预览图片切换时触发，detail 包含 { current, prev }
+   *
+   * ### **Slots:**
+   *  - _default_ - 默认插槽，放置 sl-image 组件
    *
    * ### **CSS Parts:**
-   *  - **svg** - The internal SVG element.
-   * - **use** - The <use> element generated when using `spriteSheet: true`
+   *  - **preview-mask** - 预览遮罩背景
+   * - **preview-body** - 预览主体
+   * - **preview-img** - 预览图片
+   * - **preview-actions** - 预览工具栏
+   * - **preview-close** - 预览关闭按钮
+   * - **preview-counter** - 预览计数器
    */
-  "sl-icon": DefineComponent<SlIconProps>;
+  "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
 
   /**
    * Inputs collect data from the user.
@@ -3770,28 +3772,30 @@ export type CustomElements = {
   "sl-input": DefineComponent<SlInputProps>;
 
   /**
-   * Menus provide a list of options for the user to choose from.
+   * Compare visual differences between similar photos with a sliding panel.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
+   *  - **sl-change** - Emitted when the position changes.
    *
    * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
-   */
-  "sl-menu": DefineComponent<SlMenuProps>;
-
-  /**
-   * Includes give you the power to embed external HTML files into the page.
-   * ---
+   *  - **before** - The before image, an `<img>` or `<svg>` element.
+   * - **after** - The after image, an `<img>` or `<svg>` element.
+   * - **handle** - The icon used inside the handle.
    *
+   * ### **CSS Properties:**
+   *  - **--divider-width** - The width of the dividing line. _(default: undefined)_
+   * - **--handle-size** - The size of the compare handle. _(default: undefined)_
    *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the included file is loaded.
-   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **before** - The container that wraps the before image.
+   * - **after** - The container that wraps the after image.
+   * - **divider** - The divider that separates the images.
+   * - **handle** - The handle that the user drags to expose the after image.
    */
-  "sl-include": DefineComponent<SlIncludeProps>;
+  "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
   /**
    * Menu items provide options for the user to pick from in a menu.
@@ -3836,35 +3840,30 @@ export type CustomElements = {
   "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+   * Menus provide a list of options for the user to choose from.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
+   *  - **sl-select** - Emitted when a menu item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
    */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+  "sl-menu": DefineComponent<SlMenuProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
    * ### **Slots:**
-   *  - _default_ - The nav items.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-nav": DefineComponent<SlNavProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
    * Nav groups are used to group related nav items.
@@ -3882,27 +3881,6 @@ export type CustomElements = {
    */
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
-  /**
-   * Nav items are the individual links or buttons within a navigation menu.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-nav-select** - Emitted when a nav item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The nav item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the nav item.
-   * - **suffix** - Used to append an icon or similar element to the nav item.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **prefix** - The prefix container.
-   * - **label** - The nav item label.
-   * - **suffix** - The suffix container.
-   */
-  "sl-nav-item": DefineComponent<SlNavItemProps>;
-
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
    * ---
@@ -3938,6 +3916,27 @@ export type CustomElements = {
    */
   "sl-nav-submenu": DefineComponent<SlNavSubmenuProps>;
 
+  /**
+   * Nav items are the individual links or buttons within a navigation menu.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the nav item.
+   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav item label.
+   * - **suffix** - The suffix container.
+   */
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
+
   /**
    * Notifications are used to display global messages as feedback in response to user actions.
    * ---
@@ -4002,6 +4001,24 @@ export type CustomElements = {
    */
   "sl-option": DefineComponent<SlOptionProps>;
 
+  /**
+   * Navs are used to create navigation menus, including top bars and sidebars.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav items.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-nav": DefineComponent<SlNavProps>;
+
   /**
    *
    * ---
@@ -4059,27 +4076,6 @@ export type CustomElements = {
    */
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
-  /**
-   * Progress bars are used to show the status of an ongoing operation.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
-   *
-   * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
-   */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
-
   /**
    * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
    * ---
@@ -4111,6 +4107,41 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
+  /**
+   * Radios buttons allow the user to select a single option from a group using a button-like control.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the button loses focus.
+   * - **sl-focus** - Emitted when the button gains focus.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
+   * - **blur()** - Removes focus from the radio button.
+   *
+   * ### **Slots:**
+   *  - _default_ - The radio button's label.
+   * - **prefix** - A presentational prefix icon or similar element.
+   * - **suffix** - A presentational suffix icon or similar element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **button** - The internal `<button>` element.
+   * - **button--checked** - The internal button element when the radio button is checked.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The container that wraps the radio button's label.
+   * - **suffix** - The container that wraps the suffix.
+   */
+  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-popconfirm": DefineComponent<SlPopconfirmProps>;
+
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
@@ -4144,6 +4175,27 @@ export type CustomElements = {
    */
   "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
+  /**
+   * Progress bars are used to show the status of an ongoing operation.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the progress indicator.
+   *
+   * ### **CSS Properties:**
+   *  - **--height** - The progress bar's height. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
+   */
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+
   /**
    * Ranges allow the user to select a single value within a given range using a slider.
    * ---
@@ -4189,6 +4241,13 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
   /**
    * Ratings give users a way to quickly view and provide feedback.
    * ---
@@ -4213,66 +4272,18 @@ export type CustomElements = {
    */
   "sl-rating": DefineComponent<SlRatingProps>;
 
-  /**
-   * Radios buttons allow the user to select a single option from a group using a button-like control.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the button loses focus.
-   * - **sl-focus** - Emitted when the button gains focus.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
-   * - **blur()** - Removes focus from the radio button.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **button** - The internal `<button>` element.
-   * - **button--checked** - The internal button element when the radio button is checked.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The container that wraps the radio button's label.
-   * - **suffix** - The container that wraps the suffix.
-   */
-  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
-
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-resize** - Emitted when the element is resized.
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more elements to watch for resizing.
-   */
-  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
-
-  /**
-   * Outputs a localized time phrase relative to the current date and time.
-   * ---
-   *
-   */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
-
-  /**
-   * Row component for grid layout system.
-   * ---
-   *
+   * ### **Events:**
+   *  - **sl-resize** - Emitted when the element is resized.
    *
    * ### **Slots:**
-   *  - _default_ - The default slot for Col components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - _default_ - One or more elements to watch for resizing.
    */
-  "sl-row": DefineComponent<SlRowProps>;
+  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
   /**
    * Screen is a grid layout component based on gridstack.js and Shoelace.
@@ -4295,6 +4306,19 @@ export type CustomElements = {
    */
   "sl-segmented": DefineComponent<SlSegmentedProps>;
 
+  /**
+   * Row component for grid layout system.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for Col components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-row": DefineComponent<SlRowProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -4518,33 +4542,6 @@ export type CustomElements = {
    */
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
-  /**
-   * Split panels display two adjacent panels, allowing the user to reposition them.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-reposition** - Emitted when the divider's position changes.
-   *
-   * ### **Slots:**
-   *  - **start** - Content to place in the start panel.
-   * - **end** - Content to place in the end panel.
-   * - **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.
-   *
-   * ### **CSS Properties:**
-   *  - **--divider-width** - The width of the visible divider. _(default: 4px)_
-   * - **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_
-   * - **--min** - The minimum allowed size of the primary panel. _(default: 0)_
-   * - **--max** - The maximum allowed size of the primary panel. _(default: 100%)_
-   *
-   * ### **CSS Parts:**
-   *  - **start** - The start panel.
-   * - **end** - The end panel.
-   * - **panel** - Targets both the start and end panels.
-   * - **divider** - The divider that separates the start and end panels.
-   */
-  "sl-split-panel": DefineComponent<SlSplitPanelProps>;
-
   /**
    *
    * ---
@@ -4609,6 +4606,33 @@ export type CustomElements = {
    */
   "sl-tab": DefineComponent<SlTabProps>;
 
+  /**
+   * Split panels display two adjacent panels, allowing the user to reposition them.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-reposition** - Emitted when the divider's position changes.
+   *
+   * ### **Slots:**
+   *  - **start** - Content to place in the start panel.
+   * - **end** - Content to place in the end panel.
+   * - **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.
+   *
+   * ### **CSS Properties:**
+   *  - **--divider-width** - The width of the visible divider. _(default: 4px)_
+   * - **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_
+   * - **--min** - The minimum allowed size of the primary panel. _(default: 0)_
+   * - **--max** - The maximum allowed size of the primary panel. _(default: 100%)_
+   *
+   * ### **CSS Parts:**
+   *  - **start** - The start panel.
+   * - **end** - The end panel.
+   * - **panel** - Targets both the start and end panels.
+   * - **divider** - The divider that separates the start and end panels.
+   */
+  "sl-split-panel": DefineComponent<SlSplitPanelProps>;
+
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -4643,6 +4667,16 @@ export type CustomElements = {
    */
   "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change**
+   */
+  "sl-table": DefineComponent<SlTableProps>;
+
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
    * ---
@@ -4659,16 +4693,6 @@ export type CustomElements = {
    */
   "sl-tab-panel": DefineComponent<SlTabPanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change**
-   */
-  "sl-table": DefineComponent<SlTableProps>;
-
   /**
    * Tags are used as labels to organize things or to indicate a selection.
    * ---
@@ -4910,6 +4934,8 @@ export type CustomElements = {
    * ### **Methods:**
    *  - **moveToTarget()** - 移动选中项到目标列表
    * - **moveToSource()** - 移动选中项到源列表
+   * - **setSourceSelectedKeys(keys: _string[]_)** - 设置源列表选中项（供外部调用，用于 source-item-list 自定义列表场景）
+   * - **setTargetSelectedKeys(keys: _string[]_)** - 设置目标列表选中项（供外部调用）
    *
    * ### **Slots:**
    *  - **move-to-target** - 自定义"移动到目标列表"按钮内容。
@@ -4917,6 +4943,8 @@ export type CustomElements = {
    * - **operation** - 完全自定义操作区域内容，替换默认的穿梭按钮。
    * - **source-empty** - 自定义源列表空提示内容。
    * - **target-empty** - 自定义目标列表空提示内容。
+   * - **source-item-list** - 自定义源列表内容区域，替换默认列表渲染。
+   * - **target-item-list** - 自定义目标列表内容区域，替换默认列表渲染。
    * - **source-footer** - 自定义源列表底部内容，位于分页上方。
    * - **target-footer** - 自定义目标列表底部内容，位于分页上方。
    *
@@ -4961,49 +4989,55 @@ export type CustomElements = {
   "sl-tree": DefineComponent<SlTreeProps>;
 
   /**
-   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+   * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-expand** - Emitted when the tree item expands.
-   * - **sl-after-expand** - Emitted after the tree item expands and all animations are complete.
-   * - **sl-collapse** - Emitted when the tree item collapses.
-   * - **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.
-   * - **sl-lazy-change** - Emitted when the tree item's lazy state changes.
-   * - **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-clear** - Emitted when the control's value is cleared.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-show** - Emitted when the dropdown opens.
+   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dropdown closes.
+   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **sl-search** - Emitted when the search value changes.
+   * - **sl-lazy-load** - Emitted when a lazy node is expanded and its children need to be loaded.
    *
    * ### **Methods:**
-   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.
+   *  - **loadChildren(parentValue: _string_, children: _TreeSelectNodeData[]_)** - Load children for a lazy node. Call this from your `sl-lazy-load` event handler.
+   * It updates the node's children in `treeData`, removes `lazy`, and expands the node.
    *
    * ### **Slots:**
-   *  - _default_ - The default slot.
-   * - **expand-icon** - The icon to show when the tree item is expanded.
-   * - **collapse-icon** - The icon to show when the tree item is collapsed.
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
+   * - **tree-expand-icon** - The icon to show when a tree node is collapsed (click to expand). Forwarded to the tree's `expand-icon` slot.
+   * - **tree-collapse-icon** - The icon to show when a tree node is expanded (click to collapse). Forwarded to the tree's `collapse-icon` slot.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
-   * - **item--disabled** - Applied when the tree item is disabled.
-   * - **item--expanded** - Applied when the tree item is expanded.
-   * - **item--indeterminate** - Applied when the selection is indeterminate.
-   * - **item--selected** - Applied when the tree item is selected.
-   * - **indentation** - The tree item's indentation container.
-   * - **expand-button** - The container that wraps the tree item's expand button and spinner.
-   * - **spinner** - The spinner that shows when a lazy tree item is in the loading state.
-   * - **spinner__base** - The spinner's base part.
-   * - **label** - The tree item's label.
-   * - **children** - The container that wraps the tree item's nested children.
-   * - **checkbox** - The checkbox that shows when using multiselect.
-   * - **checkbox__base** - The checkbox's exported `base` part.
-   * - **checkbox__control** - The checkbox's exported `control` part.
-   * - **checkbox__control--checked** - The checkbox's exported `control--checked` part.
-   * - **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.
-   * - **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.
-   * - **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.
-   * - **checkbox__label** - The checkbox's exported `label` part.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The select's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label.
+   * - **tags** - The container that houses option tags when `multiple` is used.
+   * - **tag** - The individual tags that represent each selected option.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   * - **dropdown** - The dropdown panel that contains the tree.
+   * - **tree** - The tree element inside the dropdown.
    */
-  "sl-tree-item": DefineComponent<SlTreeItemProps>;
+  "sl-tree-select": DefineComponent<SlTreeSelectProps>;
 
   /**
    * 上传组件，支持文件选择、拖放上传、文件列表和图片卡片模式。
@@ -5050,65 +5084,49 @@ export type CustomElements = {
   "sl-upload": DefineComponent<SlUploadProps>;
 
   /**
-   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to be visually hidden.
-   */
-  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
-
-  /**
-   * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
+   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the control's value changes.
-   * - **sl-clear** - Emitted when the control's value is cleared.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-show** - Emitted when the dropdown opens.
-   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **sl-hide** - Emitted when the dropdown closes.
-   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   * - **sl-search** - Emitted when the search value changes.
-   * - **sl-lazy-load** - Emitted when a lazy node is expanded and its children need to be loaded.
+   *  - **sl-expand** - Emitted when the tree item expands.
+   * - **sl-after-expand** - Emitted after the tree item expands and all animations are complete.
+   * - **sl-collapse** - Emitted when the tree item collapses.
+   * - **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.
+   * - **sl-lazy-change** - Emitted when the tree item's lazy state changes.
+   * - **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.
    *
    * ### **Methods:**
-   *  - **loadChildren(parentValue: _string_, children: _TreeSelectNodeData[]_)** - Load children for a lazy node. Call this from your `sl-lazy-load` event handler.
-   * It updates the node's children in `treeData`, removes `lazy`, and expands the node.
+   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.
    *
    * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
-   * - **tree-expand-icon** - The icon to show when a tree node is collapsed (click to expand). Forwarded to the tree's `expand-icon` slot.
-   * - **tree-collapse-icon** - The icon to show when a tree node is expanded (click to collapse). Forwarded to the tree's `collapse-icon` slot.
+   *  - _default_ - The default slot.
+   * - **expand-icon** - The icon to show when the tree item is expanded.
+   * - **collapse-icon** - The icon to show when the tree item is collapsed.
    *
    * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The select's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label.
-   * - **tags** - The container that houses option tags when `multiple` is used.
-   * - **tag** - The individual tags that represent each selected option.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
-   * - **dropdown** - The dropdown panel that contains the tree.
-   * - **tree** - The tree element inside the dropdown.
+   *  - **base** - The component's base wrapper.
+   * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
+   * - **item--disabled** - Applied when the tree item is disabled.
+   * - **item--expanded** - Applied when the tree item is expanded.
+   * - **item--indeterminate** - Applied when the selection is indeterminate.
+   * - **item--selected** - Applied when the tree item is selected.
+   * - **indentation** - The tree item's indentation container.
+   * - **expand-button** - The container that wraps the tree item's expand button and spinner.
+   * - **spinner** - The spinner that shows when a lazy tree item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **label** - The tree item's label.
+   * - **children** - The container that wraps the tree item's nested children.
+   * - **checkbox** - The checkbox that shows when using multiselect.
+   * - **checkbox__base** - The checkbox's exported `base` part.
+   * - **checkbox__control** - The checkbox's exported `control` part.
+   * - **checkbox__control--checked** - The checkbox's exported `control--checked` part.
+   * - **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.
+   * - **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.
+   * - **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.
+   * - **checkbox__label** - The checkbox's exported `label` part.
    */
-  "sl-tree-select": DefineComponent<SlTreeSelectProps>;
+  "sl-tree-item": DefineComponent<SlTreeItemProps>;
 
   /**
    * Render markdown content with streaming support and custom node mapping.
@@ -5140,6 +5158,16 @@ export type CustomElements = {
    * - **incomplete** - Incomplete markdown placeholder nodes.
    */
   "sl-x-markdown": DefineComponent<SlXMarkdownProps>;
+
+  /**
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to be visually hidden.
+   */
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 };
 
 declare module "vue" {