@kdcloudjs/shoelace 1.0.28 → 1.0.30

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

@@ -2,16 +2,16 @@ import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
-import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
-import type { SlButton } from "../../components/button/button.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlButton } from "../../components/button/button.component.js";
+import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { SlCarousel } from "../../components/carousel/carousel.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";
@@ -24,57 +24,58 @@ import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
-import type { SlFormatDate } from "../../components/format-date/format-date.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 { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlImageComparer } from "../../components/image-comparer/image-comparer.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 { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
+import type { SlInclude } from "../../components/include/include.component.js";
 import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
-import type { SlNav } from "../../components/nav/nav.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 { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
-import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
-import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
+import type { SlPagination } from "../../components/pagination/pagination.component.js";
+import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
+import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioButton } from "../../components/radio-button/radio-button.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 { SlRange } from "../../components/range/range.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
-import type { SlRow } from "../../components/row/row.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
+import type { SlRow } from "../../components/row/row.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
-import type { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
+import type { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTag } from "../../components/tag/tag.component.js";
-import type { SlTextarea } from "../../components/textarea/textarea.component.js";
+import type { SlTabGroup } from "../../components/tab-group/tab-group.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 { 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 { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
+import type { SlTimepicker } from "../../components/timepicker/timepicker.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 = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -124,6 +125,22 @@ type SlAnimatedImageProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -175,22 +192,6 @@ type SlBadgeProps = {
   pulse?: SlBadge["pulse"];
 };
 
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -201,14 +202,16 @@ screen readers and other assistive devices to provide more context for users. */
   separatorSlot?: SlBreadcrumb["separatorSlot"];
 };
 
-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 SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
   /**  */
-  disableRole?: SlButtonGroup["disableRole"];
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
 type SlButtonProps = {
@@ -280,22 +283,16 @@ 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 SlBreadcrumbItemProps = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  href?: SlBreadcrumbItem["href"];
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  target?: SlBreadcrumbItem["target"];
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  rel?: SlBreadcrumbItem["rel"];
+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?: SlBreadcrumbItem["defaultSlot"];
+  defaultSlot?: SlButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: SlButtonGroup["disableRole"];
 };
 
-type SlCardProps = {};
-
-type SlCarouselItemProps = {};
-
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -330,6 +327,10 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
+type SlCardProps = {};
+
+type SlCarouselItemProps = {};
+
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -778,6 +779,15 @@ components that use a dropdown internally. */
   "onsl-after-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
@@ -807,15 +817,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"];
@@ -839,24 +840,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"];
@@ -884,6 +867,24 @@ that describes what the icon button does. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
+type SlIconProps = {
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  name?: SlIcon["name"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: SlIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: SlIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: SlIcon["library"];
+
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlImageComparerProps = {
   /** The position of the divider as a percentage. */
   position?: SlImageComparer["position"];
@@ -895,22 +896,6 @@ type SlImageComparerProps = {
   "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. */
-  src?: SlInclude["src"];
-  /** The fetch mode to use. */
-  mode?: SlInclude["mode"];
-  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
-code and can result in XSS attacks. */
-  "allow-scripts"?: SlInclude["allowScripts"];
-
-  /** Emitted when the included file is loaded. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the included file fails to load due to an error. */
-  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
-};
-
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -1017,7 +1002,21 @@ type SlMenuProps = {
   "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
 };
 
-type SlMenuLabelProps = {};
+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. */
+  src?: SlInclude["src"];
+  /** The fetch mode to use. */
+  mode?: SlInclude["mode"];
+  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  "allow-scripts"?: SlInclude["allowScripts"];
+
+  /** Emitted when the included file is loaded. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the included file fails to load due to an error. */
+  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
+};
 
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
@@ -1036,6 +1035,27 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
+type SlMenuLabelProps = {};
+
+type SlMutationObserverProps = {
+  /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
+`attr="class id title"`. To watch all attributes, use `*`. */
+  attr?: SlMutationObserver["attr"];
+  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
+  "attr-old-value"?: SlMutationObserver["attrOldValue"];
+  /** Watches for changes to the character data contained within the node. */
+  "char-data"?: SlMutationObserver["charData"];
+  /** Indicates whether or not the previous value of the node's text should be recorded. */
+  "char-data-old-value"?: SlMutationObserver["charDataOldValue"];
+  /** Watches for the addition or removal of new child nodes. */
+  "child-list"?: SlMutationObserver["childList"];
+  /** Disables the observer. */
+  disabled?: SlMutationObserver["disabled"];
+
+  /** Emitted when a mutation occurs. */
+  "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
+};
+
 type SlNavProps = {
   /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
@@ -1091,34 +1111,6 @@ type SlNavProps = {
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
-type SlMutationObserverProps = {
-  /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
-`attr="class id title"`. To watch all attributes, use `*`. */
-  attr?: SlMutationObserver["attr"];
-  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
-  "attr-old-value"?: SlMutationObserver["attrOldValue"];
-  /** Watches for changes to the character data contained within the node. */
-  "char-data"?: SlMutationObserver["charData"];
-  /** Indicates whether or not the previous value of the node's text should be recorded. */
-  "char-data-old-value"?: SlMutationObserver["charDataOldValue"];
-  /** Watches for the addition or removal of new child nodes. */
-  "child-list"?: SlMutationObserver["childList"];
-  /** Disables the observer. */
-  disabled?: SlMutationObserver["disabled"];
-
-  /** Emitted when a mutation occurs. */
-  "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 SlNavItemProps = {
   /** A stable key used by `sl-nav` to track selection. */
   key?: SlNavItem["key"];
@@ -1156,13 +1148,22 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   "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"];
+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 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. */
@@ -1205,6 +1206,32 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   "onsl-after-hide"?: (e: CustomEvent<never>) => 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
+multiple values. */
+  value?: SlOption["value"];
+  /** Draws the option in a disabled state, preventing selection. */
+  disabled?: SlOption["disabled"];
+  /**  */
+  defaultSlot?: SlOption["defaultSlot"];
+  /**  */
+  current?: SlOption["current"];
+  /**  */
+  selected?: SlOption["selected"];
+  /**  */
+  hasHover?: SlOption["hasHover"];
+};
+
+type SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
+};
+
 type SlPaginationProps = {
   /**  */
   currentPage?: SlPagination["currentPage"];
@@ -1226,23 +1253,6 @@ type SlPaginationProps = {
   defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
-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
-multiple values. */
-  value?: SlOption["value"];
-  /** Draws the option in a disabled state, preventing selection. */
-  disabled?: SlOption["disabled"];
-  /**  */
-  defaultSlot?: SlOption["defaultSlot"];
-  /**  */
-  current?: SlOption["current"];
-  /**  */
-  selected?: SlOption["selected"];
-  /**  */
-  hasHover?: SlOption["hasHover"];
-};
-
 type SlPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
 element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
@@ -1318,15 +1328,6 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
-};
-
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1357,22 +1358,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 SlRadioGroupProps = {
   /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
 instead. */
@@ -1409,6 +1394,22 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+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"];
@@ -1429,6 +1430,46 @@ this attribute can typically be omitted. */
   "onsl-focus"?: (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
+a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
+  date?: SlRelativeTime["date"];
+  /** The formatting style to use. */
+  format?: SlRelativeTime["format"];
+  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
+"1 day ago" and "in 1 day" will be shown. */
+  numeric?: SlRelativeTime["numeric"];
+  /** Keep the displayed value up to date as time passes. */
+  sync?: SlRelativeTime["sync"];
+};
+
 type SlRangeProps = {
   /**  */
   title?: SlRange["title"];
@@ -1479,46 +1520,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
-a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
-  date?: SlRelativeTime["date"];
-  /** The formatting style to use. */
-  format?: SlRelativeTime["format"];
-  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
-"1 day ago" and "in 1 day" will be shown. */
-  numeric?: SlRelativeTime["numeric"];
-  /** Keep the displayed value up to date as time passes. */
-  sync?: SlRelativeTime["sync"];
-};
-
 type SlResizeObserverProps = {
   /** Disables the observer. */
   disabled?: SlResizeObserver["disabled"];
@@ -1527,17 +1528,6 @@ type SlResizeObserverProps = {
   "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
-type SlRowProps = {
-  /** Spacing between columns, can be a number or responsive object */
-  gutter?: SlRow["gutter"];
-  /** Vertical alignment of columns */
-  align?: SlRow["align"];
-  /** Horizontal arrangement of columns */
-  justify?: SlRow["justify"];
-  /** Whether to wrap columns */
-  wrap?: SlRow["wrap"];
-};
-
 type SlScreenProps = {
   /** The options for the GridStack instance. */
   options?: SlScreen["options"];
@@ -1553,6 +1543,17 @@ 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 SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -1644,13 +1645,13 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSpinnerProps = {};
-
 type SlSkeletonProps = {
   /** Determines which effect the skeleton will use. */
   effect?: SlSkeleton["effect"];
 };
 
+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. */
@@ -1732,6 +1733,13 @@ type SlTabProps = {
   "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 SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -1756,101 +1764,7 @@ manual, the tab will receive focus but will not show until the user presses spac
   "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 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"];
-  /** The name of the textarea, submitted as a name/value pair with form data. */
-  name?: SlTextarea["name"];
-  /** The current value of the textarea, submitted as a name/value pair with form data. */
-  value?: SlTextarea["value"];
-  /** The textarea's size. */
-  size?: SlTextarea["size"];
-  /** Draws a filled textarea. */
-  filled?: SlTextarea["filled"];
-  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlTextarea["label"];
-  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlTextarea["helpText"];
-  /** Placeholder text to show as a hint when the input is empty. */
-  placeholder?: SlTextarea["placeholder"];
-  /** The number of rows to display by default. */
-  rows?: SlTextarea["rows"];
-  /** Controls how the textarea can be resized. */
-  resize?: SlTextarea["resize"];
-  /** Disables the textarea. */
-  disabled?: SlTextarea["disabled"];
-  /** Makes the textarea readonly. */
-  readonly?: SlTextarea["readonly"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlTextarea["form"];
-  /** Makes the textarea a required field. */
-  required?: SlTextarea["required"];
-  /** The minimum length of input that will be considered valid. */
-  minlength?: SlTextarea["minlength"];
-  /** The maximum length of input that will be considered valid. */
-  maxlength?: SlTextarea["maxlength"];
-  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
-  autocapitalize?: SlTextarea["autocapitalize"];
-  /** Indicates whether the browser's autocorrect feature is on or off. */
-  autocorrect?: SlTextarea["autocorrect"];
-  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
-  autocomplete?: SlTextarea["autocomplete"];
-  /** Indicates that the input should receive focus on page load. */
-  autofocus?: SlTextarea["autofocus"];
-  /** Used to customize the label or icon of the Enter key on virtual keyboards. */
-  enterkeyhint?: SlTextarea["enterkeyhint"];
-  /** Enables spell checking on the textarea. */
-  spellcheck?: SlTextarea["spellcheck"];
-  /** Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
-keyboard on supportive devices. */
-  inputmode?: SlTextarea["inputmode"];
-  /**  */
-  input?: SlTextarea["input"];
-  /**  */
-  sizeAdjuster?: SlTextarea["sizeAdjuster"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: SlTextarea["defaultValue"];
-  /** Gets the validity state object */
-  validity?: SlTextarea["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlTextarea["validationMessage"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when an alteration to the control's value is committed by the user. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
-type SlTableProps = {
+type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
   /**  */
@@ -1933,6 +1847,93 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlTextareaProps = {
+  /**  */
+  title?: SlTextarea["title"];
+  /** The name of the textarea, submitted as a name/value pair with form data. */
+  name?: SlTextarea["name"];
+  /** The current value of the textarea, submitted as a name/value pair with form data. */
+  value?: SlTextarea["value"];
+  /** The textarea's size. */
+  size?: SlTextarea["size"];
+  /** Draws a filled textarea. */
+  filled?: SlTextarea["filled"];
+  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlTextarea["label"];
+  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlTextarea["helpText"];
+  /** Placeholder text to show as a hint when the input is empty. */
+  placeholder?: SlTextarea["placeholder"];
+  /** The number of rows to display by default. */
+  rows?: SlTextarea["rows"];
+  /** Controls how the textarea can be resized. */
+  resize?: SlTextarea["resize"];
+  /** Disables the textarea. */
+  disabled?: SlTextarea["disabled"];
+  /** Makes the textarea readonly. */
+  readonly?: SlTextarea["readonly"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlTextarea["form"];
+  /** Makes the textarea a required field. */
+  required?: SlTextarea["required"];
+  /** The minimum length of input that will be considered valid. */
+  minlength?: SlTextarea["minlength"];
+  /** The maximum length of input that will be considered valid. */
+  maxlength?: SlTextarea["maxlength"];
+  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
+  autocapitalize?: SlTextarea["autocapitalize"];
+  /** Indicates whether the browser's autocorrect feature is on or off. */
+  autocorrect?: SlTextarea["autocorrect"];
+  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
+  autocomplete?: SlTextarea["autocomplete"];
+  /** Indicates that the input should receive focus on page load. */
+  autofocus?: SlTextarea["autofocus"];
+  /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+  enterkeyhint?: SlTextarea["enterkeyhint"];
+  /** Enables spell checking on the textarea. */
+  spellcheck?: SlTextarea["spellcheck"];
+  /** Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+keyboard on supportive devices. */
+  inputmode?: SlTextarea["inputmode"];
+  /**  */
+  input?: SlTextarea["input"];
+  /**  */
+  sizeAdjuster?: SlTextarea["sizeAdjuster"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: SlTextarea["defaultValue"];
+  /** Gets the validity state object */
+  validity?: SlTextarea["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlTextarea["validationMessage"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an alteration to the control's value is committed by the user. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+type 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.
@@ -2040,27 +2041,6 @@ 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"];
@@ -2099,6 +2079,27 @@ 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 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. */
@@ -2113,8 +2114,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"];
@@ -2156,6 +2155,27 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
+type SlXMarkdownProps = {
+  /** Markdown content to render. */
+  content?: SlXMarkdown["content"];
+  /** Theme name for styling (`light`, `dark`, or custom class name). */
+  theme?: SlXMarkdown["theme"];
+  /** Open links with `target=\"_blank\"` and `rel=\"noopener noreferrer\"`. */
+  "open-links-in-new-tab"?: SlXMarkdown["openLinksInNewTab"];
+  /** Escapes raw HTML tokens when enabled. */
+  "escape-raw-html"?: SlXMarkdown["escapeRawHtml"];
+  /** Enables debug output in development environments. */
+  debug?: SlXMarkdown["debug"];
+  /** Map markdown node types to custom element tag names. */
+  components?: SlXMarkdown["components"];
+  /** Markdown pipeline plugins. */
+  plugins?: SlXMarkdown["plugins"];
+  /** Streaming configuration. Set `false` to disable streaming mode. */
+  streaming?: SlXMarkdown["streaming"];
+};
+
 export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
@@ -2210,6 +2230,28 @@ export type CustomElements = {
    */
   "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
+  /**
+   * 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:**
+   *  - **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-avatar": DefineComponent<SlAvatarProps>;
+
   /**
    * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
    * ---
@@ -2242,28 +2284,6 @@ export type CustomElements = {
    */
   "sl-badge": DefineComponent<SlBadgeProps>;
 
-  /**
-   * 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:**
-   *  - **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-avatar": DefineComponent<SlAvatarProps>;
-
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -2279,17 +2299,24 @@ export type CustomElements = {
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
   /**
-   * Button groups can be used to group related buttons into sections.
+   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *  - _default_ - The breadcrumb item's label.
+   * - **prefix** - An optional prefix, usually an icon or icon button.
+   * - **suffix** - An optional suffix, usually an icon or icon button.
+   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **label** - The breadcrumb item's label.
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   * - **separator** - The container that wraps the separator.
    */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
+  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -2316,73 +2343,27 @@ export type CustomElements = {
    * - **suffix** - A presentational suffix icon or similar element.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The button's label.
-   * - **suffix** - The container that wraps the suffix.
-   * - **caret** - The button's caret icon, an `<sl-icon>` element.
-   * - **spinner** - The spinner that shows when the button is in the loading state.
-   */
-  "sl-button": DefineComponent<SlButtonProps>;
-
-  /**
-   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The breadcrumb item's label.
-   * - **prefix** - An optional prefix, usually an icon or icon button.
-   * - **suffix** - An optional suffix, usually an icon or icon button.
-   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **label** - The breadcrumb item's label.
-   * - **prefix** - The container that wraps the prefix.
-   * - **suffix** - The container that wraps the suffix.
-   * - **separator** - The container that wraps the separator.
-   */
-  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
-
-  /**
-   * Cards can be used to group related subjects in a container.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The card's main content.
-   * - **header** - An optional header for the card.
-   * - **footer** - An optional footer for the card.
-   * - **image** - An optional image to render at the start of the card.
-   *
-   * ### **CSS Properties:**
-   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
-   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
-   * - **--border-width** - The width of the card's borders. _(default: undefined)_
-   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **image** - The container that wraps the card's image.
-   * - **header** - The container that wraps the card's header.
-   * - **body** - The container that wraps the card's main content.
-   * - **footer** - The container that wraps the card's footer.
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The button's label.
+   * - **suffix** - The container that wraps the suffix.
+   * - **caret** - The button's caret icon, an `<sl-icon>` element.
+   * - **spinner** - The spinner that shows when the button is in the loading state.
    */
-  "sl-card": DefineComponent<SlCardProps>;
+  "sl-button": DefineComponent<SlButtonProps>;
 
   /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * Button groups can be used to group related buttons into sections.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The carousel item's content..
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
    *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
@@ -2420,6 +2401,45 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
+  /**
+   * Cards can be used to group related subjects in a container.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The card's main content.
+   * - **header** - An optional header for the card.
+   * - **footer** - An optional footer for the card.
+   * - **image** - An optional image to render at the start of the card.
+   *
+   * ### **CSS Properties:**
+   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
+   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
+   * - **--border-width** - The width of the card's borders. _(default: undefined)_
+   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **image** - The container that wraps the card's image.
+   * - **header** - The container that wraps the card's header.
+   * - **body** - The container that wraps the card's main content.
+   * - **footer** - The container that wraps the card's footer.
+   */
+  "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>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2601,6 +2621,8 @@ export type CustomElements = {
    * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
    * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
    * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
+   * - **focus(options: _FocusOptions_)** - 聚焦到开始日期输入框并打开面板
+   * - **blur()** - 移除焦点并关闭面板
    */
   "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
 
@@ -2761,13 +2783,6 @@ export type CustomElements = {
    */
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
-  /**
-   * Formats a date/time using the specified locale and options.
-   * ---
-   *
-   */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
-
   /**
    * Formats a number as a human readable bytes value.
    * ---
@@ -2776,26 +2791,18 @@ export type CustomElements = {
   "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
 
   /**
-   * Icons are symbols that can be used to represent various options within an application.
+   * Formats a number using the specified locale and options.
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
-   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
-   *
-   * ### **CSS Parts:**
-   *  - **svg** - The internal SVG element.
-   * - **use** - The <use> element generated when using `spriteSheet: true`
    */
-  "sl-icon": DefineComponent<SlIconProps>;
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
@@ -2816,6 +2823,21 @@ export type CustomElements = {
    */
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
+  /**
+   * Icons are symbols that can be used to represent various options within an application.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+   *
+   * ### **CSS Parts:**
+   *  - **svg** - The internal SVG element.
+   * - **use** - The <use> element generated when using `spriteSheet: true`
+   */
+  "sl-icon": DefineComponent<SlIconProps>;
+
   /**
    * Compare visual differences between similar photos with a sliding panel.
    * ---
@@ -2842,17 +2864,6 @@ export type CustomElements = {
    */
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
-  /**
-   * Includes give you the power to embed external HTML files into the page.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the included file is loaded.
-   * - **sl-error** - Emitted when the included file fails to load due to an error.
-   */
-  "sl-include": DefineComponent<SlIncludeProps>;
-
   /**
    * Inputs collect data from the user.
    * ---
@@ -2917,17 +2928,15 @@ export type CustomElements = {
   "sl-menu": DefineComponent<SlMenuProps>;
 
   /**
-   * Menu labels are used to describe a group of menu items.
+   * Includes give you the power to embed external HTML files into the page.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the included file is loaded.
+   * - **sl-error** - Emitted when the included file fails to load due to an error.
    */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
+  "sl-include": DefineComponent<SlIncludeProps>;
 
   /**
    * Menu items provide options for the user to pick from in a menu.
@@ -2959,22 +2968,17 @@ export type CustomElements = {
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
+   * Menu labels are used to describe a group of menu 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 menu label's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-nav": DefineComponent<SlNavProps>;
+  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
    * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
@@ -2990,20 +2994,22 @@ 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>;
 
   /**
    * Nav items are the individual links or buttons within a navigation menu.
@@ -3026,6 +3032,22 @@ export type CustomElements = {
    */
   "sl-nav-item": DefineComponent<SlNavItemProps>;
 
+  /**
+   * Nav groups are used to group related nav items.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav items within the group.
+   * - **title** - The nav group's title.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **title** - The nav group title.
+   * - **body** - The nav group body.
+   */
+  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
    * ---
@@ -3061,13 +3083,6 @@ export type CustomElements = {
    */
   "sl-nav-submenu": DefineComponent<SlNavSubmenuProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-pagination": DefineComponent<SlPaginationProps>;
-
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
@@ -3090,6 +3105,34 @@ export type CustomElements = {
    */
   "sl-option": DefineComponent<SlOptionProps>;
 
+  /**
+   * Progress bars are used to show the status of an ongoing operation.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the progress indicator.
+   *
+   * ### **CSS Properties:**
+   *  - **--height** - The progress bar's height. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
+   */
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
    * ---
@@ -3118,27 +3161,6 @@ export type CustomElements = {
    */
   "sl-popup": DefineComponent<SlPopupProps>;
 
-  /**
-   * Progress bars are used to show the status of an ongoing operation.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
-   *
-   * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
-   */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
-
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
@@ -3171,27 +3193,6 @@ export type CustomElements = {
    */
   "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
-  /**
-   * Radios allow the user to select a single option from a group.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-focus** - Emitted when the control gains focus.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The circular container that wraps the radio's checked state.
-   * - **control--checked** - The radio control when the radio is checked.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the radio's label.
-   */
-  "sl-radio": DefineComponent<SlRadioProps>;
-
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
@@ -3215,14 +3216,35 @@ export type CustomElements = {
    * - **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The input's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **button-group** - The button group that wraps radio buttons.
-   * - **button-group__base** - The button group's `base` part.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The input's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **button-group** - The button group that wraps radio buttons.
+   * - **button-group__base** - The button group's `base` part.
+   */
+  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
+
+  /**
+   * Radios allow the user to select a single option from a group.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-focus** - Emitted when the control gains focus.
+   *
+   * ### **Slots:**
+   *  - _default_ - The radio's label.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The circular container that wraps the radio's checked state.
+   * - **control--checked** - The radio control when the radio is checked.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the radio's label.
    */
-  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
+  "sl-radio": DefineComponent<SlRadioProps>;
 
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
@@ -3252,6 +3274,37 @@ export type CustomElements = {
    */
   "sl-radio-button": DefineComponent<SlRadioButtonProps>;
 
+  /**
+   * Ratings give users a way to quickly view and provide feedback.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the rating's value changes.
+   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
+   * - **blur()** - Removes focus from the rating.
+   *
+   * ### **CSS Properties:**
+   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
+   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
+   * - **--symbol-size** - The size of symbols. _(default: undefined)_
+   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-rating": DefineComponent<SlRatingProps>;
+
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
   /**
    * Ranges allow the user to select a single value within a given range using a slider.
    * ---
@@ -3297,37 +3350,6 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
-  /**
-   * Ratings give users a way to quickly view and provide feedback.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the rating's value changes.
-   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
-   * - **blur()** - Removes focus from the rating.
-   *
-   * ### **CSS Properties:**
-   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
-   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
-   * - **--symbol-size** - The size of symbols. _(default: undefined)_
-   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-rating": DefineComponent<SlRatingProps>;
-
-  /**
-   * Outputs a localized time phrase relative to the current date and time.
-   * ---
-   *
-   */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
-
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
@@ -3342,31 +3364,31 @@ export type CustomElements = {
   "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
   /**
-   * Row component for grid layout system.
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The default slot for Col components.
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **base** - The grid layout content.
    */
-  "sl-row": DefineComponent<SlRowProps>;
+  "sl-screen": DefineComponent<SlScreenProps>;
 
   /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * Row component for grid layout system.
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   * ### **Slots:**
+   *  - _default_ - The default slot for Col components.
    *
    * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
+   *  - **base** - The component's base wrapper.
    */
-  "sl-screen": DefineComponent<SlScreenProps>;
+  "sl-row": DefineComponent<SlRowProps>;
 
   /**
    * Selects allow you to choose items from a menu of predefined options.
@@ -3426,36 +3448,36 @@ export type CustomElements = {
   "sl-select": DefineComponent<SlSelectProps>;
 
   /**
-   * Spinners are used to show the progress of an indeterminate operation.
+   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
    * ---
    *
    *
    * ### **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)_
+   *  - **--border-radius** - The skeleton's border radius. _(default: undefined)_
+   * - **--color** - The color of the skeleton. _(default: undefined)_
+   * - **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
    */
-  "sl-spinner": DefineComponent<SlSpinnerProps>;
+  "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
-   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
+   * Spinners are used to show the progress of an indeterminate operation.
    * ---
    *
    *
    * ### **CSS Properties:**
-   *  - **--border-radius** - The skeleton's border radius. _(default: undefined)_
-   * - **--color** - The color of the skeleton. _(default: undefined)_
-   * - **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_
+   *  - **--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.
-   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
    */
-  "sl-skeleton": DefineComponent<SlSkeletonProps>;
+  "sl-spinner": DefineComponent<SlSpinnerProps>;
 
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
@@ -3541,6 +3563,22 @@ export type CustomElements = {
    */
   "sl-tab": DefineComponent<SlTabProps>;
 
+  /**
+   * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab panel's content.
+   *
+   * ### **CSS Properties:**
+   *  - **--padding** - The tab panel's padding. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
+
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -3576,39 +3614,14 @@ export type CustomElements = {
   "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
   /**
-   * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab panel's content.
-   *
-   * ### **CSS Properties:**
-   *  - **--padding** - The tab panel's padding. _(default: undefined)_
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
-
-  /**
-   * Tags are used as labels to organize things or to indicate a selection.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tag's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **content** - The tag's content.
-   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
-   * - **remove-button__base** - The remove button's exported `base` part.
+   *  - **change**
    */
-  "sl-tag": DefineComponent<SlTagProps>;
+  "sl-table": DefineComponent<SlTableProps>;
 
   /**
    * Textareas collect data from the user and allow multiple lines of text.
@@ -3649,14 +3662,23 @@ export type CustomElements = {
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
   /**
-   *
+   * Tags are used as labels to organize things or to indicate a selection.
    * ---
    *
    *
    * ### **Events:**
-   *  - **change**
+   *  - **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-table": DefineComponent<SlTableProps>;
+  "sl-tag": DefineComponent<SlTagProps>;
 
   /**
    * Think is used to display an AI model's thinking process with expandable/collapsible content.
@@ -3774,28 +3796,6 @@ export type CustomElements = {
    */
   "sl-thought-chain-node": DefineComponent<SlThoughtChainNodeProps>;
 
-  /**
-   * A time picker component that provides a time selection interface.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the control's value changes.
-   * - **sl-input** - Emitted when the control's value changes.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-clear** - Emitted when the clear button is activated.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Slots:**
-   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - The input's prefix, to prepend to the input.
-   * - **suffix** - The input's suffix, to append to the input.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.
-   */
-  "sl-timepicker": DefineComponent<SlTimepickerProps>;
-
   /**
    * Tooltips display additional information based on a specific action.
    * ---
@@ -3828,6 +3828,28 @@ export type CustomElements = {
    */
   "sl-tooltip": DefineComponent<SlTooltipProps>;
 
+  /**
+   * A time picker component that provides a time selection interface.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-input** - Emitted when the control's value changes.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-clear** - Emitted when the clear button is activated.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - The input's prefix, to prepend to the input.
+   * - **suffix** - The input's suffix, to append to the input.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.
+   */
+  "sl-timepicker": DefineComponent<SlTimepickerProps>;
+
   /**
    * 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.
    * ---
@@ -3853,16 +3875,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).
    * ---
@@ -3907,6 +3919,47 @@ export type CustomElements = {
    * - **checkbox__label** - The checkbox's exported `label` part.
    */
   "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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Not used. Content is rendered from the `content` property only.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **body** - The markdown body container.
+   * - **paragraph** - Paragraph content.
+   * - **heading** - Heading elements.
+   * - **link** - Link elements.
+   * - **blockquote** - Blockquotes and chat enhanced containers.
+   * - **list** - List containers.
+   * - **list-item** - List items.
+   * - **table** - Table elements.
+   * - **table-head** - Table header section.
+   * - **table-body** - Table body section.
+   * - **table-row** - Table rows.
+   * - **table-cell** - Table header/data cells.
+   * - **code-inline** - Inline code nodes.
+   * - **code-block** - Code block wrapper.
+   * - **code-block-header** - Code block language header.
+   * - **code-block-body** - Code block body.
+   * - **tail** - Streaming tail indicator.
+   * - **incomplete** - Incomplete markdown placeholder nodes.
+   */
+  "sl-x-markdown": DefineComponent<SlXMarkdownProps>;
 };
 
 declare module "vue" {