@kdcloudjs/shoelace 1.0.41 → 1.0.42

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

@@ -2,21 +2,22 @@ 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 { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { SlAnimation } from "../../components/animation/animation.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { SlCalendar, CustomEvent } from "../../components/calendar/calendar.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.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";
@@ -25,68 +26,68 @@ 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 { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
-import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
 import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
-import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
+import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlIcon } from "../../components/icon/icon.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 { SlImage } from "../../components/image/image.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 { SlImagePreviewGroup } from "../../components/image-preview-group/image-preview-group.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
+import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
-import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
-import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SlNav } from "../../components/nav/nav.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlNotification } from "../../components/notification/notification.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlOption } from "../../components/option/option.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 { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
+import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
-import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
+import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
+import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
+import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { SlRow } from "../../components/row/row.component.js";
-import type { SlScreen } from "../../components/screen/screen.component.js";
-import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlSegmented } from "../../components/segmented/segmented.component.js";
+import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
-import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
 import type { SlSenderHeader } from "../../components/sender-header/sender-header.component.js";
 import type { SlSenderSwitch, CustomEvent } from "../../components/sender-switch/sender-switch.component.js";
-import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
-import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
+import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
 import type { SlSpace } from "../../components/space/space.component.js";
-import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
+import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSteps } from "../../components/steps/steps.component.js";
+import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
-import type { SlTable, CustomEvent } from "../../components/table/table.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 { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
-import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
-import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
+import type { SlTag } from "../../components/tag/tag.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 { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
+import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
+import type { SlTree } from "../../components/tree/tree.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
-import type { SlTree } from "../../components/tree/tree.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
 
 type SlAlertProps = {
@@ -137,53 +138,6 @@ type SlAnimatedImageProps = {
   "onsl-error"?: (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 SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -226,6 +180,53 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
+};
+
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
+  /**  */
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+};
+
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -305,6 +306,39 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
+type SlCalendarProps = {
+  /** The display mode: 'month' shows days, 'year' shows months. */
+  mode?: SlCalendar["mode"];
+  /** Whether to display in fullscreen mode. Set to false for card mode. */
+  fullscreen?: SlCalendar["fullscreen"];
+  /** The currently selected date. */
+  value?: SlCalendar["value"];
+  /** The default value when no value is set. */
+  defaultValue?: SlCalendar["defaultValue"];
+  /** A function to determine if a date should be disabled. */
+  disabledDate?: SlCalendar["disabledDate"];
+  /** Custom render function for date cells. Return content to append to the cell. */
+  dateCellRender?: SlCalendar["dateCellRender"];
+  /** Custom render function to replace the entire date cell. */
+  dateFullCellRender?: SlCalendar["dateFullCellRender"];
+  /** Custom render function for month cells (in year mode). */
+  monthCellRender?: SlCalendar["monthCellRender"];
+  /** Custom render function to replace entire month cell. */
+  monthFullCellRender?: SlCalendar["monthFullCellRender"];
+  /** Shorthand for providing list data to display in cells. */
+  getListData?: SlCalendar["getListData"];
+  /** Valid date range [start, end]. Dates outside this range will be disabled. */
+  validRange?: SlCalendar["validRange"];
+  /** Custom header render function for complete header customization. */
+  headerRender?: SlCalendar["headerRender"];
+  /** 当面板切换时触发 */
+  "onsl-panel-change"?: (e: CustomEvent<CustomEvent>) => void;
+  /** 当日期发生变化时触发 */
+  "onsl-calendar-change"?: (e: CustomEvent<CustomEvent>) => void;
+  /** 当日期被选中时触发，包含来源信息 */
+  "onsl-calendar-select"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type SlCardProps = {};
 
 type SlCarouselProps = {
@@ -341,6 +375,8 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
+type SlCarouselItemProps = {};
+
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -557,8 +593,6 @@ type SlDatePanelProps = {
   "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlCarouselItemProps = {};
-
 type SlDatepickerProps = {
   /**  */
   type?: SlDatepicker["type"];
@@ -840,13 +874,20 @@ type SlFloatButtonProps = {
   "onsl-click"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: SlFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: SlFormatBytes["display"];
+type 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 SlFormatDateProps = {
@@ -878,45 +919,6 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
-type SlFloatButtonGroupProps = {
-  /** The shape applied to all child float buttons. */
-  shape?: SlFloatButtonGroup["shape"];
-  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
-  trigger?: SlFloatButtonGroup["trigger"];
-  /** Whether the menu is open (controlled mode, use with trigger). */
-  open?: SlFloatButtonGroup["open"];
-  /** The direction the menu items expand. */
-  placement?: SlFloatButtonGroup["placement"];
-
-  /** Emitted when the menu opens (menu mode only). */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the menu closes (menu mode only). */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-};
-
-type SlFormatNumberProps = {
-  /** The number to format. */
-  value?: SlFormatNumber["value"];
-  /** The formatting style to use. */
-  type?: SlFormatNumber["type"];
-  /** Turns off grouping separators. */
-  "no-grouping"?: SlFormatNumber["noGrouping"];
-  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
-  currency?: SlFormatNumber["currency"];
-  /** How to display the currency. */
-  "currency-display"?: SlFormatNumber["currencyDisplay"];
-  /** The minimum number of integer digits to use. Possible values are 1-21. */
-  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
-  /** The minimum number of fraction digits to use. Possible values are 0-20. */
-  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
-  /** The maximum number of fraction digits to use. Possible values are 0-0. */
-  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
-  /** The minimum number of significant digits to use. Possible values are 1-21. */
-  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
-  /** The maximum number of significant digits to use,. Possible values are 1-21. */
-  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
-};
-
 type SlIconButtonProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIconButton["name"];
@@ -962,6 +964,38 @@ ignored by assistive devices. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlFormatNumberProps = {
+  /** The number to format. */
+  value?: SlFormatNumber["value"];
+  /** The formatting style to use. */
+  type?: SlFormatNumber["type"];
+  /** Turns off grouping separators. */
+  "no-grouping"?: SlFormatNumber["noGrouping"];
+  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
+  currency?: SlFormatNumber["currency"];
+  /** How to display the currency. */
+  "currency-display"?: SlFormatNumber["currencyDisplay"];
+  /** The minimum number of integer digits to use. Possible values are 1-21. */
+  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
+  /** The minimum number of fraction digits to use. Possible values are 0-20. */
+  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
+  /** The maximum number of fraction digits to use. Possible values are 0-0. */
+  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
+  /** The minimum number of significant digits to use. Possible values are 1-21. */
+  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
+  /** The maximum number of significant digits to use,. Possible values are 1-21. */
+  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
+};
+
+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 SlImageProps = {
   /** 图片地址 */
   src?: SlImage["src"];
@@ -1006,23 +1040,6 @@ type SlImageComparerProps = {
   "onsl-change"?: (e: CustomEvent<never>) => void;
 };
 
-type SlImagePreviewGroupProps = {
-  /** 预览配置，为 false 时禁用预览 */
-  preview?: SlImagePreviewGroup["preview"];
-  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
-  items?: SlImagePreviewGroup["items"];
-  /** 加载失败容错地址（组件级） */
-  fallback?: SlImagePreviewGroup["fallback"];
-  /**  */
-  previewOpen?: SlImagePreviewGroup["previewOpen"];
-  /** 预览打开时触发 */
-  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
-  /** 预览关闭时触发 */
-  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
-  /** 预览图片切换时触发，detail 包含 { current, prev } */
-  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
-};
-
 type SlIncludeProps = {
   /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
 code and can result in XSS attacks. */
@@ -1039,6 +1056,23 @@ code and can result in XSS attacks. */
   "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
 };
 
+type SlImagePreviewGroupProps = {
+  /** 预览配置，为 false 时禁用预览 */
+  preview?: SlImagePreviewGroup["preview"];
+  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
+  items?: SlImagePreviewGroup["items"];
+  /** 加载失败容错地址（组件级） */
+  fallback?: SlImagePreviewGroup["fallback"];
+  /**  */
+  previewOpen?: SlImagePreviewGroup["previewOpen"];
+  /** 预览打开时触发 */
+  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
+  /** 预览关闭时触发 */
+  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
+  /** 预览图片切换时触发，detail 包含 { current, prev } */
+  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
+};
+
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -1138,6 +1172,23 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlMenuItemProps = {
+  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+  type?: SlMenuItem["type"];
+  /** Draws the item in a checked state. */
+  checked?: SlMenuItem["checked"];
+  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+  value?: SlMenuItem["value"];
+  /** Draws the menu item in a loading state. */
+  loading?: SlMenuItem["loading"];
+  /** Draws the menu item in a disabled state, preventing selection. */
+  disabled?: SlMenuItem["disabled"];
+  /**  */
+  defaultSlot?: SlMenuItem["defaultSlot"];
+  /**  */
+  menuItem?: SlMenuItem["menuItem"];
+};
+
 type SlMenuProps = {
   /**  */
   defaultSlot?: SlMenu["defaultSlot"];
@@ -1145,8 +1196,6 @@ type SlMenuProps = {
   "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
 };
 
-type SlMenuLabelProps = {};
-
 type SlMutationObserverProps = {
   /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
 `attr="class id title"`. To watch all attributes, use `*`. */
@@ -1166,6 +1215,15 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
+type SlNavGroupProps = {
+  /** Draws the nav group in an active (selected) state. */
+  active?: SlNavGroup["active"];
+  /** The mode of navigation. */
+  mode?: SlNavGroup["mode"];
+  /** Matches Antd's item group label. */
+  label?: SlNavGroup["label"];
+};
+
 type SlNavProps = {
   /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
@@ -1221,30 +1279,43 @@ type SlNavProps = {
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
-type SlNavGroupProps = {
-  /** Draws the nav group in an active (selected) state. */
-  active?: SlNavGroup["active"];
-  /** The mode of navigation. */
-  mode?: SlNavGroup["mode"];
-  /** Matches Antd's item group label. */
-  label?: SlNavGroup["label"];
-};
+type SlNavItemProps = {
+  /** A stable key used by `sl-nav` to track selection. */
+  key?: SlNavItem["key"];
+  /** React-safe alias for `key`.
 
-type SlMenuItemProps = {
-  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-  type?: SlMenuItem["type"];
-  /** Draws the item in a checked state. */
-  checked?: SlMenuItem["checked"];
-  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  value?: SlMenuItem["value"];
-  /** Draws the menu item in a loading state. */
-  loading?: SlMenuItem["loading"];
-  /** Draws the menu item in a disabled state, preventing selection. */
-  disabled?: SlMenuItem["disabled"];
-  /**  */
-  defaultSlot?: SlMenuItem["defaultSlot"];
-  /**  */
-  menuItem?: SlMenuItem["menuItem"];
+React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
+  "item-key"?: SlNavItem["itemKey"];
+  /** Matches Antd's `danger` item flag. */
+  danger?: SlNavItem["danger"];
+  /** Tooltip text, primarily used when the menu is collapsed. */
+  title?: SlNavItem["title"];
+  /** Draws the nav item in a disabled state. */
+  disabled?: SlNavItem["disabled"];
+  /** Draws the nav item in an active (selected) state. */
+  active?: SlNavItem["active"];
+  /** The URL to link to. If set, the nav item will render as an anchor tag. */
+  href?: SlNavItem["href"];
+  /** The target attribute for the anchor tag. */
+  target?: SlNavItem["target"];
+  /** The download attribute for the anchor tag. */
+  download?: SlNavItem["download"];
+  /** The rel attribute for the anchor tag. */
+  rel?: SlNavItem["rel"];
+  /** The mode of navigation. */
+  mode?: SlNavItem["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavItem["collapsed"];
+  /** Shows a divider line above this nav item. */
+  divider?: SlNavItem["divider"];
+  /** Alternate label content when using Antd-style `items` configuration. */
+  label?: SlNavItem["label"];
+  /** Alternate icon content when using Antd-style `items` configuration. */
+  icon?: SlNavItem["icon"];
+  /** Extra content shown at the end of the item. */
+  extra?: SlNavItem["extra"];
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
 type SlNavSubmenuProps = {
@@ -1331,45 +1402,6 @@ type SlNotificationProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
-
-React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
-  "item-key"?: SlNavItem["itemKey"];
-  /** Matches Antd's `danger` item flag. */
-  danger?: SlNavItem["danger"];
-  /** Tooltip text, primarily used when the menu is collapsed. */
-  title?: SlNavItem["title"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
-  /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavItem["collapsed"];
-  /** Shows a divider line above this nav item. */
-  divider?: SlNavItem["divider"];
-  /** Alternate label content when using Antd-style `items` configuration. */
-  label?: SlNavItem["label"];
-  /** Alternate icon content when using Antd-style `items` configuration. */
-  icon?: SlNavItem["icon"];
-  /** Extra content shown at the end of the item. */
-  extra?: SlNavItem["extra"];
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
-};
-
 type SlOptionProps = {
   /** The option's value. When selected, the containing form control will receive this value. The value must be unique
 from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
@@ -1483,14 +1515,7 @@ 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 SlMenuLabelProps = {};
 
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
@@ -1503,20 +1528,13 @@ 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 SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
 };
 
 type SlQrCodeProps = {
@@ -1538,6 +1556,22 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
+type SlRadioProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadio["value"];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  size?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
+  /**  */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1558,44 +1592,6 @@ this attribute can typically be omitted. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRadioGroupProps = {
-  /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-instead. */
-  label?: SlRadioGroup["label"];
-  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlRadioGroup["helpText"];
-  /** The name of the radio group, submitted as a name/value pair with form data. */
-  name?: SlRadioGroup["name"];
-  /** The current value of the radio group, submitted as a name/value pair with form data. */
-  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. */
-  form?: SlRadioGroup["form"];
-  /** Ensures a child radio is checked before allowing the containing form to submit. */
-  required?: SlRadioGroup["required"];
-  /**  */
-  defaultSlot?: SlRadioGroup["defaultSlot"];
-  /**  */
-  validationInput?: SlRadioGroup["validationInput"];
-  /**  */
-  defaultValue?: SlRadioGroup["defaultValue"];
-  /** Gets the validity state object */
-  validity?: SlRadioGroup["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlRadioGroup["validationMessage"];
-  /** Emitted when the radio group's selected value changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the radio group receives user input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRangeProps = {
   /**  */
   title?: SlRange["title"];
@@ -1646,46 +1642,6 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRelativeTimeProps = {
-  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
-string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
-a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
-  date?: SlRelativeTime["date"];
-  /** The formatting style to use. */
-  format?: SlRelativeTime["format"];
-  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
-"1 day ago" and "in 1 day" will be shown. */
-  numeric?: SlRelativeTime["numeric"];
-  /** Keep the displayed value up to date as time passes. */
-  sync?: SlRelativeTime["sync"];
-};
-
-type SlRowProps = {
-  /** Spacing between columns, can be a number or responsive object */
-  gutter?: SlRow["gutter"];
-  /** Vertical alignment of columns */
-  align?: SlRow["align"];
-  /** Horizontal arrangement of columns */
-  justify?: SlRow["justify"];
-  /** Whether to wrap columns */
-  wrap?: SlRow["wrap"];
-};
-
-type SlScreenProps = {
-  /** The options for the GridStack instance. */
-  options?: SlScreen["options"];
-  /** The initial configuration for the grid. */
-  data?: SlScreen["data"];
-  /** Whether the items in the grid can be removed. */
-  removable?: SlScreen["removable"];
-  /** Disables dragging and resizing of widgets. */
-  static?: SlScreen["static"];
-  /** The selector for items that can be dragged into the grid from outside. */
-  selector?: SlScreen["selector"];
-  /**  */
-  gridElement?: SlScreen["gridElement"];
-};
-
 type SlRatingProps = {
   /** A label that describes the rating to assistive devices. */
   label?: SlRating["label"];
@@ -1712,6 +1668,77 @@ well with `<sl-icon>` elements. */
   "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
 };
 
+type SlRelativeTimeProps = {
+  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
+string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
+a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
+  date?: SlRelativeTime["date"];
+  /** The formatting style to use. */
+  format?: SlRelativeTime["format"];
+  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
+"1 day ago" and "in 1 day" will be shown. */
+  numeric?: SlRelativeTime["numeric"];
+  /** Keep the displayed value up to date as time passes. */
+  sync?: SlRelativeTime["sync"];
+};
+
+type SlRadioGroupProps = {
+  /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+instead. */
+  label?: SlRadioGroup["label"];
+  /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlRadioGroup["helpText"];
+  /** The name of the radio group, submitted as a name/value pair with form data. */
+  name?: SlRadioGroup["name"];
+  /** The current value of the radio group, submitted as a name/value pair with form data. */
+  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. */
+  form?: SlRadioGroup["form"];
+  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  required?: SlRadioGroup["required"];
+  /**  */
+  defaultSlot?: SlRadioGroup["defaultSlot"];
+  /**  */
+  validationInput?: SlRadioGroup["validationInput"];
+  /**  */
+  defaultValue?: SlRadioGroup["defaultValue"];
+  /** Gets the validity state object */
+  validity?: SlRadioGroup["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlRadioGroup["validationMessage"];
+  /** Emitted when the radio group's selected value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the radio group receives user input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+type SlResizeObserverProps = {
+  /** Disables the observer. */
+  disabled?: SlResizeObserver["disabled"];
+
+  /** Emitted when the element is resized. */
+  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
+};
+
+type SlRowProps = {
+  /** Spacing between columns, can be a number or responsive object */
+  gutter?: SlRow["gutter"];
+  /** Vertical alignment of columns */
+  align?: SlRow["align"];
+  /** Horizontal arrangement of columns */
+  justify?: SlRow["justify"];
+  /** Whether to wrap columns */
+  wrap?: SlRow["wrap"];
+};
+
 type SlSegmentedProps = {
   /** 选项列表，支持字符串、数字或对象数组 */
   options?: SlSegmented["options"];
@@ -1731,6 +1758,21 @@ type SlSegmentedProps = {
   onChange?: SlSegmented["onChange"];
 };
 
+type SlScreenProps = {
+  /** The options for the GridStack instance. */
+  options?: SlScreen["options"];
+  /** The initial configuration for the grid. */
+  data?: SlScreen["data"];
+  /** Whether the items in the grid can be removed. */
+  removable?: SlScreen["removable"];
+  /** Disables dragging and resizing of widgets. */
+  static?: SlScreen["static"];
+  /** The selector for items that can be dragged into the grid from outside. */
+  selector?: SlScreen["selector"];
+  /**  */
+  gridElement?: SlScreen["gridElement"];
+};
+
 type SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -1822,6 +1864,36 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlSenderHeaderProps = {
+  /** Whether the panel content is expanded. */
+  open?: SlSenderHeader["open"];
+  /** Whether the close/toggle button is shown. */
+  closable?: SlSenderHeader["closable"];
+  /** Plain-text title. Use the `title` slot for rich content. */
+  title?: SlSenderHeader["title"];
+  /** When true, the content DOM is always rendered even when collapsed.
+Useful when you need refs to inner elements on initial mount.
+When false (default), content is removed from the DOM when closed. */
+  "force-render"?: SlSenderHeader["forceRender"];
+
+  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
+  "onsl-open-change"?: (e: CustomEvent<never>) => void;
+};
+
+type SlSenderSwitchProps = {
+  /** Whether the switch is in the checked (active) state. */
+  checked?: SlSenderSwitch["checked"];
+  /** The initial checked state when uncontrolled. Only used on first render. */
+  "default-checked"?: SlSenderSwitch["defaultChecked"];
+  /** Disables the switch. */
+  disabled?: SlSenderSwitch["disabled"];
+  /** Shows a loading spinner on the switch. */
+  loading?: SlSenderSwitch["loading"];
+
+  /** Emitted when the switch's checked state changes. Read `el.checked` for the new state. */
+  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type SlSenderProps = {
   /** The current value of the sender, submitted as part of the event detail on submit. */
   value?: SlSender["value"];
@@ -1875,49 +1947,6 @@ type SlSenderProps = {
   "onsl-paste-file"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSenderHeaderProps = {
-  /** Whether the panel content is expanded. */
-  open?: SlSenderHeader["open"];
-  /** Whether the close/toggle button is shown. */
-  closable?: SlSenderHeader["closable"];
-  /** Plain-text title. Use the `title` slot for rich content. */
-  title?: SlSenderHeader["title"];
-  /** When true, the content DOM is always rendered even when collapsed.
-Useful when you need refs to inner elements on initial mount.
-When false (default), content is removed from the DOM when closed. */
-  "force-render"?: SlSenderHeader["forceRender"];
-
-  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
-  "onsl-open-change"?: (e: CustomEvent<never>) => void;
-};
-
-type SlSenderSwitchProps = {
-  /** Whether the switch is in the checked (active) state. */
-  checked?: SlSenderSwitch["checked"];
-  /** The initial checked state when uncontrolled. Only used on first render. */
-  "default-checked"?: SlSenderSwitch["defaultChecked"];
-  /** Disables the switch. */
-  disabled?: SlSenderSwitch["disabled"];
-  /** Shows a loading spinner on the switch. */
-  loading?: SlSenderSwitch["loading"];
-
-  /** Emitted when the switch's checked state changes. Read `el.checked` for the new state. */
-  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
-type SlResizeObserverProps = {
-  /** Disables the observer. */
-  disabled?: SlResizeObserver["disabled"];
-
-  /** Emitted when the element is resized. */
-  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
-};
-
-type SlSkeletonProps = {
-  /** Determines which effect the skeleton will use. */
-  effect?: SlSkeleton["effect"];
-};
-
 type SlSpaceProps = {
   /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
   orientation?: SlSpace["orientation"];
@@ -1931,29 +1960,9 @@ type SlSpaceProps = {
   separator?: SlSpace["separator"];
 };
 
-type SlSplitPanelProps = {
-  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
-container's initial size. */
-  position?: SlSplitPanel["position"];
-  /** The current position of the divider from the primary panel's edge in pixels. */
-  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
-  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
-  vertical?: SlSplitPanel["vertical"];
-  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
-  disabled?: SlSplitPanel["disabled"];
-  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
-primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
-host element is resized. */
-  primary?: SlSplitPanel["primary"];
-  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
-or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
-  snap?: SlSplitPanel["snap"];
-  /** How close the divider must be to a snap point until snapping occurs. */
-  "snap-threshold"?: SlSplitPanel["snapThreshold"];
-  /**  */
-  divider?: SlSplitPanel["divider"];
-  /** Emitted when the divider's position changes. */
-  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+type SlSkeletonProps = {
+  /** Determines which effect the skeleton will use. */
+  effect?: SlSkeleton["effect"];
 };
 
 type SlStepsProps = {
@@ -1983,32 +1992,33 @@ type SlStepsProps = {
   onChange?: SlSteps["onChange"];
 };
 
-type SlSpinnerProps = {};
-
-type SlTabGroupProps = {
-  /** The placement of the tabs. */
-  placement?: SlTabGroup["placement"];
-  /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
-manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
-  activation?: SlTabGroup["activation"];
-  /** Disables the scroll arrows that appear when tabs overflow. */
-  "no-scroll-controls"?: SlTabGroup["noScrollControls"];
-  /** Prevent scroll buttons from being hidden when inactive. */
-  "fixed-scroll-controls"?: SlTabGroup["fixedScrollControls"];
-  /**  */
-  tabGroup?: SlTabGroup["tabGroup"];
-  /**  */
-  body?: SlTabGroup["body"];
-  /**  */
-  nav?: SlTabGroup["nav"];
+type SlSplitPanelProps = {
+  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+container's initial size. */
+  position?: SlSplitPanel["position"];
+  /** The current position of the divider from the primary panel's edge in pixels. */
+  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  vertical?: SlSplitPanel["vertical"];
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  disabled?: SlSplitPanel["disabled"];
+  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+host element is resized. */
+  primary?: SlSplitPanel["primary"];
+  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
+or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
+  snap?: SlSplitPanel["snap"];
+  /** How close the divider must be to a snap point until snapping occurs. */
+  "snap-threshold"?: SlSplitPanel["snapThreshold"];
   /**  */
-  indicator?: SlTabGroup["indicator"];
-  /** Emitted when a tab is shown. */
-  "onsl-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
-  /** Emitted when a tab is hidden. */
-  "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
+  divider?: SlSplitPanel["divider"];
+  /** Emitted when the divider's position changes. */
+  "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type SlSpinnerProps = {};
+
 type SlSwitchProps = {
   /**  */
   title?: SlSwitch["title"];
@@ -2050,10 +2060,56 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTableProps = {
-  /**  */
-  rowKey?: SlTable["rowKey"];
-  /**  */
+type SlTabProps = {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SlTab["panel"];
+  /** Draws the tab in an active state. */
+  active?: SlTab["active"];
+  /** Makes the tab closable and shows a close button. */
+  closable?: SlTab["closable"];
+  /** Disables the tab and prevents selection. */
+  disabled?: SlTab["disabled"];
+  /**  */
+  tab?: SlTab["tab"];
+  /** Emitted when the tab is closable and the close button is activated. */
+  "onsl-close"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTabGroupProps = {
+  /** The placement of the tabs. */
+  placement?: SlTabGroup["placement"];
+  /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
+  activation?: SlTabGroup["activation"];
+  /** Disables the scroll arrows that appear when tabs overflow. */
+  "no-scroll-controls"?: SlTabGroup["noScrollControls"];
+  /** Prevent scroll buttons from being hidden when inactive. */
+  "fixed-scroll-controls"?: SlTabGroup["fixedScrollControls"];
+  /**  */
+  tabGroup?: SlTabGroup["tabGroup"];
+  /**  */
+  body?: SlTabGroup["body"];
+  /**  */
+  nav?: SlTabGroup["nav"];
+  /**  */
+  indicator?: SlTabGroup["indicator"];
+  /** Emitted when a tab is shown. */
+  "onsl-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted when a tab is hidden. */
+  "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
+};
+
+type SlTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SlTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: SlTabPanel["active"];
+};
+
+type SlTableProps = {
+  /**  */
+  rowKey?: SlTable["rowKey"];
+  /**  */
   columns?: SlTable["columns"];
   /**  */
   dataSource?: SlTable["dataSource"];
@@ -2133,42 +2189,6 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlTabProps = {
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SlTab["panel"];
-  /** Draws the tab in an active state. */
-  active?: SlTab["active"];
-  /** Makes the tab closable and shows a close button. */
-  closable?: SlTab["closable"];
-  /** Disables the tab and prevents selection. */
-  disabled?: SlTab["disabled"];
-  /**  */
-  tab?: SlTab["tab"];
-  /** Emitted when the tab is closable and the close button is activated. */
-  "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 SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -2242,52 +2262,6 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlThoughtChainItemProps = {
-  /** The title text. Use the `title` slot for rich HTML content. */
-  title?: SlThoughtChainItem["title"];
-  /** The description text. Use the `description` slot for rich HTML content. */
-  description?: SlThoughtChainItem["description"];
-  /** The status of this item. Determines the status icon shown. */
-  status?: SlThoughtChainItem["status"];
-  /** The visual variant of the item. */
-  variant?: SlThoughtChainItem["variant"];
-  /** Whether to show a blink/pulse animation. */
-  blink?: SlThoughtChainItem["blink"];
-  /** Whether the item is disabled. Prevents click events and applies disabled styling. */
-  disabled?: SlThoughtChainItem["disabled"];
-  /** Whether this item is clickable. When true, hover/cursor styles are applied. */
-  clickable?: SlThoughtChainItem["clickable"];
-
-  /** Emitted when the item is clicked (only when not disabled and has a click handler). */
-  "onsl-click"?: (e: CustomEvent<never>) => void;
-};
-
-type SlThoughtChainProps = {
-  /** Size of the thought chain nodes.
-- `'small'`: compact layout
-- `'middle'`: default size
-- `'large'`: spacious layout */
-  size?: SlThoughtChain["size"];
-  /** Line connector style between nodes.
-- `true` or `'solid'`: solid line (default)
-- `'dashed'`: dashed line
-- `'dotted'`: dotted line
-- `false`: no line
-
-Note: HTML attributes are always strings. Use `line="solid"` / `line="dashed"` / `line="dotted"`.
-To hide the line, use `line="none"`. Programmatically, you can also set `el.line = false`. */
-  line?: SlThoughtChain["line"];
-  /** Keys of initially expanded collapsible nodes (uncontrolled mode).
-Set as a JSON array string attribute or via JS property. */
-  "default-expanded-keys"?: SlThoughtChain["defaultExpandedKeys"];
-  /** Keys of currently expanded collapsible nodes (controlled mode).
-When set, you must update this in response to `sl-expand` events. */
-  "expanded-keys"?: SlThoughtChain["expandedKeys"];
-
-  /** Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`. */
-  "onsl-expand"?: (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.
@@ -2326,6 +2300,40 @@ Maps to React's `blink: boolean` prop. */
   "onsl-collapse"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTagProps = {
+  /** The tag's theme variant. */
+  variant?: SlTag["variant"];
+  /** The tag's size. */
+  size?: SlTag["size"];
+  /** Draws a pill-style tag with rounded edges. */
+  pill?: SlTag["pill"];
+  /** Makes the tag removable and shows a remove button. */
+  removable?: SlTag["removable"];
+
+  /** Emitted when the remove button is activated. */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+};
+
+type SlThoughtChainItemProps = {
+  /** The title text. Use the `title` slot for rich HTML content. */
+  title?: SlThoughtChainItem["title"];
+  /** The description text. Use the `description` slot for rich HTML content. */
+  description?: SlThoughtChainItem["description"];
+  /** The status of this item. Determines the status icon shown. */
+  status?: SlThoughtChainItem["status"];
+  /** The visual variant of the item. */
+  variant?: SlThoughtChainItem["variant"];
+  /** Whether to show a blink/pulse animation. */
+  blink?: SlThoughtChainItem["blink"];
+  /** Whether the item is disabled. Prevents click events and applies disabled styling. */
+  disabled?: SlThoughtChainItem["disabled"];
+  /** Whether this item is clickable. When true, hover/cursor styles are applied. */
+  clickable?: SlThoughtChainItem["clickable"];
+
+  /** Emitted when the item is clicked (only when not disabled and has a click handler). */
+  "onsl-click"?: (e: CustomEvent<never>) => void;
+};
+
 type SlThoughtChainNodeProps = {
   /** Unique key for this node. Required when using collapsible mode or
 controlled expansion via the parent `<sl-thought-chain>`.
@@ -2370,6 +2378,89 @@ type SlTimepickerProps = {
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlThoughtChainProps = {
+  /** Size of the thought chain nodes.
+- `'small'`: compact layout
+- `'middle'`: default size
+- `'large'`: spacious layout */
+  size?: SlThoughtChain["size"];
+  /** Line connector style between nodes.
+- `true` or `'solid'`: solid line (default)
+- `'dashed'`: dashed line
+- `'dotted'`: dotted line
+- `false`: no line
+
+Note: HTML attributes are always strings. Use `line="solid"` / `line="dashed"` / `line="dotted"`.
+To hide the line, use `line="none"`. Programmatically, you can also set `el.line = false`. */
+  line?: SlThoughtChain["line"];
+  /** Keys of initially expanded collapsible nodes (uncontrolled mode).
+Set as a JSON array string attribute or via JS property. */
+  "default-expanded-keys"?: SlThoughtChain["defaultExpandedKeys"];
+  /** Keys of currently expanded collapsible nodes (controlled mode).
+When set, you must update this in response to `sl-expand` events. */
+  "expanded-keys"?: SlThoughtChain["expandedKeys"];
+
+  /** Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTreeProps = {
+  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
+  selection?: SlTree["selection"];
+  /** Whether to show connecting lines between tree nodes. */
+  "show-line"?: SlTree["showLine"];
+  /**  */
+  defaultSlot?: SlTree["defaultSlot"];
+  /**  */
+  expandedIconSlot?: SlTree["expandedIconSlot"];
+  /**  */
+  collapsedIconSlot?: SlTree["collapsedIconSlot"];
+  /** Emitted when a tree item is selected or deselected. */
+  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
+};
+
+type SlTreeItemProps = {
+  /** Expands the tree item. */
+  expanded?: SlTreeItem["expanded"];
+  /** Draws the tree item in a selected state. */
+  selected?: SlTreeItem["selected"];
+  /** Disables the tree item. */
+  disabled?: SlTreeItem["disabled"];
+  /** Enables lazy loading behavior. */
+  lazy?: SlTreeItem["lazy"];
+  /**  */
+  indeterminate?: SlTreeItem["indeterminate"];
+  /**  */
+  isLeaf?: SlTreeItem["isLeaf"];
+  /**  */
+  loading?: SlTreeItem["loading"];
+  /**  */
+  selectable?: SlTreeItem["selectable"];
+  /**  */
+  defaultSlot?: SlTreeItem["defaultSlot"];
+  /**  */
+  childrenSlot?: SlTreeItem["childrenSlot"];
+  /**  */
+  itemElement?: SlTreeItem["itemElement"];
+  /**  */
+  childrenContainer?: SlTreeItem["childrenContainer"];
+  /**  */
+  expandButtonSlot?: SlTreeItem["expandButtonSlot"];
+  /** Emitted when the tree item expands. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tree item expands and all animations are complete. */
+  "onsl-after-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tree item collapses. */
+  "onsl-collapse"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tree item collapses and all animations are complete. */
+  "onsl-after-collapse"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tree item's lazy state changes. */
+  "onsl-lazy-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree. */
+  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTreeSelectProps = {
   /** The name of the control, submitted as a name/value pair with form data. */
   name?: SlTreeSelect["name"];
@@ -2514,65 +2605,8 @@ scenarios. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTreeProps = {
-  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
-displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
-  selection?: SlTree["selection"];
-  /** Whether to show connecting lines between tree nodes. */
-  "show-line"?: SlTree["showLine"];
-  /**  */
-  defaultSlot?: SlTree["defaultSlot"];
-  /**  */
-  expandedIconSlot?: SlTree["expandedIconSlot"];
-  /**  */
-  collapsedIconSlot?: SlTree["collapsedIconSlot"];
-  /** Emitted when a tree item is selected or deselected. */
-  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
-};
-
 type SlVisuallyHiddenProps = {};
 
-type SlTreeItemProps = {
-  /** Expands the tree item. */
-  expanded?: SlTreeItem["expanded"];
-  /** Draws the tree item in a selected state. */
-  selected?: SlTreeItem["selected"];
-  /** Disables the tree item. */
-  disabled?: SlTreeItem["disabled"];
-  /** Enables lazy loading behavior. */
-  lazy?: SlTreeItem["lazy"];
-  /**  */
-  indeterminate?: SlTreeItem["indeterminate"];
-  /**  */
-  isLeaf?: SlTreeItem["isLeaf"];
-  /**  */
-  loading?: SlTreeItem["loading"];
-  /**  */
-  selectable?: SlTreeItem["selectable"];
-  /**  */
-  defaultSlot?: SlTreeItem["defaultSlot"];
-  /**  */
-  childrenSlot?: SlTreeItem["childrenSlot"];
-  /**  */
-  itemElement?: SlTreeItem["itemElement"];
-  /**  */
-  childrenContainer?: SlTreeItem["childrenContainer"];
-  /**  */
-  expandButtonSlot?: SlTreeItem["expandButtonSlot"];
-  /** Emitted when the tree item expands. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tree item expands and all animations are complete. */
-  "onsl-after-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tree item collapses. */
-  "onsl-collapse"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tree item collapses and all animations are complete. */
-  "onsl-after-collapse"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tree item's lazy state changes. */
-  "onsl-lazy-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree. */
-  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
-};
-
 type SlXMarkdownProps = {
   /** Markdown content to render. */
   content?: SlXMarkdown["content"];
@@ -2647,53 +2681,50 @@ export type CustomElements = {
   "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * 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-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>`.
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
    *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   * ### **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.
    *
-   * ### **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.
+   * ### **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-avatar": DefineComponent<SlAvatarProps>;
+  "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -2716,23 +2747,26 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-animation": DefineComponent<SlAnimationProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -2781,6 +2815,36 @@ export type CustomElements = {
    */
   "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
+  /**
+   * 日历组件，用于按日历形式展示数据，支持全屏和卡片模式
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-panel-change** - 当面板切换时触发
+   * - **sl-calendar-change** - 当日期发生变化时触发
+   * - **sl-calendar-select** - 当日期被选中时触发，包含来源信息
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-calendar-item-active-bg** - Background color of selected date _(default: undefined)_
+   * - **--sl-calendar-full-bg** - Background color of full calendar _(default: undefined)_
+   * - **--sl-calendar-full-panel-bg** - Background color of calendar panel _(default: undefined)_
+   * - **--sl-calendar-mini-content-height** - Height of mini calendar content _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The calendar header.
+   * - **header-left** - The header left section (year/month selects).
+   * - **header-right** - The header right section (mode switch).
+   * - **body** - The calendar body.
+   * - **table** - The calendar table.
+   * - **cell** - Individual calendar cells.
+   * - **cell-inner** - Inner content of calendar cells.
+   * - **date-value** - The date number display.
+   * - **date-content** - The custom content area in cells.
+   */
+  "sl-calendar": DefineComponent<SlCalendarProps>;
+
   /**
    * Cards can be used to group related subjects in a container.
    * ---
@@ -2843,6 +2907,19 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel item's content..
+   *
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   */
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2999,19 +3076,6 @@ export type CustomElements = {
    */
   "sl-date-panel": DefineComponent<SlDatePanelProps>;
 
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
   /**
    * Datepickers allow users to select a date using a calendar interface.
    * ---
@@ -3244,20 +3308,6 @@ export type CustomElements = {
    */
   "sl-float-button": DefineComponent<SlFloatButtonProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
-
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
-   */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
-
   /**
    * Groups multiple float buttons together, with optional menu trigger.
    * ---
@@ -3281,11 +3331,11 @@ export type CustomElements = {
   "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
 
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
@@ -3321,6 +3371,20 @@ export type CustomElements = {
    */
   "sl-icon": DefineComponent<SlIconProps>;
 
+  /**
+   * Formats a number using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+
   /**
    * 图片组件，支持预览、缩放、旋转、翻转等功能。
    * ---
@@ -3375,6 +3439,17 @@ export type CustomElements = {
    */
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
+  /**
+   * Includes give you the power to embed external HTML files into the page.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the included file is loaded.
+   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   */
+  "sl-include": DefineComponent<SlIncludeProps>;
+
   /**
    * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
    * ---
@@ -3398,17 +3473,6 @@ export type CustomElements = {
    */
   "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
 
-  /**
-   * Includes give you the power to embed external HTML files into the page.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the included file is loaded.
-   * - **sl-error** - Emitted when the included file fails to load due to an error.
-   */
-  "sl-include": DefineComponent<SlIncludeProps>;
-
   /**
    * Inputs collect data from the user.
    * ---
@@ -3460,61 +3524,59 @@ export type CustomElements = {
   "sl-input": DefineComponent<SlInputProps>;
 
   /**
-   * Menus provide a list of options for the user to choose from.
+   * Menu items provide options for the user to pick from in a menu.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
+   * ### **Methods:**
+   *  - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.
    *
    * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
-   */
-  "sl-menu": DefineComponent<SlMenuProps>;
-
-  /**
-   * Menu labels are used to describe a group of menu items.
-   * ---
-   *
+   *  - _default_ - The menu item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the menu item.
+   * - **suffix** - Used to append an icon or similar element to the menu item.
+   * - **submenu** - Used to denote a nested menu.
    *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
+   * ### **CSS Properties:**
+   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **checked-icon** - The checked icon, which is only visible when the menu item is checked.
+   * - **prefix** - The prefix container.
+   * - **label** - The menu item label.
+   * - **suffix** - The suffix container.
+   * - **spinner** - The spinner that shows when the menu item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
    */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
+  "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+   * Menus provide a list of options for the user to choose from.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
+   *  - **sl-select** - Emitted when a menu item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
    */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+  "sl-menu": DefineComponent<SlMenuProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
    * ### **Slots:**
-   *  - _default_ - The nav items.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-nav": DefineComponent<SlNavProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
    * Nav groups are used to group related nav items.
@@ -3533,33 +3595,43 @@ export type CustomElements = {
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
   /**
-   * Menu items provide options for the user to pick from in a menu.
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - The menu item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the menu item.
-   * - **suffix** - Used to append an icon or similar element to the menu item.
-   * - **submenu** - Used to denote a nested menu.
+   *  - _default_ - The nav items.
    *
-   * ### **CSS Properties:**
-   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-nav": DefineComponent<SlNavProps>;
+
+  /**
+   * 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.
-   * - **checked-icon** - The checked icon, which is only visible when the menu item is checked.
    * - **prefix** - The prefix container.
-   * - **label** - The menu item label.
+   * - **label** - The nav item label.
    * - **suffix** - The suffix container.
-   * - **spinner** - The spinner that shows when the menu item is in the loading state.
-   * - **spinner__base** - The spinner's base part.
-   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
    */
-  "sl-menu-item": DefineComponent<SlMenuItemProps>;
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
 
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
@@ -3638,27 +3710,6 @@ export type CustomElements = {
    */
   "sl-notification": DefineComponent<SlNotificationProps>;
 
-  /**
-   * 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>;
-
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
@@ -3717,25 +3768,17 @@ export type CustomElements = {
   "sl-popup": DefineComponent<SlPopupProps>;
 
   /**
-   * Progress bars are used to show the status of an ongoing operation.
+   * Menu labels are used to describe a group of menu items.
    * ---
    *
    *
    * ### **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)_
+   *  - _default_ - The menu label's content.
    *
    * ### **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>;
+  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
@@ -3759,6 +3802,37 @@ export type CustomElements = {
    */
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
+  /**
+   * Progress bars are used to show the status of an ongoing operation.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the progress indicator.
+   *
+   * ### **CSS Properties:**
+   *  - **--height** - The progress bar's height. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
+   */
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+
+  /**
+   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+
   /**
    * Radios allow the user to select a single option from a group.
    * ---
@@ -3780,16 +3854,6 @@ export type CustomElements = {
    */
   "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).
-   * ---
-   *
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-qr-code": DefineComponent<SlQrCodeProps>;
-
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
@@ -3818,39 +3882,6 @@ export type CustomElements = {
    */
   "sl-radio-button": DefineComponent<SlRadioButtonProps>;
 
-  /**
-   * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the radio group's selected value changes.
-   * - **sl-input** - Emitted when the radio group receives user input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the radio-group.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
-   * - **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the radio group. 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.
-   * - **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>;
-
   /**
    * Ranges allow the user to select a single value within a given range using a slider.
    * ---
@@ -3896,6 +3927,30 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
+  /**
+   * Ratings give users a way to quickly view and provide feedback.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the rating's value changes.
+   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
+   * - **blur()** - Removes focus from the rating.
+   *
+   * ### **CSS Properties:**
+   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
+   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
+   * - **--symbol-size** - The size of symbols. _(default: undefined)_
+   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-rating": DefineComponent<SlRatingProps>;
+
   /**
    * Outputs a localized time phrase relative to the current date and time.
    * ---
@@ -3904,55 +3959,63 @@ export type CustomElements = {
   "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
 
   /**
-   * Row component for grid layout system.
+   * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the radio group's selected value changes.
+   * - **sl-input** - Emitted when the radio group receives user input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the radio-group.
+   *
    * ### **Slots:**
-   *  - _default_ - The default slot for Col components.
+   *  - _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
+   * - **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **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.
+   * - **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-row": DefineComponent<SlRowProps>;
+  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
   /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   * ### **Events:**
+   *  - **sl-resize** - Emitted when the element is resized.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
+   * ### **Slots:**
+   *  - _default_ - One or more elements to watch for resizing.
    */
-  "sl-screen": DefineComponent<SlScreenProps>;
+  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
   /**
-   * Ratings give users a way to quickly view and provide feedback.
+   * Row component for grid layout system.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the rating's value changes.
-   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
-   * - **blur()** - Removes focus from the rating.
-   *
-   * ### **CSS Properties:**
-   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
-   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
-   * - **--symbol-size** - The size of symbols. _(default: undefined)_
-   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
+   * ### **Slots:**
+   *  - _default_ - The default slot for Col components.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-rating": DefineComponent<SlRatingProps>;
+  "sl-row": DefineComponent<SlRowProps>;
 
   /**
    *
@@ -3961,6 +4024,20 @@ export type CustomElements = {
    */
   "sl-segmented": DefineComponent<SlSegmentedProps>;
 
+  /**
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The grid layout content.
+   */
+  "sl-screen": DefineComponent<SlScreenProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -4019,19 +4096,59 @@ export type CustomElements = {
   "sl-select": DefineComponent<SlSelectProps>;
 
   /**
-   * 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.
+   * A collapsible header panel for the Sender component.
    * ---
    *
    *
    * ### **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 }`.
+   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
+   *
+   * ### **Slots:**
+   *  - _default_ - The panel content (children).
+   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The header bar containing title and close button.
+   * - **title** - The title wrapper inside the header.
+   * - **content** - The collapsible content area.
+   */
+  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
+
+  /**
+   * A toggle switch button for the Sender component, supporting checked/unchecked states
+   * with optional distinct content for each state.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the switch's checked state changes. Read `el.checked` for the new state.
+   *
+   * ### **Slots:**
+   *  - _default_ - The switch's default content (always shown).
+   * - **icon** - The switch's icon.
+   * - **checked** - Content shown only when checked.
+   * - **unchecked** - Content shown only when unchecked.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper (the button element).
+   */
+  "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
+
+  /**
+   * 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 选项控制光标位置。
@@ -4095,57 +4212,22 @@ export type CustomElements = {
   "sl-sender": DefineComponent<SlSenderProps>;
 
   /**
-   * A collapsible header panel for the Sender component.
+   * Space 组件用于设置组件之间的间距。
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
-   *
    * ### **Slots:**
-   *  - _default_ - The panel content (children).
-   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **header** - The header bar containing title and close button.
-   * - **title** - The title wrapper inside the header.
-   * - **content** - The collapsible content area.
-   */
-  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
-
-  /**
-   * A toggle switch button for the Sender component, supporting checked/unchecked states
-   * with optional distinct content for each state.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the switch's checked state changes. Read `el.checked` for the new state.
+   *  - _default_ - 需要添加间距的子元素。
    *
-   * ### **Slots:**
-   *  - _default_ - The switch's default content (always shown).
-   * - **icon** - The switch's icon.
-   * - **checked** - Content shown only when checked.
-   * - **unchecked** - Content shown only when unchecked.
+   * ### **CSS Properties:**
+   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper (the button element).
-   */
-  "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
-
-  /**
-   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-resize** - Emitted when the element is resized.
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more elements to watch for resizing.
+   *  - **base** - 组件的基础容器。
+   * - **item** - 每个子元素的包装容器。
+   * - **separator** - 分隔符容器。
    */
-  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
+  "sl-space": DefineComponent<SlSpaceProps>;
 
   /**
    * Skeletons are used to provide a visual representation of where content will eventually be drawn.
@@ -4164,22 +4246,11 @@ export type CustomElements = {
   "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
-   * Space 组件用于设置组件之间的间距。
-   * ---
    *
+   * ---
    *
-   * ### **Slots:**
-   *  - _default_ - 需要添加间距的子元素。
-   *
-   * ### **CSS Properties:**
-   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - 组件的基础容器。
-   * - **item** - 每个子元素的包装容器。
-   * - **separator** - 分隔符容器。
    */
-  "sl-space": DefineComponent<SlSpaceProps>;
+  "sl-steps": DefineComponent<SlStepsProps>;
 
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
@@ -4208,13 +4279,6 @@ export type CustomElements = {
    */
   "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-steps": DefineComponent<SlStepsProps>;
-
   /**
    * Spinners are used to show the progress of an indeterminate operation.
    * ---
@@ -4231,40 +4295,6 @@ export type CustomElements = {
    */
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
-  /**
-   * Tab groups organize content into a container that shows one section at a time.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-tab-show** - Emitted when a tab is shown.
-   * - **sl-tab-hide** - Emitted when a tab is hidden.
-   *
-   * ### **Methods:**
-   *  - **show(panel: _string_)** - Shows the specified tab panel.
-   *
-   * ### **Slots:**
-   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
-   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
-   *
-   * ### **CSS Properties:**
-   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
-   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
-   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **nav** - The tab group's navigation container where tabs are slotted in.
-   * - **tabs** - The container that wraps the tabs.
-   * - **active-tab-indicator** - The line that highlights the currently selected tab.
-   * - **body** - The tab group's body where tab panels are slotted in.
-   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
-   * - **scroll-button--start** - The starting scroll button.
-   * - **scroll-button--end** - The ending scroll button.
-   * - **scroll-button__base** - The scroll button's exported `base` part.
-   */
-  "sl-tab-group": DefineComponent<SlTabGroupProps>;
-
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -4305,32 +4335,56 @@ export type CustomElements = {
   "sl-switch": DefineComponent<SlSwitchProps>;
 
   /**
-   *
+   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
    * ---
    *
    *
    * ### **Events:**
-   *  - **change**
+   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
    */
-  "sl-table": DefineComponent<SlTableProps>;
+  "sl-tab": DefineComponent<SlTabProps>;
 
   /**
-   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+   * Tab groups organize content into a container that shows one section at a time.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *  - **sl-tab-show** - Emitted when a tab is shown.
+   * - **sl-tab-hide** - Emitted when a tab is hidden.
+   *
+   * ### **Methods:**
+   *  - **show(panel: _string_)** - Shows the specified tab panel.
    *
    * ### **Slots:**
-   *  - _default_ - The tab's label.
+   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
+   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
+   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
+   * - **nav** - The tab group's navigation container where tabs are slotted in.
+   * - **tabs** - The container that wraps the tabs.
+   * - **active-tab-indicator** - The line that highlights the currently selected tab.
+   * - **body** - The tab group's body where tab panels are slotted in.
+   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
+   * - **scroll-button--start** - The starting scroll button.
+   * - **scroll-button--end** - The ending scroll button.
+   * - **scroll-button__base** - The scroll button's exported `base` part.
    */
-  "sl-tab": DefineComponent<SlTabProps>;
+  "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
@@ -4349,23 +4403,14 @@ export type CustomElements = {
   "sl-tab-panel": DefineComponent<SlTabPanelProps>;
 
   /**
-   * 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.
+   *  - **change**
    */
-  "sl-tag": DefineComponent<SlTagProps>;
+  "sl-table": DefineComponent<SlTableProps>;
 
   /**
    * Textareas collect data from the user and allow multiple lines of text.
@@ -4405,60 +4450,6 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
-  /**
-   * A standalone thought chain item badge/tag. Used for displaying individual
-   * action/tool entries outside of a full thought chain. Supports variants (solid, outlined, text),
-   * status indicators, and click/disabled states.
-   *
-   * This is the web component equivalent of React's `ThoughtChain.Item`.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-click** - Emitted when the item is clicked (only when not disabled and has a click handler).
-   *
-   * ### **Slots:**
-   *  - _default_ - Default slot (not used, reserved).
-   * - **icon** - Custom icon to display.
-   * - **title** - The item's title. Alternatively, use the `title` attribute.
-   * - **description** - The item's description text. Alternatively, use the `description` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The item's base wrapper.
-   * - **icon** - The icon container.
-   * - **content** - The content wrapper containing title and description.
-   * - **title** - The title area.
-   * - **description** - The description area.
-   */
-  "sl-thought-chain-item": DefineComponent<SlThoughtChainItemProps>;
-
-  /**
-   * 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,
-   * collapsible content, footer, and status indicator. Nodes are connected by a vertical line.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.
-   *
-   * ### **Methods:**
-   *  - **getExpandedKeys(): _string[]_** - Get the effective expanded keys
-   * - **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node
-   *
-   * ### **Slots:**
-   *  - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).
-   *
-   * ### **CSS Properties:**
-   *  - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_
-   * - **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_
-   * - **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
-
   /**
    * Think is used to display an AI model's thinking process with expandable/collapsible content.
    * ---
@@ -4494,6 +4485,52 @@ export type CustomElements = {
    */
   "sl-think": DefineComponent<SlThinkProps>;
 
+  /**
+   * 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 standalone thought chain item badge/tag. Used for displaying individual
+   * action/tool entries outside of a full thought chain. Supports variants (solid, outlined, text),
+   * status indicators, and click/disabled states.
+   *
+   * This is the web component equivalent of React's `ThoughtChain.Item`.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-click** - Emitted when the item is clicked (only when not disabled and has a click handler).
+   *
+   * ### **Slots:**
+   *  - _default_ - Default slot (not used, reserved).
+   * - **icon** - Custom icon to display.
+   * - **title** - The item's title. Alternatively, use the `title` attribute.
+   * - **description** - The item's description text. Alternatively, use the `description` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The item's base wrapper.
+   * - **icon** - The icon container.
+   * - **content** - The content wrapper containing title and description.
+   * - **title** - The title area.
+   * - **description** - The description area.
+   */
+  "sl-thought-chain-item": DefineComponent<SlThoughtChainItemProps>;
+
   /**
    * A single node in a thought chain. Used as a child of `<sl-thought-chain>`.
    * Each node represents one step/action in the chain with an icon, title, description,
@@ -4543,6 +4580,103 @@ export type CustomElements = {
    */
   "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
+  /**
+   * 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,
+   * collapsible content, footer, and status indicator. Nodes are connected by a vertical line.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.
+   *
+   * ### **Methods:**
+   *  - **getExpandedKeys(): _string[]_** - Get the effective expanded keys
+   * - **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node
+   *
+   * ### **Slots:**
+   *  - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_
+   * - **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_
+   * - **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
+
+  /**
+   * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-selection-change** - Emitted when a tree item is selected or deselected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   * - **expand-icon** - The icon to show when the tree item is expanded. Works best with `<sl-icon>`.
+   * - **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--indent-size** - The size of the indentation for nested items. _(default: var(--sl-spacing-medium))_
+   * - **--indent-guide-color** - The color of the indentation line. _(default: var(--sl-color-neutral-200))_
+   * - **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_
+   * - **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_
+   * - **--indent-guide-width** - The width of the indentation line. _(default: 0)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-tree": DefineComponent<SlTreeProps>;
+
+  /**
+   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-expand** - Emitted when the tree item expands.
+   * - **sl-after-expand** - Emitted after the tree item expands and all animations are complete.
+   * - **sl-collapse** - Emitted when the tree item collapses.
+   * - **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.
+   * - **sl-lazy-change** - Emitted when the tree item's lazy state changes.
+   * - **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.
+   *
+   * ### **Methods:**
+   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   * - **expand-icon** - The icon to show when the tree item is expanded.
+   * - **collapse-icon** - The icon to show when the tree item is collapsed.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
+   * - **item--disabled** - Applied when the tree item is disabled.
+   * - **item--expanded** - Applied when the tree item is expanded.
+   * - **item--indeterminate** - Applied when the selection is indeterminate.
+   * - **item--selected** - Applied when the tree item is selected.
+   * - **indentation** - The tree item's indentation container.
+   * - **expand-button** - The container that wraps the tree item's expand button and spinner.
+   * - **spinner** - The spinner that shows when a lazy tree item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **label** - The tree item's label.
+   * - **children** - The container that wraps the tree item's nested children.
+   * - **checkbox** - The checkbox that shows when using multiselect.
+   * - **checkbox__base** - The checkbox's exported `base` part.
+   * - **checkbox__control** - The checkbox's exported `control` part.
+   * - **checkbox__control--checked** - The checkbox's exported `control--checked` part.
+   * - **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.
+   * - **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.
+   * - **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.
+   * - **checkbox__label** - The checkbox's exported `label` part.
+   */
+  "sl-tree-item": DefineComponent<SlTreeItemProps>;
+
   /**
    * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
    * ---
@@ -4626,31 +4760,6 @@ export type CustomElements = {
    */
   "sl-tooltip": DefineComponent<SlTooltipProps>;
 
-  /**
-   * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-selection-change** - Emitted when a tree item is selected or deselected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   * - **expand-icon** - The icon to show when the tree item is expanded. Works best with `<sl-icon>`.
-   * - **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--indent-size** - The size of the indentation for nested items. _(default: var(--sl-spacing-medium))_
-   * - **--indent-guide-color** - The color of the indentation line. _(default: var(--sl-color-neutral-200))_
-   * - **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_
-   * - **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_
-   * - **--indent-guide-width** - The width of the indentation line. _(default: 0)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-tree": DefineComponent<SlTreeProps>;
-
   /**
    * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
    * ---
@@ -4661,51 +4770,6 @@ export type CustomElements = {
    */
   "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 
-  /**
-   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-expand** - Emitted when the tree item expands.
-   * - **sl-after-expand** - Emitted after the tree item expands and all animations are complete.
-   * - **sl-collapse** - Emitted when the tree item collapses.
-   * - **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.
-   * - **sl-lazy-change** - Emitted when the tree item's lazy state changes.
-   * - **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.
-   *
-   * ### **Methods:**
-   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   * - **expand-icon** - The icon to show when the tree item is expanded.
-   * - **collapse-icon** - The icon to show when the tree item is collapsed.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
-   * - **item--disabled** - Applied when the tree item is disabled.
-   * - **item--expanded** - Applied when the tree item is expanded.
-   * - **item--indeterminate** - Applied when the selection is indeterminate.
-   * - **item--selected** - Applied when the tree item is selected.
-   * - **indentation** - The tree item's indentation container.
-   * - **expand-button** - The container that wraps the tree item's expand button and spinner.
-   * - **spinner** - The spinner that shows when a lazy tree item is in the loading state.
-   * - **spinner__base** - The spinner's base part.
-   * - **label** - The tree item's label.
-   * - **children** - The container that wraps the tree item's nested children.
-   * - **checkbox** - The checkbox that shows when using multiselect.
-   * - **checkbox__base** - The checkbox's exported `base` part.
-   * - **checkbox__control** - The checkbox's exported `control` part.
-   * - **checkbox__control--checked** - The checkbox's exported `control--checked` part.
-   * - **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.
-   * - **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.
-   * - **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.
-   * - **checkbox__label** - The checkbox's exported `label` part.
-   */
-  "sl-tree-item": DefineComponent<SlTreeItemProps>;
-
   /**
    * Render markdown content with streaming support and custom node mapping.
    * ---