@kdcloudjs/shoelace 1.0.44 → 1.0.46

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

@@ -1,95 +1,96 @@
 import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
-import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { SlAnimation } from "../../components/animation/animation.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.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 { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
-import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
-import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
+import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
-import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
-import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
+import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.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 { SlDropdown } from "../../components/dropdown/dropdown.component.js";
-import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
-import type { SlDivider } from "../../components/divider/divider.component.js";
+import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
+import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
+import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
+import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
+import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
-import type { SlImage } from "../../components/image/image.component.js";
-import type { SlIcon } from "../../components/icon/icon.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 { SlFormatNumber } from "../../components/format-number/format-number.component.js";
+import type { SlImage } from "../../components/image/image.component.js";
+import type { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
+import type { SlInclude } from "../../components/include/include.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 { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlNotification } from "../../components/notification/notification.component.js";
-import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
-import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
+import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
+import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
-import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
+import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
+import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlRow } from "../../components/row/row.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSegmented } from "../../components/segmented/segmented.component.js";
 import type { 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";
 import type { SlSenderSwitch, CustomEvent } from "../../components/sender-switch/sender-switch.component.js";
-import type { SlSpace } from "../../components/space/space.component.js";
 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 { SlSenderHeader } from "../../components/sender-header/sender-header.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
+import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
+import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
 import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
-import type { SlTag } from "../../components/tag/tag.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 { SlTree } from "../../components/tree/tree.component.js";
 import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
-import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
 import type { SlUpload } from "../../components/upload/upload.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
+import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
 
 type SlAlertProps = {
@@ -121,31 +122,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-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 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 SlAnimatedImageProps = {
   /** The path to the image to load. */
   src?: SlAnimatedImage["src"];
@@ -165,28 +141,6 @@ type SlAnimatedImageProps = {
   "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 = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  href?: SlBreadcrumbItem["href"];
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  target?: SlBreadcrumbItem["target"];
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  rel?: SlBreadcrumbItem["rel"];
-  /**  */
-  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
-};
-
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -229,6 +183,53 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
+};
+
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
+  /**  */
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+};
+
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** 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 SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -377,8 +378,6 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
-type SlCarouselItemProps = {};
-
 type SlCascaderProps = {
   /** The name of the cascader, submitted as a name/value pair with form data. */
   name?: SlCascader["name"];
@@ -460,79 +459,6 @@ type SlCascaderProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCheckboxProps = {
-  /**  */
-  title?: SlCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: SlCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: SlCheckbox["value"];
-  /** The checkbox's size. */
-  size?: SlCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: SlCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: SlCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: SlCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: SlCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlCheckbox["helpText"];
-  /**  */
-  input?: SlCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
-type 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
@@ -599,17 +525,134 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDatePanelProps = {
-  /**  */
-  open?: SlDatePanel["open"];
-  /**  */
-  value?: SlDatePanel["value"];
-  /**  */
-  type?: SlDatePanel["type"];
-  /**  */
-  min?: SlDatePanel["min"];
+type SlCheckboxProps = {
   /**  */
-  max?: SlDatePanel["max"];
+  title?: SlCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: SlCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: SlCheckbox["value"];
+  /** The checkbox's size. */
+  size?: SlCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: SlCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: SlCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: SlCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: SlCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlCheckbox["helpText"];
+  /**  */
+  input?: SlCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+type SlCopyButtonProps = {
+  /** The text value to copy. */
+  value?: SlCopyButton["value"];
+  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
+present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
+attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
+append a dot and the property name, e.g. `from="el.value"`. */
+  from?: SlCopyButton["from"];
+  /** Disables the copy button. */
+  disabled?: SlCopyButton["disabled"];
+  /** A custom label to show in the tooltip. */
+  "copy-label"?: SlCopyButton["copyLabel"];
+  /** A custom label to show in the tooltip after copying. */
+  "success-label"?: SlCopyButton["successLabel"];
+  /** A custom label to show in the tooltip when a copy error occurs. */
+  "error-label"?: SlCopyButton["errorLabel"];
+  /** The length of time to show feedback before restoring the default trigger. */
+  "feedback-duration"?: SlCopyButton["feedbackDuration"];
+  /** The preferred placement of the tooltip. */
+  "tooltip-placement"?: SlCopyButton["tooltipPlacement"];
+  /** 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?: SlCopyButton["hoist"];
+  /**  */
+  copyIcon?: SlCopyButton["copyIcon"];
+  /**  */
+  successIcon?: SlCopyButton["successIcon"];
+  /**  */
+  errorIcon?: SlCopyButton["errorIcon"];
+  /**  */
+  tooltip?: SlCopyButton["tooltip"];
+  /**  */
+  isCopying?: SlCopyButton["isCopying"];
+  /**  */
+  status?: SlCopyButton["status"];
+  /** Emitted when the data has been copied. */
+  "onsl-copy"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the data could not be copied. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlColProps = {
+  /** Number of cells to span (out of 24) */
+  span?: SlCol["span"];
+  /** Number of cells to offset from the left */
+  offset?: SlCol["offset"];
+  /** Order of the column */
+  order?: SlCol["order"];
+  /** Number of cells to push from the left */
+  push?: SlCol["push"];
+  /** Number of cells to pull from the right */
+  pull?: SlCol["pull"];
+  /** Flex layout style */
+  flex?: SlCol["flex"];
+  /** Responsive config for xs screens (< 576px) */
+  xs?: SlCol["xs"];
+  /** Responsive config for sm screens (≥ 576px) */
+  sm?: SlCol["sm"];
+  /** Responsive config for md screens (≥ 768px) */
+  md?: SlCol["md"];
+  /** Responsive config for lg screens (≥ 992px) */
+  lg?: SlCol["lg"];
+  /** Responsive config for xl screens (≥ 1200px) */
+  xl?: SlCol["xl"];
+  /** Responsive config for xxl screens (≥ 1600px) */
+  xxl?: SlCol["xxl"];
+  /**  */
+  rowContext?: SlCol["rowContext"];
+};
+
+type SlCarouselItemProps = {};
+
+type SlDatePanelProps = {
+  /**  */
+  open?: SlDatePanel["open"];
+  /**  */
+  value?: SlDatePanel["value"];
+  /**  */
+  type?: SlDatePanel["type"];
+  /**  */
+  min?: SlDatePanel["min"];
+  /**  */
+  max?: SlDatePanel["max"];
   /**  */
   format?: SlDatePanel["format"];
   /**  */
@@ -634,34 +677,6 @@ type SlDatePanelProps = {
   "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlDetailsProps = {
-  /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
-  open?: SlDetails["open"];
-  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
-  summary?: SlDetails["summary"];
-  /** Disables the details so it can't be toggled. */
-  disabled?: SlDetails["disabled"];
-  /**  */
-  details?: SlDetails["details"];
-  /**  */
-  header?: SlDetails["header"];
-  /**  */
-  body?: SlDetails["body"];
-  /**  */
-  expandIconSlot?: SlDetails["expandIconSlot"];
-  /**  */
-  detailsObserver?: SlDetails["detailsObserver"];
-  /** Emitted when the details opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the details opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the details closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the details closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlDatepickerProps = {
   /**  */
   type?: SlDatepicker["type"];
@@ -699,6 +714,34 @@ type SlDatepickerProps = {
   "onsl-clear"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDetailsProps = {
+  /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
+  open?: SlDetails["open"];
+  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+  summary?: SlDetails["summary"];
+  /** Disables the details so it can't be toggled. */
+  disabled?: SlDetails["disabled"];
+  /**  */
+  details?: SlDetails["details"];
+  /**  */
+  header?: SlDetails["header"];
+  /**  */
+  body?: SlDetails["body"];
+  /**  */
+  expandIconSlot?: SlDetails["expandIconSlot"];
+  /**  */
+  detailsObserver?: SlDetails["detailsObserver"];
+  /** Emitted when the details opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the details opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the details closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the details closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlDialogProps = {
   /** Indicates whether or not the dialog is resizable. When true, the user can resize the dialog by dragging the
 bottom-right corner, and double-clicking the header will toggle fullscreen mode. */
@@ -739,46 +782,135 @@ will not close the dialog. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type SlCopyButtonProps = {
-  /** The text value to copy. */
-  value?: SlCopyButton["value"];
-  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
-present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
-attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
-append a dot and the property name, e.g. `from="el.value"`. */
-  from?: SlCopyButton["from"];
-  /** Disables the copy button. */
-  disabled?: SlCopyButton["disabled"];
-  /** A custom label to show in the tooltip. */
-  "copy-label"?: SlCopyButton["copyLabel"];
-  /** A custom label to show in the tooltip after copying. */
-  "success-label"?: SlCopyButton["successLabel"];
-  /** A custom label to show in the tooltip when a copy error occurs. */
-  "error-label"?: SlCopyButton["errorLabel"];
-  /** The length of time to show feedback before restoring the default trigger. */
-  "feedback-duration"?: SlCopyButton["feedbackDuration"];
-  /** The preferred placement of the tooltip. */
-  "tooltip-placement"?: SlCopyButton["tooltipPlacement"];
-  /** 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?: SlCopyButton["hoist"];
+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. */
+  open?: SlDrawer["open"];
+  /** The drawer's label as displayed in the header. You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+  label?: SlDrawer["label"];
+  /** The direction from which the drawer will open. */
+  placement?: SlDrawer["placement"];
+  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+its parent element, set this attribute and add `position: relative` to the parent. */
+  contained?: SlDrawer["contained"];
+  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the drawer. */
+  "no-header"?: SlDrawer["noHeader"];
+  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */
+  modal?: SlDrawer["modal"];
   /**  */
-  copyIcon?: SlCopyButton["copyIcon"];
+  drawer?: SlDrawer["drawer"];
   /**  */
-  successIcon?: SlCopyButton["successIcon"];
+  panel?: SlDrawer["panel"];
   /**  */
-  errorIcon?: SlCopyButton["errorIcon"];
+  overlay?: SlDrawer["overlay"];
+  /** Emitted when the drawer opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the drawer opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the drawer closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
+  "onsl-initial-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
+  "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
+type SlDropdownProps = {
+  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
+  open?: SlDropdown["open"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+inside of the viewport. */
+  placement?: SlDropdown["placement"];
+  /** Disables the dropdown so the panel will not open. */
+  disabled?: SlDropdown["disabled"];
+  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+dropdowns that allow for multiple interactions. */
+  "stay-open-on-select"?: SlDropdown["stayOpenOnSelect"];
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  distance?: SlDropdown["distance"];
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  skidding?: SlDropdown["skidding"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: SlDropdown["hoist"];
+  /** Syncs the popup width or height to that of the trigger element. */
+  sync?: SlDropdown["sync"];
   /**  */
-  tooltip?: SlCopyButton["tooltip"];
+  popup?: SlDropdown["popup"];
   /**  */
-  isCopying?: SlCopyButton["isCopying"];
+  trigger?: SlDropdown["trigger"];
   /**  */
-  status?: SlCopyButton["status"];
-  /** Emitted when the data has been copied. */
-  "onsl-copy"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the data could not be copied. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
+  panel?: SlDropdown["panel"];
+  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+components that use a dropdown internally. */
+  containingElement?: SlDropdown["containingElement"];
+  /** Emitted when the dropdown opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
+type SlFloatButtonGroupProps = {
+  /** The shape applied to all child float buttons. */
+  shape?: SlFloatButtonGroup["shape"];
+  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
+  trigger?: SlFloatButtonGroup["trigger"];
+  /** Whether the menu is open (controlled mode, use with trigger). */
+  open?: SlFloatButtonGroup["open"];
+  /** The direction the menu items expand. */
+  placement?: SlFloatButtonGroup["placement"];
+
+  /** Emitted when the menu opens (menu mode only). */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the menu closes (menu mode only). */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+};
+
+type SlFloatButtonProps = {
+  /** The button's type. */
+  type?: SlFloatButton["type"];
+  /** The button's shape. */
+  shape?: SlFloatButton["shape"];
+  /** The button's size. */
+  size?: SlFloatButton["size"];
+  /** The name of the icon to display (from the registered icon library). */
+  icon?: SlFloatButton["icon"];
+  /** Tooltip text shown on hover. */
+  tooltip?: SlFloatButton["tooltip"];
+  /** Tooltip placement. */
+  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
+  /** Disables the button. */
+  disabled?: SlFloatButton["disabled"];
+  /** When set, the button will render as an anchor tag with this URL. */
+  href?: SlFloatButton["href"];
+  /** Where to display the linked URL (only used when href is set). */
+  target?: SlFloatButton["target"];
+
+  /** Emitted when the button is clicked. */
+  "onsl-click"?: (e: CustomEvent<never>) => void;
+};
+
+type SlFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: SlFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: SlFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: SlFormatBytes["display"];
 };
 
 type SlDaterangepickerProps = {
@@ -873,123 +1005,6 @@ as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via
   "onsl-clear"?: (e: CustomEvent<never>) => void;
 };
 
-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. */
-  open?: SlDrawer["open"];
-  /** The drawer's label as displayed in the header. You should always include a relevant label even when using
-`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
-  label?: SlDrawer["label"];
-  /** The direction from which the drawer will open. */
-  placement?: SlDrawer["placement"];
-  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-its parent element, set this attribute and add `position: relative` to the parent. */
-  contained?: SlDrawer["contained"];
-  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the drawer. */
-  "no-header"?: SlDrawer["noHeader"];
-  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */
-  modal?: SlDrawer["modal"];
-  /**  */
-  drawer?: SlDrawer["drawer"];
-  /**  */
-  panel?: SlDrawer["panel"];
-  /**  */
-  overlay?: SlDrawer["overlay"];
-  /** Emitted when the drawer opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
-  "onsl-initial-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
-  "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
-};
-
-type SlFloatButtonProps = {
-  /** The button's type. */
-  type?: SlFloatButton["type"];
-  /** The button's shape. */
-  shape?: SlFloatButton["shape"];
-  /** The button's size. */
-  size?: SlFloatButton["size"];
-  /** The name of the icon to display (from the registered icon library). */
-  icon?: SlFloatButton["icon"];
-  /** Tooltip text shown on hover. */
-  tooltip?: SlFloatButton["tooltip"];
-  /** Tooltip placement. */
-  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
-  /** Disables the button. */
-  disabled?: SlFloatButton["disabled"];
-  /** When set, the button will render as an anchor tag with this URL. */
-  href?: SlFloatButton["href"];
-  /** Where to display the linked URL (only used when href is set). */
-  target?: SlFloatButton["target"];
-
-  /** Emitted when the button is clicked. */
-  "onsl-click"?: (e: CustomEvent<never>) => void;
-};
-
-type 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 SlDropdownProps = {
-  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
-  open?: SlDropdown["open"];
-  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-inside of the viewport. */
-  placement?: SlDropdown["placement"];
-  /** Disables the dropdown so the panel will not open. */
-  disabled?: SlDropdown["disabled"];
-  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
-dropdowns that allow for multiple interactions. */
-  "stay-open-on-select"?: SlDropdown["stayOpenOnSelect"];
-  /** The distance in pixels from which to offset the panel away from its trigger. */
-  distance?: SlDropdown["distance"];
-  /** The distance in pixels from which to offset the panel along its trigger. */
-  skidding?: SlDropdown["skidding"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: SlDropdown["hoist"];
-  /** Syncs the popup width or height to that of the trigger element. */
-  sync?: SlDropdown["sync"];
-  /**  */
-  popup?: SlDropdown["popup"];
-  /**  */
-  trigger?: SlDropdown["trigger"];
-  /**  */
-  panel?: SlDropdown["panel"];
-  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
-components that use a dropdown internally. */
-  containingElement?: SlDropdown["containingElement"];
-  /** Emitted when the dropdown opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlFormatDateProps = {
   /** The date/time to format. 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
@@ -1019,18 +1034,27 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
-type SlDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: SlDivider["vertical"];
-};
-
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: SlFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: SlFormatBytes["display"];
+type SlFormatNumberProps = {
+  /** The number to format. */
+  value?: SlFormatNumber["value"];
+  /** The formatting style to use. */
+  type?: SlFormatNumber["type"];
+  /** Turns off grouping separators. */
+  "no-grouping"?: SlFormatNumber["noGrouping"];
+  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
+  currency?: SlFormatNumber["currency"];
+  /** How to display the currency. */
+  "currency-display"?: SlFormatNumber["currencyDisplay"];
+  /** The minimum number of integer digits to use. Possible values are 1-21. */
+  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
+  /** The minimum number of fraction digits to use. Possible values are 0-20. */
+  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
+  /** The maximum number of fraction digits to use. Possible values are 0-0. */
+  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
+  /** The minimum number of significant digits to use. Possible values are 1-21. */
+  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
+  /** The maximum number of significant digits to use,. Possible values are 1-21. */
+  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
 type SlIconButtonProps = {
@@ -1060,6 +1084,34 @@ that describes what the icon button does. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
+type SlImageComparerProps = {
+  /** The position of the divider as a percentage. */
+  position?: SlImageComparer["position"];
+  /**  */
+  base?: SlImageComparer["base"];
+  /**  */
+  handle?: SlImageComparer["handle"];
+  /** Emitted when the position changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+};
+
+type SlImagePreviewGroupProps = {
+  /** 预览配置，为 false 时禁用预览 */
+  preview?: SlImagePreviewGroup["preview"];
+  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
+  items?: SlImagePreviewGroup["items"];
+  /** 加载失败容错地址（组件级） */
+  fallback?: SlImagePreviewGroup["fallback"];
+  /**  */
+  previewOpen?: SlImagePreviewGroup["previewOpen"];
+  /** 预览打开时触发 */
+  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
+  /** 预览关闭时触发 */
+  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
+  /** 预览图片切换时触发，detail 包含 { current, prev } */
+  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
+};
+
 type SlImageProps = {
   /** 图片地址 */
   src?: SlImage["src"];
@@ -1095,87 +1147,20 @@ type SlImageProps = {
 
 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 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 = {
-  /** 预览配置，为 false 时禁用预览 */
-  preview?: SlImagePreviewGroup["preview"];
-  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
-  items?: SlImagePreviewGroup["items"];
-  /** 加载失败容错地址（组件级） */
-  fallback?: SlImagePreviewGroup["fallback"];
-  /**  */
-  previewOpen?: SlImagePreviewGroup["previewOpen"];
-  /** 预览打开时触发 */
-  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
-  /** 预览关闭时触发 */
-  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
-  /** 预览图片切换时触发，detail 包含 { current, prev } */
-  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
-};
-
-type 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 SlFormatNumberProps = {
-  /** The number to format. */
-  value?: SlFormatNumber["value"];
-  /** The formatting style to use. */
-  type?: SlFormatNumber["type"];
-  /** Turns off grouping separators. */
-  "no-grouping"?: SlFormatNumber["noGrouping"];
-  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
-  currency?: SlFormatNumber["currency"];
-  /** How to display the currency. */
-  "currency-display"?: SlFormatNumber["currencyDisplay"];
-  /** The minimum number of integer digits to use. Possible values are 1-21. */
-  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
-  /** The minimum number of fraction digits to use. Possible values are 0-20. */
-  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
-  /** The maximum number of fraction digits to use. Possible values are 0-0. */
-  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
-  /** The minimum number of significant digits to use. Possible values are 1-21. */
-  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
-  /** The maximum number of significant digits to use,. Possible values are 1-21. */
-  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
+  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 SlInputProps = {
@@ -1284,6 +1269,22 @@ type SlMenuProps = {
   "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
 };
 
+type SlIncludeProps = {
+  /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  src?: SlInclude["src"];
+  /** The fetch mode to use. */
+  mode?: SlInclude["mode"];
+  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  "allow-scripts"?: SlInclude["allowScripts"];
+
+  /** Emitted when the included file is loaded. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the included file fails to load due to an error. */
+  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
+};
+
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -1377,6 +1378,15 @@ type SlNavProps = {
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
+type SlNavGroupProps = {
+  /** Draws the nav group in an active (selected) state. */
+  active?: SlNavGroup["active"];
+  /** The mode of navigation. */
+  mode?: SlNavGroup["mode"];
+  /** Matches Antd's item group label. */
+  label?: SlNavGroup["label"];
+};
+
 type SlNavItemProps = {
   /** A stable key used by `sl-nav` to track selection. */
   key?: SlNavItem["key"];
@@ -1416,15 +1426,6 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
-type SlNavGroupProps = {
-  /** Draws the nav group in an active (selected) state. */
-  active?: SlNavGroup["active"];
-  /** The mode of navigation. */
-  mode?: SlNavGroup["mode"];
-  /** Matches Antd's item group label. */
-  label?: SlNavGroup["label"];
-};
-
 type SlNavSubmenuProps = {
   /** A stable key used by `sl-nav` to track open state. */
   key?: SlNavSubmenu["key"];
@@ -1509,6 +1510,44 @@ type SlNotificationProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlOptionProps = {
+  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
+from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+multiple values. */
+  value?: SlOption["value"];
+  /** Draws the option in a disabled state, preventing selection. */
+  disabled?: SlOption["disabled"];
+  /**  */
+  defaultSlot?: SlOption["defaultSlot"];
+  /**  */
+  current?: SlOption["current"];
+  /**  */
+  selected?: SlOption["selected"];
+  /**  */
+  hasHover?: SlOption["hasHover"];
+};
+
+type SlPaginationProps = {
+  /**  */
+  currentPage?: SlPagination["currentPage"];
+  /**  */
+  pageSize?: SlPagination["pageSize"];
+  /**  */
+  pageSizeOpts?: SlPagination["pageSizeOpts"];
+  /**  */
+  total?: SlPagination["total"];
+  /**  */
+  disabled?: SlPagination["disabled"];
+  /**  */
+  className?: SlPagination["className"];
+  /**  */
+  simpleMode?: SlPagination["simpleMode"];
+  /**  */
+  direction?: SlPagination["direction"];
+  /**  */
+  defaultCurrentPage?: SlPagination["defaultCurrentPage"];
+};
+
 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
@@ -1584,42 +1623,15 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlOptionProps = {
-  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
-from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-multiple values. */
-  value?: SlOption["value"];
-  /** Draws the option in a disabled state, preventing selection. */
-  disabled?: SlOption["disabled"];
-  /**  */
-  defaultSlot?: SlOption["defaultSlot"];
-  /**  */
-  current?: SlOption["current"];
-  /**  */
-  selected?: SlOption["selected"];
-  /**  */
-  hasHover?: SlOption["hasHover"];
-};
-
-type SlPaginationProps = {
-  /**  */
-  currentPage?: SlPagination["currentPage"];
-  /**  */
-  pageSize?: SlPagination["pageSize"];
-  /**  */
-  pageSizeOpts?: SlPagination["pageSizeOpts"];
-  /**  */
-  total?: SlPagination["total"];
-  /**  */
-  disabled?: SlPagination["disabled"];
-  /**  */
-  className?: SlPagination["className"];
-  /**  */
-  simpleMode?: SlPagination["simpleMode"];
+type SlProgressRingProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressRing["value"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressRing["label"];
   /**  */
-  direction?: SlPagination["direction"];
+  indicator?: SlProgressRing["indicator"];
   /**  */
-  defaultCurrentPage?: SlPagination["defaultCurrentPage"];
+  indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
 type SlProgressBarProps = {
@@ -1631,17 +1643,6 @@ type SlProgressBarProps = {
   label?: SlProgressBar["label"];
 };
 
-type SlProgressRingProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressRing["value"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressRing["label"];
-  /**  */
-  indicator?: SlProgressRing["indicator"];
-  /**  */
-  indicatorOffset?: SlProgressRing["indicatorOffset"];
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1661,6 +1662,22 @@ 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 SlRadioGroupProps = {
   /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
 instead. */
@@ -1749,26 +1766,6 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRadioButtonProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
-  /**  */
-  input?: SlRadioButton["input"];
-  /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRatingProps = {
   /** A label that describes the rating to assistive devices. */
   label?: SlRating["label"];
@@ -1795,22 +1792,34 @@ well with `<sl-icon>` elements. */
   "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
 };
 
-type SlRadioProps = {
+type SlRadioButtonProps = {
   /** 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"];
+  value?: SlRadioButton["value"];
+  /** Disables the radio button. */
+  disabled?: SlRadioButton["disabled"];
+  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+this attribute can typically be omitted. */
+  size?: SlRadioButton["size"];
+  /** Draws a pill-style radio button with rounded edges. */
+  pill?: SlRadioButton["pill"];
   /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
+  input?: SlRadioButton["input"];
+  /**  */
+  hiddenInput?: SlRadioButton["hiddenInput"];
+  /** Emitted when the button loses focus. */
   "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
+  /** Emitted when the button gains focus. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
+type SlResizeObserverProps = {
+  /** Disables the observer. */
+  disabled?: SlResizeObserver["disabled"];
+
+  /** Emitted when the element is resized. */
+  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
+};
+
 type SlRelativeTimeProps = {
   /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
 string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
@@ -1825,14 +1834,6 @@ a date to this format in JavaScript, use [`date.toISOString()`](https://develope
   sync?: SlRelativeTime["sync"];
 };
 
-type SlResizeObserverProps = {
-  /** Disables the observer. */
-  disabled?: SlResizeObserver["disabled"];
-
-  /** Emitted when the element is resized. */
-  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
-};
-
 type SlRowProps = {
   /** Spacing between columns, can be a number or responsive object */
   gutter?: SlRow["gutter"];
@@ -2026,6 +2027,22 @@ type SlSenderProps = {
   "onsl-paste-file"?: (e: CustomEvent<never>) => void;
 };
 
+type SlSenderHeaderProps = {
+  /** Whether the panel content is expanded. */
+  open?: SlSenderHeader["open"];
+  /** Whether the close/toggle button is shown. */
+  closable?: SlSenderHeader["closable"];
+  /** Plain-text title. Use the `title` slot for rich content. */
+  title?: SlSenderHeader["title"];
+  /** When true, the content DOM is always rendered even when collapsed.
+Useful when you need refs to inner elements on initial mount.
+When false (default), content is removed from the DOM when closed. */
+  "force-render"?: SlSenderHeader["forceRender"];
+
+  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
+  "onsl-open-change"?: (e: CustomEvent<never>) => void;
+};
+
 type SlSenderSwitchProps = {
   /** Whether the switch is in the checked (active) state. */
   checked?: SlSenderSwitch["checked"];
@@ -2040,6 +2057,11 @@ type SlSenderSwitchProps = {
   "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlSkeletonProps = {
+  /** Determines which effect the skeleton will use. */
+  effect?: SlSkeleton["effect"];
+};
+
 type SlSpaceProps = {
   /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
   orientation?: SlSpace["orientation"];
@@ -2053,11 +2075,6 @@ type SlSpaceProps = {
   separator?: SlSpace["separator"];
 };
 
-type SlSkeletonProps = {
-  /** Determines which effect the skeleton will use. */
-  effect?: SlSkeleton["effect"];
-};
-
 type SlSpinnerProps = {};
 
 type SlSplitPanelProps = {
@@ -2112,22 +2129,6 @@ type SlStepsProps = {
   onChange?: SlSteps["onChange"];
 };
 
-type SlSenderHeaderProps = {
-  /** Whether the panel content is expanded. */
-  open?: SlSenderHeader["open"];
-  /** Whether the close/toggle button is shown. */
-  closable?: SlSenderHeader["closable"];
-  /** Plain-text title. Use the `title` slot for rich content. */
-  title?: SlSenderHeader["title"];
-  /** When true, the content DOM is always rendered even when collapsed.
-Useful when you need refs to inner elements on initial mount.
-When false (default), content is removed from the DOM when closed. */
-  "force-render"?: SlSenderHeader["forceRender"];
-
-  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
-  "onsl-open-change"?: (e: CustomEvent<never>) => void;
-};
-
 type SlSwitchProps = {
   /**  */
   title?: SlSwitch["title"];
@@ -2184,6 +2185,30 @@ type SlTabProps = {
   "onsl-close"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTabGroupProps = {
+  /** The placement of the tabs. */
+  placement?: SlTabGroup["placement"];
+  /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
+  activation?: SlTabGroup["activation"];
+  /** Disables the scroll arrows that appear when tabs overflow. */
+  "no-scroll-controls"?: SlTabGroup["noScrollControls"];
+  /** Prevent scroll buttons from being hidden when inactive. */
+  "fixed-scroll-controls"?: SlTabGroup["fixedScrollControls"];
+  /**  */
+  tabGroup?: SlTabGroup["tabGroup"];
+  /**  */
+  body?: SlTabGroup["body"];
+  /**  */
+  nav?: SlTabGroup["nav"];
+  /**  */
+  indicator?: SlTabGroup["indicator"];
+  /** Emitted when a tab is shown. */
+  "onsl-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted when a tab is hidden. */
+  "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
+};
+
 type SlTabPanelProps = {
   /** The tab panel's name. */
   name?: SlTabPanel["name"];
@@ -2274,6 +2299,20 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlTagProps = {
+  /** The tag's theme variant. */
+  variant?: SlTag["variant"];
+  /** The tag's size. */
+  size?: SlTag["size"];
+  /** Draws a pill-style tag with rounded edges. */
+  pill?: SlTag["pill"];
+  /** Makes the tag removable and shows a remove button. */
+  removable?: SlTag["removable"];
+
+  /** Emitted when the remove button is activated. */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -2347,30 +2386,6 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTabGroupProps = {
-  /** The placement of the tabs. */
-  placement?: SlTabGroup["placement"];
-  /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
-manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
-  activation?: SlTabGroup["activation"];
-  /** Disables the scroll arrows that appear when tabs overflow. */
-  "no-scroll-controls"?: SlTabGroup["noScrollControls"];
-  /** Prevent scroll buttons from being hidden when inactive. */
-  "fixed-scroll-controls"?: SlTabGroup["fixedScrollControls"];
-  /**  */
-  tabGroup?: SlTabGroup["tabGroup"];
-  /**  */
-  body?: SlTabGroup["body"];
-  /**  */
-  nav?: SlTabGroup["nav"];
-  /**  */
-  indicator?: SlTabGroup["indicator"];
-  /** Emitted when a tab is shown. */
-  "onsl-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
-  /** Emitted when a tab is hidden. */
-  "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
-};
-
 type SlThinkProps = {
   /** The title text shown in the status bar. Accepts plain text.
 For rich HTML content, use the `title` slot instead.
@@ -2455,20 +2470,6 @@ type SlThoughtChainItemProps = {
   "onsl-click"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
 type SlThoughtChainNodeProps = {
   /** Unique key for this node. Required when using collapsible mode or
 controlled expansion via the parent `<sl-thought-chain>`.
@@ -2551,6 +2552,43 @@ scenarios. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTransferProps = {
+  /** 数据源 */
+  dataSource?: SlTransfer["dataSource"];
+  /** 目标列表的 key 集合 */
+  "target-keys"?: SlTransfer["targetKeys"];
+  /** 是否禁用 */
+  disabled?: SlTransfer["disabled"];
+  /** 是否显示分页 */
+  pagination?: SlTransfer["pagination"];
+  /** 每页显示条数 */
+  "page-size"?: SlTransfer["pageSize"];
+  /** 是否显示搜索框 */
+  "show-search"?: SlTransfer["showSearch"];
+  /** 是否显示全选 */
+  "show-select-all"?: SlTransfer["showSelectAll"];
+  /** 是否单向穿梭 */
+  "one-way"?: SlTransfer["oneWay"];
+  /** 两个列表的标题，格式为 ['sourceTitle', 'targetTitle'] */
+  titles?: SlTransfer["titles"];
+  /** 组件状态 */
+  status?: SlTransfer["status"];
+  /** 搜索框占位符 */
+  "search-placeholder"?: SlTransfer["searchPlaceholder"];
+  /** 受控模式下的选中项 key 集合，传入后由外部完全控制选中状态 */
+  "selected-keys"?: SlTransfer["selectedKeys"];
+  /** 自定义渲染每个列表项的内容，返回 TemplateResult 或字符串 */
+  itemRender?: SlTransfer["itemRender"];
+  /** 当数据穿梭完成时触发，返回目标键、方向和移动的键。 */
+  "onsl-transfer-change"?: (e: CustomEvent<never>) => void;
+  /** 当选中项变化时触发。 */
+  "onsl-transfer-select-change"?: (e: CustomEvent<never>) => void;
+  /** 当搜索时触发。 */
+  "onsl-transfer-search"?: (e: CustomEvent<never>) => void;
+  /** 当列表滚动时触发。 */
+  "onsl-transfer-scroll"?: (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. */
@@ -2608,6 +2646,75 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
+type SlUploadProps = {
+  /** 上传文件的目标 URL。 */
+  action?: SlUpload["action"];
+  /** 上传请求的 HTTP 方法。 */
+  method?: SlUpload["method"];
+  /** 文件输入的 name 属性（用作 FormData 的键名）。 */
+  name?: SlUpload["name"];
+  /** 接受的文件类型（与原生 input 的 accept 属性相同）。 */
+  accept?: SlUpload["accept"];
+  /** 是否允许选择多个文件。 */
+  multiple?: SlUpload["multiple"];
+  /** 是否支持目录上传。 */
+  directory?: SlUpload["directory"];
+  /** 是否禁用上传。 */
+  disabled?: SlUpload["disabled"];
+  /** 上传类型：'select' 为点击选择，'drag' 为拖放上传。 */
+  type?: SlUpload["type"];
+  /** 文件列表的展示类型。 */
+  "list-type"?: SlUpload["listType"];
+  /** 允许上传的最大文件数。设置为 1 时，新文件将替换旧文件。 */
+  "max-count"?: SlUpload["maxCount"];
+  /** 是否显示上传列表，或传入对象来配置显示的图标。
+设为 `false` 时隐藏文件列表。
+设为 `true`（默认）时，所有图标使用默认行为。
+设为对象时，可单独控制 `showPreviewIcon`、`showRemoveIcon` 和 `showDownloadIcon`。
+作为 HTML 属性使用时为 `show-upload-list`（布尔值）。对象配置需通过 JavaScript 属性设置。 */
+  "show-upload-list"?: SlUpload["showUploadList"];
+  /** 是否点击触发区域时打开文件选择对话框。 */
+  "open-file-dialog-on-click"?: SlUpload["openFileDialogOnClick"];
+  /** 是否支持粘贴上传文件。启用后会监听 document 的 paste 事件。 */
+  pastable?: SlUpload["pastable"];
+  /** 上传请求是否携带 Cookie。 */
+  "with-credentials"?: SlUpload["withCredentials"];
+  /** 上传请求的额外请求头。 */
+  headers?: SlUpload["headers"];
+  /** 上传请求附带的额外数据。 */
+  data?: SlUpload["data"];
+  /**  */
+  fileInput?: SlUpload["fileInput"];
+  /** 文件列表（受控模式）。设置后组件变为受控组件。 */
+  fileList?: SlUpload["fileList"];
+  /** 默认文件列表（非受控模式）。 */
+  defaultFileList?: SlUpload["defaultFileList"];
+  /** 上传前的回调函数。返回 false 取消上传，返回 File/Blob 进行转换。 */
+  beforeUpload?: SlUpload["beforeUpload"];
+  /** 自定义上传请求实现。 */
+  customRequest?: SlUpload["customRequest"];
+  /** 自定义判断文件是否为图片的函数。 */
+  isImageUrl?: SlUpload["isImageUrl"];
+  /** 自定义文件列表项的渲染函数。接收 (file, fileList, actions)，应返回 Lit TemplateResult。 */
+  itemRender?: SlUpload["itemRender"];
+  /** 自定义文件图标的渲染函数。接收 (file, listType)，应返回 Lit TemplateResult。 */
+  iconRender?: SlUpload["iconRender"];
+  /** 文件列表变化时触发。`event.detail` 包含 `{ file, fileList, event? }`，其中 `event` 是可选的进度信息 `{ percent }`。 */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** 文件被移除时触发。调用 `event.preventDefault()` 可取消移除。`event.detail` 包含 `{ file }`。 */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+  /** 请求预览文件时触发。`event.detail` 包含 `{ file }`。 */
+  "onsl-preview"?: (e: CustomEvent<never>) => void;
+  /** 请求下载文件时触发。调用 `event.preventDefault()` 可阻止默认打开 URL 行为。`event.detail` 包含 `{ file }`。 */
+  "onsl-download"?: (e: CustomEvent<never>) => void;
+  /** 拖放模式下放置文件时触发。`event.detail` 包含 `{ event }`，其中 `event` 是原生 `DragEvent`。 */
+  "onsl-drop"?: (e: CustomEvent<never>) => void;
+  /** 文件数量超过 maxCount 时触发。`event.detail` 包含 `{ files, maxCount }`。 */
+  "onsl-exceed"?: (e: CustomEvent<never>) => void;
+};
+
+type SlVisuallyHiddenProps = {};
+
 type SlTreeSelectProps = {
   /** The name of the control, submitted as a name/value pair with form data. */
   name?: SlTreeSelect["name"];
@@ -2714,75 +2821,6 @@ Each node has `title`, `value`, and optionally `children`, `disabled`, `selectab
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlUploadProps = {
-  /** 上传文件的目标 URL。 */
-  action?: SlUpload["action"];
-  /** 上传请求的 HTTP 方法。 */
-  method?: SlUpload["method"];
-  /** 文件输入的 name 属性（用作 FormData 的键名）。 */
-  name?: SlUpload["name"];
-  /** 接受的文件类型（与原生 input 的 accept 属性相同）。 */
-  accept?: SlUpload["accept"];
-  /** 是否允许选择多个文件。 */
-  multiple?: SlUpload["multiple"];
-  /** 是否支持目录上传。 */
-  directory?: SlUpload["directory"];
-  /** 是否禁用上传。 */
-  disabled?: SlUpload["disabled"];
-  /** 上传类型：'select' 为点击选择，'drag' 为拖放上传。 */
-  type?: SlUpload["type"];
-  /** 文件列表的展示类型。 */
-  "list-type"?: SlUpload["listType"];
-  /** 允许上传的最大文件数。设置为 1 时，新文件将替换旧文件。 */
-  "max-count"?: SlUpload["maxCount"];
-  /** 是否显示上传列表，或传入对象来配置显示的图标。
-设为 `false` 时隐藏文件列表。
-设为 `true`（默认）时，所有图标使用默认行为。
-设为对象时，可单独控制 `showPreviewIcon`、`showRemoveIcon` 和 `showDownloadIcon`。
-作为 HTML 属性使用时为 `show-upload-list`（布尔值）。对象配置需通过 JavaScript 属性设置。 */
-  "show-upload-list"?: SlUpload["showUploadList"];
-  /** 是否点击触发区域时打开文件选择对话框。 */
-  "open-file-dialog-on-click"?: SlUpload["openFileDialogOnClick"];
-  /** 是否支持粘贴上传文件。启用后会监听 document 的 paste 事件。 */
-  pastable?: SlUpload["pastable"];
-  /** 上传请求是否携带 Cookie。 */
-  "with-credentials"?: SlUpload["withCredentials"];
-  /** 上传请求的额外请求头。 */
-  headers?: SlUpload["headers"];
-  /** 上传请求附带的额外数据。 */
-  data?: SlUpload["data"];
-  /**  */
-  fileInput?: SlUpload["fileInput"];
-  /** 文件列表（受控模式）。设置后组件变为受控组件。 */
-  fileList?: SlUpload["fileList"];
-  /** 默认文件列表（非受控模式）。 */
-  defaultFileList?: SlUpload["defaultFileList"];
-  /** 上传前的回调函数。返回 false 取消上传，返回 File/Blob 进行转换。 */
-  beforeUpload?: SlUpload["beforeUpload"];
-  /** 自定义上传请求实现。 */
-  customRequest?: SlUpload["customRequest"];
-  /** 自定义判断文件是否为图片的函数。 */
-  isImageUrl?: SlUpload["isImageUrl"];
-  /** 自定义文件列表项的渲染函数。接收 (file, fileList, actions)，应返回 Lit TemplateResult。 */
-  itemRender?: SlUpload["itemRender"];
-  /** 自定义文件图标的渲染函数。接收 (file, listType)，应返回 Lit TemplateResult。 */
-  iconRender?: SlUpload["iconRender"];
-  /** 文件列表变化时触发。`event.detail` 包含 `{ file, fileList, event? }`，其中 `event` 是可选的进度信息 `{ percent }`。 */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** 文件被移除时触发。调用 `event.preventDefault()` 可取消移除。`event.detail` 包含 `{ file }`。 */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-  /** 请求预览文件时触发。`event.detail` 包含 `{ file }`。 */
-  "onsl-preview"?: (e: CustomEvent<never>) => void;
-  /** 请求下载文件时触发。调用 `event.preventDefault()` 可阻止默认打开 URL 行为。`event.detail` 包含 `{ file }`。 */
-  "onsl-download"?: (e: CustomEvent<never>) => void;
-  /** 拖放模式下放置文件时触发。`event.detail` 包含 `{ event }`，其中 `event` 是原生 `DragEvent`。 */
-  "onsl-drop"?: (e: CustomEvent<never>) => void;
-  /** 文件数量超过 maxCount 时触发。`event.detail` 包含 `{ files, maxCount }`。 */
-  "onsl-exceed"?: (e: CustomEvent<never>) => void;
-};
-
-type SlVisuallyHiddenProps = {};
-
 type SlXMarkdownProps = {
   /** Markdown content to render. */
   content?: SlXMarkdown["content"];
@@ -2823,51 +2861,16 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - The alert's main content.
-   * - **icon** - An icon to show in the alert. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the optional icon.
-   * - **message** - The container that wraps the alert's main content.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   */
-  "sl-alert": DefineComponent<SlAlertProps>;
-
-  /**
-   * Avatars are used to represent a person or object.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
-   * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
-   */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
-
-  /**
-   * Badges are used to draw attention and display statuses or counts.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The badge's content.
+   * - **icon** - An icon to show in the alert. Works best with `<sl-icon>`.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the optional icon.
+   * - **message** - The container that wraps the alert's main content.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-alert": DefineComponent<SlAlertProps>;
 
   /**
    * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
@@ -2891,6 +2894,25 @@ export type CustomElements = {
    */
   "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
+  /**
+   * 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).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
+   *
+   * ### **Methods:**
+   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   */
+  "sl-animation": DefineComponent<SlAnimationProps>;
+
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -2905,6 +2927,19 @@ export type CustomElements = {
    */
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
+  /**
+   * 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>;
+
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -2926,23 +2961,26 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * 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).
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-animation": DefineComponent<SlAnimationProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -3083,19 +3121,6 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
   /**
    * Cascader is a cascade selection component that allows users to select from a set of hierarchical options.
    * ---
@@ -3139,57 +3164,6 @@ export type CustomElements = {
    */
   "sl-cascader": DefineComponent<SlCascaderProps>;
 
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the checkbox loses focus.
-   * - **sl-change** - Emitted when the checked state changes.
-   * - **sl-focus** - Emitted when the checkbox gains focus.
-   * - **sl-input** - Emitted when the checkbox receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   *
-   * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "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.
    * ---
@@ -3253,47 +3227,111 @@ export type CustomElements = {
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
   /**
-   *
+   * Checkboxes allow the user to toggle an option on or off.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-cancel**
-   * - **sl-clear**
-   * - **sl-confirm**
-   * - **sl-date-change**
+   *  - **sl-blur** - Emitted when the checkbox loses focus.
+   * - **sl-change** - Emitted when the checked state changes.
+   * - **sl-focus** - Emitted when the checkbox gains focus.
+   * - **sl-input** - Emitted when the checkbox receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
    */
-  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
   /**
-   * Details show a brief summary and expand to show additional content.
+   * Copies text data to the clipboard when the user clicks the trigger.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-show** - Emitted when the details opens.
-   * - **sl-after-show** - Emitted after the details opens and all animations are complete.
-   * - **sl-hide** - Emitted when the details closes.
-   * - **sl-after-hide** - Emitted after the details closes and all animations are complete.
+   *  - **sl-copy** - Emitted when the data has been copied.
+   * - **sl-error** - Emitted when the data could not be copied.
+   *
+   * ### **Slots:**
+   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<sl-icon>`.
+   * - **success-icon** - The icon to show when the content is copied. Works best with `<sl-icon>`.
+   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
+   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The internal `<button>` element.
+   * - **copy-icon** - The container that holds the copy icon.
+   * - **success-icon** - The container that holds the success icon.
+   * - **error-icon** - The container that holds the error icon.
+   * - **tooltip__base** - The tooltip's exported `base` part.
+   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
+   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
+   * - **tooltip__body** - The tooltip's exported `body` part.
+   */
+  "sl-copy-button": DefineComponent<SlCopyButtonProps>;
+
+  /**
+   * Col component for grid layout system.
+   * ---
    *
-   * ### **Methods:**
-   *  - **show()** - Shows the details.
-   * - **hide()** - Hides the details
    *
    * ### **Slots:**
-   *  - _default_ - The details' main content.
-   * - **summary** - The details' summary. Alternatively, you can use the `summary` attribute.
-   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
+   *  - _default_ - The default slot for content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **header** - The header that wraps both the summary and the expand/collapse icon.
-   * - **summary** - The container that wraps the summary.
-   * - **summary-icon** - The container that wraps the expand/collapse icons.
-   * - **content** - The details content.
    */
-  "sl-details": DefineComponent<SlDetailsProps>;
+  "sl-col": DefineComponent<SlColProps>;
+
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel item's content..
+   *
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   */
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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.
@@ -3308,7 +3346,37 @@ export type CustomElements = {
    * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    * - **sl-clear** - Emitted when the clear button is activated.
    */
-  "sl-datepicker": DefineComponent<SlDatepickerProps>;
+  "sl-datepicker": DefineComponent<SlDatepickerProps>;
+
+  /**
+   * Details show a brief summary and expand to show additional content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the details opens.
+   * - **sl-after-show** - Emitted after the details opens and all animations are complete.
+   * - **sl-hide** - Emitted when the details closes.
+   * - **sl-after-hide** - Emitted after the details closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the details.
+   * - **hide()** - Hides the details
+   *
+   * ### **Slots:**
+   *  - _default_ - The details' main content.
+   * - **summary** - The details' summary. Alternatively, you can use the `summary` attribute.
+   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The header that wraps both the summary and the expand/collapse icon.
+   * - **summary** - The container that wraps the summary.
+   * - **summary-icon** - The container that wraps the expand/collapse icons.
+   * - **content** - The details content.
+   */
+  "sl-details": DefineComponent<SlDetailsProps>;
 
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
@@ -3354,75 +3422,16 @@ export type CustomElements = {
   "sl-dialog": DefineComponent<SlDialogProps>;
 
   /**
-   * Copies text data to the clipboard when the user clicks the trigger.
+   * Dividers are used to visually separate or group elements.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-copy** - Emitted when the data has been copied.
-   * - **sl-error** - Emitted when the data could not be copied.
-   *
-   * ### **Slots:**
-   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<sl-icon>`.
-   * - **success-icon** - The icon to show when the content is copied. Works best with `<sl-icon>`.
-   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<sl-icon>`.
-   *
    * ### **CSS Properties:**
-   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
-   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **button** - The internal `<button>` element.
-   * - **copy-icon** - The container that holds the copy icon.
-   * - **success-icon** - The container that holds the success icon.
-   * - **error-icon** - The container that holds the error icon.
-   * - **tooltip__base** - The tooltip's exported `base` part.
-   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
-   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
-   * - **tooltip__body** - The tooltip's exported `body` part.
-   */
-  "sl-copy-button": DefineComponent<SlCopyButtonProps>;
-
-  /**
-   * Date range inputs allow users to select a range of dates.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   * - **sl-clear** - Emitted when the clear button is activated.
-   *
-   * ### **Methods:**
-   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
-   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
-   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
-   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
-   * - **focus(options: _FocusOptions_)** - 聚焦到开始日期输入框并打开面板
-   * - **blur()** - 移除焦点并关闭面板
-   *
-   * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The input's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **base** - The component's base wrapper.
-   * - **start-input** - The internal `<input>` for the start date.
-   * - **end-input** - The internal `<input>` for the end date.
-   * - **separator** - The separator between the two inputs.
-   * - **suffix** - The container that wraps the suffix icon.
-   * - **clear-button** - The clear button.
-   * - **popup** - The popup that contains the calendars.
-   * - **calendars** - The container that wraps the calendars.
+   *  - **--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-daterangepicker": DefineComponent<SlDaterangepickerProps>;
+  "sl-divider": DefineComponent<SlDividerProps>;
 
   /**
    * Drawers slide in from a container to expose additional options and information.
@@ -3468,23 +3477,33 @@ export type CustomElements = {
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
   /**
-   * A floating action button that stays fixed on the page.
+   * Dropdowns expose additional content that "drops down" in a panel.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-click** - Emitted when the button is clicked.
+   *  - **sl-show** - Emitted when the dropdown opens.
+   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dropdown closes.
+   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown panel.
+   * - **hide()** - Hides the dropdown panel
+   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
    *
    * ### **Slots:**
-   *  - _default_ - The button's icon content.
-   * - **content** - Optional text content (only visible when shape is square).
+   *  - _default_ - The dropdown's main content.
+   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
    *
    * ### **CSS Parts:**
-   *  - **base** - The button's base wrapper.
-   * - **icon** - The icon container.
-   * - **content** - The text content container.
+   *  - **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.
+   * - **trigger** - The container that wraps the trigger.
+   * - **panel** - The panel that gets shown when the dropdown is open.
    */
-  "sl-float-button": DefineComponent<SlFloatButtonProps>;
+  "sl-dropdown": DefineComponent<SlDropdownProps>;
 
   /**
    * Groups multiple float buttons together, with optional menu trigger.
@@ -3509,59 +3528,85 @@ export type CustomElements = {
   "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
   /**
-   * Dropdowns expose additional content that "drops down" in a panel.
+   * A floating action button that stays fixed on the page.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-show** - Emitted when the dropdown opens.
-   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **sl-hide** - Emitted when the dropdown closes.
-   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dropdown panel.
-   * - **hide()** - Hides the dropdown panel
-   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
+   *  - **sl-click** - Emitted when the button is clicked.
    *
    * ### **Slots:**
-   *  - _default_ - The dropdown's main content.
-   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
+   *  - _default_ - The button's icon content.
+   * - **content** - Optional text content (only visible when shape is square).
    *
    * ### **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.
-   * - **trigger** - The container that wraps the trigger.
-   * - **panel** - The panel that gets shown when the dropdown is open.
+   *  - **base** - The button's base wrapper.
+   * - **icon** - The icon container.
+   * - **content** - The text content container.
    */
-  "sl-dropdown": DefineComponent<SlDropdownProps>;
+  "sl-float-button": DefineComponent<SlFloatButtonProps>;
 
   /**
-   * Formats a date/time using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
-   * Dividers are used to visually separate or group elements.
+   * Date range inputs allow users to select a range of dates.
    * ---
    *
    *
-   * ### **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)_
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **sl-clear** - Emitted when the clear button is activated.
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
+   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
+   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
+   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
+   * - **focus(options: _FocusOptions_)** - 聚焦到开始日期输入框并打开面板
+   * - **blur()** - 移除焦点并关闭面板
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The input's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **base** - The component's base wrapper.
+   * - **start-input** - The internal `<input>` for the start date.
+   * - **end-input** - The internal `<input>` for the end date.
+   * - **separator** - The separator between the two inputs.
+   * - **suffix** - The container that wraps the suffix icon.
+   * - **clear-button** - The clear button.
+   * - **popup** - The popup that contains the calendars.
+   * - **calendars** - The container that wraps the calendars.
    */
-  "sl-divider": DefineComponent<SlDividerProps>;
+  "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
+
+  /**
+   * Formats a number using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
@@ -3582,49 +3627,6 @@ export type CustomElements = {
    */
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
-  /**
-   * 图片组件，支持预览、缩放、旋转、翻转等功能。
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **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>;
-
-  /**
-   * 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>;
-
   /**
    * Compare visual differences between similar photos with a sliding panel.
    * ---
@@ -3675,22 +3677,47 @@ export type CustomElements = {
   "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
 
   /**
-   * Includes give you the power to embed external HTML files into the page.
+   * 图片组件，支持预览、缩放、旋转、翻转等功能。
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-load** - Emitted when the included file is loaded.
-   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   *  - **sl-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-include": DefineComponent<SlIncludeProps>;
+  "sl-image": DefineComponent<SlImageProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * 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-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-icon": DefineComponent<SlIconProps>;
 
   /**
    * Inputs collect data from the user.
@@ -3755,6 +3782,17 @@ export type CustomElements = {
    */
   "sl-menu": DefineComponent<SlMenuProps>;
 
+  /**
+   * Includes give you the power to embed external HTML files into the page.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the included file is loaded.
+   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   */
+  "sl-include": DefineComponent<SlIncludeProps>;
+
   /**
    * Menu items provide options for the user to pick from in a menu.
    * ---
@@ -3828,6 +3866,22 @@ export type CustomElements = {
    */
   "sl-nav": DefineComponent<SlNavProps>;
 
+  /**
+   * Nav groups are used to group related nav items.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _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-nav-group": DefineComponent<SlNavGroupProps>;
+
   /**
    * Nav items are the individual links or buttons within a navigation menu.
    * ---
@@ -3849,22 +3903,6 @@ export type CustomElements = {
    */
   "sl-nav-item": DefineComponent<SlNavItemProps>;
 
-  /**
-   * Nav groups are used to group related nav items.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _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-nav-group": DefineComponent<SlNavGroupProps>;
-
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
    * ---
@@ -3942,6 +3980,35 @@ export type CustomElements = {
    */
   "sl-notification": DefineComponent<SlNotificationProps>;
 
+  /**
+   * Options define the selectable items within various form controls such as [select](/components/select).
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **getTextLabel()** - Returns a plain text label based on the option's content.
+   *
+   * ### **Slots:**
+   *  - _default_ - The option's label.
+   * - **prefix** - Used to prepend an icon or similar element to the menu item.
+   * - **suffix** - Used to append an icon or similar element to the menu item.
+   *
+   * ### **CSS Parts:**
+   *  - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **base** - The component's base wrapper.
+   * - **label** - The option's label.
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   */
+  "sl-option": DefineComponent<SlOptionProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
    * ---
@@ -3971,33 +4038,26 @@ export type CustomElements = {
   "sl-popup": DefineComponent<SlPopupProps>;
 
   /**
-   * Options define the selectable items within various form controls such as [select](/components/select).
+   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **getTextLabel()** - Returns a plain text label based on the option's content.
-   *
    * ### **Slots:**
-   *  - _default_ - The option's label.
-   * - **prefix** - Used to prepend an icon or similar element to the menu item.
-   * - **suffix** - Used to append an icon or similar element to the menu item.
-   *
-   * ### **CSS Parts:**
-   *  - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **base** - The component's base wrapper.
-   * - **label** - The option's label.
-   * - **prefix** - The container that wraps the prefix.
-   * - **suffix** - The container that wraps the suffix.
-   */
-  "sl-option": DefineComponent<SlOptionProps>;
-
-  /**
+   *  - _default_ - A label to show inside the ring.
    *
-   * ---
+   * ### **CSS Properties:**
+   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
+   * - **--track-width** - The width of the track. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
    *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **label** - The progress ring label.
    */
-  "sl-pagination": DefineComponent<SlPaginationProps>;
+  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
   /**
    * Progress bars are used to show the status of an ongoing operation.
@@ -4021,36 +4081,35 @@ export type CustomElements = {
   "sl-progress-bar": DefineComponent<SlProgressBarProps>;
 
   /**
-   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
+   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the ring.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
-   * - **--track-width** - The width of the track. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
-   *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **label** - The progress ring label.
    */
-  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
   /**
-   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * 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-qr-code": DefineComponent<SlQrCodeProps>;
+  "sl-radio": DefineComponent<SlRadioProps>;
 
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
@@ -4130,34 +4189,6 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
-  /**
-   * Radios buttons allow the user to select a single option from a group using a button-like control.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the button loses focus.
-   * - **sl-focus** - Emitted when the button gains focus.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
-   * - **blur()** - Removes focus from the radio button.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **button** - The internal `<button>` element.
-   * - **button--checked** - The internal button element when the radio button is checked.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The container that wraps the radio button's label.
-   * - **suffix** - The container that wraps the suffix.
-   */
-  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
-
   /**
    * Ratings give users a way to quickly view and provide feedback.
    * ---
@@ -4183,32 +4214,32 @@ export type CustomElements = {
   "sl-rating": DefineComponent<SlRatingProps>;
 
   /**
-   * Radios allow the user to select a single option from a group.
+   * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-focus** - Emitted when the control gains focus.
+   *  - **sl-blur** - Emitted when the button loses focus.
+   * - **sl-focus** - Emitted when the button gains focus.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
+   * - **blur()** - Removes focus from the radio button.
    *
    * ### **Slots:**
-   *  - _default_ - The radio's label.
+   *  - _default_ - The radio button's label.
+   * - **prefix** - A presentational prefix icon or similar element.
+   * - **suffix** - A presentational suffix icon or similar element.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **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>;
-
-  /**
-   * Outputs a localized time phrase relative to the current date and time.
-   * ---
-   *
+   * - **button** - The internal `<button>` element.
+   * - **button--checked** - The internal button element when the radio button is checked.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The container that wraps the radio button's label.
+   * - **suffix** - The container that wraps the suffix.
    */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
 
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
@@ -4223,6 +4254,13 @@ export type CustomElements = {
    */
   "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
   /**
    * Row component for grid layout system.
    * ---
@@ -4390,6 +4428,26 @@ export type CustomElements = {
    */
   "sl-sender": DefineComponent<SlSenderProps>;
 
+  /**
+   * A collapsible header panel for the Sender component.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
+   *
+   * ### **Slots:**
+   *  - _default_ - The panel content (children).
+   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The header bar containing title and close button.
+   * - **title** - The title wrapper inside the header.
+   * - **content** - The collapsible content area.
+   */
+  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
+
   /**
    * A toggle switch button for the Sender component, supporting checked/unchecked states
    * with optional distinct content for each state.
@@ -4411,38 +4469,38 @@ export type CustomElements = {
   "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
 
   /**
-   * Space 组件用于设置组件之间的间距。
+   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - 需要添加间距的子元素。
-   *
    * ### **CSS Properties:**
-   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
+   *  - **--border-radius** - The skeleton's border radius. _(default: undefined)_
+   * - **--color** - The color of the skeleton. _(default: undefined)_
+   * - **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - 组件的基础容器。
-   * - **item** - 每个子元素的包装容器。
-   * - **separator** - 分隔符容器。
+   *  - **base** - The component's base wrapper.
+   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
    */
-  "sl-space": DefineComponent<SlSpaceProps>;
+  "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
-   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
+   * Space 组件用于设置组件之间的间距。
    * ---
    *
    *
+   * ### **Slots:**
+   *  - _default_ - 需要添加间距的子元素。
+   *
    * ### **CSS Properties:**
-   *  - **--border-radius** - The skeleton's border radius. _(default: undefined)_
-   * - **--color** - The color of the skeleton. _(default: undefined)_
-   * - **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_
+   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
+   *  - **base** - 组件的基础容器。
+   * - **item** - 每个子元素的包装容器。
+   * - **separator** - 分隔符容器。
    */
-  "sl-skeleton": DefineComponent<SlSkeletonProps>;
+  "sl-space": DefineComponent<SlSpaceProps>;
 
   /**
    * Spinners are used to show the progress of an indeterminate operation.
@@ -4494,26 +4552,6 @@ export type CustomElements = {
    */
   "sl-steps": DefineComponent<SlStepsProps>;
 
-  /**
-   * A collapsible header panel for the Sender component.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
-   *
-   * ### **Slots:**
-   *  - _default_ - The panel content (children).
-   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **header** - The header bar containing title and close button.
-   * - **title** - The title wrapper inside the header.
-   * - **content** - The collapsible content area.
-   */
-  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
-
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -4571,6 +4609,40 @@ export type CustomElements = {
    */
   "sl-tab": DefineComponent<SlTabProps>;
 
+  /**
+   * Tab groups organize content into a container that shows one section at a time.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-tab-show** - Emitted when a tab is shown.
+   * - **sl-tab-hide** - Emitted when a tab is hidden.
+   *
+   * ### **Methods:**
+   *  - **show(panel: _string_)** - Shows the specified tab panel.
+   *
+   * ### **Slots:**
+   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
+   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
+   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **nav** - The tab group's navigation container where tabs are slotted in.
+   * - **tabs** - The container that wraps the tabs.
+   * - **active-tab-indicator** - The line that highlights the currently selected tab.
+   * - **body** - The tab group's body where tab panels are slotted in.
+   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
+   * - **scroll-button--start** - The starting scroll button.
+   * - **scroll-button--end** - The ending scroll button.
+   * - **scroll-button__base** - The scroll button's exported `base` part.
+   */
+  "sl-tab-group": DefineComponent<SlTabGroupProps>;
+
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
    * ---
@@ -4597,6 +4669,25 @@ export type CustomElements = {
    */
   "sl-table": DefineComponent<SlTableProps>;
 
+  /**
+   * Tags are used as labels to organize things or to indicate a selection.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-remove** - Emitted when the remove button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tag's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **content** - The tag's content.
+   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
+   * - **remove-button__base** - The remove button's exported `base` part.
+   */
+  "sl-tag": DefineComponent<SlTagProps>;
+
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---
@@ -4635,40 +4726,6 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
-  /**
-   * Tab groups organize content into a container that shows one section at a time.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-tab-show** - Emitted when a tab is shown.
-   * - **sl-tab-hide** - Emitted when a tab is hidden.
-   *
-   * ### **Methods:**
-   *  - **show(panel: _string_)** - Shows the specified tab panel.
-   *
-   * ### **Slots:**
-   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
-   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
-   *
-   * ### **CSS Properties:**
-   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
-   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
-   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **nav** - The tab group's navigation container where tabs are slotted in.
-   * - **tabs** - The container that wraps the tabs.
-   * - **active-tab-indicator** - The line that highlights the currently selected tab.
-   * - **body** - The tab group's body where tab panels are slotted in.
-   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
-   * - **scroll-button--start** - The starting scroll button.
-   * - **scroll-button--end** - The ending scroll button.
-   * - **scroll-button__base** - The scroll button's exported `base` part.
-   */
-  "sl-tab-group": DefineComponent<SlTabGroupProps>;
-
   /**
    * Think is used to display an AI model's thinking process with expandable/collapsible content.
    * ---
@@ -4758,25 +4815,6 @@ export type CustomElements = {
    */
   "sl-thought-chain-item": DefineComponent<SlThoughtChainItemProps>;
 
-  /**
-   * Tags are used as labels to organize things or to indicate a selection.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tag's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **content** - The tag's content.
-   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
-   * - **remove-button__base** - The remove button's exported `base` part.
-   */
-  "sl-tag": DefineComponent<SlTagProps>;
-
   /**
    * A single node in a thought chain. Used as a child of `<sl-thought-chain>`.
    * Each node represents one step/action in the chain with an icon, title, description,
@@ -4858,6 +4896,45 @@ export type CustomElements = {
    */
   "sl-tooltip": DefineComponent<SlTooltipProps>;
 
+  /**
+   * Transfer 穿梭框组件，用于在两个列表之间移动数据。
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-transfer-change** - 当数据穿梭完成时触发，返回目标键、方向和移动的键。
+   * - **sl-transfer-select-change** - 当选中项变化时触发。
+   * - **sl-transfer-search** - 当搜索时触发。
+   * - **sl-transfer-scroll** - 当列表滚动时触发。
+   *
+   * ### **Methods:**
+   *  - **moveToTarget()** - 移动选中项到目标列表
+   * - **moveToSource()** - 移动选中项到源列表
+   *
+   * ### **Slots:**
+   *  - **move-to-target** - 自定义"移动到目标列表"按钮内容。
+   * - **move-to-source** - 自定义"移动到源列表"按钮内容。
+   * - **operation** - 完全自定义操作区域内容，替换默认的穿梭按钮。
+   * - **source-empty** - 自定义源列表空提示内容。
+   * - **target-empty** - 自定义目标列表空提示内容。
+   * - **source-footer** - 自定义源列表底部内容，位于分页上方。
+   * - **target-footer** - 自定义目标列表底部内容，位于分页上方。
+   *
+   * ### **CSS Properties:**
+   *  - **--transfer-width** - 单个面板的宽度。 _(default: undefined)_
+   * - **--transfer-height** - 单个面板的高度。 _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - 组件的基础容器。
+   * - **source-panel** - 源列表面板。
+   * - **target-panel** - 目标列表面板。
+   * - **panel-header** - 面板头部。
+   * - **panel-list** - 面板列表。
+   * - **operation** - 操作按钮区域。
+   * - **search-input** - 搜索输入框。
+   */
+  "sl-transfer": DefineComponent<SlTransferProps>;
+
   /**
    * 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.
    * ---
@@ -4928,57 +5005,6 @@ export type CustomElements = {
    */
   "sl-tree-item": DefineComponent<SlTreeItemProps>;
 
-  /**
-   * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the control's value changes.
-   * - **sl-clear** - Emitted when the control's value is cleared.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-show** - Emitted when the dropdown opens.
-   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **sl-hide** - Emitted when the dropdown closes.
-   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   * - **sl-search** - Emitted when the search value changes.
-   * - **sl-lazy-load** - Emitted when a lazy node is expanded and its children need to be loaded.
-   *
-   * ### **Methods:**
-   *  - **loadChildren(parentValue: _string_, children: _TreeSelectNodeData[]_)** - Load children for a lazy node. Call this from your `sl-lazy-load` event handler.
-   * It updates the node's children in `treeData`, removes `lazy`, and expands the node.
-   *
-   * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
-   * - **tree-expand-icon** - The icon to show when a tree node is collapsed (click to expand). Forwarded to the tree's `expand-icon` slot.
-   * - **tree-collapse-icon** - The icon to show when a tree node is expanded (click to collapse). Forwarded to the tree's `collapse-icon` slot.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The select's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label.
-   * - **tags** - The container that houses option tags when `multiple` is used.
-   * - **tag** - The individual tags that represent each selected option.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
-   * - **dropdown** - The dropdown panel that contains the tree.
-   * - **tree** - The tree element inside the dropdown.
-   */
-  "sl-tree-select": DefineComponent<SlTreeSelectProps>;
-
   /**
    * 上传组件，支持文件选择、拖放上传、文件列表和图片卡片模式。
    * ---
@@ -5033,6 +5059,57 @@ export type CustomElements = {
    */
   "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 
+  /**
+   * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-clear** - Emitted when the control's value is cleared.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-show** - Emitted when the dropdown opens.
+   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dropdown closes.
+   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **sl-search** - Emitted when the search value changes.
+   * - **sl-lazy-load** - Emitted when a lazy node is expanded and its children need to be loaded.
+   *
+   * ### **Methods:**
+   *  - **loadChildren(parentValue: _string_, children: _TreeSelectNodeData[]_)** - Load children for a lazy node. Call this from your `sl-lazy-load` event handler.
+   * It updates the node's children in `treeData`, removes `lazy`, and expands the node.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
+   * - **tree-expand-icon** - The icon to show when a tree node is collapsed (click to expand). Forwarded to the tree's `expand-icon` slot.
+   * - **tree-collapse-icon** - The icon to show when a tree node is expanded (click to collapse). Forwarded to the tree's `collapse-icon` slot.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The select's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label.
+   * - **tags** - The container that houses option tags when `multiple` is used.
+   * - **tag** - The individual tags that represent each selected option.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   * - **dropdown** - The dropdown panel that contains the tree.
+   * - **tree** - The tree element inside the dropdown.
+   */
+  "sl-tree-select": DefineComponent<SlTreeSelectProps>;
+
   /**
    * Render markdown content with streaming support and custom node mapping.
    * ---