@kdcloudjs/shoelace 1.0.39 → 1.0.41

package/dist/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 { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { 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 { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
@@ -25,64 +25,68 @@ import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlFloatButton } from "../../components/float-button/float-button.component.js";
-import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
+import type { 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 { 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 { SlMenu } from "../../components/menu/menu.component.js";
-import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
-import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
+import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
+import type { 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 { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
+import type { 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 { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlRow } from "../../components/row/row.component.js";
-import type { SlSender, CustomEvent } from "../../components/sender/sender.component.js";
+import type { SlScreen } from "../../components/screen/screen.component.js";
+import type { 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 { 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 { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSteps } from "../../components/steps/steps.component.js";
+import type { SlSpinner } from "../../components/spinner/spinner.component.js";
+import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
+import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
-import type { SlThink } from "../../components/think/think.component.js";
-import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
+import type { 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 { 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 { SlTreeItem } from "../../components/tree-item/tree-item.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 = {
@@ -133,48 +137,6 @@ type SlAnimatedImageProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlAnimationProps = {
-  /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
-  name?: SlAnimation["name"];
-  /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
-the animation finishes or gets canceled. */
-  play?: SlAnimation["play"];
-  /** The number of milliseconds to delay the start of the animation. */
-  delay?: SlAnimation["delay"];
-  /** Determines the direction of playback as well as the behavior when reaching the end of an iteration.
-[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) */
-  direction?: SlAnimation["direction"];
-  /** The number of milliseconds each iteration of the animation takes to complete. */
-  duration?: SlAnimation["duration"];
-  /** The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
-such as `cubic-bezier(0, 1, .76, 1.14)`. */
-  easing?: SlAnimation["easing"];
-  /** The number of milliseconds to delay after the active period of an animation sequence. */
-  "end-delay"?: SlAnimation["endDelay"];
-  /** Sets how the animation applies styles to its target before and after its execution. */
-  fill?: SlAnimation["fill"];
-  /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
-  iterations?: SlAnimation["iterations"];
-  /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
-  "iteration-start"?: SlAnimation["iterationStart"];
-  /** Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
-to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
-value can be changed without causing the animation to restart. */
-  "playback-rate"?: SlAnimation["playbackRate"];
-  /**  */
-  defaultSlot?: SlAnimation["defaultSlot"];
-  /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
-  keyframes?: SlAnimation["keyframes"];
-  /** Gets and sets the current animation time. */
-  currentTime?: SlAnimation["currentTime"];
-  /** Emitted when the animation is canceled. */
-  "onsl-cancel"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the animation finishes. */
-  "onsl-finish"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the animation starts or restarts. */
-  "onsl-start"?: (e: CustomEvent<never>) => void;
-};
-
 type SlAvatarProps = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -222,14 +184,46 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
-type SlButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: SlButtonGroup["label"];
-  /**  */
-  defaultSlot?: SlButtonGroup["defaultSlot"];
+type SlAnimationProps = {
+  /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
+  name?: SlAnimation["name"];
+  /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when
+the animation finishes or gets canceled. */
+  play?: SlAnimation["play"];
+  /** The number of milliseconds to delay the start of the animation. */
+  delay?: SlAnimation["delay"];
+  /** Determines the direction of playback as well as the behavior when reaching the end of an iteration.
+[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) */
+  direction?: SlAnimation["direction"];
+  /** The number of milliseconds each iteration of the animation takes to complete. */
+  duration?: SlAnimation["duration"];
+  /** The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function
+such as `cubic-bezier(0, 1, .76, 1.14)`. */
+  easing?: SlAnimation["easing"];
+  /** The number of milliseconds to delay after the active period of an animation sequence. */
+  "end-delay"?: SlAnimation["endDelay"];
+  /** Sets how the animation applies styles to its target before and after its execution. */
+  fill?: SlAnimation["fill"];
+  /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */
+  iterations?: SlAnimation["iterations"];
+  /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
+  "iteration-start"?: SlAnimation["iterationStart"];
+  /** Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this
+to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This
+value can be changed without causing the animation to restart. */
+  "playback-rate"?: SlAnimation["playbackRate"];
   /**  */
-  disableRole?: SlButtonGroup["disableRole"];
+  defaultSlot?: SlAnimation["defaultSlot"];
+  /** The keyframes to use for the animation. If this is set, `name` will be ignored. */
+  keyframes?: SlAnimation["keyframes"];
+  /** Gets and sets the current animation time. */
+  currentTime?: SlAnimation["currentTime"];
+  /** Emitted when the animation is canceled. */
+  "onsl-cancel"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the animation finishes. */
+  "onsl-finish"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the animation starts or restarts. */
+  "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
 type SlButtonProps = {
@@ -301,9 +295,17 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCardProps = {};
+type SlButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: SlButtonGroup["label"];
+  /**  */
+  defaultSlot?: SlButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: SlButtonGroup["disableRole"];
+};
 
-type SlCarouselItemProps = {};
+type SlCardProps = {};
 
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
@@ -555,6 +557,8 @@ type SlDatePanelProps = {
   "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlCarouselItemProps = {};
+
 type SlDatepickerProps = {
   /**  */
   type?: SlDatepicker["type"];
@@ -705,6 +709,9 @@ use the `show()` and `hide()` methods and this attribute will reflect the dialog
   /** Disables the header. This will also remove the default close button, so please ensure you provide an easy,
 accessible way for users to dismiss the dialog. */
   "no-header"?: SlDialog["noHeader"];
+  /** Indicates whether or not the dialog can be closed by clicking the overlay. When set to false, clicking the overlay
+will not close the dialog. */
+  "mask-closable"?: SlDialog["maskClosable"];
   /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */
   modal?: SlDialog["modal"];
   /**  */
@@ -833,22 +840,6 @@ type SlFloatButtonProps = {
   "onsl-click"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFloatButtonGroupProps = {
-  /** The shape applied to all child float buttons. */
-  shape?: SlFloatButtonGroup["shape"];
-  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
-  trigger?: SlFloatButtonGroup["trigger"];
-  /** Whether the menu is open (controlled mode, use with trigger). */
-  open?: SlFloatButtonGroup["open"];
-  /** The direction the menu items expand. */
-  placement?: SlFloatButtonGroup["placement"];
-
-  /** Emitted when the menu opens (menu mode only). */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the menu closes (menu mode only). */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -887,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"];
@@ -910,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"];
@@ -955,6 +944,57 @@ 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"];
+  /** 图片替代文本 */
+  alt?: SlImage["alt"];
+  /** 图片宽度 */
+  width?: SlImage["width"];
+  /** 图片高度 */
+  height?: SlImage["height"];
+  /** 加载失败时的回退图片地址 */
+  fallback?: SlImage["fallback"];
+  /** 加载占位图；设为 true 显示默认占位符，设为字符串则作为占位图片 src */
+  placeholder?: SlImage["placeholder"];
+  /** 是否禁用预览 */
+  "no-preview"?: SlImage["noPreview"];
+  /** 预览配置 */
+  preview?: SlImage["preview"];
+  /** 是否在 group 中（由 sl-image-preview-group 自动设置） */
+  "in-group"?: SlImage["inGroup"];
+  /**  */
+  previewOpen?: SlImage["previewOpen"];
+  /** 在 group 模式下点击图片时触发 */
+  "onsl-image-click"?: (e: CustomEvent<never>) => void;
+  /** 预览打开时触发 */
+  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
+  /** 预览关闭时触发 */
+  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
+  /** 图片加载失败时触发 */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+  /** 图片加载成功时触发 */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+};
+
 type SlImageComparerProps = {
   /** The position of the divider as a percentage. */
   position?: SlImageComparer["position"];
@@ -966,6 +1006,23 @@ type SlImageComparerProps = {
   "onsl-change"?: (e: CustomEvent<never>) => void;
 };
 
+type SlImagePreviewGroupProps = {
+  /** 预览配置，为 false 时禁用预览 */
+  preview?: SlImagePreviewGroup["preview"];
+  /** 预览数组，支持字符串或 { src, alt, crossOrigin } 对象 */
+  items?: SlImagePreviewGroup["items"];
+  /** 加载失败容错地址（组件级） */
+  fallback?: SlImagePreviewGroup["fallback"];
+  /**  */
+  previewOpen?: SlImagePreviewGroup["previewOpen"];
+  /** 预览打开时触发 */
+  "onsl-preview-open"?: (e: CustomEvent<never>) => void;
+  /** 预览关闭时触发 */
+  "onsl-preview-close"?: (e: CustomEvent<never>) => void;
+  /** 预览图片切换时触发，detail 包含 { current, prev } */
+  "onsl-preview-change"?: (e: CustomEvent<never>) => void;
+};
+
 type SlIncludeProps = {
   /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
 code and can result in XSS attacks. */
@@ -1088,23 +1145,6 @@ type SlMenuProps = {
   "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
 };
 
-type SlMenuItemProps = {
-  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-  type?: SlMenuItem["type"];
-  /** 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 SlMenuLabelProps = {};
 
 type SlMutationObserverProps = {
@@ -1126,15 +1166,6 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
-type SlNavGroupProps = {
-  /** Draws the nav group in an active (selected) state. */
-  active?: SlNavGroup["active"];
-  /** The mode of navigation. */
-  mode?: SlNavGroup["mode"];
-  /** Matches Antd's item group label. */
-  label?: SlNavGroup["label"];
-};
-
 type SlNavProps = {
   /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
@@ -1190,41 +1221,30 @@ type SlNavProps = {
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
+type SlNavGroupProps = {
+  /** Draws the nav group in an active (selected) state. */
+  active?: SlNavGroup["active"];
+  /** The mode of navigation. */
+  mode?: SlNavGroup["mode"];
+  /** Matches Antd's item group label. */
+  label?: SlNavGroup["label"];
+};
 
-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 = {
@@ -1252,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"];
   /**  */
@@ -1309,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
@@ -1403,7 +1464,7 @@ change the boundary by passing a reference to one or more elements to this prope
   "shift-padding"?: SlPopup["shiftPadding"];
   /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
   "auto-size"?: SlPopup["autoSize"];
-  /** Syncs the popup's width or height to that of the anchor element. */
+  /** Syncs the popup's width or height to that of the anchor element. Use 'min-width' to set minimum width only. */
   sync?: SlPopup["sync"];
   /** The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
 default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
@@ -1442,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"];
@@ -1461,22 +1538,6 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
-attribute can typically be omitted. */
-  size?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1509,6 +1570,8 @@ instead. */
   value?: SlRadioGroup["value"];
   /** The radio group's size. This size will be applied to all child radios and radio buttons. */
   size?: SlRadioGroup["size"];
+  /** The layout direction of the radio group. */
+  layout?: SlRadioGroup["layout"];
   /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
 to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
 the same document or shadow root for this to work. */
@@ -1583,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
@@ -1623,12 +1660,15 @@ 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"];
+  /** Vertical alignment of columns */
+  align?: SlRow["align"];
+  /** Horizontal arrangement of columns */
+  justify?: SlRow["justify"];
+  /** Whether to wrap columns */
+  wrap?: SlRow["wrap"];
 };
 
 type SlScreenProps = {
@@ -1646,68 +1686,49 @@ type SlScreenProps = {
   gridElement?: SlScreen["gridElement"];
 };
 
-type SlRowProps = {
-  /** Spacing between columns, can be a number or responsive object */
-  gutter?: SlRow["gutter"];
-  /** Vertical alignment of columns */
-  align?: SlRow["align"];
-  /** Horizontal arrangement of columns */
-  justify?: SlRow["justify"];
-  /** Whether to wrap columns */
-  wrap?: SlRow["wrap"];
+type 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 SlSenderProps = {
-  /** The current value of the sender, submitted as part of the event detail on submit. */
-  value?: SlSender["value"];
-  /** Placeholder text to show as a hint when the input is empty. */
-  placeholder?: SlSender["placeholder"];
-  /** Draws the sender in a loading state, typically used while waiting for a response. */
-  loading?: SlSender["loading"];
-  /** Disables the sender. */
-  disabled?: SlSender["disabled"];
-  /** Makes the sender readonly. */
-  "read-only"?: SlSender["readOnly"];
-  /** The number of rows to display for the textarea. Only applies in plain text mode. */
-  rows?: SlSender["rows"];
-  /** Determines how the Enter key behaves. When set to `enter`, pressing Enter submits. When set to `shift-enter`, pressing Shift+Enter submits. */
-  "submit-type"?: SlSender["submitType"];
-  /** An array of slot configuration items for structured input mode. Supports `text`, `input`, `select`, `tag`, `content`, and `custom` types. */
-  slotConfig?: SlSender["slotConfig"];
-  /** The skill tag to display in the slot input area. Includes `value`, optional `title`, and optional `closable` configuration. */
-  skill?: SlSender["skill"];
-  /** Custom footer content or render function. Set to `false` to hide the footer. */
-  footer?: SlSender["footer"];
-  /** Custom header content or render function. Set to `false` to hide the header. */
-  header?: SlSender["header"];
-  /** Custom prefix content or render function. Set to `false` to hide the prefix. */
-  prefixContent?: SlSender["prefixContent"];
-  /** Custom suffix content or render function. Set to `false` to hide the suffix (action buttons). */
-  suffixContent?: SlSender["suffixContent"];
-  /** Enables speech recognition input. Set to `true` for uncontrolled mode, or pass a `ControlledSpeechConfig` object for controlled mode. */
-  "allow-speech"?: SlSender["allowSpeech"];
-  /** Whether speech recognition is currently recording. Only applies in uncontrolled speech mode. */
-  "speech-recording"?: SlSender["speechRecording"];
-  /**  */
-  textarea?: SlSender["textarea"];
-  /**  */
-  slotArea?: SlSender["slotArea"];
-  /** Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`. */
-  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode. */
-  "onsl-submit"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Emitted when the sender's content is cleared. */
-  "onsl-clear"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's speech button is clicked. */
-  "onsl-speech-toggle"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's input area gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the sender's input area loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when content is pasted into the sender. The event detail includes `{ event }`. */
-  "onsl-paste"?: (e: CustomEvent<never>) => void;
-  /** Emitted when files are pasted into the sender. The event detail includes `{ files }`. */
-  "onsl-paste-file"?: (e: CustomEvent<never>) => void;
+type SlSegmentedProps = {
+  /** 选项列表，支持字符串、数字或对象数组 */
+  options?: SlSegmented["options"];
+  /** 当前选中值 */
+  value?: SlSegmented["value"];
+  /** 是否禁用整个组件 */
+  disabled?: SlSegmented["disabled"];
+  /** 排列方向 */
+  orientation?: SlSegmented["orientation"];
+  /** 形状样式 */
+  shape?: SlSegmented["shape"];
+  /** 尺寸 */
+  size?: SlSegmented["size"];
+  /** 是否撑满父容器，选项平分宽度 */
+  block?: SlSegmented["block"];
+  /** 选中变化回调 */
+  onChange?: SlSegmented["onChange"];
 };
 
 type SlSelectProps = {
@@ -1801,27 +1822,80 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSenderHeaderProps = {
-  /** Whether the panel content is expanded. */
-  open?: SlSenderHeader["open"];
-  /** Whether the close/toggle button is shown. */
-  closable?: SlSenderHeader["closable"];
-  /** Plain-text title. Use the `title` slot for rich content. */
-  title?: SlSenderHeader["title"];
-  /** When true, the content DOM is always rendered even when collapsed.
-Useful when you need refs to inner elements on initial mount.
-When false (default), content is removed from the DOM when closed. */
-  "force-render"?: SlSenderHeader["forceRender"];
-
-  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
-  "onsl-open-change"?: (e: CustomEvent<never>) => void;
-};
-
-type SlSenderSwitchProps = {
-  /** Whether the switch is in the checked (active) state. */
-  checked?: SlSenderSwitch["checked"];
-  /** The initial checked state when uncontrolled. Only used on first render. */
-  "default-checked"?: SlSenderSwitch["defaultChecked"];
+type SlSenderProps = {
+  /** The current value of the sender, submitted as part of the event detail on submit. */
+  value?: SlSender["value"];
+  /** Placeholder text to show as a hint when the input is empty. */
+  placeholder?: SlSender["placeholder"];
+  /** Draws the sender in a loading state, typically used while waiting for a response. */
+  loading?: SlSender["loading"];
+  /** Disables the sender. */
+  disabled?: SlSender["disabled"];
+  /** Makes the sender readonly. */
+  "read-only"?: SlSender["readOnly"];
+  /** The number of rows to display for the textarea. Only applies in plain text mode. */
+  rows?: SlSender["rows"];
+  /** Determines how the Enter key behaves. When set to `enter`, pressing Enter submits. When set to `shift-enter`, pressing Shift+Enter submits. */
+  "submit-type"?: SlSender["submitType"];
+  /** An array of slot configuration items for structured input mode. Supports `text`, `input`, `select`, `tag`, `content`, and `custom` types. */
+  slotConfig?: SlSender["slotConfig"];
+  /** The skill tag to display in the slot input area. Includes `value`, optional `title`, and optional `closable` configuration. */
+  skill?: SlSender["skill"];
+  /** Custom footer content or render function. Set to `false` to hide the footer. */
+  footer?: SlSender["footer"];
+  /** Custom header content or render function. Set to `false` to hide the header. */
+  header?: SlSender["header"];
+  /** Custom prefix content or render function. Set to `false` to hide the prefix. */
+  prefixContent?: SlSender["prefixContent"];
+  /** Custom suffix content or render function. Set to `false` to hide the suffix (action buttons). */
+  suffixContent?: SlSender["suffixContent"];
+  /** Enables speech recognition input. Set to `true` for uncontrolled mode, or pass a `ControlledSpeechConfig` object for controlled mode. */
+  "allow-speech"?: SlSender["allowSpeech"];
+  /** Whether speech recognition is currently recording. Only applies in uncontrolled speech mode. */
+  "speech-recording"?: SlSender["speechRecording"];
+  /**  */
+  textarea?: SlSender["textarea"];
+  /**  */
+  slotArea?: SlSender["slotArea"];
+  /** Emitted when the sender's value changes. The event detail includes `{ value, slotConfig, skill }`. */
+  "onsl-change"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Emitted when the sender's submit button is clicked or Enter is pressed. The event detail includes `{ value }` or `{ value, slotConfig, skill }` in slot mode. */
+  "onsl-submit"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Emitted when the sender's content is cleared. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's speech button is clicked. */
+  "onsl-speech-toggle"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's input area gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the sender's input area loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when content is pasted into the sender. The event detail includes `{ event }`. */
+  "onsl-paste"?: (e: CustomEvent<never>) => void;
+  /** Emitted when files are pasted into the sender. The event detail includes `{ files }`. */
+  "onsl-paste-file"?: (e: CustomEvent<never>) => void;
+};
+
+type SlSenderHeaderProps = {
+  /** Whether the panel content is expanded. */
+  open?: SlSenderHeader["open"];
+  /** Whether the close/toggle button is shown. */
+  closable?: SlSenderHeader["closable"];
+  /** Plain-text title. Use the `title` slot for rich content. */
+  title?: SlSenderHeader["title"];
+  /** When true, the content DOM is always rendered even when collapsed.
+Useful when you need refs to inner elements on initial mount.
+When false (default), content is removed from the DOM when closed. */
+  "force-render"?: SlSenderHeader["forceRender"];
+
+  /** Emitted when the open state changes. `event.detail.open` indicates the new state. */
+  "onsl-open-change"?: (e: CustomEvent<never>) => void;
+};
+
+type SlSenderSwitchProps = {
+  /** Whether the switch is in the checked (active) state. */
+  checked?: SlSenderSwitch["checked"];
+  /** The initial checked state when uncontrolled. Only used on first render. */
+  "default-checked"?: SlSenderSwitch["defaultChecked"];
   /** Disables the switch. */
   disabled?: SlSenderSwitch["disabled"];
   /** Shows a loading spinner on the switch. */
@@ -1831,6 +1905,14 @@ 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"];
@@ -1849,8 +1931,6 @@ type SlSpaceProps = {
   separator?: SlSpace["separator"];
 };
 
-type SlSpinnerProps = {};
-
 type SlSplitPanelProps = {
   /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
 container's initial size. */
@@ -1891,6 +1971,42 @@ type SlStepsProps = {
   size?: SlSteps["size"];
   /** 类型 */
   type?: SlSteps["type"];
+  /** 样式变体：filled（填充）或 outlined（描边） */
+  variant?: SlSteps["variant"];
+  /** 方向：horizontal（水平）或 vertical（垂直） */
+  orientation?: SlSteps["orientation"];
+  /** 是否开启响应式（窄于 532px 自动切换为垂直模式） */
+  responsive?: SlSteps["responsive"];
+  /** 标签位置：horizontal（图标右侧，默认）或 vertical（图标下方） */
+  titlePlacement?: SlSteps["titlePlacement"];
+  /** 点击步骤切换的回调，传入后步骤条变为可点击状态 */
+  onChange?: SlSteps["onChange"];
+};
+
+type 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 = {
@@ -1934,52 +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 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"];
@@ -2021,6 +2091,8 @@ type SlTableProps = {
   slRowReorder?: SlTable["slRowReorder"];
   /**  */
   summary?: SlTable["summary"];
+  /** 表格尺寸 */
+  size?: SlTable["size"];
   /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
@@ -2061,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"];
@@ -2148,6 +2242,52 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlThoughtChainItemProps = {
+  /** The title text. Use the `title` slot for rich HTML content. */
+  title?: SlThoughtChainItem["title"];
+  /** The description text. Use the `description` slot for rich HTML content. */
+  description?: SlThoughtChainItem["description"];
+  /** The status of this item. Determines the status icon shown. */
+  status?: SlThoughtChainItem["status"];
+  /** The visual variant of the item. */
+  variant?: SlThoughtChainItem["variant"];
+  /** Whether to show a blink/pulse animation. */
+  blink?: SlThoughtChainItem["blink"];
+  /** Whether the item is disabled. Prevents click events and applies disabled styling. */
+  disabled?: SlThoughtChainItem["disabled"];
+  /** Whether this item is clickable. When true, hover/cursor styles are applied. */
+  clickable?: SlThoughtChainItem["clickable"];
+
+  /** Emitted when the item is clicked (only when not disabled and has a click handler). */
+  "onsl-click"?: (e: CustomEvent<never>) => void;
+};
+
+type SlThoughtChainProps = {
+  /** Size of the thought chain nodes.
+- `'small'`: compact layout
+- `'middle'`: default size
+- `'large'`: spacious layout */
+  size?: SlThoughtChain["size"];
+  /** Line connector style between nodes.
+- `true` or `'solid'`: solid line (default)
+- `'dashed'`: dashed line
+- `'dotted'`: dotted line
+- `false`: no line
+
+Note: HTML attributes are always strings. Use `line="solid"` / `line="dashed"` / `line="dotted"`.
+To hide the line, use `line="none"`. Programmatically, you can also set `el.line = false`. */
+  line?: SlThoughtChain["line"];
+  /** Keys of initially expanded collapsible nodes (uncontrolled mode).
+Set as a JSON array string attribute or via JS property. */
+  "default-expanded-keys"?: SlThoughtChain["defaultExpandedKeys"];
+  /** Keys of currently expanded collapsible nodes (controlled mode).
+When set, you must update this in response to `sl-expand` events. */
+  "expanded-keys"?: SlThoughtChain["expandedKeys"];
+
+  /** Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+};
+
 type SlThinkProps = {
   /** The title text shown in the status bar. Accepts plain text.
 For rich HTML content, use the `title` slot instead.
@@ -2186,52 +2326,6 @@ Maps to React's `blink: boolean` prop. */
   "onsl-collapse"?: (e: CustomEvent<never>) => void;
 };
 
-type SlThoughtChainProps = {
-  /** Size of the thought chain nodes.
-- `'small'`: compact layout
-- `'middle'`: default size
-- `'large'`: spacious layout */
-  size?: SlThoughtChain["size"];
-  /** Line connector style between nodes.
-- `true` or `'solid'`: solid line (default)
-- `'dashed'`: dashed line
-- `'dotted'`: dotted line
-- `false`: no line
-
-Note: HTML attributes are always strings. Use `line="solid"` / `line="dashed"` / `line="dotted"`.
-To hide the line, use `line="none"`. Programmatically, you can also set `el.line = false`. */
-  line?: SlThoughtChain["line"];
-  /** Keys of initially expanded collapsible nodes (uncontrolled mode).
-Set as a JSON array string attribute or via JS property. */
-  "default-expanded-keys"?: SlThoughtChain["defaultExpandedKeys"];
-  /** Keys of currently expanded collapsible nodes (controlled mode).
-When set, you must update this in response to `sl-expand` events. */
-  "expanded-keys"?: SlThoughtChain["expandedKeys"];
-
-  /** Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-};
-
-type SlThoughtChainItemProps = {
-  /** The title text. Use the `title` slot for rich HTML content. */
-  title?: SlThoughtChainItem["title"];
-  /** The description text. Use the `description` slot for rich HTML content. */
-  description?: SlThoughtChainItem["description"];
-  /** The status of this item. Determines the status icon shown. */
-  status?: SlThoughtChainItem["status"];
-  /** The visual variant of the item. */
-  variant?: SlThoughtChainItem["variant"];
-  /** Whether to show a blink/pulse animation. */
-  blink?: SlThoughtChainItem["blink"];
-  /** Whether the item is disabled. Prevents click events and applies disabled styling. */
-  disabled?: SlThoughtChainItem["disabled"];
-  /** Whether this item is clickable. When true, hover/cursor styles are applied. */
-  clickable?: SlThoughtChainItem["clickable"];
-
-  /** Emitted when the item is clicked (only when not disabled and has a click handler). */
-  "onsl-click"?: (e: CustomEvent<never>) => void;
-};
-
 type SlThoughtChainNodeProps = {
   /** Unique key for this node. Required when using collapsible mode or
 controlled expansion via the parent `<sl-thought-chain>`.
@@ -2276,6 +2370,112 @@ type SlTimepickerProps = {
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTreeSelectProps = {
+  /** The name of the control, submitted as a name/value pair with form data. */
+  name?: SlTreeSelect["name"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: SlTreeSelect["defaultValue"];
+  /** The select's size. */
+  size?: SlTreeSelect["size"];
+  /** Placeholder text to show as a hint when the select is empty. */
+  placeholder?: SlTreeSelect["placeholder"];
+  /** Allows more than one node to be selected. Renders checkboxes in the tree. */
+  multiple?: SlTreeSelect["multiple"];
+  /** The maximum number of selected options to show when `multiple` is true.
+After the maximum, "+n" will be shown. Set to 0 to remove the limit. */
+  "max-options-visible"?: SlTreeSelect["maxOptionsVisible"];
+  /** Disables the control. */
+  disabled?: SlTreeSelect["disabled"];
+  /** Adds a clear button when the input is not empty. */
+  clearable?: SlTreeSelect["clearable"];
+  /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown,
+or you can use the `show()` and `hide()` methods. */
+  open?: SlTreeSelect["open"];
+  /** Enable the use of `hoist` to position the dropdown panel using a fixed strategy,
+allowing it to break out of containers that have `overflow: hidden`. */
+  hoist?: SlTreeSelect["hoist"];
+  /** Draws a filled select. */
+  filled?: SlTreeSelect["filled"];
+  /** Draws a pill-style select with rounded edges. */
+  pill?: SlTreeSelect["pill"];
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlTreeSelect["label"];
+  /** The preferred placement of the dropdown panel. Note that the actual placement may vary
+to keep the panel inside of the viewport. */
+  placement?: SlTreeSelect["placement"];
+  /** The input's help text. */
+  "help-text"?: SlTreeSelect["helpText"];
+  /** The input's required attribute. */
+  required?: SlTreeSelect["required"];
+  /** The associated form element. */
+  form?: SlTreeSelect["form"];
+  /** Whether to enable search in the combobox input. Can be a boolean or a config object.
+When `true`, enables search with default settings.
+When an object, enables search with the specified configuration:
+- `autoClearSearchValue`: auto clear search after selection (default: true)
+- `filterTreeNode`: filter function or boolean (default: true)
+- `searchValue`: controlled search value
+- `treeNodeFilterProp`: which node property to filter on (default: 'value') */
+  "show-search"?: SlTreeSelect["showSearch"];
+  /** Whether parent nodes are selectable when `multiple` is false. Defaults to true. */
+  "tree-default-expand-all"?: SlTreeSelect["treeDefaultExpandAll"];
+  /** Whether to check children when parent is checked (only for multiple mode). */
+  "tree-checkable"?: SlTreeSelect["treeCheckable"];
+  /** Strategy for showing checked nodes: 'all' | 'parent' | 'child'. Defaults to 'all'. */
+  "show-checked-strategy"?: SlTreeSelect["showCheckedStrategy"];
+  /** Whether to show connecting lines between parent nodes in the tree. Leaf nodes are excluded. */
+  "tree-line"?: SlTreeSelect["treeLine"];
+  /** A function that generates a custom tag for each selected option in multiple mode.
+The function receives the node data and index, and should return a TemplateResult, string, or HTMLElement. */
+  getTag?: SlTreeSelect["getTag"];
+  /**  */
+  popup?: SlTreeSelect["popup"];
+  /**  */
+  combobox?: SlTreeSelect["combobox"];
+  /**  */
+  displayInput?: SlTreeSelect["displayInput"];
+  /**  */
+  valueInput?: SlTreeSelect["valueInput"];
+  /**  */
+  dropdown?: SlTreeSelect["dropdown"];
+  /**  */
+  displayLabel?: SlTreeSelect["displayLabel"];
+  /** The current value. When `multiple` is enabled, the value will be an array of strings.
+Values must not contain spaces when using multiple mode. */
+  value?: SlTreeSelect["value"];
+  /** Tree data. An array of `TreeSelectNodeData` objects describing the tree structure.
+Each node has `title`, `value`, and optionally `children`, `disabled`, `selectable`, `checkable`, `isLeaf`. */
+  treeData?: SlTreeSelect["treeData"];
+  /** Gets the validity state object */
+  validity?: SlTreeSelect["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlTreeSelect["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value is cleared. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the dropdown closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the dropdown closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the search value changes. */
+  "onsl-search"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a lazy node is expanded and its children need to be loaded. */
+  "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTooltipProps = {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   content?: SlTooltip["content"];
@@ -2318,6 +2518,8 @@ type SlTreeProps = {
   /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
 displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
   selection?: SlTree["selection"];
+  /** Whether to show connecting lines between tree nodes. */
+  "show-line"?: SlTree["showLine"];
   /**  */
   defaultSlot?: SlTree["defaultSlot"];
   /**  */
@@ -2328,6 +2530,8 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
   "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
 type SlTreeItemProps = {
   /** Expands the tree item. */
   expanded?: SlTreeItem["expanded"];
@@ -2369,8 +2573,6 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlVisuallyHiddenProps = {};
-
 type SlXMarkdownProps = {
   /** Markdown content to render. */
   content?: SlXMarkdown["content"];
@@ -2444,25 +2646,6 @@ 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).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
-   *
-   * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
-   */
-  "sl-animation": DefineComponent<SlAnimationProps>;
-
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2533,17 +2716,23 @@ export type CustomElements = {
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Button groups can be used to group related buttons into sections.
+   * 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).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   * ### **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.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **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-button-group": DefineComponent<SlButtonGroupProps>;
+  "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -2579,6 +2768,19 @@ export type CustomElements = {
    */
   "sl-button": DefineComponent<SlButtonProps>;
 
+  /**
+   * Button groups can be used to group related buttons into sections.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
+
   /**
    * Cards can be used to group related subjects in a container.
    * ---
@@ -2605,19 +2807,6 @@ export type CustomElements = {
    */
   "sl-card": DefineComponent<SlCardProps>;
 
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
    * ---
@@ -2810,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.
    * ---
@@ -3042,6 +3244,20 @@ export type CustomElements = {
    */
   "sl-float-button": DefineComponent<SlFloatButtonProps>;
 
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+
+  /**
+   * Formats a date/time using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
+
   /**
    * Groups multiple float buttons together, with optional menu trigger.
    * ---
@@ -3065,25 +3281,30 @@ export type CustomElements = {
   "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Formats a number using the specified locale and options.
    * ---
    *
    */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
   /**
-   * Formats a date/time using the specified locale and options.
+   * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
    * ---
    *
-   */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
-
-  /**
-   * Formats a number using the specified locale and options.
-   * ---
    *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the icon button loses focus.
+   * - **sl-focus** - Emitted when the icon button gains focus.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the icon button.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
+   * - **blur()** - Removes focus from the icon button.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
   /**
    * Icons are symbols that can be used to represent various options within an application.
@@ -3101,23 +3322,32 @@ export type CustomElements = {
   "sl-icon": DefineComponent<SlIconProps>;
 
   /**
-   * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+   * 图片组件，支持预览、缩放、旋转、翻转等功能。
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-blur** - Emitted when the icon button loses focus.
-   * - **sl-focus** - Emitted when the icon button gains focus.
+   *  - **sl-image-click** - 在 group 模式下点击图片时触发
+   * - **sl-preview-open** - 预览打开时触发
+   * - **sl-preview-close** - 预览关闭时触发
+   * - **sl-error** - 图片加载失败时触发
+   * - **sl-load** - 图片加载成功时触发
    *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the icon button.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
-   * - **blur()** - Removes focus from the icon button.
+   * ### **Slots:**
+   *  - **cover** - 自定义遮罩层内容
+   * - **placeholder** - 自定义加载占位内容
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - 组件根容器
+   * - **img** - 图片元素
+   * - **cover** - 遮罩层
+   * - **preview-mask** - 预览遮罩背景
+   * - **preview-body** - 预览主体
+   * - **preview-img** - 预览图片
+   * - **preview-actions** - 预览工具栏
+   * - **preview-close** - 预览关闭按钮
    */
-  "sl-icon-button": DefineComponent<SlIconButtonProps>;
+  "sl-image": DefineComponent<SlImageProps>;
 
   /**
    * Compare visual differences between similar photos with a sliding panel.
@@ -3145,6 +3375,29 @@ export type CustomElements = {
    */
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
+  /**
+   * 图片预览组，支持多张图片切换预览。对齐 Ant Design Image.PreviewGroup API。
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-preview-open** - 预览打开时触发
+   * - **sl-preview-close** - 预览关闭时触发
+   * - **sl-preview-change** - 预览图片切换时触发，detail 包含 { current, prev }
+   *
+   * ### **Slots:**
+   *  - _default_ - 默认插槽，放置 sl-image 组件
+   *
+   * ### **CSS Parts:**
+   *  - **preview-mask** - 预览遮罩背景
+   * - **preview-body** - 预览主体
+   * - **preview-img** - 预览图片
+   * - **preview-actions** - 预览工具栏
+   * - **preview-close** - 预览关闭按钮
+   * - **preview-counter** - 预览计数器
+   */
+  "sl-image-preview-group": DefineComponent<SlImagePreviewGroupProps>;
+
   /**
    * Includes give you the power to embed external HTML files into the page.
    * ---
@@ -3219,35 +3472,6 @@ export type CustomElements = {
    */
   "sl-menu": DefineComponent<SlMenuProps>;
 
-  /**
-   * 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>;
-
   /**
    * Menu labels are used to describe a group of menu items.
    * ---
@@ -3275,59 +3499,67 @@ export type CustomElements = {
   "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
-   * Nav groups are used to group related nav items.
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *
    * ### **Slots:**
-   *  - _default_ - The nav items within the group.
-   * - **title** - The nav group's title.
+   *  - _default_ - The nav items.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **title** - The nav group title.
-   * - **body** - The nav group body.
    */
-  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+  "sl-nav": DefineComponent<SlNavProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
+   * Nav groups are used to group related nav items.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
-   *
    * ### **Slots:**
-   *  - _default_ - The nav items.
+   *  - _default_ - The nav items within the group.
+   * - **title** - The nav group's title.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **title** - The nav group title.
+   * - **body** - The nav group body.
    */
-  "sl-nav": DefineComponent<SlNavProps>;
+  "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.
@@ -3406,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).
    * ---
@@ -3506,16 +3759,6 @@ export type CustomElements = {
    */
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
-  /**
-   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
-   * ---
-   *
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-qr-code": DefineComponent<SlQrCodeProps>;
-
   /**
    * Radios allow the user to select a single option from a group.
    * ---
@@ -3537,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.
    * ---
@@ -3594,6 +3847,7 @@ export type CustomElements = {
    * - **form-control-help-text** - The help text's wrapper.
    * - **button-group** - The button group that wraps radio buttons.
    * - **button-group__base** - The button group's `base` part.
+   * - **radios** - The container that wraps the radio elements (only when not using radio buttons).
    */
   "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
@@ -3642,6 +3896,40 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
+  /**
+   * Row component for grid layout system.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for Col components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-row": DefineComponent<SlRowProps>;
+
+  /**
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The grid layout content.
+   */
+  "sl-screen": DefineComponent<SlScreenProps>;
+
   /**
    * Ratings give users a way to quickly view and provide feedback.
    * ---
@@ -3667,51 +3955,68 @@ export type CustomElements = {
   "sl-rating": DefineComponent<SlRatingProps>;
 
   /**
-   * Outputs a localized time phrase relative to the current date and time.
+   *
    * ---
    *
    */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+  "sl-segmented": DefineComponent<SlSegmentedProps>;
 
   /**
-   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+   * Selects allow you to choose items from a menu of predefined options.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-resize** - Emitted when the element is resized.
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more elements to watch for resizing.
-   */
-  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
-
-  /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
-   * ---
-   *
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-clear** - Emitted when the control's value is cleared.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-show** - Emitted when the select's menu opens.
+   * - **sl-after-show** - Emitted after the select's menu opens and all animations are complete.
+   * - **sl-hide** - Emitted when the select's menu closes.
+   * - **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    *
    * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
-   */
-  "sl-screen": DefineComponent<SlScreenProps>;
-
-  /**
-   * Row component for grid layout system.
-   * ---
-   *
+   *  - **show()** - Shows the listbox.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
    *
    * ### **Slots:**
-   *  - _default_ - The default slot for Col components.
+   *  - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
+   * - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The select's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **listbox** - The listbox container where options are slotted.
+   * - **tags** - The container that houses option tags when `multiselect` is used.
+   * - **tag** - The individual tags that represent each multiselect option.
+   * - **tag__base** - The tag's base part.
+   * - **tag__content** - The tag's content part.
+   * - **tag__remove-button** - The tag's remove button.
+   * - **tag__remove-button__base** - The tag's remove button base part.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
    */
-  "sl-row": DefineComponent<SlRowProps>;
+  "sl-select": DefineComponent<SlSelectProps>;
 
   /**
    * Senders are used to send messages. They support plain text input, structured slot-based input, speech recognition, skill tagging, and customizable header/footer/prefix/suffix areas.
@@ -3789,63 +4094,6 @@ export type CustomElements = {
    */
   "sl-sender": DefineComponent<SlSenderProps>;
 
-  /**
-   * 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.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the listbox.
-   * - **hide()** - Hides the listbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
-   * - **blur()** - Removes focus from the control.
-   *
-   * ### **Slots:**
-   *  - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
-   * - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The select's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
-   * - **listbox** - The listbox container where options are slotted.
-   * - **tags** - The container that houses option tags when `multiselect` is used.
-   * - **tag** - The individual tags that represent each multiselect option.
-   * - **tag__base** - The tag's base part.
-   * - **tag__content** - The tag's content part.
-   * - **tag__remove-button** - The tag's remove button.
-   * - **tag__remove-button__base** - The tag's remove button base part.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
-   */
-  "sl-select": DefineComponent<SlSelectProps>;
-
   /**
    * A collapsible header panel for the Sender component.
    * ---
@@ -3884,7 +4132,20 @@ export type CustomElements = {
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper (the button element).
    */
-  "sl-sender-switch": DefineComponent<SlSenderSwitchProps>;
+  "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.
@@ -3920,22 +4181,6 @@ export type CustomElements = {
    */
   "sl-space": DefineComponent<SlSpaceProps>;
 
-  /**
-   * Spinners are used to show the progress of an indeterminate operation.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--track-width** - The width of the track. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_
-   * - **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-spinner": DefineComponent<SlSpinnerProps>;
-
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
    * ---
@@ -3970,6 +4215,56 @@ export type CustomElements = {
    */
   "sl-steps": DefineComponent<SlStepsProps>;
 
+  /**
+   * Spinners are used to show the progress of an indeterminate operation.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--track-width** - The width of the track. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_
+   * - **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-spinner": DefineComponent<SlSpinnerProps>;
+
+  /**
+   * Tab groups organize content into a container that shows one section at a time.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-tab-show** - Emitted when a tab is shown.
+   * - **sl-tab-hide** - Emitted when a tab is hidden.
+   *
+   * ### **Methods:**
+   *  - **show(panel: _string_)** - Shows the specified tab panel.
+   *
+   * ### **Slots:**
+   *  - _default_ - Used for grouping tab panels in the tab group. Must be `<sl-tab-panel>` elements.
+   * - **nav** - Used for grouping tabs in the tab group. Must be `<sl-tab>` elements.
+   *
+   * ### **CSS Properties:**
+   *  - **--indicator-color** - The color of the active tab indicator. _(default: undefined)_
+   * - **--track-color** - The color of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   * - **--track-width** - The width of the indicator's track (the line that separates tabs from panels). _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **nav** - The tab group's navigation container where tabs are slotted in.
+   * - **tabs** - The container that wraps the tabs.
+   * - **active-tab-indicator** - The line that highlights the currently selected tab.
+   * - **body** - The tab group's body where tab panels are slotted in.
+   * - **scroll-button** - The previous/next scroll buttons that show when tabs are scrollable, an `<sl-icon-button>`.
+   * - **scroll-button--start** - The starting scroll button.
+   * - **scroll-button--end** - The ending scroll button.
+   * - **scroll-button__base** - The scroll button's exported `base` part.
+   */
+  "sl-tab-group": DefineComponent<SlTabGroupProps>;
+
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -4010,56 +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.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
    */
-  "sl-tab-group": DefineComponent<SlTabGroupProps>;
+  "sl-tab": DefineComponent<SlTabProps>;
 
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
@@ -4077,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.
    * ---
@@ -4145,39 +4406,31 @@ export type CustomElements = {
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
   /**
-   * Think is used to display an AI model's thinking process with expandable/collapsible content.
+   * A standalone thought chain item badge/tag. Used for displaying individual
+   * action/tool entries outside of a full thought chain. Supports variants (solid, outlined, text),
+   * status indicators, and click/disabled states.
+   *
+   * This is the web component equivalent of React's `ThoughtChain.Item`.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-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.
+   *  - **sl-click** - Emitted when the item is clicked (only when not disabled and has a click handler).
    *
    * ### **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)_
+   *  - _default_ - Default slot (not used, reserved).
+   * - **icon** - Custom icon to display.
+   * - **title** - The item's title. Alternatively, use the `title` attribute.
+   * - **description** - The item's description text. Alternatively, use the `description` attribute.
    *
    * ### **CSS Parts:**
-   *  - **base** - The 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).
+   *  - **base** - The item's base wrapper.
+   * - **icon** - The icon container.
+   * - **content** - The content wrapper containing title and description.
+   * - **title** - The title area.
+   * - **description** - The description area.
    */
-  "sl-think": DefineComponent<SlThinkProps>;
+  "sl-thought-chain-item": DefineComponent<SlThoughtChainItemProps>;
 
   /**
    * ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.
@@ -4207,31 +4460,39 @@ export type CustomElements = {
   "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
 
   /**
-   * A standalone thought chain item badge/tag. Used for displaying individual
-   * action/tool entries outside of a full thought chain. Supports variants (solid, outlined, text),
-   * status indicators, and click/disabled states.
-   *
-   * This is the web component equivalent of React's `ThoughtChain.Item`.
+   * Think is used to display an AI model's thinking process with expandable/collapsible content.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-click** - Emitted when the item is clicked (only when not disabled and has a click handler).
+   *  - **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_ - Default slot (not used, reserved).
-   * - **icon** - Custom icon to display.
-   * - **title** - The item's title. Alternatively, use the `title` attribute.
-   * - **description** - The item's description text. Alternatively, use the `description` attribute.
+   *  - _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 item's base wrapper.
-   * - **icon** - The icon container.
-   * - **content** - The content wrapper containing title and description.
-   * - **title** - The title area.
-   * - **description** - The description area.
+   *  - **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-thought-chain-item": DefineComponent<SlThoughtChainItemProps>;
+  "sl-think": DefineComponent<SlThinkProps>;
 
   /**
    * A single node in a thought chain. Used as a child of `<sl-thought-chain>`.
@@ -4282,6 +4543,57 @@ export type CustomElements = {
    */
   "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
+  /**
+   * TreeSelect combines a dropdown trigger with a tree structure, allowing users to select from hierarchical data.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-clear** - Emitted when the control's value is cleared.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-show** - Emitted when the dropdown opens.
+   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dropdown closes.
+   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **sl-search** - Emitted when the search value changes.
+   * - **sl-lazy-load** - Emitted when a lazy node is expanded and its children need to be loaded.
+   *
+   * ### **Methods:**
+   *  - **loadChildren(parentValue: _string_, children: _TreeSelectNodeData[]_)** - Load children for a lazy node. Call this from your `sl-lazy-load` event handler.
+   * It updates the node's children in `treeData`, removes `lazy`, and expands the node.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
+   * - **tree-expand-icon** - The icon to show when a tree node is collapsed (click to expand). Forwarded to the tree's `expand-icon` slot.
+   * - **tree-collapse-icon** - The icon to show when a tree node is expanded (click to collapse). Forwarded to the tree's `collapse-icon` slot.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The select's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label.
+   * - **tags** - The container that houses option tags when `multiple` is used.
+   * - **tag** - The individual tags that represent each selected option.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   * - **dropdown** - The dropdown panel that contains the tree.
+   * - **tree** - The tree element inside the dropdown.
+   */
+  "sl-tree-select": DefineComponent<SlTreeSelectProps>;
+
   /**
    * Tooltips display additional information based on a specific action.
    * ---
@@ -4339,6 +4651,16 @@ export type CustomElements = {
    */
   "sl-tree": DefineComponent<SlTreeProps>;
 
+  /**
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to be visually hidden.
+   */
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
+
   /**
    * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
@@ -4384,16 +4706,6 @@ export type CustomElements = {
    */
   "sl-tree-item": DefineComponent<SlTreeItemProps>;
 
-  /**
-   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to be visually hidden.
-   */
-  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
-
   /**
    * Render markdown content with streaming support and custom node mapping.
    * ---