@kdcloudjs/shoelace 1.0.35 → 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 { SlBadge } from "../../components/badge/badge.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 { 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 { SlButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { SlCol } from "../../components/col/col.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 { SlMenu } from "../../components/menu/menu.component.js";
-import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
+import type { 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 { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
+import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
+import type { 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 { 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 { SlSender, CustomEvent } from "../../components/sender/sender.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 { SlSteps } from "../../components/steps/steps.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 { SlTag } from "../../components/tag/tag.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 { SlThink } from "../../components/think/think.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,53 +225,6 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBadgeProps = {
-  /** The badge's theme variant. */
-  variant?: SlBadge["variant"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: SlBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: SlBadge["pulse"];
-};
-
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
-type SlBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: SlBreadcrumb["label"];
-  /**  */
-  defaultSlot?: SlBreadcrumb["defaultSlot"];
-  /**  */
-  separatorSlot?: SlBreadcrumb["separatorSlot"];
-};
-
-type SlBreadcrumbItemProps = {
-  /** 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 SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -291,16 +294,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: SlButtonGroup["label"];
-  /**  */
-  defaultSlot?: SlButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: SlButtonGroup["disableRole"];
-};
-
 type SlCardProps = {};
 
 type SlCarouselProps = {
@@ -337,35 +330,14 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
-type SlCarouselItemProps = {};
-
-type SlColProps = {
-  /** Number of cells to span (out of 24) */
-  span?: SlCol["span"];
-  /** Number of cells to offset from the left */
-  offset?: SlCol["offset"];
-  /** Order of the column */
-  order?: SlCol["order"];
-  /** Number of cells to push from the left */
-  push?: SlCol["push"];
-  /** Number of cells to pull from the right */
-  pull?: SlCol["pull"];
-  /** Flex layout style */
-  flex?: SlCol["flex"];
-  /** Responsive config for xs screens (< 576px) */
-  xs?: SlCol["xs"];
-  /** Responsive config for sm screens (≥ 576px) */
-  sm?: SlCol["sm"];
-  /** Responsive config for md screens (≥ 768px) */
-  md?: SlCol["md"];
-  /** Responsive config for lg screens (≥ 992px) */
-  lg?: SlCol["lg"];
-  /** Responsive config for xl screens (≥ 1200px) */
-  xl?: SlCol["xl"];
-  /** Responsive config for xxl screens (≥ 1600px) */
-  xxl?: SlCol["xxl"];
+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"];
   /**  */
-  rowContext?: SlCol["rowContext"];
+  defaultSlot?: SlButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: SlButtonGroup["disableRole"];
 };
 
 type SlCheckboxProps = {
@@ -412,6 +384,35 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlColProps = {
+  /** Number of cells to span (out of 24) */
+  span?: SlCol["span"];
+  /** Number of cells to offset from the left */
+  offset?: SlCol["offset"];
+  /** Order of the column */
+  order?: SlCol["order"];
+  /** Number of cells to push from the left */
+  push?: SlCol["push"];
+  /** Number of cells to pull from the right */
+  pull?: SlCol["pull"];
+  /** Flex layout style */
+  flex?: SlCol["flex"];
+  /** Responsive config for xs screens (< 576px) */
+  xs?: SlCol["xs"];
+  /** Responsive config for sm screens (≥ 576px) */
+  sm?: SlCol["sm"];
+  /** Responsive config for md screens (≥ 768px) */
+  md?: SlCol["md"];
+  /** Responsive config for lg screens (≥ 992px) */
+  lg?: SlCol["lg"];
+  /** Responsive config for xl screens (≥ 1200px) */
+  xl?: SlCol["xl"];
+  /** Responsive config for xxl screens (≥ 1600px) */
+  xxl?: SlCol["xxl"];
+  /**  */
+  rowContext?: SlCol["rowContext"];
+};
+
 type SlColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -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,85 +693,125 @@ 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
+type SlDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: SlDivider["vertical"];
+};
+
+type SlDrawerProps = {
+  /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
+  open?: SlDrawer["open"];
+  /** The drawer's label as displayed in the header. You should always include a relevant label even when using
 `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
-  label?: 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"];
+  label?: SlDrawer["label"];
+  /** The direction from which the drawer will open. */
+  placement?: SlDrawer["placement"];
+  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+its parent element, set this attribute and add `position: relative` to the parent. */
+  contained?: SlDrawer["contained"];
+  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the drawer. */
+  "no-header"?: SlDrawer["noHeader"];
   /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */
-  modal?: SlDialog["modal"];
+  modal?: SlDrawer["modal"];
   /**  */
-  dialog?: SlDialog["dialog"];
+  drawer?: SlDrawer["drawer"];
   /**  */
-  panel?: SlDialog["panel"];
+  panel?: SlDrawer["panel"];
   /**  */
-  overlay?: SlDialog["overlay"];
-  /** Emitted when the dialog opens. */
+  overlay?: SlDrawer["overlay"];
+  /** Emitted when the drawer opens. */
   "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog opens and all animations are complete. */
+  /** Emitted after the drawer opens and all animations are complete. */
   "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dialog closes. */
+  /** Emitted when the drawer closes. */
   "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dialog closes and all animations are complete. */
+  /** Emitted after the drawer 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. */
+  /** Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
   "onsl-initial-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user attempts to close the 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. */
+  /** Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type SlDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: SlDivider["vertical"];
+type SlFloatButtonProps = {
+  /** The button's type. */
+  type?: SlFloatButton["type"];
+  /** The button's shape. */
+  shape?: SlFloatButton["shape"];
+  /** The button's size. */
+  size?: SlFloatButton["size"];
+  /** The name of the icon to display (from the registered icon library). */
+  icon?: SlFloatButton["icon"];
+  /** Tooltip text shown on hover. */
+  tooltip?: SlFloatButton["tooltip"];
+  /** Tooltip placement. */
+  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
+  /** Disables the button. */
+  disabled?: SlFloatButton["disabled"];
+  /** When set, the button will render as an anchor tag with this URL. */
+  href?: SlFloatButton["href"];
+  /** Where to display the linked URL (only used when href is set). */
+  target?: SlFloatButton["target"];
+
+  /** Emitted when the button is clicked. */
+  "onsl-click"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDrawerProps = {
-  /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
-  open?: SlDrawer["open"];
-  /** The drawer's label as displayed in the header. You should always include a relevant label even when using
+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?: SlDrawer["label"];
-  /** The direction from which the drawer will open. */
-  placement?: SlDrawer["placement"];
-  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-its parent element, set this attribute and add `position: relative` to the parent. */
-  contained?: SlDrawer["contained"];
-  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the drawer. */
-  "no-header"?: SlDrawer["noHeader"];
+  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?: SlDrawer["modal"];
+  modal?: SlDialog["modal"];
   /**  */
-  drawer?: SlDrawer["drawer"];
+  dialog?: SlDialog["dialog"];
   /**  */
-  panel?: SlDrawer["panel"];
+  panel?: SlDialog["panel"];
   /**  */
-  overlay?: SlDrawer["overlay"];
-  /** Emitted when the drawer opens. */
+  overlay?: SlDialog["overlay"];
+  /** Emitted when the dialog opens. */
   "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer opens and all animations are complete. */
+  /** Emitted after the dialog opens and all animations are complete. */
   "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer closes. */
+  /** Emitted when the dialog closes. */
   "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer closes and all animations are complete. */
+  /** Emitted after the dialog closes and all animations are complete. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
+  /** 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 drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
+  /** 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. */
@@ -809,55 +852,6 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFloatButtonProps = {
-  /** The button's type. */
-  type?: SlFloatButton["type"];
-  /** The button's shape. */
-  shape?: SlFloatButton["shape"];
-  /** The button's size. */
-  size?: SlFloatButton["size"];
-  /** The name of the icon to display (from the registered icon library). */
-  icon?: SlFloatButton["icon"];
-  /** Tooltip text shown on hover. */
-  tooltip?: SlFloatButton["tooltip"];
-  /** Tooltip placement. */
-  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
-  /** Disables the button. */
-  disabled?: SlFloatButton["disabled"];
-  /** When set, the button will render as an anchor tag with this URL. */
-  href?: SlFloatButton["href"];
-  /** Where to display the linked URL (only used when href is set). */
-  target?: SlFloatButton["target"];
-
-  /** Emitted when the button is clicked. */
-  "onsl-click"?: (e: CustomEvent<never>) => void;
-};
-
-type 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 SlFormatDateProps = {
   /** The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
 recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
@@ -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"];
@@ -1081,6 +1134,13 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+};
+
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -1100,32 +1160,6 @@ type SlMenuItemProps = {
 
 type SlMenuLabelProps = {};
 
-type SlMenuProps = {
-  /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
-};
-
-type SlMutationObserverProps = {
-  /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
-`attr="class id title"`. To watch all attributes, use `*`. */
-  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 SlNavProps = {
   /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
@@ -1190,41 +1224,23 @@ type SlNavGroupProps = {
   label?: SlNavGroup["label"];
 };
 
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
-
-React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
-  "item-key"?: SlNavItem["itemKey"];
-  /** Matches Antd's `danger` item flag. */
-  danger?: SlNavItem["danger"];
-  /** Tooltip text, primarily used when the menu is collapsed. */
-  title?: SlNavItem["title"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
-  /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavItem["collapsed"];
-  /** 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 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"];
@@ -1442,22 +1486,6 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
-attribute can typically be omitted. */
-  size?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1477,23 +1505,19 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlRadioButtonProps = {
+type SlRadioProps = {
   /** 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"];
+  value?: SlRadio["value"];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  size?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
   /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
   "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
+  /** Emitted when the control gains focus. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
@@ -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"];
@@ -1642,6 +1697,59 @@ type SlRowProps = {
   wrap?: SlRow["wrap"];
 };
 
+type SlSenderProps = {
+  /** The current value of the sender, submitted as part of the event detail on submit. */
+  value?: SlSender["value"];
+  /** Placeholder text to show as a hint when the input is empty. */
+  placeholder?: SlSender["placeholder"];
+  /** Draws the sender in a loading state, typically used while waiting for a response. */
+  loading?: SlSender["loading"];
+  /** Disables the sender. */
+  disabled?: SlSender["disabled"];
+  /** Makes the sender readonly. */
+  "read-only"?: SlSender["readOnly"];
+  /** The number of rows to display for the textarea. Only applies in plain text mode. */
+  rows?: SlSender["rows"];
+  /** Determines how the Enter key behaves. When set to `enter`, pressing Enter submits. When set to `shift-enter`, pressing Shift+Enter submits. */
+  "submit-type"?: SlSender["submitType"];
+  /** An array of slot configuration items for structured input mode. Supports `text`, `input`, `select`, `tag`, `content`, and `custom` types. */
+  slotConfig?: SlSender["slotConfig"];
+  /** The skill tag to display in the slot input area. Includes `value`, optional `title`, and optional `closable` configuration. */
+  skill?: SlSender["skill"];
+  /** Custom footer content or render function. Set to `false` to hide the footer. */
+  footer?: SlSender["footer"];
+  /** Custom header content or render function. Set to `false` to hide the header. */
+  header?: SlSender["header"];
+  /** Custom prefix content or render function. Set to `false` to hide the prefix. */
+  prefixContent?: SlSender["prefixContent"];
+  /** Custom suffix content or render function. Set to `false` to hide the suffix (action buttons). */
+  suffixContent?: SlSender["suffixContent"];
+  /** Enables speech recognition input. Set to `true` for uncontrolled mode, or pass a `ControlledSpeechConfig` object for controlled mode. */
+  "allow-speech"?: SlSender["allowSpeech"];
+  /** Whether speech recognition is currently recording. Only applies in uncontrolled speech mode. */
+  "speech-recording"?: SlSender["speechRecording"];
+  /**  */
+  textarea?: SlSender["textarea"];
+  /**  */
+  slotArea?: SlSender["slotArea"];
+  /** Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`. */
+  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode. */
+  "onsl-submit"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Emitted when the sender's content is cleared. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's speech button is clicked. */
+  "onsl-speech-toggle"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's input area gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's input area loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when content is pasted into the sender. The event detail includes `{ event }`. */
+  "onsl-paste"?: (e: CustomEvent<never>) => void;
+  /** Emitted when files are pasted into the sender. The event detail includes `{ files }`. */
+  "onsl-paste-file"?: (e: CustomEvent<never>) => void;
+};
+
 type SlScreenProps = {
   /** The options for the GridStack instance. */
   options?: SlScreen["options"];
@@ -1734,87 +1842,31 @@ be an array. **For this reason, values must not contain spaces.** */
   "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 select's menu opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the select's menu opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the select's menu closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the select's menu closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
-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 SlSenderProps = {
-  /** The current value of the sender, submitted as part of the event detail on submit. */
-  value?: SlSender["value"];
-  /** Placeholder text to show as a hint when the input is empty. */
-  placeholder?: SlSender["placeholder"];
-  /** Draws the sender in a loading state, typically used while waiting for a response. */
-  loading?: SlSender["loading"];
-  /** Disables the sender. */
-  disabled?: SlSender["disabled"];
-  /** Makes the sender readonly. */
-  "read-only"?: SlSender["readOnly"];
-  /** The number of rows to display for the textarea. Only applies in plain text mode. */
-  rows?: SlSender["rows"];
-  /** Determines how the Enter key behaves. When set to `enter`, pressing Enter submits. When set to `shift-enter`, pressing Shift+Enter submits. */
-  "submit-type"?: SlSender["submitType"];
-  /** An array of slot configuration items for structured input mode. Supports `text`, `input`, `select`, `tag`, `content`, and `custom` types. */
-  slotConfig?: SlSender["slotConfig"];
-  /** The skill tag to display in the slot input area. Includes `value`, optional `title`, and optional `closable` configuration. */
-  skill?: SlSender["skill"];
-  /** Custom footer content or render function. Set to `false` to hide the footer. */
-  footer?: SlSender["footer"];
-  /** Custom header content or render function. Set to `false` to hide the header. */
-  header?: SlSender["header"];
-  /** Custom prefix content or render function. Set to `false` to hide the prefix. */
-  prefixContent?: SlSender["prefixContent"];
-  /** Custom suffix content or render function. Set to `false` to hide the suffix (action buttons). */
-  suffixContent?: SlSender["suffixContent"];
-  /** Enables speech recognition input. Set to `true` for uncontrolled mode, or pass a `ControlledSpeechConfig` object for controlled mode. */
-  "allow-speech"?: SlSender["allowSpeech"];
-  /** Whether speech recognition is currently recording. Only applies in uncontrolled speech mode. */
-  "speech-recording"?: SlSender["speechRecording"];
-  /**  */
-  textarea?: SlSender["textarea"];
-  /**  */
-  slotArea?: SlSender["slotArea"];
-  /** Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`. */
-  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode. */
-  "onsl-submit"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Emitted when the sender's content is cleared. */
-  "onsl-clear"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's speech button is clicked. */
-  "onsl-speech-toggle"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's input area gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's input area loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when content is pasted into the sender. The event detail includes `{ event }`. */
-  "onsl-paste"?: (e: CustomEvent<never>) => void;
-  /** Emitted when files are pasted into the sender. The event detail includes `{ files }`. */
-  "onsl-paste-file"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the select's menu opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the select's menu opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the select's menu closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the select's menu closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+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,38 +1888,24 @@ 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 = {};
 
-type SlStepsProps = {
-  /** 步骤条数据 */
-  items?: SlSteps["items"];
-  /** 当前步骤（从 0 开始） */
-  current?: SlSteps["current"];
-  /** 当前步骤的状态，默认 process */
-  status?: SlSteps["status"];
-  /** 起始序号（显示用），默认 0 */
-  initial?: SlSteps["initial"];
-  /** 当前步骤进度百分比（0-100），仅 process 状态生效 */
-  percent?: SlSteps["percent"];
-  /** 尺寸，default 或 small */
-  size?: SlSteps["size"];
-  /** 类型 */
-  type?: SlSteps["type"];
-};
-
 type SlSplitPanelProps = {
   /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
 container's initial size. */
@@ -1893,6 +1931,33 @@ or a function which takes in a `SnapFunctionParams`, and returns a position to s
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type SlStepsProps = {
+  /** 步骤条数据 */
+  items?: SlSteps["items"];
+  /** 当前步骤（从 0 开始） */
+  current?: SlSteps["current"];
+  /** 当前步骤的状态，默认 process */
+  status?: SlSteps["status"];
+  /** 起始序号（显示用），默认 0 */
+  initial?: SlSteps["initial"];
+  /** 当前步骤进度百分比（0-100），仅 process 状态生效 */
+  percent?: SlSteps["percent"];
+  /** 尺寸，default 或 small */
+  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 = {
   /**  */
   title?: SlSwitch["title"];
@@ -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,27 +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 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 SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -2068,12 +2119,6 @@ type SlTableProps = {
   /**  */
   setScrollPositionClassName?: SlTable["setScrollPositionClassName"];
   /**  */
-  generateCustomCellSlot?: SlTable["generateCustomCellSlot"];
-  /**  */
-  generateCustomRowSlot?: SlTable["generateCustomRowSlot"];
-  /**  */
-  generateCustomTfootSlot?: SlTable["generateCustomTfootSlot"];
-  /**  */
   handleFilterDropdownChange?: SlTable["handleFilterDropdownChange"];
   /**  */
   handlePaginationChange?: SlTable["handlePaginationChange"];
@@ -2081,44 +2126,6 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlThinkProps = {
-  /** The title text shown in the status bar. Accepts plain text.
-For rich HTML content, use the `title` slot instead.
-Maps to React's `title: React.ReactNode` prop. */
-  title?: SlThink["title"];
-  /** When true, the status icon is replaced by a loading spinner
-(or the content of the `loading-icon` slot for a custom indicator).
-Maps to React's `loading: boolean | React.ReactNode` prop:
-  - `loading` (boolean) → boolean attribute
-  - `loading` (ReactNode) → use the `loading-icon` slot */
-  loading?: SlThink["loading"];
-  /** Whether the content body is expanded.
-When used without `default-expanded`, this acts as a controlled prop
-(the parent is responsible for updating it).
-When neither this nor `default-expanded` is set on the element,
-the component defaults to expanded (equivalent to React's `defaultExpanded = true`).
-Maps to React's `expanded: boolean` prop. */
-  expanded?: SlThink["expanded"];
-  /** The initial expanded state when the component is first rendered.
-Only applies if `expanded` is not set as an attribute on the element.
-Maps to React's `defaultExpanded: boolean` prop (default: `true`).
-
-Because Lit's `type: Boolean` treats attribute *presence* as `true`,
-setting `default-expanded="false"` in HTML does NOT work — this is
-consistent with all other Shoelace boolean attributes.
-To start collapsed, set the property via JS: `el.defaultExpanded = false`. */
-  "default-expanded"?: SlThink["defaultExpanded"];
-  /** When true, applies a blinking animation to the title text to signal ongoing activity.
-Maps to React's `blink: boolean` prop. */
-  blink?: SlThink["blink"];
-  /**  */
-  body?: SlThink["body"];
-  /** Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`. */
-  "onsl-collapse"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -2192,6 +2199,44 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlThinkProps = {
+  /** The title text shown in the status bar. Accepts plain text.
+For rich HTML content, use the `title` slot instead.
+Maps to React's `title: React.ReactNode` prop. */
+  title?: SlThink["title"];
+  /** When true, the status icon is replaced by a loading spinner
+(or the content of the `loading-icon` slot for a custom indicator).
+Maps to React's `loading: boolean | React.ReactNode` prop:
+  - `loading` (boolean) → boolean attribute
+  - `loading` (ReactNode) → use the `loading-icon` slot */
+  loading?: SlThink["loading"];
+  /** Whether the content body is expanded.
+When used without `default-expanded`, this acts as a controlled prop
+(the parent is responsible for updating it).
+When neither this nor `default-expanded` is set on the element,
+the component defaults to expanded (equivalent to React's `defaultExpanded = true`).
+Maps to React's `expanded: boolean` prop. */
+  expanded?: SlThink["expanded"];
+  /** The initial expanded state when the component is first rendered.
+Only applies if `expanded` is not set as an attribute on the element.
+Maps to React's `defaultExpanded: boolean` prop (default: `true`).
+
+Because Lit's `type: Boolean` treats attribute *presence* as `true`,
+setting `default-expanded="false"` in HTML does NOT work — this is
+consistent with all other Shoelace boolean attributes.
+To start collapsed, set the property via JS: `el.defaultExpanded = false`. */
+  "default-expanded"?: SlThink["defaultExpanded"];
+  /** When true, applies a blinking animation to the title text to signal ongoing activity.
+Maps to React's `blink: boolean` prop. */
+  blink?: SlThink["blink"];
+  /**  */
+  body?: SlThink["body"];
+  /** Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`. */
+  "onsl-collapse"?: (e: CustomEvent<never>) => void;
+};
+
 type SlThoughtChainProps = {
   /** Size of the thought chain nodes.
 - `'small'`: compact layout
@@ -2261,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"];
@@ -2324,6 +2383,8 @@ 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"];
   /**  */
@@ -2334,6 +2395,133 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
   "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 dropdown closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the search value changes. */
+  "onsl-search"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy node is expanded and its children need to be loaded. */
+  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTreeItemProps = {
   /** Expands the tree item. */
   expanded?: SlTreeItem["expanded"];
@@ -2375,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.
@@ -2429,45 +2596,26 @@ export type CustomElements = {
   "sl-alert": DefineComponent<SlAlertProps>;
 
   /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
    *
    * ### **CSS Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
-   */
-  "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.
+   *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-animation": DefineComponent<SlAnimationProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2482,28 +2630,6 @@ export type CustomElements = {
    */
   "sl-badge": DefineComponent<SlBadgeProps>;
 
-  /**
-   * Avatars are used to represent a person or object.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
-   * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
-   */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
-
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -2538,6 +2664,47 @@ export type CustomElements = {
    */
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
+  /**
+   * 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>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2572,19 +2739,6 @@ export type CustomElements = {
    */
   "sl-button": DefineComponent<SlButtonProps>;
 
-  /**
-   * Button groups can be used to group related buttons into sections.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
-
   /**
    * Cards can be used to group related subjects in a container.
    * ---
@@ -2648,30 +2802,17 @@ export type CustomElements = {
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
   /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
-  /**
-   * Col component for grid layout system.
+   * Button groups can be used to group related buttons into sections.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The default slot for content.
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-col": DefineComponent<SlColProps>;
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
   /**
    * Checkboxes allow the user to toggle an option on or off.
@@ -2711,6 +2852,19 @@ export type CustomElements = {
    */
   "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
+  /**
+   * Col component for grid layout system.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-col": DefineComponent<SlColProps>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2773,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.
    * ---
@@ -2902,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.
    * ---
@@ -2994,40 +3118,11 @@ export type CustomElements = {
    * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
    * - **title** - The drawer's title.
    * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   * - **body** - The drawer's body.
-   * - **footer** - The drawer's footer.
-   */
-  "sl-drawer": DefineComponent<SlDrawerProps>;
-
-  /**
-   * 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.
+   * - **close-button__base** - The close button's exported `base` part.
+   * - **body** - The drawer's body.
+   * - **footer** - The drawer's footer.
    */
-  "sl-dropdown": DefineComponent<SlDropdownProps>;
+  "sl-drawer": DefineComponent<SlDrawerProps>;
 
   /**
    * A floating action button that stays fixed on the page.
@@ -3048,6 +3143,49 @@ export type CustomElements = {
    */
   "sl-float-button": DefineComponent<SlFloatButtonProps>;
 
+  /**
+   * 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>;
+
   /**
    * Groups multiple float buttons together, with optional menu trigger.
    * ---
@@ -3071,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.
@@ -3085,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.
@@ -3107,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.
@@ -3151,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.
    * ---
@@ -3162,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.
    * ---
@@ -3212,6 +3430,19 @@ export type CustomElements = {
    */
   "sl-input": DefineComponent<SlInputProps>;
 
+  /**
+   * Menus provide a list of options for the user to choose from.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-select** - Emitted when a menu item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   */
+  "sl-menu": DefineComponent<SlMenuProps>;
+
   /**
    * Menu items provide options for the user to pick from in a menu.
    * ---
@@ -3254,32 +3485,6 @@ export type CustomElements = {
    */
   "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
-  /**
-   * Menus provide a list of options for the user to choose from.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
-   */
-  "sl-menu": DefineComponent<SlMenuProps>;
-
-  /**
-   * 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-mutation** - Emitted when a mutation occurs.
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
-   */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
-
   /**
    * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
@@ -3315,25 +3520,17 @@ export type CustomElements = {
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
   /**
-   * 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.
@@ -3434,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>;
+
   /**
    *
    * ---
@@ -3469,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.
    * ---
@@ -3512,27 +3709,6 @@ export type CustomElements = {
    */
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
-  /**
-   * Radios allow the user to select a single option from a group.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-focus** - Emitted when the control gains focus.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The circular container that wraps the radio's checked state.
-   * - **control--checked** - The radio control when the radio is checked.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the radio's label.
-   */
-  "sl-radio": DefineComponent<SlRadioProps>;
-
   /**
    * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
    * ---
@@ -3544,32 +3720,25 @@ export type CustomElements = {
   "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
   /**
-   * Radios buttons allow the user to select a single option from a group using a button-like control.
+   * Radios allow the user to select a single option from a group.
    * ---
    *
    *
    * ### **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.
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-focus** - Emitted when the control gains focus.
    *
    * ### **Slots:**
-   *  - _default_ - The radio button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
+   *  - _default_ - The radio's label.
    *
    * ### **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.
+   * - **control** - The circular container that wraps the radio's checked state.
+   * - **control--checked** - The radio control when the radio is checked.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the radio's label.
    */
-  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
+  "sl-radio": DefineComponent<SlRadioProps>;
 
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
@@ -3600,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>;
 
@@ -3648,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.
    * ---
@@ -3705,6 +3924,82 @@ export type CustomElements = {
    */
   "sl-row": DefineComponent<SlRowProps>;
 
+  /**
+   * Senders are used to send messages. They support plain text input, structured slot-based input, speech recognition, skill tagging, and customizable header/footer/prefix/suffix areas.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`.
+   * - **sl-submit** - Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode.
+   * - **sl-clear** - Emitted when the sender's content is cleared.
+   * - **sl-speech-toggle** - Emitted when the sender's speech button is clicked.
+   * - **sl-focus** - Emitted when the sender's input area gains focus.
+   * - **sl-blur** - Emitted when the sender's input area loses focus.
+   * - **sl-paste** - Emitted when content is pasted into the sender. The event detail includes `{ event }`.
+   * - **sl-paste-file** - Emitted when files are pasted into the sender. The event detail includes `{ files }`.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _SenderFocusOptions_)** - 聚焦输入区域，支持 cursor 选项控制光标位置。
+   * - 'end'（默认）：光标移到内容末尾
+   * - 'start'：光标移到内容开头
+   * - 'all'：全选内容
+   * - 'slot'：聚焦第一个 slot input，若不存在则等同 'end'
+   * - **blur()** - 移除输入区域焦点
+   * - **clear()** - 清空输入内容，slot 模式下同时重置 slotValues
+   * - **getValue(): _{ value: string; slotConfig: SlotConfigType[]; skill?: SkillType }_** - 获取当前输入值，slot 模式下返回完整的 { value, slotConfig, skill }
+   * - **insert(slotConfig: _SlotConfigType[]_, position: _InsertPosition_, _replaceCharacters: _string_, preventScroll: _boolean_)** - 插入文本或 slot 配置项到输入区域
+   * slot 模式下将 slotConfig 项渲染为 DOM 节点插入到 slot-area
+   * 普通模式下将各项文本拼接后插入到 textarea
+   *
+   * ### **Slots:**
+   *  - **prefix** - Used to prepend content to the input area.
+   * - **suffix** - Used to append action buttons or content to the input area. Defaults to the speech button and send button.
+   * - **header** - Used to add content above the input area.
+   * - **footer** - Used to add content below the input area, such as toolbar actions.
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-sender-border-width** - The border width of the sender container. _(default: undefined)_
+   * - **--sl-sender-border-color** - The border color of the sender container. _(default: undefined)_
+   * - **--sl-sender-border-color-hover** - The border color when hovered. _(default: undefined)_
+   * - **--sl-sender-border-color-focus** - The border color when focused. _(default: undefined)_
+   * - **--sl-sender-border-color-disabled** - The border color when disabled. _(default: undefined)_
+   * - **--sl-sender-background-color** - The background color of the sender container. _(default: undefined)_
+   * - **--sl-sender-background-color-disabled** - The background color when disabled. _(default: undefined)_
+   * - **--sl-sender-shadow** - The box shadow of the sender container. _(default: undefined)_
+   * - **--sl-sender-shadow-focus** - The box shadow when focused. _(default: undefined)_
+   * - **--sl-sender-input-color** - The text color of the input area. _(default: undefined)_
+   * - **--sl-sender-input-color-disabled** - The text color when disabled. _(default: undefined)_
+   * - **--sl-sender-input-placeholder-color** - The placeholder text color. _(default: undefined)_
+   * - **--sl-sender-input-placeholder-color-disabled** - The placeholder text color when disabled. _(default: undefined)_
+   * - **--sl-sender-action-color** - The color of action buttons. _(default: undefined)_
+   * - **--sl-sender-action-color-hover** - The color of action buttons when hovered. _(default: undefined)_
+   * - **--sl-sender-action-color-active** - The color of action buttons when active. _(default: undefined)_
+   * - **--sl-sender-action-color-disabled** - The color of action buttons when disabled. _(default: undefined)_
+   * - **--sl-sender-action-background-hover** - The background color of action buttons when hovered. _(default: undefined)_
+   * - **--sl-sender-action-background-active** - The background color of action buttons when active. _(default: undefined)_
+   * - **--sl-sender-action-border-radius** - The border radius of action buttons. _(default: undefined)_
+   * - **--sl-sender-submit-color** - The color of the submit button. _(default: undefined)_
+   * - **--sl-sender-submit-color-active** - The color of the submit button when active. _(default: undefined)_
+   * - **--sl-sender-submit-background** - The background color of the submit button. _(default: undefined)_
+   * - **--sl-sender-submit-background-hover** - The background color of the submit button when hovered. _(default: undefined)_
+   * - **--sl-sender-submit-background-active** - The background color of the submit button when active. _(default: undefined)_
+   * - **--sl-sender-submit-background-disabled** - The background color of the submit button when disabled. _(default: undefined)_
+   * - **--sl-sender-submit-border-radius** - The border radius of the submit button. _(default: undefined)_
+   * - **--sl-sender-voice-recording-background** - The background color of the recording button. _(default: undefined)_
+   * - **--sl-sender-voice-waveform-color** - The color of the voice waveform bars during recording. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **input** - The internal `<sl-textarea>` control (plain text mode).
+   * - **slot-area** - The slot-based input area container (slot mode).
+   * - **skill** - The skill tag element.
+   * - **header** - The header area wrapper.
+   * - **footer** - The footer area wrapper.
+   * - **actions** - The action buttons container in the suffix area.
+   */
+  "sl-sender": DefineComponent<SlSenderProps>;
+
   /**
    * Screen is a grid layout component based on gridstack.js and Shoelace.
    * ---
@@ -3777,100 +4072,22 @@ export type CustomElements = {
   "sl-select": DefineComponent<SlSelectProps>;
 
   /**
-   * A collapsible header panel for the Sender component.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
-   *
-   * ### **Slots:**
-   *  - _default_ - The panel content (children).
-   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **header** - The header bar containing title and close button.
-   * - **title** - The title wrapper inside the header.
-   * - **content** - The collapsible content area.
-   */
-  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
-
-  /**
-   * Senders are used to send messages. They support plain text input, structured slot-based input, speech recognition, skill tagging, and customizable header/footer/prefix/suffix areas.
+   * Space 组件用于设置组件之间的间距。
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`.
-   * - **sl-submit** - Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode.
-   * - **sl-clear** - Emitted when the sender's content is cleared.
-   * - **sl-speech-toggle** - Emitted when the sender's speech button is clicked.
-   * - **sl-focus** - Emitted when the sender's input area gains focus.
-   * - **sl-blur** - Emitted when the sender's input area loses focus.
-   * - **sl-paste** - Emitted when content is pasted into the sender. The event detail includes `{ event }`.
-   * - **sl-paste-file** - Emitted when files are pasted into the sender. The event detail includes `{ files }`.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _SenderFocusOptions_)** - 聚焦输入区域，支持 cursor 选项控制光标位置。
-   * - 'end'（默认）：光标移到内容末尾
-   * - 'start'：光标移到内容开头
-   * - 'all'：全选内容
-   * - 'slot'：聚焦第一个 slot input，若不存在则等同 'end'
-   * - **blur()** - 移除输入区域焦点
-   * - **clear()** - 清空输入内容，slot 模式下同时重置 slotValues
-   * - **getValue(): _{ value: string; slotConfig: SlotConfigType[]; skill?: SkillType }_** - 获取当前输入值，slot 模式下返回完整的 { value, slotConfig, skill }
-   * - **insert(slotConfig: _SlotConfigType[]_, position: _InsertPosition_, _replaceCharacters: _string_, preventScroll: _boolean_)** - 插入文本或 slot 配置项到输入区域
-   * slot 模式下将 slotConfig 项渲染为 DOM 节点插入到 slot-area
-   * 普通模式下将各项文本拼接后插入到 textarea
-   *
    * ### **Slots:**
-   *  - **prefix** - Used to prepend content to the input area.
-   * - **suffix** - Used to append action buttons or content to the input area. Defaults to the speech button and send button.
-   * - **header** - Used to add content above the input area.
-   * - **footer** - Used to add content below the input area, such as toolbar actions.
+   *  - _default_ - 需要添加间距的子元素。
    *
    * ### **CSS Properties:**
-   *  - **--sl-sender-border-width** - The border width of the sender container. _(default: undefined)_
-   * - **--sl-sender-border-color** - The border color of the sender container. _(default: undefined)_
-   * - **--sl-sender-border-color-hover** - The border color when hovered. _(default: undefined)_
-   * - **--sl-sender-border-color-focus** - The border color when focused. _(default: undefined)_
-   * - **--sl-sender-border-color-disabled** - The border color when disabled. _(default: undefined)_
-   * - **--sl-sender-background-color** - The background color of the sender container. _(default: undefined)_
-   * - **--sl-sender-background-color-disabled** - The background color when disabled. _(default: undefined)_
-   * - **--sl-sender-shadow** - The box shadow of the sender container. _(default: undefined)_
-   * - **--sl-sender-shadow-focus** - The box shadow when focused. _(default: undefined)_
-   * - **--sl-sender-input-color** - The text color of the input area. _(default: undefined)_
-   * - **--sl-sender-input-color-disabled** - The text color when disabled. _(default: undefined)_
-   * - **--sl-sender-input-placeholder-color** - The placeholder text color. _(default: undefined)_
-   * - **--sl-sender-input-placeholder-color-disabled** - The placeholder text color when disabled. _(default: undefined)_
-   * - **--sl-sender-action-color** - The color of action buttons. _(default: undefined)_
-   * - **--sl-sender-action-color-hover** - The color of action buttons when hovered. _(default: undefined)_
-   * - **--sl-sender-action-color-active** - The color of action buttons when active. _(default: undefined)_
-   * - **--sl-sender-action-color-disabled** - The color of action buttons when disabled. _(default: undefined)_
-   * - **--sl-sender-action-background-hover** - The background color of action buttons when hovered. _(default: undefined)_
-   * - **--sl-sender-action-background-active** - The background color of action buttons when active. _(default: undefined)_
-   * - **--sl-sender-action-border-radius** - The border radius of action buttons. _(default: undefined)_
-   * - **--sl-sender-submit-color** - The color of the submit button. _(default: undefined)_
-   * - **--sl-sender-submit-color-active** - The color of the submit button when active. _(default: undefined)_
-   * - **--sl-sender-submit-background** - The background color of the submit button. _(default: undefined)_
-   * - **--sl-sender-submit-background-hover** - The background color of the submit button when hovered. _(default: undefined)_
-   * - **--sl-sender-submit-background-active** - The background color of the submit button when active. _(default: undefined)_
-   * - **--sl-sender-submit-background-disabled** - The background color of the submit button when disabled. _(default: undefined)_
-   * - **--sl-sender-submit-border-radius** - The border radius of the submit button. _(default: undefined)_
-   * - **--sl-sender-voice-recording-background** - The background color of the recording button. _(default: undefined)_
-   * - **--sl-sender-voice-waveform-color** - The color of the voice waveform bars during recording. _(default: undefined)_
+   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **input** - The internal `<sl-textarea>` control (plain text mode).
-   * - **slot-area** - The slot-based input area container (slot mode).
-   * - **skill** - The skill tag element.
-   * - **header** - The header area wrapper.
-   * - **footer** - The footer area wrapper.
-   * - **actions** - The action buttons container in the suffix area.
+   *  - **base** - 组件的基础容器。
+   * - **item** - 每个子元素的包装容器。
+   * - **separator** - 分隔符容器。
    */
-  "sl-sender": DefineComponent<SlSenderProps>;
+  "sl-space": DefineComponent<SlSpaceProps>;
 
   /**
    * A toggle switch button for the Sender component, supporting checked/unchecked states
@@ -3909,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.
@@ -3942,13 +4161,6 @@ export type CustomElements = {
    */
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-steps": DefineComponent<SlStepsProps>;
-
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
    * ---
@@ -3976,6 +4188,13 @@ export type CustomElements = {
    */
   "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-steps": DefineComponent<SlStepsProps>;
+
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -4033,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.
    * ---
@@ -4068,49 +4303,52 @@ 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.
+   * ### **Events:**
+   *  - **change**
    */
-  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
+  "sl-table": DefineComponent<SlTableProps>;
 
   /**
-   * Tags are used as labels to organize things or to indicate a selection.
+   * Textareas collect data from the user and allow multiple lines of text.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the textarea.
+   * - **blur()** - Removes focus from the textarea.
+   * - **select()** - Selects all the text in the textarea.
+   * - **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.
+   * - **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).
+   * - **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
    *
    * ### **Slots:**
-   *  - _default_ - The tag's content.
+   *  - **label** - The textarea's label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **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>;
-
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The input's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **base** - The component's base wrapper.
+   * - **textarea** - The internal `<textarea>` control.
    */
-  "sl-table": DefineComponent<SlTableProps>;
+  "sl-textarea": DefineComponent<SlTextareaProps>;
 
   /**
    * Think is used to display an AI model's thinking process with expandable/collapsible content.
@@ -4147,44 +4385,6 @@ export type CustomElements = {
    */
   "sl-think": DefineComponent<SlThinkProps>;
 
-  /**
-   * Textareas collect data from the user and allow multiple lines of text.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the textarea.
-   * - **blur()** - Removes focus from the textarea.
-   * - **select()** - Selects all the text in the textarea.
-   * - **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.
-   * - **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).
-   * - **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   *
-   * ### **Slots:**
-   *  - **label** - The textarea's label. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The input's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **base** - The component's base wrapper.
-   * - **textarea** - The internal `<textarea>` control.
-   */
-  "sl-textarea": DefineComponent<SlTextareaProps>;
-
   /**
    * ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.
    * It renders a vertical list of nodes, each optionally with an icon, title, description,
@@ -4266,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.
    * ---
@@ -4345,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).
    * ---
@@ -4389,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" {