@kdcloudjs/shoelace 1.0.36 → 1.0.38

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

@@ -1,89 +1,92 @@
 import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
-import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
-import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
+import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
-import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
-import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
+import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
-import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
+import type { SlDropdown } from "../../components/dropdown/dropdown.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 { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
-import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
+import type { SlImage } from "../../components/image/image.component.js";
+import type { SlFormatNumber } from "../../components/format-number/format-number.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 { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
 import type { SlMenu } from "../../components/menu/menu.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 { SlNavGroup } from "../../components/nav-group/nav-group.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 { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlNotification } from "../../components/notification/notification.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
-import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
+import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
-import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlRow } from "../../components/row/row.component.js";
 import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
+import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
-import type { SlSenderHeader } from "../../components/sender-header/sender-header.component.js";
+import type { SlSpace } from "../../components/space/space.component.js";
 import type { SlSenderSwitch, CustomEvent } from "../../components/sender-switch/sender-switch.component.js";
 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
-import type { SlSpace } from "../../components/space/space.component.js";
+import type { SlSenderHeader } from "../../components/sender-header/sender-header.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSteps } from "../../components/steps/steps.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
+import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
-import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
 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 { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
+import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
+import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -114,6 +117,53 @@ 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 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 SlAnimatedImageProps = {
   /** The path to the image to load. */
   src?: SlAnimatedImage["src"];
@@ -175,63 +225,6 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (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 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 SlButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: SlButtonGroup["label"];
-  /**  */
-  defaultSlot?: SlButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: SlButtonGroup["disableRole"];
-};
-
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -303,8 +296,6 @@ value of this attribute must be an id of a form in the same document or shadow r
 
 type SlCardProps = {};
 
-type SlCarouselItemProps = {};
-
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -339,6 +330,16 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
+type SlButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: SlButtonGroup["label"];
+  /**  */
+  defaultSlot?: SlButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: SlButtonGroup["disableRole"];
+};
+
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -478,6 +479,8 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlCarouselItemProps = {};
+
 type SlCopyButtonProps = {
   /** The text value to copy. */
   value?: SlCopyButton["value"];
@@ -690,43 +693,6 @@ can use the `show()` and `hide()` methods and this attribute will reflect the de
   "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. */
-  resize?: SlDialog["resize"];
-  /** Indicates whether or not the dialog is in fullscreen mode. */
-  fullscreen?: SlDialog["fullscreen"];
-  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
-  open?: SlDialog["open"];
-  /** The dialog'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?: SlDialog["label"];
-  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the dialog. */
-  "no-header"?: SlDialog["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?: SlDialog["modal"];
-  /**  */
-  dialog?: SlDialog["dialog"];
-  /**  */
-  panel?: SlDialog["panel"];
-  /**  */
-  overlay?: SlDialog["overlay"];
-  /** Emitted when the dialog opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog 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 dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
-  "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
-};
-
 type SlDividerProps = {
   /** Draws the divider in a vertical orientation. */
   vertical?: SlDivider["vertical"];
@@ -769,46 +735,6 @@ accessible way for users to dismiss the drawer. */
   "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"];
-  /**  */
-  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 SlFloatButtonProps = {
   /** The button's type. */
   type?: SlFloatButton["type"];
@@ -833,29 +759,97 @@ type SlFloatButtonProps = {
   "onsl-click"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFloatButtonGroupProps = {
-  /** The shape applied to all child float buttons. */
-  shape?: SlFloatButtonGroup["shape"];
-  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
-  trigger?: SlFloatButtonGroup["trigger"];
-  /** Whether the menu is open (controlled mode, use with trigger). */
-  open?: SlFloatButtonGroup["open"];
-  /** The direction the menu items expand. */
-  placement?: SlFloatButtonGroup["placement"];
-
-  /** Emitted when the menu opens (menu mode only). */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the menu closes (menu mode only). */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-};
-
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** 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 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. */
+  resize?: SlDialog["resize"];
+  /** Indicates whether or not the dialog is in fullscreen mode. */
+  fullscreen?: SlDialog["fullscreen"];
+  /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
+  open?: SlDialog["open"];
+  /** The dialog'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?: SlDialog["label"];
+  /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the dialog. */
+  "no-header"?: SlDialog["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?: SlDialog["modal"];
+  /**  */
+  dialog?: SlDialog["dialog"];
+  /**  */
+  panel?: SlDialog["panel"];
+  /**  */
+  overlay?: SlDialog["overlay"];
+  /** Emitted when the dialog opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dialog closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dialog 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 dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss. */
+  "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => 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 = {
@@ -887,6 +881,66 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+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 SlIconProps = {
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  name?: SlIcon["name"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: SlIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: SlIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: SlIcon["library"];
+
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlImageProps = {
+  /** 图片地址 */
+  src?: SlImage["src"];
+  /** 图片替代文本 */
+  alt?: SlImage["alt"];
+  /** 图片宽度 */
+  width?: SlImage["width"];
+  /** 图片高度 */
+  height?: SlImage["height"];
+  /** 加载失败时的回退图片地址 */
+  fallback?: SlImage["fallback"];
+  /** 加载占位图；设为 true 显示默认占位符，设为字符串则作为占位图片 src */
+  placeholder?: SlImage["placeholder"];
+  /** 是否禁用预览 */
+  "no-preview"?: SlImage["noPreview"];
+  /** 预览配置 */
+  preview?: SlImage["preview"];
+  /** 是否在 group 中（由 sl-image-preview-group 自动设置） */
+  "in-group"?: SlImage["inGroup"];
+  /**  */
+  previewOpen?: SlImage["previewOpen"];
+  /** 在 group 模式下点击图片时触发 */
+  "onsl-image-click"?: (e: CustomEvent<never>) => void;
+  /** 预览打开时触发 */
+  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
+  /** 预览关闭时触发 */
+  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
+  /** 图片加载失败时触发 */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+  /** 图片加载成功时触发 */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+};
+
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -910,22 +964,48 @@ type SlFormatNumberProps = {
   "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
-type SlIconProps = {
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  name?: SlIcon["name"];
-  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks. */
-  src?: SlIcon["src"];
-  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-ignored by assistive devices. */
-  label?: SlIcon["label"];
-  /** The name of a registered custom icon library. */
-  library?: SlIcon["library"];
+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;
+};
 
-  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+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 icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the included file fails to load due to an error. */
+  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
 };
 
 type SlIconButtonProps = {
@@ -955,33 +1035,6 @@ 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 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 SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -1107,34 +1160,6 @@ type SlMenuItemProps = {
 
 type SlMenuLabelProps = {};
 
-type SlMutationObserverProps = {
-  /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
-`attr="class id title"`. To watch all attributes, use `*`. */
-  attr?: SlMutationObserver["attr"];
-  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
-  "attr-old-value"?: SlMutationObserver["attrOldValue"];
-  /** Watches for changes to the character data contained within the node. */
-  "char-data"?: SlMutationObserver["charData"];
-  /** Indicates whether or not the previous value of the node's text should be recorded. */
-  "char-data-old-value"?: SlMutationObserver["charDataOldValue"];
-  /** Watches for the addition or removal of new child nodes. */
-  "child-list"?: SlMutationObserver["childList"];
-  /** Disables the observer. */
-  disabled?: SlMutationObserver["disabled"];
-
-  /** Emitted when a mutation occurs. */
-  "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => 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 SlNavProps = {
   /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
@@ -1190,41 +1215,32 @@ type SlNavProps = {
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
-
-React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
-  "item-key"?: SlNavItem["itemKey"];
-  /** Matches Antd's `danger` item flag. */
-  danger?: SlNavItem["danger"];
-  /** Tooltip text, primarily used when the menu is collapsed. */
-  title?: SlNavItem["title"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
+type SlNavGroupProps = {
+  /** Draws the nav group in an active (selected) state. */
+  active?: SlNavGroup["active"];
   /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavItem["collapsed"];
-  /** Alternate label content when using Antd-style `items` configuration. */
-  label?: SlNavItem["label"];
-  /** Alternate icon content when using Antd-style `items` configuration. */
-  icon?: SlNavItem["icon"];
-  /** Extra content shown at the end of the item. */
-  extra?: SlNavItem["extra"];
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+  mode?: SlNavGroup["mode"];
+  /** Matches Antd's item group label. */
+  label?: SlNavGroup["label"];
+};
+
+type SlMutationObserverProps = {
+  /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
+`attr="class id title"`. To watch all attributes, use `*`. */
+  attr?: SlMutationObserver["attr"];
+  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
+  "attr-old-value"?: SlMutationObserver["attrOldValue"];
+  /** Watches for changes to the character data contained within the node. */
+  "char-data"?: SlMutationObserver["charData"];
+  /** Indicates whether or not the previous value of the node's text should be recorded. */
+  "char-data-old-value"?: SlMutationObserver["charDataOldValue"];
+  /** Watches for the addition or removal of new child nodes. */
+  "child-list"?: SlMutationObserver["childList"];
+  /** Disables the observer. */
+  disabled?: SlMutationObserver["disabled"];
+
+  /** Emitted when a mutation occurs. */
+  "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
 type SlNavSubmenuProps = {
@@ -1326,6 +1342,43 @@ multiple values. */
   hasHover?: SlOption["hasHover"];
 };
 
+type SlNavItemProps = {
+  /** A stable key used by `sl-nav` to track selection. */
+  key?: SlNavItem["key"];
+  /** React-safe alias for `key`.
+
+React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
+  "item-key"?: SlNavItem["itemKey"];
+  /** Matches Antd's `danger` item flag. */
+  danger?: SlNavItem["danger"];
+  /** Tooltip text, primarily used when the menu is collapsed. */
+  title?: SlNavItem["title"];
+  /** Draws the nav item in a disabled state. */
+  disabled?: SlNavItem["disabled"];
+  /** Draws the nav item in an active (selected) state. */
+  active?: SlNavItem["active"];
+  /** The URL to link to. If set, the nav item will render as an anchor tag. */
+  href?: SlNavItem["href"];
+  /** The target attribute for the anchor tag. */
+  target?: SlNavItem["target"];
+  /** The download attribute for the anchor tag. */
+  download?: SlNavItem["download"];
+  /** The rel attribute for the anchor tag. */
+  rel?: SlNavItem["rel"];
+  /** The mode of navigation. */
+  mode?: SlNavItem["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavItem["collapsed"];
+  /** Alternate label content when using Antd-style `items` configuration. */
+  label?: SlNavItem["label"];
+  /** Alternate icon content when using Antd-style `items` configuration. */
+  icon?: SlNavItem["icon"];
+  /** Extra content shown at the end of the item. */
+  extra?: SlNavItem["extra"];
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+};
+
 type SlPaginationProps = {
   /**  */
   currentPage?: SlPagination["currentPage"];
@@ -1422,15 +1475,6 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
-};
-
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1477,26 +1521,6 @@ attribute can typically be omitted. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRadioButtonProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
-  /**  */
-  input?: SlRadioButton["input"];
-  /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRadioGroupProps = {
   /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
 instead. */
@@ -1509,6 +1533,8 @@ instead. */
   value?: SlRadioGroup["value"];
   /** The radio group's size. This size will be applied to all child radios and radio buttons. */
   size?: SlRadioGroup["size"];
+  /** The layout direction of the radio group. */
+  layout?: SlRadioGroup["layout"];
   /** 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. */
@@ -1583,6 +1609,35 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
+};
+
+type 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"];
@@ -1631,21 +1686,6 @@ type SlResizeObserverProps = {
   "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
-type SlScreenProps = {
-  /** The options for the GridStack instance. */
-  options?: SlScreen["options"];
-  /** The initial configuration for the grid. */
-  data?: SlScreen["data"];
-  /** Whether the items in the grid can be removed. */
-  removable?: SlScreen["removable"];
-  /** Disables dragging and resizing of widgets. */
-  static?: SlScreen["static"];
-  /** The selector for items that can be dragged into the grid from outside. */
-  selector?: SlScreen["selector"];
-  /**  */
-  gridElement?: SlScreen["gridElement"];
-};
-
 type SlRowProps = {
   /** Spacing between columns, can be a number or responsive object */
   gutter?: SlRow["gutter"];
@@ -1710,6 +1750,21 @@ type SlSenderProps = {
   "onsl-paste-file"?: (e: CustomEvent<never>) => void;
 };
 
+type SlScreenProps = {
+  /** The options for the GridStack instance. */
+  options?: SlScreen["options"];
+  /** The initial configuration for the grid. */
+  data?: SlScreen["data"];
+  /** Whether the items in the grid can be removed. */
+  removable?: SlScreen["removable"];
+  /** Disables dragging and resizing of widgets. */
+  static?: SlScreen["static"];
+  /** The selector for items that can be dragged into the grid from outside. */
+  selector?: SlScreen["selector"];
+  /**  */
+  gridElement?: SlScreen["gridElement"];
+};
+
 type SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -1801,20 +1856,17 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (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 SlSpaceProps = {
+  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
+  orientation?: SlSpace["orientation"];
+  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
+  size?: SlSpace["size"];
+  /** 对齐方式 */
+  align?: SlSpace["align"];
+  /** 是否自动换行，仅在 horizontal 方向时有效 */
+  wrap?: SlSpace["wrap"];
+  /** 分隔符内容 */
+  separator?: SlSpace["separator"];
 };
 
 type SlSenderSwitchProps = {
@@ -1836,17 +1888,20 @@ type SlSkeletonProps = {
   effect?: SlSkeleton["effect"];
 };
 
-type SlSpaceProps = {
-  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
-  orientation?: SlSpace["orientation"];
-  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
-  size?: SlSpace["size"];
-  /** 对齐方式 */
-  align?: SlSpace["align"];
-  /** 是否自动换行，仅在 horizontal 方向时有效 */
-  wrap?: SlSpace["wrap"];
-  /** 分隔符内容 */
-  separator?: SlSpace["separator"];
+type 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 SlSpinnerProps = {};
@@ -1891,6 +1946,16 @@ type SlStepsProps = {
   size?: SlSteps["size"];
   /** 类型 */
   type?: SlSteps["type"];
+  /** 样式变体：filled（填充）或 outlined（描边） */
+  variant?: SlSteps["variant"];
+  /** 方向：horizontal（水平）或 vertical（垂直） */
+  orientation?: SlSteps["orientation"];
+  /** 是否开启响应式（窄于 532px 自动切换为垂直模式） */
+  responsive?: SlSteps["responsive"];
+  /** 标签位置：horizontal（图标右侧，默认）或 vertical（图标下方） */
+  titlePlacement?: SlSteps["titlePlacement"];
+  /** 点击步骤切换的回调，传入后步骤条变为可点击状态 */
+  onChange?: SlSteps["onChange"];
 };
 
 type SlSwitchProps = {
@@ -1949,6 +2014,13 @@ type SlTabProps = {
   "onsl-close"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SlTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: SlTabPanel["active"];
+};
+
 type SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -1973,13 +2045,6 @@ manual, the tab will receive focus but will not show until the user presses spac
   "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
 };
 
-type SlTabPanelProps = {
-  /** The tab panel's name. */
-  name?: SlTabPanel["name"];
-  /** When true, the tab panel will be shown. */
-  active?: SlTabPanel["active"];
-};
-
 type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -2061,20 +2126,6 @@ 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"];
@@ -2255,6 +2306,20 @@ Maps to React's `key` property on ThoughtChainItemType. */
   expanded?: SlThoughtChainNode["expanded"];
 };
 
+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 SlTimepickerProps = {
   /**  */
   format?: SlTimepicker["format"];
@@ -2308,24 +2373,153 @@ scenarios. */
   "onsl-show"?: (e: CustomEvent<never>) => void;
   /** Emitted after the tooltip has shown and all animations are complete. */
   "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tooltip begins to hide. */
+  /** Emitted when the tooltip begins to hide. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tooltip has hidden and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTreeProps = {
+  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
+  selection?: SlTree["selection"];
+  /** Whether to show connecting lines between tree nodes. */
+  "show-line"?: SlTree["showLine"];
+  /**  */
+  defaultSlot?: SlTree["defaultSlot"];
+  /**  */
+  expandedIconSlot?: SlTree["expandedIconSlot"];
+  /**  */
+  collapsedIconSlot?: SlTree["collapsedIconSlot"];
+  /** Emitted when a tree item is selected or deselected. */
+  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
+};
+
+type SlVisuallyHiddenProps = {};
+
+type SlXMarkdownProps = {
+  /** Markdown content to render. */
+  content?: SlXMarkdown["content"];
+  /** Theme name for styling (`light`, `dark`, or custom class name). */
+  theme?: SlXMarkdown["theme"];
+  /** Open links with `target=\"_blank\"` and `rel=\"noopener noreferrer\"`. */
+  "open-links-in-new-tab"?: SlXMarkdown["openLinksInNewTab"];
+  /** Escapes raw HTML tokens when enabled. */
+  "escape-raw-html"?: SlXMarkdown["escapeRawHtml"];
+  /** Enables debug output in development environments. */
+  debug?: SlXMarkdown["debug"];
+  /** Map markdown node types to custom element tag names. */
+  components?: SlXMarkdown["components"];
+  /** Markdown pipeline plugins. */
+  plugins?: SlXMarkdown["plugins"];
+  /** Streaming configuration. Set `false` to disable streaming mode. */
+  streaming?: SlXMarkdown["streaming"];
+};
+
+type SlTreeSelectProps = {
+  /** The name of the control, submitted as a name/value pair with form data. */
+  name?: SlTreeSelect["name"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: SlTreeSelect["defaultValue"];
+  /** The select's size. */
+  size?: SlTreeSelect["size"];
+  /** Placeholder text to show as a hint when the select is empty. */
+  placeholder?: SlTreeSelect["placeholder"];
+  /** Allows more than one node to be selected. Renders checkboxes in the tree. */
+  multiple?: SlTreeSelect["multiple"];
+  /** The maximum number of selected options to show when `multiple` is true.
+After the maximum, "+n" will be shown. Set to 0 to remove the limit. */
+  "max-options-visible"?: SlTreeSelect["maxOptionsVisible"];
+  /** Disables the control. */
+  disabled?: SlTreeSelect["disabled"];
+  /** Adds a clear button when the input is not empty. */
+  clearable?: SlTreeSelect["clearable"];
+  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown,
+or you can use the `show()` and `hide()` methods. */
+  open?: SlTreeSelect["open"];
+  /** Enable the use of `hoist` to position the dropdown panel using a fixed strategy,
+allowing it to break out of containers that have `overflow: hidden`. */
+  hoist?: SlTreeSelect["hoist"];
+  /** Draws a filled select. */
+  filled?: SlTreeSelect["filled"];
+  /** Draws a pill-style select with rounded edges. */
+  pill?: SlTreeSelect["pill"];
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlTreeSelect["label"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary
+to keep the panel inside of the viewport. */
+  placement?: SlTreeSelect["placement"];
+  /** The input's help text. */
+  "help-text"?: SlTreeSelect["helpText"];
+  /** The input's required attribute. */
+  required?: SlTreeSelect["required"];
+  /** The associated form element. */
+  form?: SlTreeSelect["form"];
+  /** Whether to enable search in the combobox input. Can be a boolean or a config object.
+When `true`, enables search with default settings.
+When an object, enables search with the specified configuration:
+- `autoClearSearchValue`: auto clear search after selection (default: true)
+- `filterTreeNode`: filter function or boolean (default: true)
+- `searchValue`: controlled search value
+- `treeNodeFilterProp`: which node property to filter on (default: 'value') */
+  "show-search"?: SlTreeSelect["showSearch"];
+  /** Whether parent nodes are selectable when `multiple` is false. Defaults to true. */
+  "tree-default-expand-all"?: SlTreeSelect["treeDefaultExpandAll"];
+  /** Whether to check children when parent is checked (only for multiple mode). */
+  "tree-checkable"?: SlTreeSelect["treeCheckable"];
+  /** Strategy for showing checked nodes: 'all' | 'parent' | 'child'. Defaults to 'all'. */
+  "show-checked-strategy"?: SlTreeSelect["showCheckedStrategy"];
+  /** Whether to show connecting lines between parent nodes in the tree. Leaf nodes are excluded. */
+  "tree-line"?: SlTreeSelect["treeLine"];
+  /** A function that generates a custom tag for each selected option in multiple mode.
+The function receives the node data and index, and should return a TemplateResult, string, or HTMLElement. */
+  getTag?: SlTreeSelect["getTag"];
+  /**  */
+  popup?: SlTreeSelect["popup"];
+  /**  */
+  combobox?: SlTreeSelect["combobox"];
+  /**  */
+  displayInput?: SlTreeSelect["displayInput"];
+  /**  */
+  valueInput?: SlTreeSelect["valueInput"];
+  /**  */
+  dropdown?: SlTreeSelect["dropdown"];
+  /**  */
+  displayLabel?: SlTreeSelect["displayLabel"];
+  /** The current value. When `multiple` is enabled, the value will be an array of strings.
+Values must not contain spaces when using multiple mode. */
+  value?: SlTreeSelect["value"];
+  /** Tree data. An array of `TreeSelectNodeData` objects describing the tree structure.
+Each node has `title`, `value`, and optionally `children`, `disabled`, `selectable`, `checkable`, `isLeaf`. */
+  treeData?: SlTreeSelect["treeData"];
+  /** Gets the validity state object */
+  validity?: SlTreeSelect["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlTreeSelect["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value is cleared. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
   "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tooltip has hidden and all animations are complete. */
+  /** Emitted after the dropdown closes and all animations are complete. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
-type SlTreeProps = {
-  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
-displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
-  selection?: SlTree["selection"];
-  /**  */
-  defaultSlot?: SlTree["defaultSlot"];
-  /**  */
-  expandedIconSlot?: SlTree["expandedIconSlot"];
-  /**  */
-  collapsedIconSlot?: SlTree["collapsedIconSlot"];
-  /** Emitted when a tree item is selected or deselected. */
-  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the search value changes. */
+  "onsl-search"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy node is expanded and its children need to be loaded. */
+  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
 type SlTreeItemProps = {
@@ -2369,27 +2563,6 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlVisuallyHiddenProps = {};
-
-type SlXMarkdownProps = {
-  /** Markdown content to render. */
-  content?: SlXMarkdown["content"];
-  /** Theme name for styling (`light`, `dark`, or custom class name). */
-  theme?: SlXMarkdown["theme"];
-  /** Open links with `target=\"_blank\"` and `rel=\"noopener noreferrer\"`. */
-  "open-links-in-new-tab"?: SlXMarkdown["openLinksInNewTab"];
-  /** Escapes raw HTML tokens when enabled. */
-  "escape-raw-html"?: SlXMarkdown["escapeRawHtml"];
-  /** Enables debug output in development environments. */
-  debug?: SlXMarkdown["debug"];
-  /** Map markdown node types to custom element tag names. */
-  components?: SlXMarkdown["components"];
-  /** Markdown pipeline plugins. */
-  plugins?: SlXMarkdown["plugins"];
-  /** Streaming configuration. Set `false` to disable streaming mode. */
-  streaming?: SlXMarkdown["streaming"];
-};
-
 export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
@@ -2422,47 +2595,6 @@ export type CustomElements = {
    */
   "sl-alert": DefineComponent<SlAlertProps>;
 
-  /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
-   *
-   * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
-   */
-  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
-
-  /**
-   * 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>;
-
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2533,17 +2665,45 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Button groups can be used to group related buttons into sections.
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
+   *
    * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
+   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
    */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
+  "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>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -2605,19 +2765,6 @@ export type CustomElements = {
    */
   "sl-card": DefineComponent<SlCardProps>;
 
-  /**
-   * 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>;
-
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
    * ---
@@ -2654,6 +2801,19 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
+  /**
+   * Button groups can be used to group related buttons into sections.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2767,6 +2927,19 @@ export type CustomElements = {
    */
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
+  /**
+   * 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>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2896,49 +3069,6 @@ export type CustomElements = {
    */
   "sl-details": DefineComponent<SlDetailsProps>;
 
-  /**
-   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the dialog opens.
-   * - **sl-after-show** - Emitted after the dialog opens and all animations are complete.
-   * - **sl-hide** - Emitted when the dialog closes.
-   * - **sl-after-hide** - Emitted after the dialog closes and all animations are complete.
-   * - **sl-initial-focus** - Emitted when the dialog 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.
-   * - **sl-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dialog.
-   * - **hide()** - Hides the dialog
-   *
-   * ### **Slots:**
-   *  - _default_ - The dialog's main content.
-   * - **label** - The dialog's label. Alternatively, you can use the `label` attribute.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
-   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
-   *
-   * ### **CSS Properties:**
-   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
-   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
-   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
-   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **overlay** - The overlay that covers the screen behind the dialog.
-   * - **panel** - The dialog's panel (where the dialog and its content are rendered).
-   * - **header** - The dialog's header. This element wraps the title and header actions.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
-   * - **title** - The dialog's title.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   * - **body** - The dialog's body.
-   * - **footer** - The dialog's footer.
-   */
-  "sl-dialog": DefineComponent<SlDialogProps>;
-
   /**
    * Dividers are used to visually separate or group elements.
    * ---
@@ -2995,52 +3125,66 @@ export type CustomElements = {
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
   /**
-   * 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>;
 
   /**
-   * A floating action button that stays fixed on the page.
+   * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-click** - Emitted when the button is clicked.
+   *  - **sl-show** - Emitted when the dialog opens.
+   * - **sl-after-show** - Emitted after the dialog opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dialog closes.
+   * - **sl-after-hide** - Emitted after the dialog closes and all animations are complete.
+   * - **sl-initial-focus** - Emitted when the dialog 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.
+   * - **sl-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dialog.
+   * - **hide()** - Hides the dialog
    *
    * ### **Slots:**
-   *  - _default_ - The button's icon content.
-   * - **content** - Optional text content (only visible when shape is square).
+   *  - _default_ - The dialog's main content.
+   * - **label** - The dialog's label. Alternatively, you can use the `label` attribute.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
+   * - **footer** - The dialog's footer, usually one or more buttons representing various options.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The button's base wrapper.
-   * - **icon** - The icon container.
-   * - **content** - The text content container.
+   * ### **CSS Properties:**
+   *  - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_
+   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
+   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
+   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **overlay** - The overlay that covers the screen behind the dialog.
+   * - **panel** - The dialog's panel (where the dialog and its content are rendered).
+   * - **header** - The dialog's header. This element wraps the title and header actions.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
+   * - **title** - The dialog's title.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
+   * - **body** - The dialog's body.
+   * - **footer** - The dialog's footer.
    */
-  "sl-float-button": DefineComponent<SlFloatButtonProps>;
+  "sl-dialog": DefineComponent<SlDialogProps>;
 
   /**
    * Groups multiple float buttons together, with optional menu trigger.
@@ -3065,11 +3209,33 @@ export type CustomElements = {
   "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Dropdowns expose additional content that "drops down" in a panel.
    * ---
    *
+   *
+   * ### **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.
+   *
+   * ### **Slots:**
+   *  - _default_ - The dropdown's main content.
+   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
+   *
+   * ### **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.
    */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+  "sl-dropdown": DefineComponent<SlDropdownProps>;
 
   /**
    * Formats a date/time using the specified locale and options.
@@ -3079,11 +3245,11 @@ export type CustomElements = {
   "sl-format-date": DefineComponent<SlFormatDateProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
    * Icons are symbols that can be used to represent various options within an application.
@@ -3101,23 +3267,39 @@ export type CustomElements = {
   "sl-icon": DefineComponent<SlIconProps>;
 
   /**
-   * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+   * 图片组件，支持预览、缩放、旋转、翻转等功能。1:1 复刻 Ant Design Image 组件。
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-blur** - Emitted when the icon button loses focus.
-   * - **sl-focus** - Emitted when the icon button gains focus.
+   *  - **sl-image-click** - 在 group 模式下点击图片时触发
+   * - **sl-preview-open** - 预览打开时触发
+   * - **sl-preview-close** - 预览关闭时触发
+   * - **sl-error** - 图片加载失败时触发
+   * - **sl-load** - 图片加载成功时触发
    *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the icon button.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
-   * - **blur()** - Removes focus from the icon button.
+   * ### **Slots:**
+   *  - **cover** - 自定义遮罩层内容
+   * - **placeholder** - 自定义加载占位内容
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - 组件根容器
+   * - **img** - 图片元素
+   * - **cover** - 遮罩层
+   * - **preview-mask** - 预览遮罩背景
+   * - **preview-body** - 预览主体
+   * - **preview-img** - 预览图片
+   * - **preview-actions** - 预览工具栏
+   * - **preview-close** - 预览关闭按钮
    */
-  "sl-icon-button": DefineComponent<SlIconButtonProps>;
+  "sl-image": DefineComponent<SlImageProps>;
+
+  /**
+   * Formats a number using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
   /**
    * Compare visual differences between similar photos with a sliding panel.
@@ -3145,6 +3327,29 @@ export type CustomElements = {
    */
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
+  /**
+   * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-preview-open** - 预览打开时触发
+   * - **sl-preview-close** - 预览关闭时触发
+   * - **sl-preview-change** - 预览图片切换时触发，detail 包含 { current, prev }
+   *
+   * ### **Slots:**
+   *  - _default_ - 默认插槽，放置 sl-image 组件
+   *
+   * ### **CSS Parts:**
+   *  - **preview-mask** - 预览遮罩背景
+   * - **preview-body** - 预览主体
+   * - **preview-img** - 预览图片
+   * - **preview-actions** - 预览工具栏
+   * - **preview-close** - 预览关闭按钮
+   * - **preview-counter** - 预览计数器
+   */
+  "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
+
   /**
    * Includes give you the power to embed external HTML files into the page.
    * ---
@@ -3156,6 +3361,25 @@ export type CustomElements = {
    */
   "sl-include": DefineComponent<SlIncludeProps>;
 
+  /**
+   * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the icon button loses focus.
+   * - **sl-focus** - Emitted when the icon button gains focus.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the icon button.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
+   * - **blur()** - Removes focus from the icon button.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-icon-button": DefineComponent<SlIconButtonProps>;
+
   /**
    * Inputs collect data from the user.
    * ---
@@ -3262,17 +3486,22 @@ export type CustomElements = {
   "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
+   *  - _default_ - The nav items.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+  "sl-nav": DefineComponent<SlNavProps>;
 
   /**
    * Nav groups are used to group related nav items.
@@ -3291,43 +3520,17 @@ export type CustomElements = {
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The nav items.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-nav": DefineComponent<SlNavProps>;
-
-  /**
-   * Nav items are the individual links or buttons within a navigation menu.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
    * ### **Slots:**
-   *  - _default_ - The nav item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the nav item.
-   * - **suffix** - Used to append an icon or similar element to the nav item.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **prefix** - The prefix container.
-   * - **label** - The nav item label.
-   * - **suffix** - The suffix container.
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-nav-item": DefineComponent<SlNavItemProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
@@ -3428,6 +3631,27 @@ export type CustomElements = {
    */
   "sl-option": DefineComponent<SlOptionProps>;
 
+  /**
+   * Nav items are the individual links or buttons within a navigation menu.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the nav item.
+   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav item label.
+   * - **suffix** - The suffix container.
+   */
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
+
   /**
    *
    * ---
@@ -3463,27 +3687,6 @@ export type CustomElements = {
    */
   "sl-popup": DefineComponent<SlPopupProps>;
 
-  /**
-   * Progress bars are used to show the status of an ongoing operation.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
-   *
-   * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
-   */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
-
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
@@ -3537,34 +3740,6 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
-  /**
-   * Radios buttons allow the user to select a single option from a group using a button-like control.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the button loses focus.
-   * - **sl-focus** - Emitted when the button gains focus.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
-   * - **blur()** - Removes focus from the radio button.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **button** - The internal `<button>` element.
-   * - **button--checked** - The internal button element when the radio button is checked.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The container that wraps the radio button's label.
-   * - **suffix** - The container that wraps the suffix.
-   */
-  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
-
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
@@ -3594,6 +3769,7 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text's wrapper.
    * - **button-group** - The button group that wraps radio buttons.
    * - **button-group__base** - The button group's `base` part.
+   * - **radios** - The container that wraps the radio elements (only when not using radio buttons).
    */
   "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
@@ -3642,6 +3818,55 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
+  /**
+   * Progress bars are used to show the status of an ongoing operation.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the progress indicator.
+   *
+   * ### **CSS Properties:**
+   *  - **--height** - The progress bar's height. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
+   */
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+
+  /**
+   * 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.
    * ---
@@ -3686,20 +3911,6 @@ export type CustomElements = {
    */
   "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
-  /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
-   * ---
-   *
-   *
-   * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
-   */
-  "sl-screen": DefineComponent<SlScreenProps>;
-
   /**
    * Row component for grid layout system.
    * ---
@@ -3789,6 +4000,20 @@ export type CustomElements = {
    */
   "sl-sender": DefineComponent<SlSenderProps>;
 
+  /**
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The grid layout content.
+   */
+  "sl-screen": DefineComponent<SlScreenProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -3847,24 +4072,22 @@ export type CustomElements = {
   "sl-select": DefineComponent<SlSelectProps>;
 
   /**
-   * A collapsible header panel for the Sender component.
+   * Space 组件用于设置组件之间的间距。
    * ---
    *
    *
-   * ### **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.
+   *  - _default_ - 需要添加间距的子元素。
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
    *
    * ### **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.
+   *  - **base** - 组件的基础容器。
+   * - **item** - 每个子元素的包装容器。
+   * - **separator** - 分隔符容器。
    */
-  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
+  "sl-space": DefineComponent<SlSpaceProps>;
 
   /**
    * A toggle switch button for the Sender component, supporting checked/unchecked states
@@ -3903,22 +4126,24 @@ export type CustomElements = {
   "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
-   * Space 组件用于设置组件之间的间距。
+   * A collapsible header panel for the Sender component.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - 需要添加间距的子元素。
+   * ### **Events:**
+   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
    *
-   * ### **CSS Properties:**
-   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
+   * ### **Slots:**
+   *  - _default_ - The panel content (children).
+   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
    *
    * ### **CSS Parts:**
-   *  - **base** - 组件的基础容器。
-   * - **item** - 每个子元素的包装容器。
-   * - **separator** - 分隔符容器。
+   *  - **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-space": DefineComponent<SlSpaceProps>;
+  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
 
   /**
    * Spinners are used to show the progress of an indeterminate operation.
@@ -4027,6 +4252,22 @@ export type CustomElements = {
    */
   "sl-tab": DefineComponent<SlTabProps>;
 
+  /**
+   * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab panel's content.
+   *
+   * ### **CSS Properties:**
+   *  - **--padding** - The tab panel's padding. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
+
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -4061,22 +4302,6 @@ export type CustomElements = {
    */
   "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
-  /**
-   * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab panel's content.
-   *
-   * ### **CSS Properties:**
-   *  - **--padding** - The tab panel's padding. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
-
   /**
    *
    * ---
@@ -4087,25 +4312,6 @@ 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.
    * ---
@@ -4260,6 +4466,25 @@ export type CustomElements = {
    */
   "sl-thought-chain-node": DefineComponent<SlThoughtChainNodeProps>;
 
+  /**
+   * 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 time picker component that provides a time selection interface.
    * ---
@@ -4339,6 +4564,98 @@ export type CustomElements = {
    */
   "sl-tree": DefineComponent<SlTreeProps>;
 
+  /**
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to be visually hidden.
+   */
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
+
+  /**
+   * Render markdown content with streaming support and custom node mapping.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Not used. Content is rendered from the `content` property only.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **body** - The markdown body container.
+   * - **paragraph** - Paragraph content.
+   * - **heading** - Heading elements.
+   * - **link** - Link elements.
+   * - **blockquote** - Blockquotes and chat enhanced containers.
+   * - **list** - List containers.
+   * - **list-item** - List items.
+   * - **table** - Table elements.
+   * - **table-head** - Table header section.
+   * - **table-body** - Table body section.
+   * - **table-row** - Table rows.
+   * - **table-cell** - Table header/data cells.
+   * - **code-inline** - Inline code nodes.
+   * - **code-block** - Code block wrapper.
+   * - **code-block-header** - Code block language header.
+   * - **code-block-body** - Code block body.
+   * - **tail** - Streaming tail indicator.
+   * - **incomplete** - Incomplete markdown placeholder nodes.
+   */
+  "sl-x-markdown": DefineComponent<SlXMarkdownProps>;
+
+  /**
+   * 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>;
+
   /**
    * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
@@ -4383,47 +4700,6 @@ export type CustomElements = {
    * - **checkbox__label** - The checkbox's exported `label` part.
    */
   "sl-tree-item": DefineComponent<SlTreeItemProps>;
-
-  /**
-   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to be visually hidden.
-   */
-  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
-
-  /**
-   * Render markdown content with streaming support and custom node mapping.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Not used. Content is rendered from the `content` property only.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **body** - The markdown body container.
-   * - **paragraph** - Paragraph content.
-   * - **heading** - Heading elements.
-   * - **link** - Link elements.
-   * - **blockquote** - Blockquotes and chat enhanced containers.
-   * - **list** - List containers.
-   * - **list-item** - List items.
-   * - **table** - Table elements.
-   * - **table-head** - Table header section.
-   * - **table-body** - Table body section.
-   * - **table-row** - Table rows.
-   * - **table-cell** - Table header/data cells.
-   * - **code-inline** - Inline code nodes.
-   * - **code-block** - Code block wrapper.
-   * - **code-block-header** - Code block language header.
-   * - **code-block-body** - Code block body.
-   * - **tail** - Streaming tail indicator.
-   * - **incomplete** - Incomplete markdown placeholder nodes.
-   */
-  "sl-x-markdown": DefineComponent<SlXMarkdownProps>;
 };
 
 declare module "vue" {