@kdcloudjs/shoelace 1.0.48 → 1.0.49

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

@@ -1,69 +1,69 @@
 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 { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAlert } from "../../components/alert/alert.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
+import type { SlButtonGroup } from "../../components/button-group/button-group.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 { SlCol } from "../../components/col/col.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlCol } from "../../components/col/col.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 { 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 { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
+import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.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 { SlIcon } from "../../components/icon/icon.component.js";
+import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlImage } from "../../components/image/image.component.js";
-import type { SlInclude } from "../../components/include/include.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 { SlInclude } from "../../components/include/include.component.js";
+import type { SlMenu } from "../../components/menu/menu.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 { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
+import type { SlNav } from "../../components/nav/nav.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 { 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 { SlPopconfirm } from "../../components/popconfirm/popconfirm.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.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 { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.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 { SlRadio } from "../../components/radio/radio.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";
@@ -71,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 { SlTable, CustomEvent } from "../../components/table/table.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 { 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";
@@ -85,14 +85,33 @@ import type { SlThoughtChain } from "../../components/thought-chain/thought-chai
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
 import type { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
-import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTransfer } from "../../components/transfer/transfer.component.js";
+import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTree } from "../../components/tree/tree.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 { SlUpload } from "../../components/upload/upload.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
+import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
+
+type SlAnimatedImageProps = {
+  /** The path to the image to load. */
+  src?: SlAnimatedImage["src"];
+  /** A description of the image used by assistive devices. */
+  alt?: SlAnimatedImage["alt"];
+  /** Plays the animation. When this attribute is remove, the animation will pause. */
+  play?: SlAnimatedImage["play"];
+  /**  */
+  animatedImage?: SlAnimatedImage["animatedImage"];
+  /**  */
+  frozenFrame?: SlAnimatedImage["frozenFrame"];
+  /**  */
+  isLoaded?: SlAnimatedImage["isLoaded"];
+  /** Emitted when the image loads successfully. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the image fails to load. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -123,22 +142,19 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlAnimatedImageProps = {
-  /** The path to the image to load. */
-  src?: SlAnimatedImage["src"];
-  /** A description of the image used by assistive devices. */
-  alt?: SlAnimatedImage["alt"];
-  /** Plays the animation. When this attribute is remove, the animation will pause. */
-  play?: SlAnimatedImage["play"];
-  /**  */
-  animatedImage?: SlAnimatedImage["animatedImage"];
-  /**  */
-  frozenFrame?: SlAnimatedImage["frozenFrame"];
-  /**  */
-  isLoaded?: SlAnimatedImage["isLoaded"];
-  /** Emitted when the image loads successfully. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the image fails to load. */
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
@@ -184,29 +200,14 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBadgeProps = {
-  /** The badge's theme variant. */
-  variant?: SlBadge["variant"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: SlBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: SlBadge["pulse"];
-};
-
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (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 SlBreadcrumbItemProps = {
@@ -221,24 +222,13 @@ internally. When unset, a button will be rendered instead. */
   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 SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
 };
 
 type SlButtonProps = {
@@ -310,6 +300,16 @@ 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"];
@@ -462,35 +462,6 @@ 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"];
@@ -535,6 +506,35 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (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 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
@@ -643,38 +643,73 @@ scenarios. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDatepickerProps = {
+type SlDatePanelProps = {
   /**  */
-  type?: SlDatepicker["type"];
-  /** 日期格式化字符串，支持以下占位符（与 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?: SlDatepicker["format"];
+  open?: SlDatePanel["open"];
   /**  */
-  pattern?: SlDatepicker["pattern"];
+  value?: SlDatePanel["value"];
   /**  */
-  min?: SlDatepicker["min"];
+  type?: SlDatePanel["type"];
   /**  */
-  max?: SlDatepicker["max"];
+  min?: SlDatePanel["min"];
   /**  */
-  calendar?: SlDatepicker["calendar"];
-  /** 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. */
+  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"];
+  /** 日期格式化字符串，支持以下占位符（与 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?: SlDatepicker["format"];
+  /**  */
+  pattern?: SlDatepicker["pattern"];
+  /**  */
+  min?: SlDatepicker["min"];
+  /**  */
+  max?: SlDatepicker["max"];
+  /**  */
+  calendar?: SlDatepicker["calendar"];
+  /** 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;
@@ -844,11 +879,6 @@ will not close the dialog. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type SlDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: SlDivider["vertical"];
-};
-
 type SlDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -886,39 +916,9 @@ 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 SlDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: SlDivider["vertical"];
 };
 
 type SlDropdownProps = {
@@ -985,6 +985,22 @@ type SlFloatButtonProps = {
   "onsl-click"?: (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 SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -1023,22 +1039,6 @@ 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"];
@@ -1062,6 +1062,24 @@ type SlFormatNumberProps = {
   "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
+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"];
+
+  /** 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 SlIconButtonProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIconButton["name"];
@@ -1089,24 +1107,6 @@ that describes what the icon button does. */
   "onsl-focus"?: (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"];
-
-  /** 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 = {
   /** 图片地址 */
   src?: SlImage["src"];
@@ -1140,20 +1140,15 @@ type SlImageProps = {
   "onsl-load"?: (e: CustomEvent<never>) => 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;
+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 SlImagePreviewGroupProps = {
@@ -1173,6 +1168,29 @@ type SlImagePreviewGroupProps = {
   "onsl-preview-change"?: (e: CustomEvent<never>) => 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;
+};
+
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+};
+
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -1276,16 +1294,7 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (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 SlMenuLabelProps = {};
 
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
@@ -1304,15 +1313,6 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
-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 `*`. */
@@ -1341,55 +1341,59 @@ type SlNavGroupProps = {
   label?: SlNavGroup["label"];
 };
 
-type SlNavSubmenuProps = {
-  /** A stable key used by `sl-nav` to track open state. */
-  key?: SlNavSubmenu["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"?: SlNavSubmenu["itemKey"];
-  /** Indicates whether or not the submenu is open. */
-  open?: SlNavSubmenu["open"];
-  /** Indicates if this submenu is nested within another submenu. */
-  nested?: SlNavSubmenu["nested"];
-  /** The summary to show in the header. If you need to display HTML, use the `title` slot instead. */
-  title?: SlNavSubmenu["title"];
-  /** Matches Antd's `theme` field. */
-  theme?: SlNavSubmenu["theme"];
-  /** Matches Antd's `popupClassName` field. */
-  "popup-class-name"?: SlNavSubmenu["popupClassName"];
-  /** Draws the submenu in a disabled state. */
-  disabled?: SlNavSubmenu["disabled"];
-  /** Draws the submenu in an active (selected) state. */
-  active?: SlNavSubmenu["active"];
-  /** The mode of navigation. */
-  mode?: SlNavSubmenu["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavSubmenu["collapsed"];
-  /** Shows a divider line above this submenu. */
-  divider?: SlNavSubmenu["divider"];
-  /**  */
-  header?: SlNavSubmenu["header"];
-  /**  */
-  body?: SlNavSubmenu["body"];
+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"];
   /**  */
-  popup?: SlNavSubmenu["popup"];
-  /** Matches Antd's `label` field. */
-  label?: SlNavSubmenu["label"];
-  /** Matches Antd's `icon` field. */
-  icon?: SlNavSubmenu["icon"];
-  /** Matches Antd's `popupOffset` field. */
-  popupOffset?: SlNavSubmenu["popupOffset"];
-  /** Matches Antd's `onTitleClick` callback. */
-  onTitleClick?: SlNavSubmenu["onTitleClick"];
-  /** Emitted when the submenu opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the submenu opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the submenu closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the submenu closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  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 SlNavItemProps = {
@@ -1431,6 +1435,57 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
+type SlNavSubmenuProps = {
+  /** A stable key used by `sl-nav` to track open state. */
+  key?: SlNavSubmenu["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"?: SlNavSubmenu["itemKey"];
+  /** Indicates whether or not the submenu is open. */
+  open?: SlNavSubmenu["open"];
+  /** Indicates if this submenu is nested within another submenu. */
+  nested?: SlNavSubmenu["nested"];
+  /** The summary to show in the header. If you need to display HTML, use the `title` slot instead. */
+  title?: SlNavSubmenu["title"];
+  /** Matches Antd's `theme` field. */
+  theme?: SlNavSubmenu["theme"];
+  /** Matches Antd's `popupClassName` field. */
+  "popup-class-name"?: SlNavSubmenu["popupClassName"];
+  /** Draws the submenu in a disabled state. */
+  disabled?: SlNavSubmenu["disabled"];
+  /** Draws the submenu in an active (selected) state. */
+  active?: SlNavSubmenu["active"];
+  /** The mode of navigation. */
+  mode?: SlNavSubmenu["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavSubmenu["collapsed"];
+  /** Shows a divider line above this submenu. */
+  divider?: SlNavSubmenu["divider"];
+  /**  */
+  header?: SlNavSubmenu["header"];
+  /**  */
+  body?: SlNavSubmenu["body"];
+  /**  */
+  popup?: SlNavSubmenu["popup"];
+  /** Matches Antd's `label` field. */
+  label?: SlNavSubmenu["label"];
+  /** Matches Antd's `icon` field. */
+  icon?: SlNavSubmenu["icon"];
+  /** Matches Antd's `popupOffset` field. */
+  popupOffset?: SlNavSubmenu["popupOffset"];
+  /** Matches Antd's `onTitleClick` callback. */
+  onTitleClick?: SlNavSubmenu["onTitleClick"];
+  /** Emitted when the submenu opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the submenu opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the submenu closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the submenu closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlNotificationProps = {
   /** Indicates whether or not the notification is open. */
   open?: SlNotification["open"];
@@ -1481,61 +1536,6 @@ 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"];
@@ -1557,6 +1557,39 @@ type SlPaginationProps = {
   defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
+type SlPopconfirmProps = {
+  /** 确认框标题 */
+  title?: SlPopconfirm["title"];
+  /** 确认框描述 */
+  description?: SlPopconfirm["description"];
+  /** 确认按钮文字 */
+  "ok-text"?: SlPopconfirm["okText"];
+  /** 取消按钮文字 */
+  "cancel-text"?: SlPopconfirm["cancelText"];
+  /** 弹出位置 */
+  placement?: SlPopconfirm["placement"];
+  /** 是否显示 */
+  open?: SlPopconfirm["open"];
+  /** 是否禁用 */
+  disabled?: SlPopconfirm["disabled"];
+  /** 图标名称 */
+  icon?: SlPopconfirm["icon"];
+  /** 是否显示箭头，支持设置箭头是否精准指向目标元素的物理中心 */
+  arrow?: SlPopconfirm["arrow"];
+  /** 确认按钮类型 */
+  "ok-type"?: SlPopconfirm["okType"];
+  /**  */
+  popup?: SlPopconfirm["popup"];
+  /** 点击确认的回调，支持返回 Promise 实现异步确认 */
+  onConfirm?: SlPopconfirm["onConfirm"];
+  /** 点击取消的回调 */
+  onCancel?: SlPopconfirm["onCancel"];
+  /** 自定义语义化结构的 CSS 类名 */
+  classNames?: SlPopconfirm["classNames"];
+  /** 自定义语义化结构的内联样式，支持对象或函数 */
+  customStyles?: SlPopconfirm["customStyles"];
+};
+
 type SlPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
 element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
@@ -1632,6 +1665,15 @@ active. */
   "onsl-reposition"?: (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 SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1662,22 +1704,6 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio'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?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1698,8 +1724,6 @@ this attribute can typically be omitted. */
   "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. */
@@ -1738,15 +1762,6 @@ 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"];
@@ -1797,20 +1812,6 @@ 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"];
@@ -1837,6 +1838,20 @@ well with `<sl-icon>` elements. */
   "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => 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 SlResizeObserverProps = {
   /** Disables the observer. */
   disabled?: SlResizeObserver["disabled"];
@@ -1845,6 +1860,17 @@ type SlResizeObserverProps = {
   "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
+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,15 +1909,20 @@ 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 SlRadioProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadio["value"];
+  /** The radio'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?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
+  /**  */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
 type SlSelectProps = {
@@ -2088,6 +2119,31 @@ type SlSpaceProps = {
 
 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 SlStepsProps = {
   /** 步骤条数据 */
   items?: SlSteps["items"];
@@ -2171,31 +2227,6 @@ 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"];
@@ -2220,6 +2251,13 @@ 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"];
@@ -2303,13 +2341,6 @@ 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"];
@@ -2525,44 +2556,6 @@ type SlTimepickerProps = {
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTooltipProps = {
-  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
-  content?: SlTooltip["content"];
-  /** The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-inside of the viewport. */
-  placement?: SlTooltip["placement"];
-  /** Disables the tooltip so it won't show when triggered. */
-  disabled?: SlTooltip["disabled"];
-  /** The distance in pixels from which to offset the tooltip away from its target. */
-  distance?: SlTooltip["distance"];
-  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
-  open?: SlTooltip["open"];
-  /** The distance in pixels from which to offset the tooltip along its target. */
-  skidding?: SlTooltip["skidding"];
-  /** Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-programmatically. */
-  trigger?: SlTooltip["trigger"];
-  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios. */
-  hoist?: SlTooltip["hoist"];
-  /**  */
-  defaultSlot?: SlTooltip["defaultSlot"];
-  /**  */
-  body?: SlTooltip["body"];
-  /**  */
-  popup?: SlTooltip["popup"];
-  /** Emitted when the tooltip begins to show. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tooltip has shown and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tooltip begins to hide. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tooltip has hidden and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTransferProps = {
   /** 数据源 */
   dataSource?: SlTransfer["dataSource"];
@@ -2602,6 +2595,44 @@ type SlTransferProps = {
   "onsl-transfer-scroll"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTooltipProps = {
+  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+  content?: SlTooltip["content"];
+  /** The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+inside of the viewport. */
+  placement?: SlTooltip["placement"];
+  /** Disables the tooltip so it won't show when triggered. */
+  disabled?: SlTooltip["disabled"];
+  /** The distance in pixels from which to offset the tooltip away from its target. */
+  distance?: SlTooltip["distance"];
+  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+  open?: SlTooltip["open"];
+  /** The distance in pixels from which to offset the tooltip along its target. */
+  skidding?: SlTooltip["skidding"];
+  /** Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+programmatically. */
+  trigger?: SlTooltip["trigger"];
+  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios. */
+  hoist?: SlTooltip["hoist"];
+  /**  */
+  defaultSlot?: SlTooltip["defaultSlot"];
+  /**  */
+  body?: SlTooltip["body"];
+  /**  */
+  popup?: SlTooltip["popup"];
+  /** Emitted when the tooltip begins to show. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tooltip has shown and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tooltip begins to hide. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tooltip has hidden and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTreeProps = {
   /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
 displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
@@ -2728,6 +2759,47 @@ Each node has `title`, `value`, and optionally `children`, `disabled`, `selectab
   "onsl-lazy-load"?: (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"];
+  /**  */
+  indeterminate?: SlTreeItem["indeterminate"];
+  /**  */
+  isLeaf?: SlTreeItem["isLeaf"];
+  /**  */
+  loading?: SlTreeItem["loading"];
+  /**  */
+  selectable?: SlTreeItem["selectable"];
+  /**  */
+  defaultSlot?: SlTreeItem["defaultSlot"];
+  /**  */
+  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;
+};
+
 type SlUploadProps = {
   /** 上传文件的目标 URL。 */
   action?: SlUpload["action"];
@@ -2792,50 +2864,11 @@ type SlUploadProps = {
   /** 拖放模式下放置文件时触发。`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"];
-  /**  */
-  indeterminate?: SlTreeItem["indeterminate"];
-  /**  */
-  isLeaf?: SlTreeItem["isLeaf"];
-  /**  */
-  loading?: SlTreeItem["loading"];
-  /**  */
-  selectable?: SlTreeItem["selectable"];
-  /**  */
-  defaultSlot?: SlTreeItem["defaultSlot"];
-  /**  */
-  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;
+  "onsl-exceed"?: (e: CustomEvent<never>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
 type SlXMarkdownProps = {
   /** Markdown content to render. */
   content?: SlXMarkdown["content"];
@@ -2855,9 +2888,29 @@ type SlXMarkdownProps = {
   streaming?: SlXMarkdown["streaming"];
 };
 
-type SlVisuallyHiddenProps = {};
-
 export type CustomElements = {
+  /**
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
+   *
+   * ### **Slots:**
+   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
+   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
+   */
+  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
+
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -2890,26 +2943,26 @@ export type CustomElements = {
   "sl-alert": DefineComponent<SlAlertProps>;
 
   /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
    *
    * ### **CSS Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
+   *  - **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-animated-image": DefineComponent<SlAnimatedImageProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
@@ -2931,39 +2984,18 @@ export type CustomElements = {
   "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The badge's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-badge": DefineComponent<SlBadgeProps>;
-
-  /**
-   * 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>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
    *
    * ### **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-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -2986,31 +3018,17 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
-
-  /**
-   * Button groups can be used to group related buttons into sections.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -3046,6 +3064,19 @@ 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>;
+
   /**
    * 日历组件，用于按日历形式展示数据，支持全屏和卡片模式
    * ---
@@ -3194,19 +3225,6 @@ export type CustomElements = {
    */
   "sl-cascader": DefineComponent<SlCascaderProps>;
 
-  /**
-   * 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>;
-
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -3245,6 +3263,19 @@ export type CustomElements = {
    */
   "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
+  /**
+   * 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>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -3337,6 +3368,19 @@ export type CustomElements = {
    */
   "sl-copy-button": DefineComponent<SlCopyButtonProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel**
+   * - **sl-clear**
+   * - **sl-confirm**
+   * - **sl-date-change**
+   */
+  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+
   /**
    * Datepickers allow users to select a date using a calendar interface.
    * ---
@@ -3466,18 +3510,6 @@ export type CustomElements = {
    */
   "sl-dialog": DefineComponent<SlDialogProps>;
 
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "sl-divider": DefineComponent<SlDividerProps>;
-
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -3522,17 +3554,16 @@ export type CustomElements = {
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
   /**
-   *
+   * Dividers are used to visually separate or group elements.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-cancel**
-   * - **sl-clear**
-   * - **sl-confirm**
-   * - **sl-date-change**
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
    */
-  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+  "sl-divider": DefineComponent<SlDividerProps>;
 
   /**
    * Dropdowns expose additional content that "drops down" in a panel.
@@ -3582,20 +3613,6 @@ export type CustomElements = {
    */
   "sl-float-button": DefineComponent<SlFloatButtonProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
-
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
-   */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
-
   /**
    * Groups multiple float buttons together, with optional menu trigger.
    * ---
@@ -3618,6 +3635,20 @@ export type CustomElements = {
    */
   "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+
+  /**
+   * Formats a date/time using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
+
   /**
    * Formats a number using the specified locale and options.
    * ---
@@ -3625,6 +3656,21 @@ export type CustomElements = {
    */
   "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
+  /**
+   * Icons are symbols that can be used to represent various options within an application.
+   * ---
+   *
+   *
+   * ### **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.
+   *
+   * ### **CSS Parts:**
+   *  - **svg** - The internal SVG element.
+   * - **use** - The <use> element generated when using `spriteSheet: true`
+   */
+  "sl-icon": DefineComponent<SlIconProps>;
+
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
    * ---
@@ -3645,47 +3691,81 @@ export type CustomElements = {
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
   /**
-   * Icons are symbols that can be used to represent various options within an application.
+   * 图片组件，支持预览、缩放、旋转、翻转等功能。
    * ---
    *
    *
    * ### **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.
+   *  - **sl-image-click** - 在 group 模式下点击图片时触发
+   * - **sl-preview-open** - 预览打开时触发
+   * - **sl-preview-close** - 预览关闭时触发
+   * - **sl-error** - 图片加载失败时触发
+   * - **sl-load** - 图片加载成功时触发
+   *
+   * ### **Slots:**
+   *  - **cover** - 自定义遮罩层内容
+   * - **placeholder** - 自定义加载占位内容
+   *
+   * ### **CSS Parts:**
+   *  - **base** - 组件根容器
+   * - **img** - 图片元素
+   * - **cover** - 遮罩层
+   * - **preview-mask** - 预览遮罩背景
+   * - **preview-body** - 预览主体
+   * - **preview-img** - 预览图片
+   * - **preview-actions** - 预览工具栏
+   * - **preview-close** - 预览关闭按钮
+   */
+  "sl-image": DefineComponent<SlImageProps>;
+
+  /**
+   * 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:**
-   *  - **svg** - The internal SVG element.
-   * - **use** - The <use> element generated when using `spriteSheet: true`
+   *  - **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-icon": DefineComponent<SlIconProps>;
+  "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
   /**
-   * 图片组件，支持预览、缩放、旋转、翻转等功能。
+   * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-image-click** - 在 group 模式下点击图片时触发
-   * - **sl-preview-open** - 预览打开时触发
+   *  - **sl-preview-open** - 预览打开时触发
    * - **sl-preview-close** - 预览关闭时触发
-   * - **sl-error** - 图片加载失败时触发
-   * - **sl-load** - 图片加载成功时触发
+   * - **sl-preview-change** - 预览图片切换时触发，detail 包含 { current, prev }
    *
    * ### **Slots:**
-   *  - **cover** - 自定义遮罩层内容
-   * - **placeholder** - 自定义加载占位内容
+   *  - _default_ - 默认插槽，放置 sl-image 组件
    *
    * ### **CSS Parts:**
-   *  - **base** - 组件根容器
-   * - **img** - 图片元素
-   * - **cover** - 遮罩层
-   * - **preview-mask** - 预览遮罩背景
+   *  - **preview-mask** - 预览遮罩背景
    * - **preview-body** - 预览主体
    * - **preview-img** - 预览图片
    * - **preview-actions** - 预览工具栏
    * - **preview-close** - 预览关闭按钮
+   * - **preview-counter** - 预览计数器
    */
-  "sl-image": DefineComponent<SlImageProps>;
+  "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
 
   /**
    * Includes give you the power to embed external HTML files into the page.
@@ -3699,27 +3779,17 @@ export type CustomElements = {
   "sl-include": DefineComponent<SlIncludeProps>;
 
   /**
-   * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
+   * Menus provide a list of options for the user to choose from.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-preview-open** - 预览打开时触发
-   * - **sl-preview-close** - 预览关闭时触发
-   * - **sl-preview-change** - 预览图片切换时触发，detail 包含 { current, prev }
+   *  - **sl-select** - Emitted when a menu item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - 默认插槽，放置 sl-image 组件
-   *
-   * ### **CSS Parts:**
-   *  - **preview-mask** - 预览遮罩背景
-   * - **preview-body** - 预览主体
-   * - **preview-img** - 预览图片
-   * - **preview-actions** - 预览工具栏
-   * - **preview-close** - 预览关闭按钮
-   * - **preview-counter** - 预览计数器
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
    */
-  "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
+  "sl-menu": DefineComponent<SlMenuProps>;
 
   /**
    * Inputs collect data from the user.
@@ -3772,30 +3842,17 @@ export type CustomElements = {
   "sl-input": DefineComponent<SlInputProps>;
 
   /**
-   * Compare visual differences between similar photos with a sliding panel.
+   * Menu labels are used to describe a group of menu items.
    * ---
    *
    *
-   * ### **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)_
+   *  - _default_ - The menu label's content.
    *
    * ### **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>;
+  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
    * Menu items provide options for the user to pick from in a menu.
@@ -3827,59 +3884,72 @@ export type CustomElements = {
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
-   * Menu labels are used to describe a group of menu items.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
+   * ### **Events:**
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **Slots:**
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
-   * Menus provide a list of options for the user to choose from.
+   * Nav groups are used to group related nav items.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
-   *
    * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   *  - _default_ - The nav items within the group.
+   * - **title** - The nav group's title.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **title** - The nav group title.
+   * - **body** - The nav group body.
    */
-  "sl-menu": DefineComponent<SlMenuProps>;
+  "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
   /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
+   *  - **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 content to watch for mutations.
+   *  - _default_ - The nav items.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+  "sl-nav": DefineComponent<SlNavProps>;
 
   /**
-   * Nav groups are used to group related nav items.
+   * 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 items within the group.
-   * - **title** - The nav group's title.
+   *  - _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.
-   * - **title** - The nav group title.
-   * - **body** - The nav group body.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav item label.
+   * - **suffix** - The suffix container.
    */
-  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
 
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
@@ -3916,27 +3986,6 @@ 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,29 +4051,22 @@ 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>;
+  "sl-pagination": DefineComponent<SlPaginationProps>;
 
   /**
-   *
+   * 气泡确认框，在目标元素附近弹出轻量级确认浮层。
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - 触发元素
+   * - **icon** - 自定义图标
    */
-  "sl-pagination": DefineComponent<SlPaginationProps>;
+  "sl-popconfirm": DefineComponent<SlPopconfirmProps>;
 
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
@@ -4054,6 +4096,27 @@ export type CustomElements = {
    */
   "sl-popup": DefineComponent<SlPopupProps>;
 
+  /**
+   * 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>;
+
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
@@ -4086,27 +4149,6 @@ export type CustomElements = {
    */
   "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
-  /**
-   * Radios allow the user to select a single option from a group.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-focus** - Emitted when the control gains focus.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The circular container that wraps the radio's checked state.
-   * - **control--checked** - The radio control when the radio is checked.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the radio's label.
-   */
-  "sl-radio": DefineComponent<SlRadioProps>;
-
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
@@ -4135,13 +4177,6 @@ export type CustomElements = {
    */
   "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.
    * ---
@@ -4175,27 +4210,6 @@ 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.
    * ---
@@ -4241,13 +4255,6 @@ 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.
    * ---
@@ -4272,6 +4279,13 @@ export type CustomElements = {
    */
   "sl-rating": DefineComponent<SlRatingProps>;
 
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
@@ -4281,9 +4295,22 @@ export type CustomElements = {
    *  - **sl-resize** - Emitted when the element is resized.
    *
    * ### **Slots:**
-   *  - _default_ - One or more elements to watch for resizing.
+   *  - _default_ - One or more elements to watch for resizing.
+   */
+  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
+
+  /**
+   * Row component for grid layout system.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for Col components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
+  "sl-row": DefineComponent<SlRowProps>;
 
   /**
    * Screen is a grid layout component based on gridstack.js and Shoelace.
@@ -4307,17 +4334,25 @@ export type CustomElements = {
   "sl-segmented": DefineComponent<SlSegmentedProps>;
 
   /**
-   * Row component for grid layout system.
+   * Radios allow the user to select a single option from a group.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-focus** - Emitted when the control gains focus.
+   *
    * ### **Slots:**
-   *  - _default_ - The default slot for Col components.
+   *  - _default_ - The radio's label.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **control** - The circular container that wraps the radio's checked state.
+   * - **control--checked** - The radio control when the radio is checked.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the radio's label.
    */
-  "sl-row": DefineComponent<SlRowProps>;
+  "sl-radio": DefineComponent<SlRadioProps>;
 
   /**
    * Selects allow you to choose items from a menu of predefined options.
@@ -4542,6 +4577,33 @@ 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>;
+
   /**
    *
    * ---
@@ -4606,33 +4668,6 @@ 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.
    * ---
@@ -4667,16 +4702,6 @@ 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.
    * ---
@@ -4693,6 +4718,16 @@ 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.
    * ---
@@ -4888,38 +4923,6 @@ export type CustomElements = {
    */
   "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
-  /**
-   * Tooltips display additional information based on a specific action.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the tooltip begins to show.
-   * - **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.
-   * - **sl-hide** - Emitted when the tooltip begins to hide.
-   * - **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the tooltip.
-   * - **hide()** - Hides the tooltip
-   *
-   * ### **Slots:**
-   *  - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
-   * - **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
-   *
-   * ### **CSS Properties:**
-   *  - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_
-   * - **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_
-   * - **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
-   * - **body** - The tooltip's body where its content is rendered.
-   */
-  "sl-tooltip": DefineComponent<SlTooltipProps>;
-
   /**
    * Transfer 穿梭框组件，用于在两个列表之间移动数据。
    * ---
@@ -4963,6 +4966,38 @@ export type CustomElements = {
    */
   "sl-transfer": DefineComponent<SlTransferProps>;
 
+  /**
+   * Tooltips display additional information based on a specific action.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the tooltip begins to show.
+   * - **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.
+   * - **sl-hide** - Emitted when the tooltip begins to hide.
+   * - **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the tooltip.
+   * - **hide()** - Hides the tooltip
+   *
+   * ### **Slots:**
+   *  - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+   * - **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+   *
+   * ### **CSS Properties:**
+   *  - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_
+   * - **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_
+   * - **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+   * - **body** - The tooltip's body where its content is rendered.
+   */
+  "sl-tooltip": DefineComponent<SlTooltipProps>;
+
   /**
    * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
    * ---
@@ -5039,6 +5074,51 @@ export type CustomElements = {
    */
   "sl-tree-select": DefineComponent<SlTreeSelectProps>;
 
+  /**
+   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+   * ---
+   *
+   *
+   * ### **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.
+   *
+   * ### **Methods:**
+   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this 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.
+   *
+   * ### **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.
+   */
+  "sl-tree-item": DefineComponent<SlTreeItemProps>;
+
   /**
    * 上传组件，支持文件选择、拖放上传、文件列表和图片卡片模式。
    * ---
@@ -5084,49 +5164,14 @@ export type CustomElements = {
   "sl-upload": DefineComponent<SlUploadProps>;
 
   /**
-   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
    * ---
    *
    *
-   * ### **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.
-   *
-   * ### **Methods:**
-   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this 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.
-   *
-   * ### **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.
+   *  - _default_ - The content to be visually hidden.
    */
-  "sl-tree-item": DefineComponent<SlTreeItemProps>;
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 
   /**
    * Render markdown content with streaming support and custom node mapping.
@@ -5158,16 +5203,6 @@ 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" {