@kdcloudjs/shoelace 1.0.49 → 1.0.51

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

@@ -1,117 +1,101 @@
 import type { DefineComponent } from "vue";
 
-import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
 import type { SlAlert } from "../../components/alert/alert.component.js";
-import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlAnimation } from "../../components/animation/animation.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
+import type { SlBubble } from "../../components/bubble/bubble.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { SlCalendar, CustomEvent } from "../../components/calendar/calendar.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { SlCascader } from "../../components/cascader/cascader.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlCascader } from "../../components/cascader/cascader.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
-import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
-import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
-import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
+import type { SlDetails } from "../../components/details/details.component.js";
+import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
 import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
+import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlImage } from "../../components/image/image.component.js";
-import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
 import type { SlImagePreviewGroup } from "../../components/image-preview-group/image-preview-group.component.js";
 import type { SlInclude } from "../../components/include/include.component.js";
-import type { SlMenu } from "../../components/menu/menu.component.js";
+import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
 import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SlMenu } from "../../components/menu/menu.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
-import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlNotification } from "../../components/notification/notification.component.js";
+import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopconfirm } from "../../components/popconfirm/popconfirm.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
-import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
+import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
+import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
+import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
+import type { SlRow } from "../../components/row/row.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
-import type { SlRow } from "../../components/row/row.component.js";
-import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSegmented } from "../../components/segmented/segmented.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
-import type { SlSelect } from "../../components/select/select.component.js";
-import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
+import type { SlScreen } from "../../components/screen/screen.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 { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
+import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
+import type { SlSelect } from "../../components/select/select.component.js";
 import type { SlSpace } from "../../components/space/space.component.js";
+import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
+import type { SlSenderSwitch, CustomEvent } from "../../components/sender-switch/sender-switch.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
-import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSteps } from "../../components/steps/steps.component.js";
-import type { SlSwitch } from "../../components/switch/switch.component.js";
+import type { SlSplitPanel } from "../../components/split-panel/split-panel.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 { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
 import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
-import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
 import type { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
+import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
+import type { SlTimelineItem } from "../../components/timeline-item/timeline-item.component.js";
+import type { SlTimeline } from "../../components/timeline/timeline.component.js";
+import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
 import type { SlTransfer } from "../../components/transfer/transfer.component.js";
-import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
-import type { SlTree } from "../../components/tree/tree.component.js";
-import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
 import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
+import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
 import type { SlUpload } from "../../components/upload/upload.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
-
-type SlAnimatedImageProps = {
-  /** The path to the image to load. */
-  src?: SlAnimatedImage["src"];
-  /** A description of the image used by assistive devices. */
-  alt?: SlAnimatedImage["alt"];
-  /** Plays the animation. When this attribute is remove, the animation will pause. */
-  play?: SlAnimatedImage["play"];
-  /**  */
-  animatedImage?: SlAnimatedImage["animatedImage"];
-  /**  */
-  frozenFrame?: SlAnimatedImage["frozenFrame"];
-  /**  */
-  isLoaded?: SlAnimatedImage["isLoaded"];
-  /** Emitted when the image loads successfully. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the image fails to load. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
+import type { SlTree } from "../../components/tree/tree.component.js";
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -142,22 +126,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -200,6 +168,31 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
+};
+
 type SlBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -222,13 +215,78 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
-type SlBadgeProps = {
-  /** The badge's theme variant. */
-  variant?: SlBadge["variant"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: SlBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: SlBadge["pulse"];
+type SlAnimatedImageProps = {
+  /** The path to the image to load. */
+  src?: SlAnimatedImage["src"];
+  /** A description of the image used by assistive devices. */
+  alt?: SlAnimatedImage["alt"];
+  /** Plays the animation. When this attribute is remove, the animation will pause. */
+  play?: SlAnimatedImage["play"];
+  /**  */
+  animatedImage?: SlAnimatedImage["animatedImage"];
+  /**  */
+  frozenFrame?: SlAnimatedImage["frozenFrame"];
+  /**  */
+  isLoaded?: SlAnimatedImage["isLoaded"];
+  /** Emitted when the image loads successfully. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the image fails to load. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlBubbleProps = {
+  /** The position of the bubble. Use `start` for messages from others (left-aligned)
+and `end` for messages from the current user (right-aligned). */
+  placement?: SlBubble["placement"];
+  /** The text content to display in the bubble. If omitted, the default slot content is rendered instead.
+When `typing` is enabled, the content will be animated character by character. */
+  content?: SlBubble["content"];
+  /** The visual style variant of the bubble.
+- `filled`: Solid background (default)
+- `outlined`: Border with transparent background
+- `shadow`: White background with drop shadow
+- `borderless`: No background or border */
+  variant?: SlBubble["variant"];
+  /** The shape of the bubble.
+- `default`: Standard rounded corners
+- `round`: Pill-shaped corners
+- `corner`: Asymmetric corner (chat-style notch) */
+  shape?: SlBubble["shape"];
+  /** When true, shows a loading indicator instead of content. */
+  loading?: SlBubble["loading"];
+  /** Enables a character-by-character typing animation for the `content` attribute.
+Only works with string content set via the `content` attribute. */
+  typing?: SlBubble["typing"];
+  /** Number of characters to reveal per animation step during typing. */
+  "typing-step"?: SlBubble["typingStep"];
+  /** Interval in milliseconds between each typing animation step. */
+  "typing-interval"?: SlBubble["typingInterval"];
+  /** Indicates the content is being streamed. When typing is enabled and streaming is true,
+the typing animation keeps running as new content arrives. The `sl-typing-complete` event
+is only emitted after streaming ends. */
+  streaming?: SlBubble["streaming"];
+  /** Controls the position of the footer slot relative to the content bubble.
+- `outer-start`: Footer outside the content area, aligned to start (default when placement is `start`)
+- `outer-end`: Footer outside the content area, aligned to end (default when placement is `end`)
+- `inner-start`: Footer inside the content area (shares background), aligned to start
+- `inner-end`: Footer inside the content area (shares background), aligned to end
+
+When not set, defaults to `outer-start` if placement is `start`, or `outer-end` if placement is `end`. */
+  "footer-placement"?: SlBubble["footerPlacement"];
+  /** Enables editing mode on the bubble content. When true, the content area becomes
+a contentEditable region with OK and Cancel buttons. */
+  editable?: SlBubble["editable"];
+  /** Custom text for the edit confirm button. */
+  "ok-text"?: SlBubble["okText"];
+  /** Custom text for the edit cancel button. */
+  "cancel-text"?: SlBubble["cancelText"];
+
+  /** Emitted when the typing animation finishes rendering all content. */
+  "onsl-typing-complete"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user confirms an edit. `event.detail.content` contains the edited text. */
+  "onsl-edit-confirm"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user cancels editing. */
+  "onsl-edit-cancel"?: (e: CustomEvent<never>) => void;
 };
 
 type SlButtonProps = {
@@ -381,6 +439,50 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type SlCarouselItemProps = {};
 
+type SlCheckboxProps = {
+  /**  */
+  title?: SlCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: SlCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: SlCheckbox["value"];
+  /** The checkbox's size. */
+  size?: SlCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: SlCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: SlCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: SlCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: SlCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlCheckbox["helpText"];
+  /**  */
+  input?: SlCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type SlCascaderProps = {
   /** The name of the cascader, submitted as a name/value pair with form data. */
   name?: SlCascader["name"];
@@ -390,23 +492,23 @@ type SlCascaderProps = {
   size?: SlCascader["size"];
   /** Placeholder text to show as a hint when the cascader is empty. */
   placeholder?: SlCascader["placeholder"];
-  /** Allows more than one option to be selected. */
+  /** Support multiple or not. */
   multiple?: SlCascader["multiple"];
-  /** Disables the cascader control. */
+  /** Whether disabled select. */
   disabled?: SlCascader["disabled"];
-  /** Adds a clear button when the cascader is not empty. */
-  clearable?: SlCascader["clearable"];
+  /** Whether to disable all options in the panel. The panel can still open/close, but options are not interactive. */
+  "panel-disabled"?: SlCascader["panelDisabled"];
+  /** Show clear button. Supports boolean. */
+  "allow-clear"?: SlCascader["allowClear"];
   /** Indicates whether or not the cascader is open. */
   open?: SlCascader["open"];
+  /** Initial visible of cascader popup. */
+  "default-open"?: SlCascader["defaultOpen"];
   /** Enable this option to prevent the menu from being clipped when the component is placed inside a container with `overflow: auto|scroll`. */
   hoist?: SlCascader["hoist"];
-  /** Draws a filled cascader. */
-  filled?: SlCascader["filled"];
-  /** Draws a pill-style cascader with rounded edges. */
-  pill?: SlCascader["pill"];
   /** The cascader's label. If you need to display HTML, use the `label` slot instead. */
   label?: SlCascader["label"];
-  /** The preferred placement of the cascader's menu. */
+  /** Use preset popup align config. */
   placement?: SlCascader["placement"];
   /** The cascader's help text. If you need to display HTML, use the `help-text` slot instead. */
   "help-text"?: SlCascader["helpText"];
@@ -414,18 +516,34 @@ type SlCascaderProps = {
   form?: SlCascader["form"];
   /** The cascader's required attribute. */
   required?: SlCascader["required"];
-  /** The options to display in the cascader. */
+  /** The data options of cascade. */
   options?: SlCascader["options"];
-  /** Custom field names for the options. */
-  fieldNames?: SlCascader["fieldNames"];
-  /** Separator used to join the selected path labels. */
-  separator?: SlCascader["separator"];
-  /** Whether to expand on click or hover. */
+  /** Custom field name for label, value and children. */
+  "field-names"?: SlCascader["fieldNames"];
+  /** Expand current item when click or hover, one of 'click' or 'hover'. */
   "expand-trigger"?: SlCascader["expandTrigger"];
-  /** Whether to change selection on select. */
+  /** Change value on each selection if set to true. */
   "change-on-select"?: SlCascader["changeOnSelect"];
+  /** Separator used to join the selected path labels for display. */
+  separator?: SlCascader["separator"];
   /** Whether to show the full path in the input. */
   "show-full-path"?: SlCascader["showFullPath"];
+  /** Specify content to show when no result matches. */
+  "not-found-content"?: SlCascader["notFoundContent"];
+  /** Variants of selector. */
+  variant?: SlCascader["variant"];
+  /** Set validation status. */
+  status?: SlCascader["status"];
+  /** Max tag count to show in multiple mode. */
+  "max-tag-count"?: SlCascader["maxTagCount"];
+  /** Placeholder for not showing tags when exceeding maxTagCount. */
+  "max-tag-placeholder"?: SlCascader["maxTagPlaceholder"];
+  /** Max tag text length to show. */
+  "max-tag-text-length"?: SlCascader["maxTagTextLength"];
+  /** Define how to show selected items when multiple is true.
+'show-parent': Show parent node when all children are selected.
+'show-child': Only show child nodes. */
+  "show-checked-strategy"?: SlCascader["showCheckedStrategy"];
   /**  */
   popup?: SlCascader["popup"];
   /**  */
@@ -433,11 +551,21 @@ type SlCascaderProps = {
   /**  */
   displayInput?: SlCascader["displayInput"];
   /**  */
+  searchInput?: SlCascader["searchInput"];
+  /**  */
   valueInput?: SlCascader["valueInput"];
   /**  */
   menu?: SlCascader["menu"];
   /**  */
   displayLabel?: SlCascader["displayLabel"];
+  /** Whether show search input in single mode. Can be boolean or a ShowSearchConfig object (set via JS property). */
+  showSearch?: SlCascader["showSearch"];
+  /** To load option lazily. Cannot work with showSearch. */
+  loadData?: SlCascader["loadData"];
+  /** The render function of displaying selected options. Set via JS property. Default: labels => labels.join(separator). */
+  displayRender?: SlCascader["displayRender"];
+  /** Custom render for each option in the dropdown menu. Set via JS property. */
+  optionRender?: SlCascader["optionRender"];
   /**  */
   validity?: SlCascader["validity"];
   /**  */
@@ -462,50 +590,6 @@ type SlCascaderProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCheckboxProps = {
-  /**  */
-  title?: SlCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: SlCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: SlCheckbox["value"];
-  /** The checkbox's size. */
-  size?: SlCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: SlCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: SlCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: SlCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: SlCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlCheckbox["helpText"];
-  /**  */
-  input?: SlCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type SlColProps = {
   /** Number of cells to span (out of 24) */
   span?: SlCol["span"];
@@ -691,7 +775,7 @@ type SlDatepickerProps = {
 - hh: 12小时制小时
 - A: AM/PM
 也支持传入数组，允许输入框接受多种格式。
-默认值：type='date' 时为 'YYYY-MM-DD'，type='datetime' 时为 'YYYY-MM-DD HH:mm:ss' */
+默认值：type='date' 时为 'YYYY-MM-DD'，type='datetime' 时为 'YYYY-MM-DD HH:mm:ss'，type='year' 时为 'YYYY'，type='month' 时为 'YYYY-MM' */
   format?: SlDatepicker["format"];
   /**  */
   pattern?: SlDatepicker["pattern"];
@@ -811,34 +895,6 @@ as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via
   "onsl-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDetailsProps = {
-  /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
-  open?: SlDetails["open"];
-  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
-  summary?: SlDetails["summary"];
-  /** Disables the details so it can't be toggled. */
-  disabled?: SlDetails["disabled"];
-  /**  */
-  details?: SlDetails["details"];
-  /**  */
-  header?: SlDetails["header"];
-  /**  */
-  body?: SlDetails["body"];
-  /**  */
-  expandIconSlot?: SlDetails["expandIconSlot"];
-  /**  */
-  detailsObserver?: SlDetails["detailsObserver"];
-  /** Emitted when the details opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the details opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the details closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the details closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlDialogProps = {
   /** Indicates whether or not the dialog is resizable. When true, the user can resize the dialog by dragging the
 bottom-right corner, and double-clicking the header will toggle fullscreen mode. */
@@ -879,6 +935,39 @@ will not close the dialog. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type SlDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: SlDivider["vertical"];
+};
+
+type SlDetailsProps = {
+  /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
+  open?: SlDetails["open"];
+  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+  summary?: SlDetails["summary"];
+  /** Disables the details so it can't be toggled. */
+  disabled?: SlDetails["disabled"];
+  /**  */
+  details?: SlDetails["details"];
+  /**  */
+  header?: SlDetails["header"];
+  /**  */
+  body?: SlDetails["body"];
+  /**  */
+  expandIconSlot?: SlDetails["expandIconSlot"];
+  /**  */
+  detailsObserver?: SlDetails["detailsObserver"];
+  /** Emitted when the details opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the details opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the details closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the details closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -916,51 +1005,6 @@ accessible way for users to dismiss the drawer. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type SlDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: SlDivider["vertical"];
-};
-
-type SlDropdownProps = {
-  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
-  open?: SlDropdown["open"];
-  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
-inside of the viewport. */
-  placement?: SlDropdown["placement"];
-  /** Disables the dropdown so the panel will not open. */
-  disabled?: SlDropdown["disabled"];
-  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
-dropdowns that allow for multiple interactions. */
-  "stay-open-on-select"?: SlDropdown["stayOpenOnSelect"];
-  /** The distance in pixels from which to offset the panel away from its trigger. */
-  distance?: SlDropdown["distance"];
-  /** The distance in pixels from which to offset the panel along its trigger. */
-  skidding?: SlDropdown["skidding"];
-  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
-  hoist?: SlDropdown["hoist"];
-  /** Syncs the popup width or height to that of the trigger element. */
-  sync?: SlDropdown["sync"];
-  /**  */
-  popup?: SlDropdown["popup"];
-  /**  */
-  trigger?: SlDropdown["trigger"];
-  /**  */
-  panel?: SlDropdown["panel"];
-  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
-components that use a dropdown internally. */
-  containingElement?: SlDropdown["containingElement"];
-  /** Emitted when the dropdown opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the dropdown closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the dropdown closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlFloatButtonProps = {
   /** The button's type. */
   type?: SlFloatButton["type"];
@@ -1062,6 +1106,46 @@ type SlFormatNumberProps = {
   "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
+type SlDropdownProps = {
+  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
+  open?: SlDropdown["open"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+inside of the viewport. */
+  placement?: SlDropdown["placement"];
+  /** Disables the dropdown so the panel will not open. */
+  disabled?: SlDropdown["disabled"];
+  /** By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+dropdowns that allow for multiple interactions. */
+  "stay-open-on-select"?: SlDropdown["stayOpenOnSelect"];
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  distance?: SlDropdown["distance"];
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  skidding?: SlDropdown["skidding"];
+  /** Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: SlDropdown["hoist"];
+  /** Syncs the popup width or height to that of the trigger element. */
+  sync?: SlDropdown["sync"];
+  /**  */
+  popup?: SlDropdown["popup"];
+  /**  */
+  trigger?: SlDropdown["trigger"];
+  /**  */
+  panel?: SlDropdown["panel"];
+  /** The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+components that use a dropdown internally. */
+  containingElement?: SlDropdown["containingElement"];
+  /** Emitted when the dropdown opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlIconProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIcon["name"];
@@ -1140,17 +1224,6 @@ type SlImageProps = {
   "onsl-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlImageComparerProps = {
-  /** The position of the divider as a percentage. */
-  position?: SlImageComparer["position"];
-  /**  */
-  base?: SlImageComparer["base"];
-  /**  */
-  handle?: SlImageComparer["handle"];
-  /** Emitted when the position changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-};
-
 type SlImagePreviewGroupProps = {
   /** 预览配置，为 false 时禁用预览 */
   preview?: SlImagePreviewGroup["preview"];
@@ -1184,11 +1257,15 @@ code and can result in XSS attacks. */
   "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
 };
 
-type SlMenuProps = {
+type SlImageComparerProps = {
+  /** The position of the divider as a percentage. */
+  position?: SlImageComparer["position"];
   /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+  base?: SlImageComparer["base"];
+  /**  */
+  handle?: SlImageComparer["handle"];
+  /** Emitted when the position changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
 };
 
 type SlInputProps = {
@@ -1313,6 +1390,13 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+};
+
 type SlMutationObserverProps = {
   /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
 `attr="class id title"`. To watch all attributes, use `*`. */
@@ -1332,15 +1416,6 @@ 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"];
@@ -1519,6 +1594,15 @@ type SlNotificationProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => 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 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
@@ -1558,8 +1642,6 @@ type SlPaginationProps = {
 };
 
 type SlPopconfirmProps = {
-  /** 确认框标题 */
-  title?: SlPopconfirm["title"];
   /** 确认框描述 */
   description?: SlPopconfirm["description"];
   /** 确认按钮文字 */
@@ -1578,8 +1660,12 @@ type SlPopconfirmProps = {
   arrow?: SlPopconfirm["arrow"];
   /** 确认按钮类型 */
   "ok-type"?: SlPopconfirm["okType"];
+  /** 文字方向：ltr（从左到右）或 rtl（从右到左） */
+  direction?: SlPopconfirm["direction"];
   /**  */
   popup?: SlPopconfirm["popup"];
+  /** 确认框标题 */
+  title?: SlPopconfirm["title"];
   /** 点击确认的回调，支持返回 Promise 实现异步确认 */
   onConfirm?: SlPopconfirm["onConfirm"];
   /** 点击取消的回调 */
@@ -1674,17 +1760,6 @@ type SlProgressBarProps = {
   label?: SlProgressBar["label"];
 };
 
-type SlProgressRingProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressRing["value"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressRing["label"];
-  /**  */
-  indicator?: SlProgressRing["indicator"];
-  /**  */
-  indicatorOffset?: SlProgressRing["indicatorOffset"];
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1704,23 +1779,30 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlRadioButtonProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
+type SlProgressRingProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressRing["value"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressRing["label"];
   /**  */
-  input?: SlRadioButton["input"];
+  indicator?: SlProgressRing["indicator"];
   /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
+  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 button gains focus. */
+  /** Emitted when the control gains focus. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
@@ -1812,6 +1894,26 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRadioButtonProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadioButton["value"];
+  /** Disables the radio button. */
+  disabled?: SlRadioButton["disabled"];
+  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+this attribute can typically be omitted. */
+  size?: SlRadioButton["size"];
+  /** Draws a pill-style radio button with rounded edges. */
+  pill?: SlRadioButton["pill"];
+  /**  */
+  input?: SlRadioButton["input"];
+  /**  */
+  hiddenInput?: SlRadioButton["hiddenInput"];
+  /** Emitted when the button loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the button gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlRatingProps = {
   /** A label that describes the rating to assistive devices. */
   label?: SlRating["label"];
@@ -1838,6 +1940,17 @@ well with `<sl-icon>` elements. */
   "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => 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 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
@@ -1860,32 +1973,6 @@ type SlResizeObserverProps = {
   "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
-type SlRowProps = {
-  /** Spacing between columns, can be a number or responsive object */
-  gutter?: SlRow["gutter"];
-  /** Vertical alignment of columns */
-  align?: SlRow["align"];
-  /** Horizontal arrangement of columns */
-  justify?: SlRow["justify"];
-  /** Whether to wrap columns */
-  wrap?: SlRow["wrap"];
-};
-
-type SlScreenProps = {
-  /** The options for the GridStack instance. */
-  options?: SlScreen["options"];
-  /** 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 SlSegmentedProps = {
   /**  */
   options?: SlSegmented["options"];
@@ -1909,20 +1996,88 @@ type SlSegmentedProps = {
   onChange?: SlSegmented["onChange"];
 };
 
-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"];
+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"];
   /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
+  gridElement?: SlScreen["gridElement"];
+};
+
+type SlSenderHeaderProps = {
+  /** Whether the panel content is expanded. */
+  open?: SlSenderHeader["open"];
+  /** Whether the close/toggle button is shown. */
+  closable?: SlSenderHeader["closable"];
+  /** Plain-text title. Use the `title` slot for rich content. */
+  title?: SlSenderHeader["title"];
+  /** When true, the content DOM is always rendered even when collapsed.
+Useful when you need refs to inner elements on initial mount.
+When false (default), content is removed from the DOM when closed. */
+  "force-render"?: SlSenderHeader["forceRender"];
+
+  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
+  "onsl-open-change"?: (e: CustomEvent<never>) => void;
+};
+
+type SlSenderProps = {
+  /** The current value of the sender, submitted as part of the event detail on submit. */
+  value?: SlSender["value"];
+  /** Placeholder text to show as a hint when the input is empty. */
+  placeholder?: SlSender["placeholder"];
+  /** Draws the sender in a loading state, typically used while waiting for a response. */
+  loading?: SlSender["loading"];
+  /** Disables the sender. */
+  disabled?: SlSender["disabled"];
+  /** Makes the sender readonly. */
+  "read-only"?: SlSender["readOnly"];
+  /** The number of rows to display for the textarea. Only applies in plain text mode. */
+  rows?: SlSender["rows"];
+  /** Determines how the Enter key behaves. When set to `enter`, pressing Enter submits. When set to `shift-enter`, pressing Shift+Enter submits. */
+  "submit-type"?: SlSender["submitType"];
+  /** An array of slot configuration items for structured input mode. Supports `text`, `input`, `select`, `tag`, `content`, and `custom` types. */
+  slotConfig?: SlSender["slotConfig"];
+  /** The skill tag to display in the slot input area. Includes `value`, optional `title`, and optional `closable` configuration. */
+  skill?: SlSender["skill"];
+  /** Custom footer content or render function. Set to `false` to hide the footer. */
+  footer?: SlSender["footer"];
+  /** Custom header content or render function. Set to `false` to hide the header. */
+  header?: SlSender["header"];
+  /** Custom prefix content or render function. Set to `false` to hide the prefix. */
+  prefixContent?: SlSender["prefixContent"];
+  /** Custom suffix content or render function. Set to `false` to hide the suffix (action buttons). */
+  suffixContent?: SlSender["suffixContent"];
+  /** Enables speech recognition input. Set to `true` for uncontrolled mode, or pass a `ControlledSpeechConfig` object for controlled mode. */
+  "allow-speech"?: SlSender["allowSpeech"];
+  /** Whether speech recognition is currently recording. Only applies in uncontrolled speech mode. */
+  "speech-recording"?: SlSender["speechRecording"];
+  /**  */
+  textarea?: SlSender["textarea"];
+  /**  */
+  slotArea?: SlSender["slotArea"];
+  /** Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`. */
+  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode. */
+  "onsl-submit"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Emitted when the sender's content is cleared. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's speech button is clicked. */
+  "onsl-speech-toggle"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's input area gains focus. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's input area loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when content is pasted into the sender. The event detail includes `{ event }`. */
+  "onsl-paste"?: (e: CustomEvent<never>) => void;
+  /** Emitted when files are pasted into the sender. The event detail includes `{ files }`. */
+  "onsl-paste-file"?: (e: CustomEvent<never>) => void;
 };
 
 type SlSelectProps = {
@@ -2016,73 +2171,22 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSenderProps = {
-  /** The current value of the sender, submitted as part of the event detail on submit. */
-  value?: SlSender["value"];
-  /** Placeholder text to show as a hint when the input is empty. */
-  placeholder?: SlSender["placeholder"];
-  /** Draws the sender in a loading state, typically used while waiting for a response. */
-  loading?: SlSender["loading"];
-  /** Disables the sender. */
-  disabled?: SlSender["disabled"];
-  /** Makes the sender readonly. */
-  "read-only"?: SlSender["readOnly"];
-  /** The number of rows to display for the textarea. Only applies in plain text mode. */
-  rows?: SlSender["rows"];
-  /** Determines how the Enter key behaves. When set to `enter`, pressing Enter submits. When set to `shift-enter`, pressing Shift+Enter submits. */
-  "submit-type"?: SlSender["submitType"];
-  /** An array of slot configuration items for structured input mode. Supports `text`, `input`, `select`, `tag`, `content`, and `custom` types. */
-  slotConfig?: SlSender["slotConfig"];
-  /** The skill tag to display in the slot input area. Includes `value`, optional `title`, and optional `closable` configuration. */
-  skill?: SlSender["skill"];
-  /** Custom footer content or render function. Set to `false` to hide the footer. */
-  footer?: SlSender["footer"];
-  /** Custom header content or render function. Set to `false` to hide the header. */
-  header?: SlSender["header"];
-  /** Custom prefix content or render function. Set to `false` to hide the prefix. */
-  prefixContent?: SlSender["prefixContent"];
-  /** Custom suffix content or render function. Set to `false` to hide the suffix (action buttons). */
-  suffixContent?: SlSender["suffixContent"];
-  /** Enables speech recognition input. Set to `true` for uncontrolled mode, or pass a `ControlledSpeechConfig` object for controlled mode. */
-  "allow-speech"?: SlSender["allowSpeech"];
-  /** Whether speech recognition is currently recording. Only applies in uncontrolled speech mode. */
-  "speech-recording"?: SlSender["speechRecording"];
-  /**  */
-  textarea?: SlSender["textarea"];
-  /**  */
-  slotArea?: SlSender["slotArea"];
-  /** Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`. */
-  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode. */
-  "onsl-submit"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Emitted when the sender's content is cleared. */
-  "onsl-clear"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's speech button is clicked. */
-  "onsl-speech-toggle"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's input area gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's input area loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when content is pasted into the sender. The event detail includes `{ event }`. */
-  "onsl-paste"?: (e: CustomEvent<never>) => void;
-  /** Emitted when files are pasted into the sender. The event detail includes `{ files }`. */
-  "onsl-paste-file"?: (e: CustomEvent<never>) => void;
+type SlSpaceProps = {
+  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
+  orientation?: SlSpace["orientation"];
+  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
+  size?: SlSpace["size"];
+  /** 对齐方式 */
+  align?: SlSpace["align"];
+  /** 是否自动换行，仅在 horizontal 方向时有效 */
+  wrap?: SlSpace["wrap"];
+  /** 分隔符内容 */
+  separator?: SlSpace["separator"];
 };
 
-type SlSenderHeaderProps = {
-  /** Whether the panel content is expanded. */
-  open?: SlSenderHeader["open"];
-  /** Whether the close/toggle button is shown. */
-  closable?: SlSenderHeader["closable"];
-  /** Plain-text title. Use the `title` slot for rich content. */
-  title?: SlSenderHeader["title"];
-  /** When true, the content DOM is always rendered even when collapsed.
-Useful when you need refs to inner elements on initial mount.
-When false (default), content is removed from the DOM when closed. */
-  "force-render"?: SlSenderHeader["forceRender"];
-
-  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
-  "onsl-open-change"?: (e: CustomEvent<never>) => void;
+type SlSkeletonProps = {
+  /** Determines which effect the skeleton will use. */
+  effect?: SlSkeleton["effect"];
 };
 
 type SlSenderSwitchProps = {
@@ -2099,51 +2203,8 @@ type SlSenderSwitchProps = {
   "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlSkeletonProps = {
-  /** Determines which effect the skeleton will use. */
-  effect?: SlSkeleton["effect"];
-};
-
-type SlSpaceProps = {
-  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
-  orientation?: SlSpace["orientation"];
-  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
-  size?: SlSpace["size"];
-  /** 对齐方式 */
-  align?: SlSpace["align"];
-  /** 是否自动换行，仅在 horizontal 方向时有效 */
-  wrap?: SlSpace["wrap"];
-  /** 分隔符内容 */
-  separator?: SlSpace["separator"];
-};
-
 type SlSpinnerProps = {};
 
-type SlSplitPanelProps = {
-  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
-container's initial size. */
-  position?: SlSplitPanel["position"];
-  /** The current position of the divider from the primary panel's edge in pixels. */
-  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
-  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
-  vertical?: SlSplitPanel["vertical"];
-  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
-  disabled?: SlSplitPanel["disabled"];
-  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
-primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
-host element is resized. */
-  primary?: SlSplitPanel["primary"];
-  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
-or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
-  snap?: SlSplitPanel["snap"];
-  /** How close the divider must be to a snap point until snapping occurs. */
-  "snap-threshold"?: SlSplitPanel["snapThreshold"];
-  /**  */
-  divider?: SlSplitPanel["divider"];
-  /** Emitted when the divider's position changes. */
-  "onsl-reposition"?: (e: CustomEvent<never>) => void;
-};
-
 type SlStepsProps = {
   /** 步骤条数据 */
   items?: SlSteps["items"];
@@ -2167,49 +2228,35 @@ type SlStepsProps = {
   responsive?: SlSteps["responsive"];
   /** 标签位置：horizontal（图标右侧，默认）或 vertical（图标下方） */
   titlePlacement?: SlSteps["titlePlacement"];
+  /** 文字方向：ltr（从左到右）或 rtl（从右到左） */
+  direction?: SlSteps["direction"];
   /** 点击步骤切换的回调，传入后步骤条变为可点击状态 */
   onChange?: SlSteps["onChange"];
 };
 
-type SlSwitchProps = {
-  /**  */
-  title?: SlSwitch["title"];
-  /** The name of the switch, submitted as a name/value pair with form data. */
-  name?: SlSwitch["name"];
-  /** The current value of the switch, submitted as a name/value pair with form data. */
-  value?: SlSwitch["value"];
-  /** The switch's size. */
-  size?: SlSwitch["size"];
-  /** Disables the switch. */
-  disabled?: SlSwitch["disabled"];
-  /** Draws the switch in a checked state. */
-  checked?: SlSwitch["checked"];
-  /** 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?: SlSwitch["form"];
-  /** Makes the switch a required field. */
-  required?: SlSwitch["required"];
-  /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlSwitch["helpText"];
+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"];
   /**  */
-  input?: SlSwitch["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlSwitch["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlSwitch["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlSwitch["validationMessage"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control's checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  divider?: SlSplitPanel["divider"];
+  /** Emitted when the divider's position changes. */
+  "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
 type SlTabProps = {
@@ -2258,6 +2305,47 @@ type SlTabPanelProps = {
   active?: SlTabPanel["active"];
 };
 
+type SlSwitchProps = {
+  /**  */
+  title?: SlSwitch["title"];
+  /** The name of the switch, submitted as a name/value pair with form data. */
+  name?: SlSwitch["name"];
+  /** The current value of the switch, submitted as a name/value pair with form data. */
+  value?: SlSwitch["value"];
+  /** The switch's size. */
+  size?: SlSwitch["size"];
+  /** Disables the switch. */
+  disabled?: SlSwitch["disabled"];
+  /** Draws the switch in a checked state. */
+  checked?: SlSwitch["checked"];
+  /** 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?: SlSwitch["form"];
+  /** Makes the switch a required field. */
+  required?: SlSwitch["required"];
+  /** The switch's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlSwitch["helpText"];
+  /**  */
+  input?: SlSwitch["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlSwitch["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlSwitch["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlSwitch["validationMessage"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -2492,26 +2580,6 @@ When set, you must update this in response to `sl-expand` events. */
   "onsl-expand"?: (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>`.
@@ -2535,6 +2603,106 @@ Maps to React's `key` property on ThoughtChainItemType. */
   expanded?: SlThoughtChainNode["expanded"];
 };
 
+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 SlTimelineItemProps = {
+  /** The color of the dot indicator. Can be a preset color (`blue`, `red`, `green`, `gray`) or any valid CSS color value.
+Defaults to `blue`. */
+  color?: SlTimelineItem["color"];
+  /** Whether this item is in a loading state. When true, a spinner is shown instead of the dot. */
+  loading?: SlTimelineItem["loading"];
+  /** The variant style of the dot. `outlined` shows a ring; `filled` shows a solid dot. */
+  variant?: SlTimelineItem["variant"];
+  /** The placement of this item relative to the timeline axis. Used by the parent `sl-timeline`. */
+  placement?: SlTimelineItem["placement"];
+  /** Whether this is the last item in the timeline. Set automatically by the parent `sl-timeline`. */
+  last?: SlTimelineItem["last"];
+};
+
+type SlTimelineProps = {
+  /** An array of timeline item data objects. Each object can include `color`, `loading`, `title`, `content`, and `placement`.
+Alternatively, you can use slotted `<sl-timeline-item>` elements for full control. */
+  items?: SlTimeline["items"];
+  /** The display mode of the timeline.
+- `start` — content on the start side (default, axis on the left / top)
+- `end` — content on the end side (axis on the right / bottom)
+- `alternate` — items alternate between start and end */
+  mode?: SlTimeline["mode"];
+  /** The orientation of the timeline. */
+  orientation?: SlTimeline["orientation"];
+  /** The variant style of the dot. Passed to all child items. */
+  variant?: SlTimeline["variant"];
+  /** Whether to reverse the order of items. */
+  reverse?: SlTimeline["reverse"];
+  /** Set the title span space — the distance to the center of the dot.
+When set, the timeline switches to a three-column layout: `[title] [dot] [content]`.
+- `number` — grid value out of 24 (e.g. `6` = 25%, `12` = 50%)
+- `string` — CSS length or percentage (e.g. `"100px"`, `"25%"`)
+
+Only takes effect when `mode` is **not** `alternate`. */
+  "title-span"?: SlTimeline["titleSpan"];
+  /** When set, a loading item is appended to the end of the timeline with this value as its content.
+Set to an empty string `""` to show a loading item with no text.
+When not set (`undefined` / attribute absent), no pending item is shown. */
+  pending?: SlTimeline["pending"];
+};
+
+type SlTooltipProps = {
+  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
+  content?: SlTooltip["content"];
+  /** The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
+inside of the viewport. */
+  placement?: SlTooltip["placement"];
+  /** Disables the tooltip so it won't show when triggered. */
+  disabled?: SlTooltip["disabled"];
+  /** The distance in pixels from which to offset the tooltip away from its target. */
+  distance?: SlTooltip["distance"];
+  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
+  open?: SlTooltip["open"];
+  /** The distance in pixels from which to offset the tooltip along its target. */
+  skidding?: SlTooltip["skidding"];
+  /** Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
+options can be passed by separating them with a space. When manual is used, the tooltip must be activated
+programmatically. */
+  trigger?: SlTooltip["trigger"];
+  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios. */
+  hoist?: SlTooltip["hoist"];
+  /**  */
+  defaultSlot?: SlTooltip["defaultSlot"];
+  /**  */
+  body?: SlTooltip["body"];
+  /**  */
+  popup?: SlTooltip["popup"];
+  /** Emitted when the tooltip begins to show. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tooltip has shown and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tooltip begins to hide. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tooltip has hidden and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTimepickerProps = {
   /**  */
   format?: SlTimepicker["format"];
@@ -2595,58 +2763,45 @@ type SlTransferProps = {
   "onsl-transfer-scroll"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTooltipProps = {
-  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
-  content?: SlTooltip["content"];
-  /** The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-inside of the viewport. */
-  placement?: SlTooltip["placement"];
-  /** Disables the tooltip so it won't show when triggered. */
-  disabled?: SlTooltip["disabled"];
-  /** The distance in pixels from which to offset the tooltip away from its target. */
-  distance?: SlTooltip["distance"];
-  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
-  open?: SlTooltip["open"];
-  /** The distance in pixels from which to offset the tooltip along its target. */
-  skidding?: SlTooltip["skidding"];
-  /** Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-programmatically. */
-  trigger?: SlTooltip["trigger"];
-  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios. */
-  hoist?: SlTooltip["hoist"];
+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"];
   /**  */
-  defaultSlot?: SlTooltip["defaultSlot"];
+  indeterminate?: SlTreeItem["indeterminate"];
   /**  */
-  body?: SlTooltip["body"];
+  isLeaf?: SlTreeItem["isLeaf"];
   /**  */
-  popup?: SlTooltip["popup"];
-  /** Emitted when the tooltip begins to show. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tooltip has shown and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tooltip begins to hide. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tooltip has hidden and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
-type SlTreeProps = {
-  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
-displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
-  selection?: SlTree["selection"];
-  /** Whether to show connecting lines between tree nodes. */
-  "show-line"?: SlTree["showLine"];
+  loading?: SlTreeItem["loading"];
   /**  */
-  defaultSlot?: SlTree["defaultSlot"];
+  selectable?: SlTreeItem["selectable"];
   /**  */
-  expandedIconSlot?: SlTree["expandedIconSlot"];
+  defaultSlot?: SlTreeItem["defaultSlot"];
   /**  */
-  collapsedIconSlot?: SlTree["collapsedIconSlot"];
-  /** Emitted when a tree item is selected or deselected. */
-  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
+  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 = {
@@ -2759,47 +2914,6 @@ Each node has `title`, `value`, and optionally `children`, `disabled`, `selectab
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTreeItemProps = {
-  /** Expands the tree item. */
-  expanded?: SlTreeItem["expanded"];
-  /** Draws the tree item in a selected state. */
-  selected?: SlTreeItem["selected"];
-  /** Disables the tree item. */
-  disabled?: SlTreeItem["disabled"];
-  /** Enables lazy loading behavior. */
-  lazy?: SlTreeItem["lazy"];
-  /**  */
-  indeterminate?: SlTreeItem["indeterminate"];
-  /**  */
-  isLeaf?: SlTreeItem["isLeaf"];
-  /**  */
-  loading?: SlTreeItem["loading"];
-  /**  */
-  selectable?: SlTreeItem["selectable"];
-  /**  */
-  defaultSlot?: SlTreeItem["defaultSlot"];
-  /**  */
-  childrenSlot?: SlTreeItem["childrenSlot"];
-  /**  */
-  itemElement?: SlTreeItem["itemElement"];
-  /**  */
-  childrenContainer?: SlTreeItem["childrenContainer"];
-  /**  */
-  expandButtonSlot?: SlTreeItem["expandButtonSlot"];
-  /** Emitted when the tree item expands. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tree item expands and all animations are complete. */
-  "onsl-after-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tree item collapses. */
-  "onsl-collapse"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the tree item collapses and all animations are complete. */
-  "onsl-after-collapse"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the tree item's lazy state changes. */
-  "onsl-lazy-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree. */
-  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
-};
-
 type SlUploadProps = {
   /** 上传文件的目标 URL。 */
   action?: SlUpload["action"];
@@ -2888,29 +3002,23 @@ type SlXMarkdownProps = {
   streaming?: SlXMarkdown["streaming"];
 };
 
-export type CustomElements = {
-  /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
-   *
-   * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
-   */
-  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
+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;
+};
 
+export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -2942,6 +3050,25 @@ export type CustomElements = {
    */
   "sl-alert": DefineComponent<SlAlertProps>;
 
+  /**
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
+   *
+   * ### **Methods:**
+   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   */
+  "sl-animation": DefineComponent<SlAnimationProps>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2965,23 +3092,17 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
-   *
    * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   *  - _default_ - The badge's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-animation": DefineComponent<SlAnimationProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -3018,17 +3139,71 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
+   *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
+   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
+
+  /**
+   * Bubble is a chat bubble component commonly used in conversational UIs.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-typing-complete** - Emitted when the typing animation finishes rendering all content.
+   * - **sl-edit-confirm** - Emitted when the user confirms an edit. `event.detail.content` contains the edited text.
+   * - **sl-edit-cancel** - Emitted when the user cancels editing.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for bubble content. Used when the `content` attribute is not set.
+   * - **avatar** - An avatar to display beside the bubble. Works well with `<sl-avatar>`.
+   * - **header** - Header content displayed above the bubble content area.
+   * - **footer** - Footer content displayed below the bubble content area.
+   * - **extra** - Extra content displayed on the opposite side of the avatar.
+   * - **loading** - Custom loading indicator. Overrides the default loading dots.
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-bubble-filled-background** - Background color for the `filled` variant (start placement). _(default: undefined)_
+   * - **--sl-bubble-filled-color** - Text color for the `filled` variant. _(default: undefined)_
+   * - **--sl-bubble-filled-background-end** - Background color for the `filled` variant when placement is `end`. _(default: undefined)_
+   * - **--sl-bubble-filled-color-end** - Text color for the `filled` variant when placement is `end`. _(default: undefined)_
+   * - **--sl-bubble-outlined-background** - Background color for the `outlined` variant. _(default: undefined)_
+   * - **--sl-bubble-outlined-border-color** - Border color for the `outlined` variant. _(default: undefined)_
+   * - **--sl-bubble-outlined-color** - Text color for the `outlined` variant. _(default: undefined)_
+   * - **--sl-bubble-shadow-background** - Background color for the `shadow` variant. _(default: undefined)_
+   * - **--sl-bubble-shadow-box-shadow** - Box shadow for the `shadow` variant. _(default: undefined)_
+   * - **--sl-bubble-shadow-color** - Text color for the `shadow` variant. _(default: undefined)_
+   * - **--sl-bubble-borderless-color** - Text color for the `borderless` variant. _(default: undefined)_
+   * - **--sl-bubble-loading-dot-color** - Color of the loading indicator dots. _(default: undefined)_
+   * - **--sl-bubble-cursor-color** - Color of the typing cursor indicator. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's outermost wrapper.
+   * - **avatar** - The container that wraps the avatar slot.
+   * - **body** - The body wrapper containing header, content, and footer.
+   * - **header** - The header container.
+   * - **content** - The main content bubble area.
+   * - **footer** - The footer container.
+   * - **extra** - The extra content container.
+   * - **loading** - The default loading indicator container.
+   */
+  "sl-bubble": DefineComponent<SlBubbleProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -3182,6 +3357,44 @@ export type CustomElements = {
    */
   "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
+  /**
+   * Checkboxes allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the checkbox loses focus.
+   * - **sl-change** - Emitted when the checked state changes.
+   * - **sl-focus** - Emitted when the checkbox gains focus.
+   * - **sl-input** - Emitted when the checkbox receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
+
   /**
    * Cascader is a cascade selection component that allows users to select from a set of hierarchical options.
    * ---
@@ -3205,6 +3418,7 @@ export type CustomElements = {
    * - **suffix** - Used to append a presentational icon or similar element to the combobox.
    * - **clear-icon** - An icon to use in lieu of the default clear icon.
    * - **expand-icon** - The icon to show when the control is expanded and collapsed.
+   * - **not-found** - Content shown when no options match.
    *
    * ### **CSS Parts:**
    *  - **form-control** - The form control that wraps the label, input, and help text.
@@ -3215,6 +3429,7 @@ export type CustomElements = {
    * - **prefix** - The container that wraps the prefix slot.
    * - **suffix** - The container that wraps the suffix slot.
    * - **display-input** - The element that displays the selected option's label.
+   * - **search-input** - The search input element when showSearch is enabled.
    * - **menu** - The cascader menu container.
    * - **menu-column** - Each column in the cascader menu.
    * - **menu-item** - Each item in the cascader menu.
@@ -3222,47 +3437,10 @@ export type CustomElements = {
    * - **tag** - The individual tags that represent each selected option.
    * - **clear-button** - The clear button.
    * - **expand-icon** - The container that wraps the expand icon.
+   * - **not-found** - The empty state content container.
    */
   "sl-cascader": DefineComponent<SlCascaderProps>;
 
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the checkbox loses focus.
-   * - **sl-change** - Emitted when the checked state changes.
-   * - **sl-focus** - Emitted when the checkbox gains focus.
-   * - **sl-input** - Emitted when the checkbox receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   *
-   * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "sl-checkbox": DefineComponent<SlCheckboxProps>;
-
   /**
    * Col component for grid layout system.
    * ---
@@ -3437,36 +3615,6 @@ export type CustomElements = {
    */
   "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
 
-  /**
-   * Details show a brief summary and expand to show additional content.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the details opens.
-   * - **sl-after-show** - Emitted after the details opens and all animations are complete.
-   * - **sl-hide** - Emitted when the details closes.
-   * - **sl-after-hide** - Emitted after the details closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the details.
-   * - **hide()** - Hides the details
-   *
-   * ### **Slots:**
-   *  - _default_ - The details' main content.
-   * - **summary** - The details' summary. Alternatively, you can use the `summary` attribute.
-   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **header** - The header that wraps both the summary and the expand/collapse icon.
-   * - **summary** - The container that wraps the summary.
-   * - **summary-icon** - The container that wraps the expand/collapse icons.
-   * - **content** - The details content.
-   */
-  "sl-details": DefineComponent<SlDetailsProps>;
-
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
    * ---
@@ -3511,88 +3659,89 @@ export type CustomElements = {
   "sl-dialog": DefineComponent<SlDialogProps>;
 
   /**
-   * Drawers slide in from a container to expose additional options and information.
+   * Dividers are used to visually separate or group elements.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   */
+  "sl-divider": DefineComponent<SlDividerProps>;
+
+  /**
+   * Details show a brief summary and expand to show additional content.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-show** - Emitted when the drawer opens.
-   * - **sl-after-show** - Emitted after the drawer opens and all animations are complete.
-   * - **sl-hide** - Emitted when the drawer closes.
-   * - **sl-after-hide** - Emitted after the drawer closes and all animations are complete.
-   * - **sl-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
-   * - **sl-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
+   *  - **sl-show** - Emitted when the details opens.
+   * - **sl-after-show** - Emitted after the details opens and all animations are complete.
+   * - **sl-hide** - Emitted when the details closes.
+   * - **sl-after-hide** - Emitted after the details closes and all animations are complete.
    *
    * ### **Methods:**
-   *  - **show()** - Shows the drawer.
-   * - **hide()** - Hides the drawer
+   *  - **show()** - Shows the details.
+   * - **hide()** - Hides the details
    *
    * ### **Slots:**
-   *  - _default_ - The drawer's main content.
-   * - **label** - The drawer's label. Alternatively, you can use the `label` attribute.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
-   * - **footer** - The drawer's footer, usually one or more buttons representing various options.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_
-   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
-   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
-   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
+   *  - _default_ - The details' main content.
+   * - **summary** - The details' summary. Alternatively, you can use the `summary` attribute.
+   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **overlay** - The overlay that covers the screen behind the drawer.
-   * - **panel** - The drawer's panel (where the drawer and its content are rendered).
-   * - **header** - The drawer's header. This element wraps the title and header actions.
-   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
-   * - **title** - The drawer's title.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   * - **body** - The drawer's body.
-   * - **footer** - The drawer's footer.
-   */
-  "sl-drawer": DefineComponent<SlDrawerProps>;
-
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   * - **header** - The header that wraps both the summary and the expand/collapse icon.
+   * - **summary** - The container that wraps the summary.
+   * - **summary-icon** - The container that wraps the expand/collapse icons.
+   * - **content** - The details content.
    */
-  "sl-divider": DefineComponent<SlDividerProps>;
+  "sl-details": DefineComponent<SlDetailsProps>;
 
   /**
-   * Dropdowns expose additional content that "drops down" in a panel.
+   * Drawers slide in from a container to expose additional options and information.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-show** - Emitted when the dropdown opens.
-   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **sl-hide** - Emitted when the dropdown closes.
-   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   *  - **sl-show** - Emitted when the drawer opens.
+   * - **sl-after-show** - Emitted after the drawer opens and all animations are complete.
+   * - **sl-hide** - Emitted when the drawer closes.
+   * - **sl-after-hide** - Emitted after the drawer closes and all animations are complete.
+   * - **sl-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+   * - **sl-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
    *
    * ### **Methods:**
-   *  - **show()** - Shows the dropdown panel.
-   * - **hide()** - Hides the dropdown panel
-   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
+   *  - **show()** - Shows the drawer.
+   * - **hide()** - Hides the drawer
    *
    * ### **Slots:**
-   *  - _default_ - The dropdown's main content.
-   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
+   *  - _default_ - The drawer's main content.
+   * - **label** - The drawer's label. Alternatively, you can use the `label` attribute.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
+   * - **footer** - The drawer's footer, usually one or more buttons representing various options.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_
+   * - **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_
+   * - **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_
+   * - **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **trigger** - The container that wraps the trigger.
-   * - **panel** - The panel that gets shown when the dropdown is open.
+   *  - **base** - The component's base wrapper.
+   * - **overlay** - The overlay that covers the screen behind the drawer.
+   * - **panel** - The drawer's panel (where the drawer and its content are rendered).
+   * - **header** - The drawer's header. This element wraps the title and header actions.
+   * - **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.
+   * - **title** - The drawer's title.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
+   * - **body** - The drawer's body.
+   * - **footer** - The drawer's footer.
    */
-  "sl-dropdown": DefineComponent<SlDropdownProps>;
+  "sl-drawer": DefineComponent<SlDrawerProps>;
 
   /**
    * A floating action button that stays fixed on the page.
@@ -3656,6 +3805,35 @@ export type CustomElements = {
    */
   "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
+  /**
+   * Dropdowns expose additional content that "drops down" in a panel.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the dropdown opens.
+   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dropdown closes.
+   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown panel.
+   * - **hide()** - Hides the dropdown panel
+   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The dropdown's main content.
+   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **trigger** - The container that wraps the trigger.
+   * - **panel** - The panel that gets shown when the dropdown is open.
+   */
+  "sl-dropdown": DefineComponent<SlDropdownProps>;
+
   /**
    * Icons are symbols that can be used to represent various options within an application.
    * ---
@@ -3718,32 +3896,6 @@ export type CustomElements = {
    */
   "sl-image": DefineComponent<SlImageProps>;
 
-  /**
-   * Compare visual differences between similar photos with a sliding panel.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the position changes.
-   *
-   * ### **Slots:**
-   *  - **before** - The before image, an `<img>` or `<svg>` element.
-   * - **after** - The after image, an `<img>` or `<svg>` element.
-   * - **handle** - The icon used inside the handle.
-   *
-   * ### **CSS Properties:**
-   *  - **--divider-width** - The width of the dividing line. _(default: undefined)_
-   * - **--handle-size** - The size of the compare handle. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **before** - The container that wraps the before image.
-   * - **after** - The container that wraps the after image.
-   * - **divider** - The divider that separates the images.
-   * - **handle** - The handle that the user drags to expose the after image.
-   */
-  "sl-image-comparer": DefineComponent<SlImageComparerProps>;
-
   /**
    * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
    * ---
@@ -3779,17 +3931,30 @@ export type CustomElements = {
   "sl-include": DefineComponent<SlIncludeProps>;
 
   /**
-   * Menus provide a list of options for the user to choose from.
+   * Compare visual differences between similar photos with a sliding panel.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
+   *  - **sl-change** - Emitted when the position changes.
    *
    * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   *  - **before** - The before image, an `<img>` or `<svg>` element.
+   * - **after** - The after image, an `<img>` or `<svg>` element.
+   * - **handle** - The icon used inside the handle.
+   *
+   * ### **CSS Properties:**
+   *  - **--divider-width** - The width of the dividing line. _(default: undefined)_
+   * - **--handle-size** - The size of the compare handle. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **before** - The container that wraps the before image.
+   * - **after** - The container that wraps the after image.
+   * - **divider** - The divider that separates the images.
+   * - **handle** - The handle that the user drags to expose the after image.
    */
-  "sl-menu": DefineComponent<SlMenuProps>;
+  "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
   /**
    * Inputs collect data from the user.
@@ -3884,33 +4049,30 @@ export type CustomElements = {
   "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>;
 
   /**
-   * Nav groups are used to group related nav items.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The nav items within the group.
-   * - **title** - The nav group's title.
+   * ### **Events:**
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **title** - The nav group title.
-   * - **body** - The nav group body.
+   * ### **Slots:**
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
    * Navs are used to create navigation menus, including top bars and sidebars.
@@ -4028,6 +4190,22 @@ export type CustomElements = {
    */
   "sl-notification": DefineComponent<SlNotificationProps>;
 
+  /**
+   * Nav groups are used to group related nav items.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav items within the group.
+   * - **title** - The nav group's title.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **title** - The nav group title.
+   * - **body** - The nav group body.
+   */
+  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
@@ -4117,6 +4295,16 @@ export type CustomElements = {
    */
   "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>;
+
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
@@ -4140,42 +4328,25 @@ export type CustomElements = {
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
   /**
-   * 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.
+   * Radios allow the user to select a single option from a group.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-blur** - Emitted when the button loses focus.
-   * - **sl-focus** - Emitted when the button gains focus.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
-   * - **blur()** - Removes focus from the radio button.
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-focus** - Emitted when the control gains focus.
    *
    * ### **Slots:**
-   *  - _default_ - The radio button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
+   *  - _default_ - The radio's label.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **button** - The internal `<button>` element.
-   * - **button--checked** - The internal button element when the radio button is checked.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The container that wraps the radio button's label.
-   * - **suffix** - The container that wraps the suffix.
+   * - **control** - The circular container that wraps the radio's checked state.
+   * - **control--checked** - The radio control when the radio is checked.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the radio's label.
    */
-  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
+  "sl-radio": DefineComponent<SlRadioProps>;
 
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
@@ -4255,6 +4426,34 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
+  /**
+   * Radios buttons allow the user to select a single option from a group using a button-like control.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the button loses focus.
+   * - **sl-focus** - Emitted when the button gains focus.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
+   * - **blur()** - Removes focus from the radio button.
+   *
+   * ### **Slots:**
+   *  - _default_ - The radio button's label.
+   * - **prefix** - A presentational prefix icon or similar element.
+   * - **suffix** - A presentational suffix icon or similar element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **button** - The internal `<button>` element.
+   * - **button--checked** - The internal button element when the radio button is checked.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The container that wraps the radio button's label.
+   * - **suffix** - The container that wraps the suffix.
+   */
+  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
+
   /**
    * Ratings give users a way to quickly view and provide feedback.
    * ---
@@ -4279,26 +4478,6 @@ export type CustomElements = {
    */
   "sl-rating": DefineComponent<SlRatingProps>;
 
-  /**
-   * Outputs a localized time phrase relative to the current date and time.
-   * ---
-   *
-   */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
-
-  /**
-   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-resize** - Emitted when the element is resized.
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more elements to watch for resizing.
-   */
-  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
-
   /**
    * Row component for grid layout system.
    * ---
@@ -4313,18 +4492,24 @@ export type CustomElements = {
   "sl-row": DefineComponent<SlRowProps>;
 
   /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
+  /**
+   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
    *
    *
-   * ### **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>;
 
   /**
    *
@@ -4334,82 +4519,38 @@ export type CustomElements = {
   "sl-segmented": DefineComponent<SlSegmentedProps>;
 
   /**
-   * Radios allow the user to select a single option from a group.
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-focus** - Emitted when the control gains focus.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio's label.
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The circular container that wraps the radio's checked state.
-   * - **control--checked** - The radio control when the radio is checked.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the radio's label.
+   *  - **base** - The grid layout content.
    */
-  "sl-radio": DefineComponent<SlRadioProps>;
+  "sl-screen": DefineComponent<SlScreenProps>;
 
   /**
-   * Selects allow you to choose items from a menu of predefined options.
+   * A collapsible header panel for the Sender component.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the control's value changes.
-   * - **sl-clear** - Emitted when the control's value is cleared.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-show** - Emitted when the select's menu opens.
-   * - **sl-after-show** - Emitted after the select's menu opens and all animations are complete.
-   * - **sl-hide** - Emitted when the select's menu closes.
-   * - **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the listbox.
-   * - **hide()** - Hides the listbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
-   * - **blur()** - Removes focus from the control.
+   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
    *
    * ### **Slots:**
-   *  - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
-   * - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   *  - _default_ - The panel content (children).
+   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
    *
    * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The select's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
-   * - **listbox** - The listbox container where options are slotted.
-   * - **tags** - The container that houses option tags when `multiselect` is used.
-   * - **tag** - The individual tags that represent each multiselect option.
-   * - **tag__base** - The tag's base part.
-   * - **tag__content** - The tag's content part.
-   * - **tag__remove-button** - The tag's remove button.
-   * - **tag__remove-button__base** - The tag's remove button base part.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
+   *  - **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-select": DefineComponent<SlSelectProps>;
+  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
 
   /**
    * Senders are used to send messages. They support plain text input, structured slot-based input, speech recognition, skill tagging, and customizable header/footer/prefix/suffix areas.
@@ -4488,44 +4629,79 @@ export type CustomElements = {
   "sl-sender": DefineComponent<SlSenderProps>;
 
   /**
-   * A collapsible header panel for the Sender component.
+   * Selects allow you to choose items from a menu of predefined options.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-open-change** - Emitted when the open state changes. `event.detail.open` indicates the new state.
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-clear** - Emitted when the control's value is cleared.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-show** - Emitted when the select's menu opens.
+   * - **sl-after-show** - Emitted after the select's menu opens and all animations are complete.
+   * - **sl-hide** - Emitted when the select's menu closes.
+   * - **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the listbox.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
    *
    * ### **Slots:**
-   *  - _default_ - The panel content (children).
-   * - **title** - The header title content. Alternatively use the `title` attribute for plain text.
+   *  - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
+   * - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **header** - The header bar containing title and close button.
-   * - **title** - The title wrapper inside the header.
-   * - **content** - The collapsible content area.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The select's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **listbox** - The listbox container where options are slotted.
+   * - **tags** - The container that houses option tags when `multiselect` is used.
+   * - **tag** - The individual tags that represent each multiselect option.
+   * - **tag__base** - The tag's base part.
+   * - **tag__content** - The tag's content part.
+   * - **tag__remove-button** - The tag's remove button.
+   * - **tag__remove-button__base** - The tag's remove button base part.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
    */
-  "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
+  "sl-select": DefineComponent<SlSelectProps>;
 
   /**
-   * A toggle switch button for the Sender component, supporting checked/unchecked states
-   * with optional distinct content for each state.
+   * Space 组件用于设置组件之间的间距。
    * ---
    *
    *
-   * ### **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.
+   *  - _default_ - 需要添加间距的子元素。
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper (the button element).
+   *  - **base** - 组件的基础容器。
+   * - **item** - 每个子元素的包装容器。
+   * - **separator** - 分隔符容器。
    */
-  "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
+  "sl-space": DefineComponent<SlSpaceProps>;
 
   /**
    * Skeletons are used to provide a visual representation of where content will eventually be drawn.
@@ -4544,22 +4720,24 @@ export type CustomElements = {
   "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
-   * Space 组件用于设置组件之间的间距。
+   * A toggle switch button for the Sender component, supporting checked/unchecked states
+   * with optional distinct content for each state.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - 需要添加间距的子元素。
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the switch's checked state changes. Read `el.checked` for the new state.
    *
-   * ### **CSS Properties:**
-   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
+   * ### **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** - 组件的基础容器。
-   * - **item** - 每个子元素的包装容器。
-   * - **separator** - 分隔符容器。
+   *  - **base** - The component's base wrapper (the button element).
    */
-  "sl-space": DefineComponent<SlSpaceProps>;
+  "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
 
   /**
    * Spinners are used to show the progress of an indeterminate operation.
@@ -4577,6 +4755,13 @@ export type CustomElements = {
    */
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-steps": DefineComponent<SlStepsProps>;
+
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
    * ---
@@ -4604,52 +4789,6 @@ export type CustomElements = {
    */
   "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-steps": DefineComponent<SlStepsProps>;
-
-  /**
-   * Switches allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-change** - Emitted when the control's checked state changes.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the switch.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the switch.
-   * - **blur()** - Removes focus from the switch.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   *
-   * ### **Slots:**
-   *  - _default_ - The switch's label.
-   * - **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Properties:**
-   *  - **--width** - The width of the switch. _(default: undefined)_
-   * - **--height** - The height of the switch. _(default: undefined)_
-   * - **--thumb-size** - The size of the thumb. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The control that houses the switch's thumb.
-   * - **thumb** - The switch's thumb.
-   * - **label** - The switch's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "sl-switch": DefineComponent<SlSwitchProps>;
-
   /**
    * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
    * ---
@@ -4708,15 +4847,54 @@ export type CustomElements = {
    *
    *
    * ### **Slots:**
-   *  - _default_ - The tab panel's content.
+   *  - _default_ - The tab panel's content.
+   *
+   * ### **CSS Properties:**
+   *  - **--padding** - The tab panel's padding. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
+
+  /**
+   * Switches allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-change** - Emitted when the control's checked state changes.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the switch.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the switch.
+   * - **blur()** - Removes focus from the switch.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   *
+   * ### **Slots:**
+   *  - _default_ - The switch's label.
+   * - **help-text** - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Properties:**
-   *  - **--padding** - The tab panel's padding. _(default: undefined)_
+   *  - **--width** - The width of the switch. _(default: undefined)_
+   * - **--height** - The height of the switch. _(default: undefined)_
+   * - **--thumb-size** - The size of the thumb. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **control** - The control that houses the switch's thumb.
+   * - **thumb** - The switch's thumb.
+   * - **label** - The switch's label.
+   * - **form-control-help-text** - The help text's wrapper.
    */
-  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
+  "sl-switch": DefineComponent<SlSwitchProps>;
 
   /**
    *
@@ -4847,6 +5025,33 @@ export type CustomElements = {
    */
   "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
 
+  /**
+   * 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,
+   * collapsible content, and footer.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The node's main content (shown in the collapsible area).
+   * - **icon** - Custom icon to display instead of the default numbered circle or status icon.
+   * - **title** - The node's title. Alternatively, use the `title` attribute.
+   * - **description** - The node's description text.
+   * - **footer** - Footer content displayed below the content area.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The node's base wrapper.
+   * - **icon** - The icon container.
+   * - **header** - The header section (title + description).
+   * - **title** - The title area (clickable when collapsible).
+   * - **description** - The description area.
+   * - **content** - The collapsible content wrapper.
+   * - **content-inner** - The inner content wrapper.
+   * - **footer** - The footer area.
+   * - **collapse-icon** - The chevron expand/collapse indicator.
+   */
+  "sl-thought-chain-node": DefineComponent<SlThoughtChainNodeProps>;
+
   /**
    * 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),
@@ -4875,31 +5080,84 @@ export type CustomElements = {
   "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,
-   * collapsible content, and footer.
+   * A single item within a timeline.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The node's main content (shown in the collapsible area).
-   * - **icon** - Custom icon to display instead of the default numbered circle or status icon.
-   * - **title** - The node's title. Alternatively, use the `title` attribute.
-   * - **description** - The node's description text.
-   * - **footer** - Footer content displayed below the content area.
+   *  - _default_ - The main content of the timeline item.
+   * - **icon** - An optional custom icon to display instead of the default dot.
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-timeline-dot-size** - The size of the dot node. _(default: undefined)_
+   * - **--sl-timeline-dot-border-width** - The border width of the dot node. _(default: undefined)_
+   * - **--sl-timeline-dot-bg** - The background color of the dot node. _(default: undefined)_
+   * - **--sl-timeline-tail-width** - The width of the connecting tail line. _(default: undefined)_
+   * - **--sl-timeline-tail-color** - The color of the connecting tail line. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The node's base wrapper.
-   * - **icon** - The icon container.
-   * - **header** - The header section (title + description).
-   * - **title** - The title area (clickable when collapsible).
-   * - **description** - The description area.
-   * - **content** - The collapsible content wrapper.
-   * - **content-inner** - The inner content wrapper.
-   * - **footer** - The footer area.
-   * - **collapse-icon** - The chevron expand/collapse indicator.
+   *  - **base** - The component's base wrapper.
+   * - **dot** - The dot indicator element.
+   * - **tail** - The connecting line between this item and the next.
+   * - **body** - The content body wrapper.
+   * - **title** - The title element.
+   * - **content** - The content area below the title.
    */
-  "sl-thought-chain-node": DefineComponent<SlThoughtChainNodeProps>;
+  "sl-timeline-item": DefineComponent<SlTimelineItemProps>;
+
+  /**
+   * Timelines display a list of events in chronological order.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for `sl-timeline-item` elements. When using slotted items, the `items` property is ignored.
+   * - **pending-dot** - Custom icon for the pending item dot. Only used when the `pending` attribute is set.
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-timeline-dot-size** - The size of the dot node (inherited by items). _(default: undefined)_
+   * - **--sl-timeline-dot-border-width** - The border width of the dot node (inherited by items). _(default: undefined)_
+   * - **--sl-timeline-dot-bg** - The background color of the dot node (inherited by items). _(default: undefined)_
+   * - **--sl-timeline-tail-width** - The width of the connecting tail line (inherited by items). _(default: undefined)_
+   * - **--sl-timeline-tail-color** - The color of the connecting tail line (inherited by items). _(default: undefined)_
+   * - **--sl-timeline-title-span** - The width of the title column when `title-span` is set (computed internally). _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-timeline": DefineComponent<SlTimelineProps>;
+
+  /**
+   * Tooltips display additional information based on a specific action.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the tooltip begins to show.
+   * - **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.
+   * - **sl-hide** - Emitted when the tooltip begins to hide.
+   * - **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the tooltip.
+   * - **hide()** - Hides the tooltip
+   *
+   * ### **Slots:**
+   *  - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+   * - **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+   *
+   * ### **CSS Properties:**
+   *  - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_
+   * - **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_
+   * - **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+   * - **body** - The tooltip's body where its content is rendered.
+   */
+  "sl-tooltip": DefineComponent<SlTooltipProps>;
 
   /**
    * A time picker component that provides a time selection interface.
@@ -4967,61 +5225,49 @@ export type CustomElements = {
   "sl-transfer": DefineComponent<SlTransferProps>;
 
   /**
-   * Tooltips display additional information based on a specific action.
+   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-show** - Emitted when the tooltip begins to show.
-   * - **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.
-   * - **sl-hide** - Emitted when the tooltip begins to hide.
-   * - **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.
+   *  - **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:**
-   *  - **show()** - Shows the tooltip.
-   * - **hide()** - Hides the tooltip
-   *
-   * ### **Slots:**
-   *  - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
-   * - **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
-   *
-   * ### **CSS Properties:**
-   *  - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_
-   * - **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_
-   * - **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
-   * - **body** - The tooltip's body where its content is rendered.
-   */
-  "sl-tooltip": DefineComponent<SlTooltipProps>;
-
-  /**
-   * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-selection-change** - Emitted when a tree item is selected or deselected.
+   *  - **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. 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)_
+   * - **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": DefineComponent<SlTreeProps>;
+  "sl-tree-item": DefineComponent<SlTreeItemProps>;
 
   /**
    * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
@@ -5074,51 +5320,6 @@ export type CustomElements = {
    */
   "sl-tree-select": DefineComponent<SlTreeSelectProps>;
 
-  /**
-   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-expand** - Emitted when the tree item expands.
-   * - **sl-after-expand** - Emitted after the tree item expands and all animations are complete.
-   * - **sl-collapse** - Emitted when the tree item collapses.
-   * - **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.
-   * - **sl-lazy-change** - Emitted when the tree item's lazy state changes.
-   * - **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.
-   *
-   * ### **Methods:**
-   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   * - **expand-icon** - The icon to show when the tree item is expanded.
-   * - **collapse-icon** - The icon to show when the tree item is collapsed.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
-   * - **item--disabled** - Applied when the tree item is disabled.
-   * - **item--expanded** - Applied when the tree item is expanded.
-   * - **item--indeterminate** - Applied when the selection is indeterminate.
-   * - **item--selected** - Applied when the tree item is selected.
-   * - **indentation** - The tree item's indentation container.
-   * - **expand-button** - The container that wraps the tree item's expand button and spinner.
-   * - **spinner** - The spinner that shows when a lazy tree item is in the loading state.
-   * - **spinner__base** - The spinner's base part.
-   * - **label** - The tree item's label.
-   * - **children** - The container that wraps the tree item's nested children.
-   * - **checkbox** - The checkbox that shows when using multiselect.
-   * - **checkbox__base** - The checkbox's exported `base` part.
-   * - **checkbox__control** - The checkbox's exported `control` part.
-   * - **checkbox__control--checked** - The checkbox's exported `control--checked` part.
-   * - **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.
-   * - **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.
-   * - **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.
-   * - **checkbox__label** - The checkbox's exported `label` part.
-   */
-  "sl-tree-item": DefineComponent<SlTreeItemProps>;
-
   /**
    * 上传组件，支持文件选择、拖放上传、文件列表和图片卡片模式。
    * ---
@@ -5203,6 +5404,31 @@ export type CustomElements = {
    * - **incomplete** - Incomplete markdown placeholder nodes.
    */
   "sl-x-markdown": DefineComponent<SlXMarkdownProps>;
+
+  /**
+   * 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>;
 };
 
 declare module "vue" {