@kdcloudjs/shoelace 1.0.40 → 1.0.41

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

@@ -2,21 +2,21 @@ import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
-import type { SlAnimation } from "../../components/animation/animation.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
@@ -24,69 +24,69 @@ import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
+import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
+import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
-import type { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
+import type { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlImage } from "../../components/image/image.component.js";
-import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
-import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
 import type { 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 { SlInput } from "../../components/input/input.component.js";
-import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
 import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
+import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlNotification } from "../../components/notification/notification.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
-import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
+import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
+import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
-import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
-import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { SlRow } from "../../components/row/row.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
+import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlSegmented } from "../../components/segmented/segmented.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
 import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
 import type { SlSenderHeader } from "../../components/sender-header/sender-header.component.js";
-import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSenderSwitch, CustomEvent } from "../../components/sender-switch/sender-switch.component.js";
+import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
+import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
+import type { SlSpace } from "../../components/space/space.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
-import type { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSteps } from "../../components/steps/steps.component.js";
+import type { SlSpinner } from "../../components/spinner/spinner.component.js";
+import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
+import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
-import type { SlSpace } from "../../components/space/space.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
-import type { SlThink } from "../../components/think/think.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
-import type { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
 import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
+import type { SlThink } from "../../components/think/think.component.js";
+import type { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
-import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTreeSelect } from "../../components/tree-select/tree-select.component.js";
+import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
 
 type SlAlertProps = {
@@ -137,6 +137,53 @@ type SlAnimatedImageProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
+};
+
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
+  /**  */
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+};
+
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -179,53 +226,6 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBadgeProps = {
-  /** The badge's theme variant. */
-  variant?: SlBadge["variant"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: SlBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: SlBadge["pulse"];
-};
-
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
-type SlBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: SlBreadcrumb["label"];
-  /**  */
-  defaultSlot?: SlBreadcrumb["defaultSlot"];
-  /**  */
-  separatorSlot?: SlBreadcrumb["separatorSlot"];
-};
-
-type SlBreadcrumbItemProps = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  href?: SlBreadcrumbItem["href"];
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  target?: SlBreadcrumbItem["target"];
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  rel?: SlBreadcrumbItem["rel"];
-  /**  */
-  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
-};
-
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -341,8 +341,6 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
-type SlCarouselItemProps = {};
-
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -559,6 +557,8 @@ type SlDatePanelProps = {
   "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlCarouselItemProps = {};
+
 type SlDatepickerProps = {
   /**  */
   type?: SlDatepicker["type"];
@@ -816,6 +816,30 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlFloatButtonProps = {
+  /** The button's type. */
+  type?: SlFloatButton["type"];
+  /** The button's shape. */
+  shape?: SlFloatButton["shape"];
+  /** The button's size. */
+  size?: SlFloatButton["size"];
+  /** The name of the icon to display (from the registered icon library). */
+  icon?: SlFloatButton["icon"];
+  /** Tooltip text shown on hover. */
+  tooltip?: SlFloatButton["tooltip"];
+  /** Tooltip placement. */
+  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
+  /** Disables the button. */
+  disabled?: SlFloatButton["disabled"];
+  /** When set, the button will render as an anchor tag with this URL. */
+  href?: SlFloatButton["href"];
+  /** Where to display the linked URL (only used when href is set). */
+  target?: SlFloatButton["target"];
+
+  /** Emitted when the button is clicked. */
+  "onsl-click"?: (e: CustomEvent<never>) => void;
+};
+
 type SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -854,6 +878,22 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlFloatButtonGroupProps = {
+  /** The shape applied to all child float buttons. */
+  shape?: SlFloatButtonGroup["shape"];
+  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
+  trigger?: SlFloatButtonGroup["trigger"];
+  /** Whether the menu is open (controlled mode, use with trigger). */
+  open?: SlFloatButtonGroup["open"];
+  /** The direction the menu items expand. */
+  placement?: SlFloatButtonGroup["placement"];
+
+  /** Emitted when the menu opens (menu mode only). */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the menu closes (menu mode only). */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -877,24 +917,6 @@ type SlFormatNumberProps = {
   "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
-type SlIconProps = {
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  name?: SlIcon["name"];
-  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks. */
-  src?: SlIcon["src"];
-  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-ignored by assistive devices. */
-  label?: SlIcon["label"];
-  /** The name of a registered custom icon library. */
-  library?: SlIcon["library"];
-
-  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlIconButtonProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIconButton["name"];
@@ -922,6 +944,24 @@ that describes what the icon button does. */
   "onsl-focus"?: (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"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: SlIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: SlIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: SlIcon["library"];
+
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlImageProps = {
   /** 图片地址 */
   src?: SlImage["src"];
@@ -955,46 +995,6 @@ type SlImageProps = {
   "onsl-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFloatButtonGroupProps = {
-  /** The shape applied to all child float buttons. */
-  shape?: SlFloatButtonGroup["shape"];
-  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
-  trigger?: SlFloatButtonGroup["trigger"];
-  /** Whether the menu is open (controlled mode, use with trigger). */
-  open?: SlFloatButtonGroup["open"];
-  /** The direction the menu items expand. */
-  placement?: SlFloatButtonGroup["placement"];
-
-  /** Emitted when the menu opens (menu mode only). */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the menu closes (menu mode only). */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-};
-
-type SlFloatButtonProps = {
-  /** The button's type. */
-  type?: SlFloatButton["type"];
-  /** The button's shape. */
-  shape?: SlFloatButton["shape"];
-  /** The button's size. */
-  size?: SlFloatButton["size"];
-  /** The name of the icon to display (from the registered icon library). */
-  icon?: SlFloatButton["icon"];
-  /** Tooltip text shown on hover. */
-  tooltip?: SlFloatButton["tooltip"];
-  /** Tooltip placement. */
-  "tooltip-placement"?: SlFloatButton["tooltipPlacement"];
-  /** Disables the button. */
-  disabled?: SlFloatButton["disabled"];
-  /** When set, the button will render as an anchor tag with this URL. */
-  href?: SlFloatButton["href"];
-  /** Where to display the linked URL (only used when href is set). */
-  target?: SlFloatButton["target"];
-
-  /** Emitted when the button is clicked. */
-  "onsl-click"?: (e: CustomEvent<never>) => void;
-};
-
 type SlImageComparerProps = {
   /** The position of the divider as a percentage. */
   position?: SlImageComparer["position"];
@@ -1138,23 +1138,6 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlMenuItemProps = {
-  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-  type?: SlMenuItem["type"];
-  /** Draws the item in a checked state. */
-  checked?: SlMenuItem["checked"];
-  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  value?: SlMenuItem["value"];
-  /** Draws the menu item in a loading state. */
-  loading?: SlMenuItem["loading"];
-  /** Draws the menu item in a disabled state, preventing selection. */
-  disabled?: SlMenuItem["disabled"];
-  /**  */
-  defaultSlot?: SlMenuItem["defaultSlot"];
-  /**  */
-  menuItem?: SlMenuItem["menuItem"];
-};
-
 type SlMenuProps = {
   /**  */
   defaultSlot?: SlMenu["defaultSlot"];
@@ -1247,41 +1230,21 @@ type SlNavGroupProps = {
   label?: SlNavGroup["label"];
 };
 
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
-
-React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
-  "item-key"?: SlNavItem["itemKey"];
-  /** Matches Antd's `danger` item flag. */
-  danger?: SlNavItem["danger"];
-  /** Tooltip text, primarily used when the menu is collapsed. */
-  title?: SlNavItem["title"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
-  /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavItem["collapsed"];
-  /** Alternate label content when using Antd-style `items` configuration. */
-  label?: SlNavItem["label"];
-  /** Alternate icon content when using Antd-style `items` configuration. */
-  icon?: SlNavItem["icon"];
-  /** Extra content shown at the end of the item. */
-  extra?: SlNavItem["extra"];
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+type SlMenuItemProps = {
+  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+  type?: SlMenuItem["type"];
+  /** Draws the item in a checked state. */
+  checked?: SlMenuItem["checked"];
+  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+  value?: SlMenuItem["value"];
+  /** Draws the menu item in a loading state. */
+  loading?: SlMenuItem["loading"];
+  /** Draws the menu item in a disabled state, preventing selection. */
+  disabled?: SlMenuItem["disabled"];
+  /**  */
+  defaultSlot?: SlMenuItem["defaultSlot"];
+  /**  */
+  menuItem?: SlMenuItem["menuItem"];
 };
 
 type SlNavSubmenuProps = {
@@ -1309,6 +1272,8 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   mode?: SlNavSubmenu["mode"];
   /** Whether the parent nav is in inline-collapsed mode. */
   collapsed?: SlNavSubmenu["collapsed"];
+  /** Shows a divider line above this submenu. */
+  divider?: SlNavSubmenu["divider"];
   /**  */
   header?: SlNavSubmenu["header"];
   /**  */
@@ -1366,6 +1331,45 @@ type SlNotificationProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlNavItemProps = {
+  /** A stable key used by `sl-nav` to track selection. */
+  key?: SlNavItem["key"];
+  /** React-safe alias for `key`.
+
+React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
+  "item-key"?: SlNavItem["itemKey"];
+  /** Matches Antd's `danger` item flag. */
+  danger?: SlNavItem["danger"];
+  /** Tooltip text, primarily used when the menu is collapsed. */
+  title?: SlNavItem["title"];
+  /** Draws the nav item in a disabled state. */
+  disabled?: SlNavItem["disabled"];
+  /** Draws the nav item in an active (selected) state. */
+  active?: SlNavItem["active"];
+  /** The URL to link to. If set, the nav item will render as an anchor tag. */
+  href?: SlNavItem["href"];
+  /** The target attribute for the anchor tag. */
+  target?: SlNavItem["target"];
+  /** The download attribute for the anchor tag. */
+  download?: SlNavItem["download"];
+  /** The rel attribute for the anchor tag. */
+  rel?: SlNavItem["rel"];
+  /** The mode of navigation. */
+  mode?: SlNavItem["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavItem["collapsed"];
+  /** Shows a divider line above this nav item. */
+  divider?: SlNavItem["divider"];
+  /** Alternate label content when using Antd-style `items` configuration. */
+  label?: SlNavItem["label"];
+  /** Alternate icon content when using Antd-style `items` configuration. */
+  icon?: SlNavItem["icon"];
+  /** Extra content shown at the end of the item. */
+  extra?: SlNavItem["extra"];
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+};
+
 type SlOptionProps = {
   /** The option's value. When selected, the containing form control will receive this value. The value must be unique
 from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
@@ -1479,6 +1483,15 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
+};
+
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1490,6 +1503,22 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
+type SlRadioProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadio["value"];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  size?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
+  /**  */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1509,31 +1538,6 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
-};
-
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
-attribute can typically be omitted. */
-  size?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1642,32 +1646,6 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRatingProps = {
-  /** A label that describes the rating to assistive devices. */
-  label?: SlRating["label"];
-  /** The current rating. */
-  value?: SlRating["value"];
-  /** The highest rating to show. */
-  max?: SlRating["max"];
-  /** The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this
-attribute to `0.5`. */
-  precision?: SlRating["precision"];
-  /** Makes the rating readonly. */
-  readonly?: SlRating["readonly"];
-  /** Disables the rating. */
-  disabled?: SlRating["disabled"];
-  /** A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.
-The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
-well with `<sl-icon>` elements. */
-  getSymbol?: SlRating["getSymbol"];
-  /**  */
-  rating?: SlRating["rating"];
-  /** Emitted when the rating's value changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value. */
-  "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
-};
-
 type SlRelativeTimeProps = {
   /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
 string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
@@ -1682,14 +1660,6 @@ a date to this format in JavaScript, use [`date.toISOString()`](https://develope
   sync?: SlRelativeTime["sync"];
 };
 
-type SlResizeObserverProps = {
-  /** Disables the observer. */
-  disabled?: SlResizeObserver["disabled"];
-
-  /** Emitted when the element is resized. */
-  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
-};
-
 type SlRowProps = {
   /** Spacing between columns, can be a number or responsive object */
   gutter?: SlRow["gutter"];
@@ -1716,6 +1686,32 @@ type SlScreenProps = {
   gridElement?: SlScreen["gridElement"];
 };
 
+type SlRatingProps = {
+  /** A label that describes the rating to assistive devices. */
+  label?: SlRating["label"];
+  /** The current rating. */
+  value?: SlRating["value"];
+  /** The highest rating to show. */
+  max?: SlRating["max"];
+  /** The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this
+attribute to `0.5`. */
+  precision?: SlRating["precision"];
+  /** Makes the rating readonly. */
+  readonly?: SlRating["readonly"];
+  /** Disables the rating. */
+  disabled?: SlRating["disabled"];
+  /** A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.
+The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
+well with `<sl-icon>` elements. */
+  getSymbol?: SlRating["getSymbol"];
+  /**  */
+  rating?: SlRating["rating"];
+  /** Emitted when the rating's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value. */
+  "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
+};
+
 type SlSegmentedProps = {
   /** 选项列表，支持字符串、数字或对象数组 */
   options?: SlSegmented["options"];
@@ -1895,11 +1891,6 @@ When false (default), content is removed from the DOM when closed. */
   "onsl-open-change"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSkeletonProps = {
-  /** Determines which effect the skeleton will use. */
-  effect?: SlSkeleton["effect"];
-};
-
 type SlSenderSwitchProps = {
   /** Whether the switch is in the checked (active) state. */
   checked?: SlSenderSwitch["checked"];
@@ -1914,6 +1905,32 @@ type SlSenderSwitchProps = {
   "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlResizeObserverProps = {
+  /** Disables the observer. */
+  disabled?: SlResizeObserver["disabled"];
+
+  /** Emitted when the element is resized. */
+  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
+};
+
+type SlSkeletonProps = {
+  /** Determines which effect the skeleton will use. */
+  effect?: SlSkeleton["effect"];
+};
+
+type SlSpaceProps = {
+  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
+  orientation?: SlSpace["orientation"];
+  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
+  size?: SlSpace["size"];
+  /** 对齐方式 */
+  align?: SlSpace["align"];
+  /** 是否自动换行，仅在 horizontal 方向时有效 */
+  wrap?: SlSpace["wrap"];
+  /** 分隔符内容 */
+  separator?: SlSpace["separator"];
+};
+
 type SlSplitPanelProps = {
   /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
 container's initial size. */
@@ -1939,8 +1956,6 @@ or a function which takes in a `SnapFunctionParams`, and returns a position to s
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSpinnerProps = {};
-
 type SlStepsProps = {
   /** 步骤条数据 */
   items?: SlSteps["items"];
@@ -1968,15 +1983,41 @@ type SlStepsProps = {
   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"];
+type SlSpinnerProps = {};
+
+type SlTabGroupProps = {
+  /** The placement of the tabs. */
+  placement?: SlTabGroup["placement"];
+  /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
+  activation?: SlTabGroup["activation"];
+  /** Disables the scroll arrows that appear when tabs overflow. */
+  "no-scroll-controls"?: SlTabGroup["noScrollControls"];
+  /** Prevent scroll buttons from being hidden when inactive. */
+  "fixed-scroll-controls"?: SlTabGroup["fixedScrollControls"];
+  /**  */
+  tabGroup?: SlTabGroup["tabGroup"];
+  /**  */
+  body?: SlTabGroup["body"];
+  /**  */
+  nav?: SlTabGroup["nav"];
+  /**  */
+  indicator?: SlTabGroup["indicator"];
+  /** Emitted when a tab is shown. */
+  "onsl-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted when a tab is hidden. */
+  "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
+};
+
+type 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. */
@@ -2009,65 +2050,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTabProps = {
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SlTab["panel"];
-  /** Draws the tab in an active state. */
-  active?: SlTab["active"];
-  /** Makes the tab closable and shows a close button. */
-  closable?: SlTab["closable"];
-  /** Disables the tab and prevents selection. */
-  disabled?: SlTab["disabled"];
-  /**  */
-  tab?: SlTab["tab"];
-  /** Emitted when the tab is closable and the close button is activated. */
-  "onsl-close"?: (e: CustomEvent<never>) => void;
-};
-
-type SlTabGroupProps = {
-  /** The placement of the tabs. */
-  placement?: SlTabGroup["placement"];
-  /** When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
-manual, the tab will receive focus but will not show until the user presses spacebar or enter. */
-  activation?: SlTabGroup["activation"];
-  /** Disables the scroll arrows that appear when tabs overflow. */
-  "no-scroll-controls"?: SlTabGroup["noScrollControls"];
-  /** Prevent scroll buttons from being hidden when inactive. */
-  "fixed-scroll-controls"?: SlTabGroup["fixedScrollControls"];
-  /**  */
-  tabGroup?: SlTabGroup["tabGroup"];
-  /**  */
-  body?: SlTabGroup["body"];
-  /**  */
-  nav?: SlTabGroup["nav"];
-  /**  */
-  indicator?: SlTabGroup["indicator"];
-  /** Emitted when a tab is shown. */
-  "onsl-tab-show"?: (e: CustomEvent<{ name: String }>) => void;
-  /** Emitted when a tab is hidden. */
-  "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
-};
-
-type SlSpaceProps = {
-  /** 间距方向，vertical 为垂直方向，horizontal 为水平方向 */
-  orientation?: SlSpace["orientation"];
-  /** 间距大小，可选 small、medium、large 或自定义数值（单位为 px） */
-  size?: SlSpace["size"];
-  /** 对齐方式 */
-  align?: SlSpace["align"];
-  /** 是否自动换行，仅在 horizontal 方向时有效 */
-  wrap?: SlSpace["wrap"];
-  /** 分隔符内容 */
-  separator?: SlSpace["separator"];
-};
-
-type SlTabPanelProps = {
-  /** The tab panel's name. */
-  name?: SlTabPanel["name"];
-  /** When true, the tab panel will be shown. */
-  active?: SlTabPanel["active"];
-};
-
 type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -2109,6 +2091,8 @@ type SlTableProps = {
   slRowReorder?: SlTable["slRowReorder"];
   /**  */
   summary?: SlTable["summary"];
+  /** 表格尺寸 */
+  size?: SlTable["size"];
   /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
@@ -2149,6 +2133,28 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlTabProps = {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SlTab["panel"];
+  /** Draws the tab in an active state. */
+  active?: SlTab["active"];
+  /** Makes the tab closable and shows a close button. */
+  closable?: SlTab["closable"];
+  /** Disables the tab and prevents selection. */
+  disabled?: SlTab["disabled"];
+  /**  */
+  tab?: SlTab["tab"];
+  /** Emitted when the tab is closable and the close button is activated. */
+  "onsl-close"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SlTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: SlTabPanel["active"];
+};
+
 type SlTagProps = {
   /** The tag's theme variant. */
   variant?: SlTag["variant"];
@@ -2163,44 +2169,6 @@ type SlTagProps = {
   "onsl-remove"?: (e: CustomEvent<never>) => void;
 };
 
-type SlThinkProps = {
-  /** The title text shown in the status bar. Accepts plain text.
-For rich HTML content, use the `title` slot instead.
-Maps to React's `title: React.ReactNode` prop. */
-  title?: SlThink["title"];
-  /** When true, the status icon is replaced by a loading spinner
-(or the content of the `loading-icon` slot for a custom indicator).
-Maps to React's `loading: boolean | React.ReactNode` prop:
-  - `loading` (boolean) → boolean attribute
-  - `loading` (ReactNode) → use the `loading-icon` slot */
-  loading?: SlThink["loading"];
-  /** Whether the content body is expanded.
-When used without `default-expanded`, this acts as a controlled prop
-(the parent is responsible for updating it).
-When neither this nor `default-expanded` is set on the element,
-the component defaults to expanded (equivalent to React's `defaultExpanded = true`).
-Maps to React's `expanded: boolean` prop. */
-  expanded?: SlThink["expanded"];
-  /** The initial expanded state when the component is first rendered.
-Only applies if `expanded` is not set as an attribute on the element.
-Maps to React's `defaultExpanded: boolean` prop (default: `true`).
-
-Because Lit's `type: Boolean` treats attribute *presence* as `true`,
-setting `default-expanded="false"` in HTML does NOT work — this is
-consistent with all other Shoelace boolean attributes.
-To start collapsed, set the property via JS: `el.defaultExpanded = false`. */
-  "default-expanded"?: SlThink["defaultExpanded"];
-  /** When true, applies a blinking animation to the title text to signal ongoing activity.
-Maps to React's `blink: boolean` prop. */
-  blink?: SlThink["blink"];
-  /**  */
-  body?: SlThink["body"];
-  /** Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`. */
-  "onsl-collapse"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -2294,29 +2262,6 @@ type SlThoughtChainItemProps = {
   "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>`.
-Maps to React's `key` property on ThoughtChainItemType. */
-  "node-key"?: SlThoughtChainNode["nodeKey"];
-  /** The title text shown in the node header. Use the `title` slot for rich HTML. */
-  title?: SlThoughtChainNode["title"];
-  /** The description text shown below the title. Use the `description` slot for rich HTML. */
-  description?: SlThoughtChainNode["description"];
-  /** The status of this node. Shows a status icon and applies status-specific styling. */
-  status?: SlThoughtChainNode["status"];
-  /** Whether this node's content area is collapsible. */
-  collapsible?: SlThoughtChainNode["collapsible"];
-  /** Whether to show a blink/pulse animation on the title (indicates ongoing activity). */
-  blink?: SlThoughtChainNode["blink"];
-  /** Whether to hide the icon entirely (equivalent to React's `icon={false}`). */
-  "no-icon"?: SlThoughtChainNode["noIcon"];
-  /**  */
-  contentEl?: SlThoughtChainNode["contentEl"];
-  /** Whether this node's content is currently expanded */
-  expanded?: SlThoughtChainNode["expanded"];
-};
-
 type SlThoughtChainProps = {
   /** Size of the thought chain nodes.
 - `'small'`: compact layout
@@ -2343,6 +2288,67 @@ When set, you must update this in response to `sl-expand` events. */
   "onsl-expand"?: (e: CustomEvent<never>) => void;
 };
 
+type SlThinkProps = {
+  /** The title text shown in the status bar. Accepts plain text.
+For rich HTML content, use the `title` slot instead.
+Maps to React's `title: React.ReactNode` prop. */
+  title?: SlThink["title"];
+  /** When true, the status icon is replaced by a loading spinner
+(or the content of the `loading-icon` slot for a custom indicator).
+Maps to React's `loading: boolean | React.ReactNode` prop:
+  - `loading` (boolean) → boolean attribute
+  - `loading` (ReactNode) → use the `loading-icon` slot */
+  loading?: SlThink["loading"];
+  /** Whether the content body is expanded.
+When used without `default-expanded`, this acts as a controlled prop
+(the parent is responsible for updating it).
+When neither this nor `default-expanded` is set on the element,
+the component defaults to expanded (equivalent to React's `defaultExpanded = true`).
+Maps to React's `expanded: boolean` prop. */
+  expanded?: SlThink["expanded"];
+  /** The initial expanded state when the component is first rendered.
+Only applies if `expanded` is not set as an attribute on the element.
+Maps to React's `defaultExpanded: boolean` prop (default: `true`).
+
+Because Lit's `type: Boolean` treats attribute *presence* as `true`,
+setting `default-expanded="false"` in HTML does NOT work — this is
+consistent with all other Shoelace boolean attributes.
+To start collapsed, set the property via JS: `el.defaultExpanded = false`. */
+  "default-expanded"?: SlThink["defaultExpanded"];
+  /** When true, applies a blinking animation to the title text to signal ongoing activity.
+Maps to React's `blink: boolean` prop. */
+  blink?: SlThink["blink"];
+  /**  */
+  body?: SlThink["body"];
+  /** Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`. */
+  "onsl-collapse"?: (e: CustomEvent<never>) => void;
+};
+
+type SlThoughtChainNodeProps = {
+  /** Unique key for this node. Required when using collapsible mode or
+controlled expansion via the parent `<sl-thought-chain>`.
+Maps to React's `key` property on ThoughtChainItemType. */
+  "node-key"?: SlThoughtChainNode["nodeKey"];
+  /** The title text shown in the node header. Use the `title` slot for rich HTML. */
+  title?: SlThoughtChainNode["title"];
+  /** The description text shown below the title. Use the `description` slot for rich HTML. */
+  description?: SlThoughtChainNode["description"];
+  /** The status of this node. Shows a status icon and applies status-specific styling. */
+  status?: SlThoughtChainNode["status"];
+  /** Whether this node's content area is collapsible. */
+  collapsible?: SlThoughtChainNode["collapsible"];
+  /** Whether to show a blink/pulse animation on the title (indicates ongoing activity). */
+  blink?: SlThoughtChainNode["blink"];
+  /** Whether to hide the icon entirely (equivalent to React's `icon={false}`). */
+  "no-icon"?: SlThoughtChainNode["noIcon"];
+  /**  */
+  contentEl?: SlThoughtChainNode["contentEl"];
+  /** Whether this node's content is currently expanded */
+  expanded?: SlThoughtChainNode["expanded"];
+};
+
 type SlTimepickerProps = {
   /**  */
   format?: SlTimepicker["format"];
@@ -2364,85 +2370,6 @@ type SlTimepickerProps = {
   "onsl-invalid"?: (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 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 SlTreeSelectProps = {
   /** The name of the control, submitted as a name/value pair with form data. */
   name?: SlTreeSelect["name"];
@@ -2549,6 +2476,44 @@ Each node has `title`, `value`, and optionally `children`, `disabled`, `selectab
   "onsl-lazy-load"?: (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"];
+  /**  */
+  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 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. */
@@ -2567,6 +2532,47 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
 
 type SlVisuallyHiddenProps = {};
 
+type SlTreeItemProps = {
+  /** Expands the tree item. */
+  expanded?: SlTreeItem["expanded"];
+  /** Draws the tree item in a selected state. */
+  selected?: SlTreeItem["selected"];
+  /** Disables the tree item. */
+  disabled?: SlTreeItem["disabled"];
+  /** Enables lazy loading behavior. */
+  lazy?: SlTreeItem["lazy"];
+  /**  */
+  indeterminate?: SlTreeItem["indeterminate"];
+  /**  */
+  isLeaf?: SlTreeItem["isLeaf"];
+  /**  */
+  loading?: SlTreeItem["loading"];
+  /**  */
+  selectable?: SlTreeItem["selectable"];
+  /**  */
+  defaultSlot?: SlTreeItem["defaultSlot"];
+  /**  */
+  childrenSlot?: SlTreeItem["childrenSlot"];
+  /**  */
+  itemElement?: SlTreeItem["itemElement"];
+  /**  */
+  childrenContainer?: SlTreeItem["childrenContainer"];
+  /**  */
+  expandButtonSlot?: SlTreeItem["expandButtonSlot"];
+  /** Emitted when the tree item expands. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tree item expands and all animations are complete. */
+  "onsl-after-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tree item collapses. */
+  "onsl-collapse"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the tree item collapses and all animations are complete. */
+  "onsl-after-collapse"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the tree item's lazy state changes. */
+  "onsl-lazy-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree. */
+  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
+};
+
 type SlXMarkdownProps = {
   /** Markdown content to render. */
   content?: SlXMarkdown["content"];
@@ -2641,58 +2647,39 @@ export type CustomElements = {
   "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
    *
    * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
-   */
-  "sl-animation": DefineComponent<SlAnimationProps>;
-
-  /**
-   * Badges are used to draw attention and display statuses or counts.
-   * ---
-   *
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
    *
-   * ### **Slots:**
-   *  - _default_ - The badge's content.
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2728,6 +2715,25 @@ export type CustomElements = {
    */
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
+  /**
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
+   *
+   * ### **Methods:**
+   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   */
+  "sl-animation": DefineComponent<SlAnimationProps>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2837,19 +2843,6 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -3006,6 +2999,19 @@ export type CustomElements = {
    */
   "sl-date-panel": DefineComponent<SlDatePanelProps>;
 
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel item's content..
+   *
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   */
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+
   /**
    * Datepickers allow users to select a date using a calendar interface.
    * ---
@@ -3220,40 +3226,66 @@ export type CustomElements = {
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * A floating action button that stays fixed on the page.
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **sl-click** - Emitted when the button is clicked.
+   *
+   * ### **Slots:**
+   *  - _default_ - The button's icon content.
+   * - **content** - Optional text content (only visible when shape is square).
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The button's base wrapper.
+   * - **icon** - The icon container.
+   * - **content** - The text content container.
    */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+  "sl-float-button": DefineComponent<SlFloatButtonProps>;
 
   /**
-   * Formats a date/time using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
 
   /**
-   * Icons are symbols that can be used to represent various options within an application.
+   * Groups multiple float buttons together, with optional menu trigger.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
-   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+   *  - **sl-show** - Emitted when the menu opens (menu mode only).
+   * - **sl-hide** - Emitted when the menu closes (menu mode only).
+   *
+   * ### **Slots:**
+   *  - _default_ - The float buttons to display.
+   * - **trigger-icon** - Custom icon for the trigger button.
+   * - **close-icon** - Custom icon shown when the menu is open.
    *
    * ### **CSS Parts:**
-   *  - **svg** - The internal SVG element.
-   * - **use** - The <use> element generated when using `spriteSheet: true`
+   *  - **base** - The group's base wrapper.
+   * - **list** - The container for the float button items.
+   * - **trigger** - The trigger button (menu mode only).
+   * - **trigger-icon** - The trigger button's icon.
    */
-  "sl-icon": DefineComponent<SlIconProps>;
+  "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
+
+  /**
+   * Formats a number using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
@@ -3274,6 +3306,21 @@ export type CustomElements = {
    */
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
+  /**
+   * Icons are symbols that can be used to represent various options within an application.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+   *
+   * ### **CSS Parts:**
+   *  - **svg** - The internal SVG element.
+   * - **use** - The <use> element generated when using `spriteSheet: true`
+   */
+  "sl-icon": DefineComponent<SlIconProps>;
+
   /**
    * 图片组件，支持预览、缩放、旋转、翻转等功能。
    * ---
@@ -3302,47 +3349,6 @@ export type CustomElements = {
    */
   "sl-image": DefineComponent<SlImageProps>;
 
-  /**
-   * Groups multiple float buttons together, with optional menu trigger.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the menu opens (menu mode only).
-   * - **sl-hide** - Emitted when the menu closes (menu mode only).
-   *
-   * ### **Slots:**
-   *  - _default_ - The float buttons to display.
-   * - **trigger-icon** - Custom icon for the trigger button.
-   * - **close-icon** - Custom icon shown when the menu is open.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The group's base wrapper.
-   * - **list** - The container for the float button items.
-   * - **trigger** - The trigger button (menu mode only).
-   * - **trigger-icon** - The trigger button's icon.
-   */
-  "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
-
-  /**
-   * A floating action button that stays fixed on the page.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-click** - Emitted when the button is clicked.
-   *
-   * ### **Slots:**
-   *  - _default_ - The button's icon content.
-   * - **content** - Optional text content (only visible when shape is square).
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The button's base wrapper.
-   * - **icon** - The icon container.
-   * - **content** - The text content container.
-   */
-  "sl-float-button": DefineComponent<SlFloatButtonProps>;
-
   /**
    * Compare visual differences between similar photos with a sliding panel.
    * ---
@@ -3453,35 +3459,6 @@ export type CustomElements = {
    */
   "sl-input": DefineComponent<SlInputProps>;
 
-  /**
-   * Menu items provide options for the user to pick from in a menu.
-   * ---
-   *
-   *
-   * ### **Methods:**
-   *  - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the menu item.
-   * - **suffix** - Used to append an icon or similar element to the menu item.
-   * - **submenu** - Used to denote a nested menu.
-   *
-   * ### **CSS Properties:**
-   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **checked-icon** - The checked icon, which is only visible when the menu item is checked.
-   * - **prefix** - The prefix container.
-   * - **label** - The menu item label.
-   * - **suffix** - The suffix container.
-   * - **spinner** - The spinner that shows when the menu item is in the loading state.
-   * - **spinner__base** - The spinner's base part.
-   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
-   */
-  "sl-menu-item": DefineComponent<SlMenuItemProps>;
-
   /**
    * Menus provide a list of options for the user to choose from.
    * ---
@@ -3556,25 +3533,33 @@ export type CustomElements = {
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
   /**
-   * Nav items are the individual links or buttons within a navigation menu.
+   * Menu items provide options for the user to pick from in a menu.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   * ### **Methods:**
+   *  - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.
    *
    * ### **Slots:**
-   *  - _default_ - The nav item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the nav item.
-   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *  - _default_ - The menu item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the menu item.
+   * - **suffix** - Used to append an icon or similar element to the menu item.
+   * - **submenu** - Used to denote a nested menu.
+   *
+   * ### **CSS Properties:**
+   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **checked-icon** - The checked icon, which is only visible when the menu item is checked.
    * - **prefix** - The prefix container.
-   * - **label** - The nav item label.
+   * - **label** - The menu item label.
    * - **suffix** - The suffix container.
+   * - **spinner** - The spinner that shows when the menu item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
    */
-  "sl-nav-item": DefineComponent<SlNavItemProps>;
+  "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
@@ -3653,6 +3638,27 @@ export type CustomElements = {
    */
   "sl-notification": DefineComponent<SlNotificationProps>;
 
+  /**
+   * Nav items are the individual links or buttons within a navigation menu.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the nav item.
+   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav item label.
+   * - **suffix** - The suffix container.
+   */
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
+
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
@@ -3711,57 +3717,47 @@ export type CustomElements = {
   "sl-popup": DefineComponent<SlPopupProps>;
 
   /**
-   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
+   * Progress bars are used to show the status of an ongoing operation.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - A label to show inside the ring.
+   *  - _default_ - A label to show inside the progress indicator.
    *
    * ### **CSS Properties:**
-   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
-   * - **--track-width** - The width of the track. _(default: undefined)_
+   *  - **--height** - The progress bar's height. _(default: undefined)_
    * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
    * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **label** - The progress ring label.
-   */
-  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
-
-  /**
-   * 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).
-   * ---
-   *
+   * - **--label-color** - The color of the label. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
    */
-  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
 
   /**
-   * Progress bars are used to show the status of an ongoing operation.
+   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
+   *  - _default_ - A label to show inside the ring.
    *
    * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
+   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
+   * - **--track-width** - The width of the track. _(default: undefined)_
    * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
    * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
+   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
+   * - **label** - The progress ring label.
    */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
   /**
    * Radios allow the user to select a single option from a group.
@@ -3784,6 +3780,16 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
+  /**
+   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
@@ -3890,30 +3896,6 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
-  /**
-   * Ratings give users a way to quickly view and provide feedback.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the rating's value changes.
-   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
-   * - **blur()** - Removes focus from the rating.
-   *
-   * ### **CSS Properties:**
-   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
-   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
-   * - **--symbol-size** - The size of symbols. _(default: undefined)_
-   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-rating": DefineComponent<SlRatingProps>;
-
   /**
    * Outputs a localized time phrase relative to the current date and time.
    * ---
@@ -3921,19 +3903,6 @@ export type CustomElements = {
    */
   "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.
    * ---
@@ -3962,26 +3931,50 @@ export type CustomElements = {
   "sl-screen": DefineComponent<SlScreenProps>;
 
   /**
-   *
-   * ---
-   *
-   */
-  "sl-segmented": DefineComponent<SlSegmentedProps>;
-
-  /**
-   * Selects allow you to choose items from a menu of predefined options.
+   * Ratings give users a way to quickly view and provide feedback.
    * ---
    *
    *
    * ### **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-change** - Emitted when the rating's value changes.
+   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
+   * - **blur()** - Removes focus from the rating.
+   *
+   * ### **CSS Properties:**
+   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
+   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
+   * - **--symbol-size** - The size of symbols. _(default: undefined)_
+   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-rating": DefineComponent<SlRatingProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-segmented": DefineComponent<SlSegmentedProps>;
+
+  /**
+   * Selects allow you to choose items from a menu of predefined options.
+   * ---
+   *
+   *
+   * ### **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.
    *
@@ -4121,6 +4114,39 @@ export type CustomElements = {
    */
   "sl-sender-header": DefineComponent<SlSenderHeaderProps>;
 
+  /**
+   * A toggle switch button for the Sender component, supporting checked/unchecked states
+   * with optional distinct content for each state.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the switch's checked state changes. Read `el.checked` for the new state.
+   *
+   * ### **Slots:**
+   *  - _default_ - The switch's default content (always shown).
+   * - **icon** - The switch's icon.
+   * - **checked** - Content shown only when checked.
+   * - **unchecked** - Content shown only when unchecked.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper (the button element).
+   */
+  "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
+
+  /**
+   * 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>;
+
   /**
    * Skeletons are used to provide a visual representation of where content will eventually be drawn.
    * ---
@@ -4138,24 +4164,22 @@ export type CustomElements = {
   "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
-   * 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>;
 
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
@@ -4184,6 +4208,13 @@ export type CustomElements = {
    */
   "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-steps": DefineComponent<SlStepsProps>;
+
   /**
    * Spinners are used to show the progress of an indeterminate operation.
    * ---
@@ -4201,11 +4232,38 @@ export type CustomElements = {
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
   /**
-   *
+   * Tab groups organize content into a container that shows one section at a time.
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **sl-tab-show** - Emitted when a tab is shown.
+   * - **sl-tab-hide** - Emitted when a tab is hidden.
+   *
+   * ### **Methods:**
+   *  - **show(panel: _string_)** - Shows the specified tab panel.
+   *
+   * ### **Slots:**
+   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
+   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
+   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **nav** - The tab group's navigation container where tabs are slotted in.
+   * - **tabs** - The container that wraps the tabs.
+   * - **active-tab-indicator** - The line that highlights the currently selected tab.
+   * - **body** - The tab group's body where tab panels are slotted in.
+   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
+   * - **scroll-button--start** - The starting scroll button.
+   * - **scroll-button--end** - The ending scroll button.
+   * - **scroll-button__base** - The scroll button's exported `base` part.
    */
-  "sl-steps": DefineComponent<SlStepsProps>;
+  "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
   /**
    * Switches allow the user to toggle an option on or off.
@@ -4247,74 +4305,32 @@ export type CustomElements = {
   "sl-switch": DefineComponent<SlSwitchProps>;
 
   /**
-   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+   *
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
+   *  - **change**
    */
-  "sl-tab": DefineComponent<SlTabProps>;
+  "sl-table": DefineComponent<SlTableProps>;
 
   /**
-   * Tab groups organize content into a container that shows one section at a time.
+   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-tab-show** - Emitted when a tab is shown.
-   * - **sl-tab-hide** - Emitted when a tab is hidden.
-   *
-   * ### **Methods:**
-   *  - **show(panel: _string_)** - Shows the specified tab panel.
+   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
    *
    * ### **Slots:**
-   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
-   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
-   *
-   * ### **CSS Properties:**
-   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
-   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
-   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   *  - _default_ - The tab's label.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **nav** - The tab group's navigation container where tabs are slotted in.
-   * - **tabs** - The container that wraps the tabs.
-   * - **active-tab-indicator** - The line that highlights the currently selected tab.
-   * - **body** - The tab group's body where tab panels are slotted in.
-   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
-   * - **scroll-button--start** - The starting scroll button.
-   * - **scroll-button--end** - The ending scroll button.
-   * - **scroll-button__base** - The scroll button's exported `base` part.
-   */
-  "sl-tab-group": DefineComponent<SlTabGroupProps>;
-
-  /**
-   * Space 组件用于设置组件之间的间距。
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - 需要添加间距的子元素。
-   *
-   * ### **CSS Properties:**
-   *  - **--gap** - 自定义间距大小。 _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - 组件的基础容器。
-   * - **item** - 每个子元素的包装容器。
-   * - **separator** - 分隔符容器。
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
    */
-  "sl-space": DefineComponent<SlSpaceProps>;
+  "sl-tab": DefineComponent<SlTabProps>;
 
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
@@ -4332,16 +4348,6 @@ export type CustomElements = {
    */
   "sl-tab-panel": DefineComponent<SlTabPanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change**
-   */
-  "sl-table": DefineComponent<SlTableProps>;
-
   /**
    * Tags are used as labels to organize things or to indicate a selection.
    * ---
@@ -4361,41 +4367,6 @@ export type CustomElements = {
    */
   "sl-tag": DefineComponent<SlTagProps>;
 
-  /**
-   * Think is used to display an AI model's thinking process with expandable/collapsible content.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.
-   * - **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.
-   *
-   * ### **Methods:**
-   *  - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.
-   * Emits the appropriate event immediately (matching React's `onExpand` timing,
-   * which fires before the animation), then plays the expand/collapse animation.
-   *
-   * ### **Slots:**
-   *  - _default_ - The thinking content body.
-   * - **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.
-   * - **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.
-   * - **loading-icon** - A custom icon displayed when `loading` is true. Overrides the default spinner. This is the web-component equivalent of passing a ReactNode to the React `loading` prop.
-   *
-   * ### **CSS Properties:**
-   *  - **--sl-c-think-TitleTextBlink-color-default** - Base text color shown during the blink/shimmer animation. Equivalent to React's `colorTextBlinkDefault` (`colorTextDescription`) design token. Defaults to `var(--sl-color-neutral-600)`. _(default: undefined)_
-   * - **--sl-c-think-TitleTextBlink-color** - Highlight (shine) color of the blink shimmer beam. Equivalent to React's `colorTextBlink` (`colorTextBase`) design token. Defaults to `var(--sl-color-neutral-900)`. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper (maps to React's `root` semantic DOM).
-   * - **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).
-   * - **status-icon** - The icon container within the status bar.
-   * - **status-text** - The title text area within the status bar.
-   * - **chevron** - The expand/collapse chevron indicator.
-   * - **body** - The collapsible body container.
-   * - **content** - The content area inside the body (maps to React's `content` semantic DOM).
-   */
-  "sl-think": DefineComponent<SlThinkProps>;
-
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---
@@ -4461,33 +4432,6 @@ 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.
-   * ---
-   *
-   *
-   * ### **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>;
-
   /**
    * ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.
    * It renders a vertical list of nodes, each optionally with an icon, title, description,
@@ -4516,103 +4460,88 @@ export type CustomElements = {
   "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
 
   /**
-   * A time picker component that provides a time selection interface.
+   * Think is used to display an AI model's thinking process with expandable/collapsible content.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the control's value changes.
-   * - **sl-input** - Emitted when the control's value changes.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-clear** - Emitted when the clear button is activated.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *  - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.
+   * - **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.
+   *
+   * ### **Methods:**
+   *  - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.
+   * Emits the appropriate event immediately (matching React's `onExpand` timing,
+   * which fires before the animation), then plays the expand/collapse animation.
    *
    * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - The input's prefix, to prepend to the input.
-   * - **suffix** - The input's suffix, to append to the input.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.
+   *  - _default_ - The thinking content body.
+   * - **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.
+   * - **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.
+   * - **loading-icon** - A custom icon displayed when `loading` is true. Overrides the default spinner. This is the web-component equivalent of passing a ReactNode to the React `loading` prop.
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-c-think-TitleTextBlink-color-default** - Base text color shown during the blink/shimmer animation. Equivalent to React's `colorTextBlinkDefault` (`colorTextDescription`) design token. Defaults to `var(--sl-color-neutral-600)`. _(default: undefined)_
+   * - **--sl-c-think-TitleTextBlink-color** - Highlight (shine) color of the blink shimmer beam. Equivalent to React's `colorTextBlink` (`colorTextBase`) design token. Defaults to `var(--sl-color-neutral-900)`. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper (maps to React's `root` semantic DOM).
+   * - **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).
+   * - **status-icon** - The icon container within the status bar.
+   * - **status-text** - The title text area within the status bar.
+   * - **chevron** - The expand/collapse chevron indicator.
+   * - **body** - The collapsible body container.
+   * - **content** - The content area inside the body (maps to React's `content` semantic DOM).
    */
-  "sl-timepicker": DefineComponent<SlTimepickerProps>;
+  "sl-think": DefineComponent<SlThinkProps>;
 
   /**
-   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+   * 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.
    * ---
    *
    *
-   * ### **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.
+   *  - _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 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.
+   *  - **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-tree-item": DefineComponent<SlTreeItemProps>;
+  "sl-thought-chain-node": DefineComponent<SlThoughtChainNodeProps>;
 
   /**
-   * Tooltips display additional information based on a specific action.
+   * A time picker component that provides a time selection interface.
    * ---
    *
    *
    * ### **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
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-input** - Emitted when the control's value changes.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-clear** - Emitted when the clear button is activated.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    *
    * ### **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.
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - The input's prefix, to prepend to the input.
+   * - **suffix** - The input's suffix, to append to the input.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.
    */
-  "sl-tooltip": DefineComponent<SlTooltipProps>;
+  "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
   /**
    * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
@@ -4665,6 +4594,38 @@ export type CustomElements = {
    */
   "sl-tree-select": DefineComponent<SlTreeSelectProps>;
 
+  /**
+   * 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>;
+
   /**
    * 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.
    * ---
@@ -4700,6 +4661,51 @@ export type CustomElements = {
    */
   "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 
+  /**
+   * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-expand** - Emitted when the tree item expands.
+   * - **sl-after-expand** - Emitted after the tree item expands and all animations are complete.
+   * - **sl-collapse** - Emitted when the tree item collapses.
+   * - **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.
+   * - **sl-lazy-change** - Emitted when the tree item's lazy state changes.
+   * - **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.
+   *
+   * ### **Methods:**
+   *  - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   * - **expand-icon** - The icon to show when the tree item is expanded.
+   * - **collapse-icon** - The icon to show when the tree item is collapsed.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
+   * - **item--disabled** - Applied when the tree item is disabled.
+   * - **item--expanded** - Applied when the tree item is expanded.
+   * - **item--indeterminate** - Applied when the selection is indeterminate.
+   * - **item--selected** - Applied when the tree item is selected.
+   * - **indentation** - The tree item's indentation container.
+   * - **expand-button** - The container that wraps the tree item's expand button and spinner.
+   * - **spinner** - The spinner that shows when a lazy tree item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **label** - The tree item's label.
+   * - **children** - The container that wraps the tree item's nested children.
+   * - **checkbox** - The checkbox that shows when using multiselect.
+   * - **checkbox__base** - The checkbox's exported `base` part.
+   * - **checkbox__control** - The checkbox's exported `control` part.
+   * - **checkbox__control--checked** - The checkbox's exported `control--checked` part.
+   * - **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.
+   * - **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.
+   * - **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.
+   * - **checkbox__label** - The checkbox's exported `label` part.
+   */
+  "sl-tree-item": DefineComponent<SlTreeItemProps>;
+
   /**
    * Render markdown content with streaming support and custom node mapping.
    * ---