@kdcloudjs/shoelace 1.0.31 → 1.0.32

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

@@ -3,8 +3,8 @@ 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 { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
@@ -12,26 +12,26 @@ import type { SlButtonGroup } from "../../components/button-group/button-group.c
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { SlCol } from "../../components/col/col.component.js";
 import type { 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 { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.component.js";
-import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
+import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
-import type { SlFloatButtonGroup } from "../../components/float-button-group/float-button-group.component.js";
 import type { SlFloatButton } from "../../components/float-button/float-button.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 { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
+import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
-import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
+import type { SlIconButton } from "../../components/icon-button/icon-button.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";
@@ -40,14 +40,14 @@ import type { SlMenuLabel } from "../../components/menu-label/menu-label.compone
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
-import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
+import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
@@ -69,17 +69,17 @@ 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 { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
+import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
+import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
 import type { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
-import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
-import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
+import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
-import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
+import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 import type { SlXMarkdown } from "../../components/x-markdown/x-markdown.component.js";
 
 type SlAlertProps = {
@@ -172,6 +172,15 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
+};
+
 type SlAvatarProps = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -188,15 +197,6 @@ type SlAvatarProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBadgeProps = {
-  /** The badge's theme variant. */
-  variant?: SlBadge["variant"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: SlBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: SlBadge["pulse"];
-};
-
 type SlBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -336,35 +336,6 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type SlCarouselItemProps = {};
 
-type SlColProps = {
-  /** Number of cells to span (out of 24) */
-  span?: SlCol["span"];
-  /** Number of cells to offset from the left */
-  offset?: SlCol["offset"];
-  /** Order of the column */
-  order?: SlCol["order"];
-  /** Number of cells to push from the left */
-  push?: SlCol["push"];
-  /** Number of cells to pull from the right */
-  pull?: SlCol["pull"];
-  /** Flex layout style */
-  flex?: SlCol["flex"];
-  /** Responsive config for xs screens (< 576px) */
-  xs?: SlCol["xs"];
-  /** Responsive config for sm screens (≥ 576px) */
-  sm?: SlCol["sm"];
-  /** Responsive config for md screens (≥ 768px) */
-  md?: SlCol["md"];
-  /** Responsive config for lg screens (≥ 992px) */
-  lg?: SlCol["lg"];
-  /** Responsive config for xl screens (≥ 1200px) */
-  xl?: SlCol["xl"];
-  /** Responsive config for xxl screens (≥ 1600px) */
-  xxl?: SlCol["xxl"];
-  /**  */
-  rowContext?: SlCol["rowContext"];
-};
-
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -409,6 +380,35 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlColProps = {
+  /** Number of cells to span (out of 24) */
+  span?: SlCol["span"];
+  /** Number of cells to offset from the left */
+  offset?: SlCol["offset"];
+  /** Order of the column */
+  order?: SlCol["order"];
+  /** Number of cells to push from the left */
+  push?: SlCol["push"];
+  /** Number of cells to pull from the right */
+  pull?: SlCol["pull"];
+  /** Flex layout style */
+  flex?: SlCol["flex"];
+  /** Responsive config for xs screens (< 576px) */
+  xs?: SlCol["xs"];
+  /** Responsive config for sm screens (≥ 576px) */
+  sm?: SlCol["sm"];
+  /** Responsive config for md screens (≥ 768px) */
+  md?: SlCol["md"];
+  /** Responsive config for lg screens (≥ 992px) */
+  lg?: SlCol["lg"];
+  /** Responsive config for xl screens (≥ 1200px) */
+  xl?: SlCol["xl"];
+  /** Responsive config for xxl screens (≥ 1600px) */
+  xxl?: SlCol["xxl"];
+  /**  */
+  rowContext?: SlCol["rowContext"];
+};
+
 type SlColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -653,34 +653,6 @@ as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via
   "onsl-clear"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDetailsProps = {
-  /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
-can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
-  open?: SlDetails["open"];
-  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
-  summary?: SlDetails["summary"];
-  /** Disables the details so it can't be toggled. */
-  disabled?: SlDetails["disabled"];
-  /**  */
-  details?: SlDetails["details"];
-  /**  */
-  header?: SlDetails["header"];
-  /**  */
-  body?: SlDetails["body"];
-  /**  */
-  expandIconSlot?: SlDetails["expandIconSlot"];
-  /**  */
-  detailsObserver?: SlDetails["detailsObserver"];
-  /** Emitted when the details opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the details opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the details closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the details closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlDialogProps = {
   /** Indicates whether or not the dialog is resizable. When true, the user can resize the dialog by dragging the
 bottom-right corner, and double-clicking the header will toggle fullscreen mode. */
@@ -718,6 +690,34 @@ accessible way for users to dismiss the dialog. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type SlDetailsProps = {
+  /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
+  open?: SlDetails["open"];
+  /** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+  summary?: SlDetails["summary"];
+  /** Disables the details so it can't be toggled. */
+  disabled?: SlDetails["disabled"];
+  /**  */
+  details?: SlDetails["details"];
+  /**  */
+  header?: SlDetails["header"];
+  /**  */
+  body?: SlDetails["body"];
+  /**  */
+  expandIconSlot?: SlDetails["expandIconSlot"];
+  /**  */
+  detailsObserver?: SlDetails["detailsObserver"];
+  /** Emitted when the details opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the details opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the details closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the details closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+};
+
 type SlDividerProps = {
   /** Draws the divider in a vertical orientation. */
   vertical?: SlDivider["vertical"];
@@ -800,22 +800,6 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFloatButtonGroupProps = {
-  /** The shape applied to all child float buttons. */
-  shape?: SlFloatButtonGroup["shape"];
-  /** The trigger mode for menu. When set, shows a trigger button that toggles the menu. */
-  trigger?: SlFloatButtonGroup["trigger"];
-  /** Whether the menu is open (controlled mode, use with trigger). */
-  open?: SlFloatButtonGroup["open"];
-  /** The direction the menu items expand. */
-  placement?: SlFloatButtonGroup["placement"];
-
-  /** Emitted when the menu opens (menu mode only). */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the menu closes (menu mode only). */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-};
-
 type SlFloatButtonProps = {
   /** The button's type. */
   type?: SlFloatButton["type"];
@@ -840,6 +824,31 @@ 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"];
+  /** The type of unit to display. */
+  unit?: SlFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: SlFormatBytes["display"];
+};
+
 type SlFormatDateProps = {
   /** The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
 recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
@@ -869,15 +878,6 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: SlFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: SlFormatBytes["display"];
-};
-
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -919,6 +919,17 @@ ignored by assistive devices. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlImageComparerProps = {
+  /** The position of the divider as a percentage. */
+  position?: SlImageComparer["position"];
+  /**  */
+  base?: SlImageComparer["base"];
+  /**  */
+  handle?: SlImageComparer["handle"];
+  /** Emitted when the position changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+};
+
 type SlIconButtonProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIconButton["name"];
@@ -946,17 +957,6 @@ that describes what the icon button does. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlImageComparerProps = {
-  /** The position of the divider as a percentage. */
-  position?: SlImageComparer["position"];
-  /**  */
-  base?: SlImageComparer["base"];
-  /**  */
-  handle?: SlImageComparer["handle"];
-  /** Emitted when the position changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-};
-
 type SlIncludeProps = {
   /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
 code and can result in XSS attacks. */
@@ -1181,34 +1181,71 @@ type SlNavGroupProps = {
   label?: SlNavGroup["label"];
 };
 
-type SlNavSubmenuProps = {
-  /** A stable key used by `sl-nav` to track open state. */
-  key?: SlNavSubmenu["key"];
+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"?: SlNavSubmenu["itemKey"];
-  /** Indicates whether or not the submenu is open. */
-  open?: SlNavSubmenu["open"];
-  /** Indicates if this submenu is nested within another submenu. */
-  nested?: SlNavSubmenu["nested"];
-  /** The summary to show in the header. If you need to display HTML, use the `title` slot instead. */
-  title?: SlNavSubmenu["title"];
-  /** Matches Antd's `theme` field. */
-  theme?: SlNavSubmenu["theme"];
-  /** Matches Antd's `popupClassName` field. */
-  "popup-class-name"?: SlNavSubmenu["popupClassName"];
-  /** Draws the submenu in a disabled state. */
-  disabled?: SlNavSubmenu["disabled"];
-  /** Draws the submenu in an active (selected) state. */
-  active?: SlNavSubmenu["active"];
-  /** The mode of navigation. */
-  mode?: SlNavSubmenu["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavSubmenu["collapsed"];
-  /**  */
-  header?: SlNavSubmenu["header"];
-  /**  */
+  "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 SlNavSubmenuProps = {
+  /** A stable key used by `sl-nav` to track open state. */
+  key?: SlNavSubmenu["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"?: SlNavSubmenu["itemKey"];
+  /** Indicates whether or not the submenu is open. */
+  open?: SlNavSubmenu["open"];
+  /** Indicates if this submenu is nested within another submenu. */
+  nested?: SlNavSubmenu["nested"];
+  /** The summary to show in the header. If you need to display HTML, use the `title` slot instead. */
+  title?: SlNavSubmenu["title"];
+  /** Matches Antd's `theme` field. */
+  theme?: SlNavSubmenu["theme"];
+  /** Matches Antd's `popupClassName` field. */
+  "popup-class-name"?: SlNavSubmenu["popupClassName"];
+  /** Draws the submenu in a disabled state. */
+  disabled?: SlNavSubmenu["disabled"];
+  /** Draws the submenu in an active (selected) state. */
+  active?: SlNavSubmenu["active"];
+  /** The mode of navigation. */
+  mode?: SlNavSubmenu["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavSubmenu["collapsed"];
+  /**  */
+  header?: SlNavSubmenu["header"];
+  /**  */
   body?: SlNavSubmenu["body"];
   /**  */
   popup?: SlNavSubmenu["popup"];
@@ -1247,43 +1284,6 @@ multiple values. */
   hasHover?: SlOption["hasHover"];
 };
 
-type SlNavItemProps = {
-  /** A stable key used by `sl-nav` to track selection. */
-  key?: SlNavItem["key"];
-  /** React-safe alias for `key`.
-
-React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
-  "item-key"?: SlNavItem["itemKey"];
-  /** Matches Antd's `danger` item flag. */
-  danger?: SlNavItem["danger"];
-  /** Tooltip text, primarily used when the menu is collapsed. */
-  title?: SlNavItem["title"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
-  /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-  /** Whether the parent nav is in inline-collapsed mode. */
-  collapsed?: SlNavItem["collapsed"];
-  /** Alternate label content when using Antd-style `items` configuration. */
-  label?: SlNavItem["label"];
-  /** Alternate icon content when using Antd-style `items` configuration. */
-  icon?: SlNavItem["icon"];
-  /** Extra content shown at the end of the item. */
-  extra?: SlNavItem["extra"];
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
-};
-
 type SlPaginationProps = {
   /**  */
   currentPage?: SlPagination["currentPage"];
@@ -1380,17 +1380,6 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlProgressRingProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressRing["value"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressRing["label"];
-  /**  */
-  indicator?: SlProgressRing["indicator"];
-  /**  */
-  indicatorOffset?: SlProgressRing["indicatorOffset"];
-};
-
 type SlProgressBarProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressBar["value"];
@@ -1419,6 +1408,17 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
+type SlProgressRingProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressRing["value"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressRing["label"];
+  /**  */
+  indicator?: SlProgressRing["indicator"];
+  /**  */
+  indicatorOffset?: SlProgressRing["indicatorOffset"];
+};
+
 type SlRadioProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadio["value"];
@@ -1944,6 +1944,8 @@ type SlTableProps = {
   /** 行拖拽排序后的回调 */
   slRowReorder?: SlTable["slRowReorder"];
   /**  */
+  summary?: SlTable["summary"];
+  /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
   expandedMap?: SlTable["expandedMap"];
@@ -1980,6 +1982,8 @@ type SlTableProps = {
   /**  */
   generateCustomRowSlot?: SlTable["generateCustomRowSlot"];
   /**  */
+  generateCustomTfootSlot?: SlTable["generateCustomTfootSlot"];
+  /**  */
   handleFilterDropdownChange?: SlTable["handleFilterDropdownChange"];
   /**  */
   handlePaginationChange?: SlTable["handlePaginationChange"];
@@ -1987,6 +1991,20 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlTagProps = {
+  /** The tag's theme variant. */
+  variant?: SlTag["variant"];
+  /** The tag's size. */
+  size?: SlTag["size"];
+  /** Draws a pill-style tag with rounded edges. */
+  pill?: SlTag["pill"];
+  /** Makes the tag removable and shows a remove button. */
+  removable?: SlTag["removable"];
+
+  /** Emitted when the remove button is activated. */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -2060,20 +2078,6 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
 type SlThinkProps = {
   /** The title text shown in the status bar. Accepts plain text.
 For rich HTML content, use the `title` slot instead.
@@ -2112,6 +2116,32 @@ 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"];
@@ -2155,6 +2185,27 @@ Maps to React's `key` property on ThoughtChainItemType. */
   expanded?: SlThoughtChainNode["expanded"];
 };
 
+type SlTimepickerProps = {
+  /**  */
+  format?: SlTimepicker["format"];
+  /**  */
+  pattern?: SlTimepicker["pattern"];
+  /**  */
+  timePanel?: SlTimepicker["timePanel"];
+  /** Emitted when the control's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value changes. */
+  "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 clear button is activated. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTooltipProps = {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   content?: SlTooltip["content"];
@@ -2193,53 +2244,6 @@ scenarios. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTimepickerProps = {
-  /**  */
-  format?: SlTimepicker["format"];
-  /**  */
-  pattern?: SlTimepicker["pattern"];
-  /**  */
-  timePanel?: SlTimepicker["timePanel"];
-  /** Emitted when the control's value changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control's value changes. */
-  "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 clear button is activated. */
-  "onsl-clear"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
-type SlThoughtChainProps = {
-  /** Size of the thought chain nodes.
-- `'small'`: compact layout
-- `'middle'`: default size
-- `'large'`: spacious layout */
-  size?: SlThoughtChain["size"];
-  /** Line connector style between nodes.
-- `true` or `'solid'`: solid line (default)
-- `'dashed'`: dashed line
-- `'dotted'`: dotted line
-- `false`: no line
-
-Note: HTML attributes are always strings. Use `line="solid"` / `line="dashed"` / `line="dotted"`.
-To hide the line, use `line="none"`. Programmatically, you can also set `el.line = false`. */
-  line?: SlThoughtChain["line"];
-  /** Keys of initially expanded collapsible nodes (uncontrolled mode).
-Set as a JSON array string attribute or via JS property. */
-  "default-expanded-keys"?: SlThoughtChain["defaultExpandedKeys"];
-  /** Keys of currently expanded collapsible nodes (controlled mode).
-When set, you must update this in response to `sl-expand` events. */
-  "expanded-keys"?: SlThoughtChain["expandedKeys"];
-
-  /** Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTreeProps = {
   /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
 displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
@@ -2254,8 +2258,6 @@ 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"];
@@ -2297,6 +2299,8 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
 type SlXMarkdownProps = {
   /** Markdown content to render. */
   content?: SlXMarkdown["content"];
@@ -2390,39 +2394,39 @@ export type CustomElements = {
   "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Avatars are used to represent a person or object.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -2580,19 +2584,6 @@ export type CustomElements = {
    */
   "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
-  /**
-   * Col component for grid layout system.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot for content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-col": DefineComponent<SlColProps>;
-
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2631,6 +2622,19 @@ export type CustomElements = {
    */
   "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
+  /**
+   * Col component for grid layout system.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-col": DefineComponent<SlColProps>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2792,36 +2796,6 @@ export type CustomElements = {
    */
   "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
 
-  /**
-   * Details show a brief summary and expand to show additional content.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the details opens.
-   * - **sl-after-show** - Emitted after the details opens and all animations are complete.
-   * - **sl-hide** - Emitted when the details closes.
-   * - **sl-after-hide** - Emitted after the details closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the details.
-   * - **hide()** - Hides the details
-   *
-   * ### **Slots:**
-   *  - _default_ - The details' main content.
-   * - **summary** - The details' summary. Alternatively, you can use the `summary` attribute.
-   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **header** - The header that wraps both the summary and the expand/collapse icon.
-   * - **summary** - The container that wraps the summary.
-   * - **summary-icon** - The container that wraps the expand/collapse icons.
-   * - **content** - The details content.
-   */
-  "sl-details": DefineComponent<SlDetailsProps>;
-
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
    * ---
@@ -2865,6 +2839,36 @@ export type CustomElements = {
    */
   "sl-dialog": DefineComponent<SlDialogProps>;
 
+  /**
+   * Details show a brief summary and expand to show additional content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the details opens.
+   * - **sl-after-show** - Emitted after the details opens and all animations are complete.
+   * - **sl-hide** - Emitted when the details closes.
+   * - **sl-after-hide** - Emitted after the details closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the details.
+   * - **hide()** - Hides the details
+   *
+   * ### **Slots:**
+   *  - _default_ - The details' main content.
+   * - **summary** - The details' summary. Alternatively, you can use the `summary` attribute.
+   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The header that wraps both the summary and the expand/collapse icon.
+   * - **summary** - The container that wraps the summary.
+   * - **summary-icon** - The container that wraps the expand/collapse icons.
+   * - **content** - The details content.
+   */
+  "sl-details": DefineComponent<SlDetailsProps>;
+
   /**
    * Dividers are used to visually separate or group elements.
    * ---
@@ -2949,6 +2953,25 @@ export type CustomElements = {
    */
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
+  /**
+   * A floating action button that stays fixed on the page.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-click** - Emitted when the button is clicked.
+   *
+   * ### **Slots:**
+   *  - _default_ - The button's icon content.
+   * - **content** - Optional text content (only visible when shape is square).
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The button's base wrapper.
+   * - **icon** - The icon container.
+   * - **content** - The text content container.
+   */
+  "sl-float-button": DefineComponent<SlFloatButtonProps>;
+
   /**
    * Groups multiple float buttons together, with optional menu trigger.
    * ---
@@ -2972,23 +2995,11 @@ export type CustomElements = {
   "sl-float-button-group": DefineComponent<SlFloatButtonGroupProps>;
 
   /**
-   * A floating action button that stays fixed on the page.
+   * Formats a number as a human readable bytes value.
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **sl-click** - Emitted when the button is clicked.
-   *
-   * ### **Slots:**
-   *  - _default_ - The button's icon content.
-   * - **content** - Optional text content (only visible when shape is square).
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The button's base wrapper.
-   * - **icon** - The icon container.
-   * - **content** - The text content container.
    */
-  "sl-float-button": DefineComponent<SlFloatButtonProps>;
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
    * Formats a date/time using the specified locale and options.
@@ -2997,13 +3008,6 @@ export type CustomElements = {
    */
   "sl-format-date": DefineComponent<SlFormatDateProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
-
   /**
    * Formats a number using the specified locale and options.
    * ---
@@ -3026,25 +3030,6 @@ 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.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the icon button.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
-   * - **blur()** - Removes focus from the icon button.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-icon-button": DefineComponent<SlIconButtonProps>;
-
   /**
    * Compare visual differences between similar photos with a sliding panel.
    * ---
@@ -3071,6 +3056,25 @@ export type CustomElements = {
    */
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
+  /**
+   * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the icon button loses focus.
+   * - **sl-focus** - Emitted when the icon button gains focus.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the icon button.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
+   * - **blur()** - Removes focus from the icon button.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-icon-button": DefineComponent<SlIconButtonProps>;
+
   /**
    * Includes give you the power to embed external HTML files into the page.
    * ---
@@ -3234,6 +3238,27 @@ export type CustomElements = {
    */
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
+  /**
+   * 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>;
+
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
    * ---
@@ -3291,27 +3316,6 @@ export type CustomElements = {
    */
   "sl-option": DefineComponent<SlOptionProps>;
 
-  /**
-   * Nav items are the individual links or buttons within a navigation menu.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-nav-select** - Emitted when a nav item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The nav item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the nav item.
-   * - **suffix** - Used to append an icon or similar element to the nav item.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **prefix** - The prefix container.
-   * - **label** - The nav item label.
-   * - **suffix** - The suffix container.
-   */
-  "sl-nav-item": DefineComponent<SlNavItemProps>;
-
   /**
    *
    * ---
@@ -3347,28 +3351,6 @@ export type CustomElements = {
    */
   "sl-popup": DefineComponent<SlPopupProps>;
 
-  /**
-   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the ring.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
-   * - **--track-width** - The width of the track. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **label** - The progress ring label.
-   */
-  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
-
   /**
    * Progress bars are used to show the status of an ongoing operation.
    * ---
@@ -3400,6 +3382,28 @@ export type CustomElements = {
    */
   "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
+  /**
+   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the ring.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
+   * - **--track-width** - The width of the track. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **label** - The progress ring label.
+   */
+  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
+
   /**
    * Radios allow the user to select a single option from a group.
    * ---
@@ -3898,6 +3902,25 @@ export type CustomElements = {
    */
   "sl-table": DefineComponent<SlTableProps>;
 
+  /**
+   * Tags are used as labels to organize things or to indicate a selection.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-remove** - Emitted when the remove button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tag's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **content** - The tag's content.
+   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
+   * - **remove-button__base** - The remove button's exported `base` part.
+   */
+  "sl-tag": DefineComponent<SlTagProps>;
+
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---
@@ -3936,25 +3959,6 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
-  /**
-   * Tags are used as labels to organize things or to indicate a selection.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tag's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **content** - The tag's content.
-   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
-   * - **remove-button__base** - The remove button's exported `base` part.
-   */
-  "sl-tag": DefineComponent<SlTagProps>;
-
   /**
    * Think is used to display an AI model's thinking process with expandable/collapsible content.
    * ---
@@ -3990,6 +3994,33 @@ export type CustomElements = {
    */
   "sl-think": DefineComponent<SlThinkProps>;
 
+  /**
+   * ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.
+   * It renders a vertical list of nodes, each optionally with an icon, title, description,
+   * collapsible content, footer, and status indicator. Nodes are connected by a vertical line.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.
+   *
+   * ### **Methods:**
+   *  - **getExpandedKeys(): _string[]_** - Get the effective expanded keys
+   * - **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node
+   *
+   * ### **Slots:**
+   *  - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_
+   * - **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_
+   * - **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
+
   /**
    * 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),
@@ -4044,38 +4075,6 @@ export type CustomElements = {
    */
   "sl-thought-chain-node": DefineComponent<SlThoughtChainNodeProps>;
 
-  /**
-   * Tooltips display additional information based on a specific action.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the tooltip begins to show.
-   * - **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.
-   * - **sl-hide** - Emitted when the tooltip begins to hide.
-   * - **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the tooltip.
-   * - **hide()** - Hides the tooltip
-   *
-   * ### **Slots:**
-   *  - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
-   * - **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
-   *
-   * ### **CSS Properties:**
-   *  - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_
-   * - **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_
-   * - **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
-   * - **body** - The tooltip's body where its content is rendered.
-   */
-  "sl-tooltip": DefineComponent<SlTooltipProps>;
-
   /**
    * A time picker component that provides a time selection interface.
    * ---
@@ -4099,31 +4098,36 @@ export type CustomElements = {
   "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
   /**
-   * ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.
-   * It renders a vertical list of nodes, each optionally with an icon, title, description,
-   * collapsible content, footer, and status indicator. Nodes are connected by a vertical line.
+   * Tooltips display additional information based on a specific action.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.
+   *  - **sl-show** - Emitted when the tooltip begins to show.
+   * - **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.
+   * - **sl-hide** - Emitted when the tooltip begins to hide.
+   * - **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.
    *
    * ### **Methods:**
-   *  - **getExpandedKeys(): _string[]_** - Get the effective expanded keys
-   * - **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node
+   *  - **show()** - Shows the tooltip.
+   * - **hide()** - Hides the tooltip
    *
    * ### **Slots:**
-   *  - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).
+   *  - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+   * - **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
    *
    * ### **CSS Properties:**
-   *  - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_
-   * - **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_
-   * - **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_
+   *  - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_
+   * - **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_
+   * - **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+   * - **body** - The tooltip's body where its content is rendered.
    */
-  "sl-thought-chain": DefineComponent<SlThoughtChainProps>;
+  "sl-tooltip": DefineComponent<SlTooltipProps>;
 
   /**
    * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
@@ -4150,16 +4154,6 @@ 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).
    * ---
@@ -4205,6 +4199,16 @@ 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.
    * ---