@kdcloudjs/shoelace 1.0.19 → 1.0.21

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

@@ -1,74 +1,74 @@
 import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
-import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlAnimation } from "../../components/animation/animation.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
-import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
-import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
-import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
+import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
-import type { SlDaterange } from "../../components/daterange/daterange.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.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 { SlDaterange } from "../../components/daterange/daterange.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
-import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
-import type { SlDivider } from "../../components/divider/divider.component.js";
 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 { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
-import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
-import type { SlIcon } from "../../components/icon/icon.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 { SlInclude } from "../../components/include/include.component.js";
-import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
-import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
+import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
+import type { 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 { SlNav } from "../../components/nav/nav.component.js";
+import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
+import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
-import type { SlRange } from "../../components/range/range.component.js";
-import type { SlPagination } from "../../components/pagination/pagination.component.js";
+import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
-import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
+import type { SlRange } from "../../components/range/range.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
+import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
+import type { SlSelect } from "../../components/select/select.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 { SlSelect } from "../../components/select/select.component.js";
 import type { SlSwitch } from "../../components/switch/switch.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 { SlTab } from "../../components/tab/tab.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTextarea } from "../../components/textarea/textarea.component.js";
+import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
-import type { SlTab } from "../../components/tab/tab.component.js";
-import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
+import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
+import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -99,31 +99,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
-type 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 SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -166,6 +141,22 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlAnimatedImageProps = {
   /** The path to the image to load. */
   src?: SlAnimatedImage["src"];
@@ -185,6 +176,15 @@ type SlAnimatedImageProps = {
   "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 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. */
@@ -197,6 +197,16 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -276,20 +286,42 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
-type SlBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: SlBreadcrumb["label"];
+type SlCardProps = {};
+
+type SlCarouselProps = {
+  /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
+  loop?: SlCarousel["loop"];
+  /** When set, show the carousel's navigation. */
+  navigation?: SlCarousel["navigation"];
+  /** When set, show the carousel's pagination indicators. */
+  pagination?: SlCarousel["pagination"];
+  /** When set, the slides will scroll automatically when the user is not interacting with them. */
+  autoplay?: SlCarousel["autoplay"];
+  /** Specifies the amount of time, in milliseconds, between each automatic scroll. */
+  "autoplay-interval"?: SlCarousel["autoplayInterval"];
+  /** Specifies how many slides should be shown at a given time. */
+  "slides-per-page"?: SlCarousel["slidesPerPage"];
+  /** Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
+greater than one. It can't be higher than `slides-per-page`. */
+  "slides-per-move"?: SlCarousel["slidesPerMove"];
+  /** Specifies the orientation in which the carousel will lay out. */
+  orientation?: SlCarousel["orientation"];
+  /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
+  "mouse-dragging"?: SlCarousel["mouseDragging"];
   /**  */
-  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  scrollContainer?: SlCarousel["scrollContainer"];
   /**  */
-  separatorSlot?: SlBreadcrumb["separatorSlot"];
+  paginationContainer?: SlCarousel["paginationContainer"];
+  /**  */
+  activeSlide?: SlCarousel["activeSlide"];
+  /**  */
+  scrolling?: SlCarousel["scrolling"];
+  /**  */
+  dragging?: SlCarousel["dragging"];
+  /** Emitted when the active slide changes. */
+  "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
-type SlCarouselItemProps = {};
-
-type SlCardProps = {};
-
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -334,82 +366,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCopyButtonProps = {
-  /** The text value to copy. */
-  value?: SlCopyButton["value"];
-  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
-present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
-attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
-append a dot and the property name, e.g. `from="el.value"`. */
-  from?: SlCopyButton["from"];
-  /** Disables the copy button. */
-  disabled?: SlCopyButton["disabled"];
-  /** A custom label to show in the tooltip. */
-  "copy-label"?: SlCopyButton["copyLabel"];
-  /** A custom label to show in the tooltip after copying. */
-  "success-label"?: SlCopyButton["successLabel"];
-  /** A custom label to show in the tooltip when a copy error occurs. */
-  "error-label"?: SlCopyButton["errorLabel"];
-  /** The length of time to show feedback before restoring the default trigger. */
-  "feedback-duration"?: SlCopyButton["feedbackDuration"];
-  /** The preferred placement of the tooltip. */
-  "tooltip-placement"?: SlCopyButton["tooltipPlacement"];
-  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-scenarios. */
-  hoist?: SlCopyButton["hoist"];
-  /**  */
-  copyIcon?: SlCopyButton["copyIcon"];
-  /**  */
-  successIcon?: SlCopyButton["successIcon"];
-  /**  */
-  errorIcon?: SlCopyButton["errorIcon"];
-  /**  */
-  tooltip?: SlCopyButton["tooltip"];
-  /**  */
-  isCopying?: SlCopyButton["isCopying"];
-  /**  */
-  status?: SlCopyButton["status"];
-  /** Emitted when the data has been copied. */
-  "onsl-copy"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the data could not be copied. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
-type SlCarouselProps = {
-  /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
-  loop?: SlCarousel["loop"];
-  /** When set, show the carousel's navigation. */
-  navigation?: SlCarousel["navigation"];
-  /** When set, show the carousel's pagination indicators. */
-  pagination?: SlCarousel["pagination"];
-  /** When set, the slides will scroll automatically when the user is not interacting with them. */
-  autoplay?: SlCarousel["autoplay"];
-  /** Specifies the amount of time, in milliseconds, between each automatic scroll. */
-  "autoplay-interval"?: SlCarousel["autoplayInterval"];
-  /** Specifies how many slides should be shown at a given time. */
-  "slides-per-page"?: SlCarousel["slidesPerPage"];
-  /** Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
-greater than one. It can't be higher than `slides-per-page`. */
-  "slides-per-move"?: SlCarousel["slidesPerMove"];
-  /** Specifies the orientation in which the carousel will lay out. */
-  orientation?: SlCarousel["orientation"];
-  /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
-  "mouse-dragging"?: SlCarousel["mouseDragging"];
-  /**  */
-  scrollContainer?: SlCarousel["scrollContainer"];
-  /**  */
-  paginationContainer?: SlCarousel["paginationContainer"];
-  /**  */
-  activeSlide?: SlCarousel["activeSlide"];
-  /**  */
-  scrolling?: SlCarousel["scrolling"];
-  /**  */
-  dragging?: SlCarousel["dragging"];
-  /** Emitted when the active slide changes. */
-  "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
-};
-
 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
@@ -476,38 +432,129 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDaterangeProps = {
-  /** The name of the input, submitted as a name/value pair with form data. */
-  name?: SlDaterange["name"];
-  /** The current value of the input, submitted as a name/value pair with form data. */
-  value?: SlDaterange["value"];
-  /** The input's size. */
-  size?: SlDaterange["size"];
-  /** Draws a filled input. */
-  filled?: SlDaterange["filled"];
-  /** Draws a pill-style input with rounded edges. */
-  pill?: SlDaterange["pill"];
-  /** The input's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlDaterange["label"];
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlDaterange["helpText"];
-  /** Adds a clear button when the input is not empty. */
-  clearable?: SlDaterange["clearable"];
-  /** Disables the input. */
-  disabled?: SlDaterange["disabled"];
-  /** Placeholder text to show as a hint for the start date. */
-  "start-placeholder"?: SlDaterange["startPlaceholder"];
-  /** Placeholder text to show as a hint for the end date. */
-  "end-placeholder"?: SlDaterange["endPlaceholder"];
-  /** Makes the input readonly. */
-  readonly?: SlDaterange["readonly"];
-  /** Makes the input a required field. */
-  required?: SlDaterange["required"];
-  /**  */
-  type?: SlDaterange["type"];
-  /** The minimum allowed date (in YYYY-MM-DD format). */
-  min?: SlDaterange["min"];
-  /** The maximum allowed date (in YYYY-MM-DD format). */
+type SlCarouselItemProps = {};
+
+type SlCopyButtonProps = {
+  /** The text value to copy. */
+  value?: SlCopyButton["value"];
+  /** An id that references an element in the same document from which data will be copied. If both this and `value` are
+present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an
+attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property,
+append a dot and the property name, e.g. `from="el.value"`. */
+  from?: SlCopyButton["from"];
+  /** Disables the copy button. */
+  disabled?: SlCopyButton["disabled"];
+  /** A custom label to show in the tooltip. */
+  "copy-label"?: SlCopyButton["copyLabel"];
+  /** A custom label to show in the tooltip after copying. */
+  "success-label"?: SlCopyButton["successLabel"];
+  /** A custom label to show in the tooltip when a copy error occurs. */
+  "error-label"?: SlCopyButton["errorLabel"];
+  /** The length of time to show feedback before restoring the default trigger. */
+  "feedback-duration"?: SlCopyButton["feedbackDuration"];
+  /** The preferred placement of the tooltip. */
+  "tooltip-placement"?: SlCopyButton["tooltipPlacement"];
+  /** Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios. */
+  hoist?: SlCopyButton["hoist"];
+  /**  */
+  copyIcon?: SlCopyButton["copyIcon"];
+  /**  */
+  successIcon?: SlCopyButton["successIcon"];
+  /**  */
+  errorIcon?: SlCopyButton["errorIcon"];
+  /**  */
+  tooltip?: SlCopyButton["tooltip"];
+  /**  */
+  isCopying?: SlCopyButton["isCopying"];
+  /**  */
+  status?: SlCopyButton["status"];
+  /** Emitted when the data has been copied. */
+  "onsl-copy"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the data could not be copied. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlDatePanelProps = {
+  /**  */
+  open?: SlDatePanel["open"];
+  /**  */
+  value?: SlDatePanel["value"];
+  /**  */
+  type?: SlDatePanel["type"];
+  /**  */
+  min?: SlDatePanel["min"];
+  /**  */
+  max?: SlDatePanel["max"];
+  /**  */
+  format?: SlDatePanel["format"];
+  /**  */
+  calendar?: SlDatePanel["calendar"];
+  /**  */
+  yearColumn?: SlDatePanel["yearColumn"];
+  /**  */
+  monthColumn?: SlDatePanel["monthColumn"];
+  /**  */
+  hourColumn?: SlDatePanel["hourColumn"];
+  /**  */
+  minuteColumn?: SlDatePanel["minuteColumn"];
+  /**  */
+  secondColumn?: SlDatePanel["secondColumn"];
+  /**  */
+  "onsl-cancel"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onsl-clear"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onsl-confirm"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type SlDatepickerProps = {
+  /**  */
+  type?: SlDatepicker["type"];
+  /**  */
+  pattern?: SlDatepicker["pattern"];
+  /**  */
+  min?: SlDatepicker["min"];
+  /**  */
+  max?: SlDatepicker["max"];
+  /**  */
+  calendar?: SlDatepicker["calendar"];
+};
+
+type SlDaterangeProps = {
+  /** The name of the input, submitted as a name/value pair with form data. */
+  name?: SlDaterange["name"];
+  /** The current value of the input, submitted as a name/value pair with form data. */
+  value?: SlDaterange["value"];
+  /** The input's size. */
+  size?: SlDaterange["size"];
+  /** Draws a filled input. */
+  filled?: SlDaterange["filled"];
+  /** Draws a pill-style input with rounded edges. */
+  pill?: SlDaterange["pill"];
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlDaterange["label"];
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlDaterange["helpText"];
+  /** Adds a clear button when the input is not empty. */
+  clearable?: SlDaterange["clearable"];
+  /** Disables the input. */
+  disabled?: SlDaterange["disabled"];
+  /** Placeholder text for the two inputs. Accepts a string in the format "startPlaceholder,endPlaceholder"
+as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via JavaScript. */
+  placeholder?: SlDaterange["placeholder"];
+  /** Makes the input readonly. */
+  readonly?: SlDaterange["readonly"];
+  /** Makes the input a required field. */
+  required?: SlDaterange["required"];
+  /**  */
+  type?: SlDaterange["type"];
+  /** The minimum allowed date (in YYYY-MM-DD format). */
+  min?: SlDaterange["min"];
+  /** The maximum allowed date (in YYYY-MM-DD format). */
   max?: SlDaterange["max"];
   /** The date format to use. Defaults to YYYY-MM-DD. */
   format?: SlDaterange["format"];
@@ -523,6 +570,10 @@ type SlDaterangeProps = {
   calendars?: SlDaterange["calendars"];
   /** The default value of the form control. Primarily used for resetting the form control. */
   defaultValue?: SlDaterange["defaultValue"];
+  /**  */
+  startPlaceholder?: SlDaterange["startPlaceholder"];
+  /**  */
+  endPlaceholder?: SlDaterange["endPlaceholder"];
   /** The start date value. */
   startDate?: SlDaterange["startDate"];
   /** The end date value. */
@@ -533,19 +584,6 @@ type SlDaterangeProps = {
   validationMessage?: SlDaterange["validationMessage"];
 };
 
-type SlDatepickerProps = {
-  /**  */
-  type?: SlDatepicker["type"];
-  /**  */
-  pattern?: SlDatepicker["pattern"];
-  /**  */
-  min?: SlDatepicker["min"];
-  /**  */
-  max?: SlDatepicker["max"];
-  /**  */
-  calendar?: SlDatepicker["calendar"];
-};
-
 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. */
@@ -574,46 +612,6 @@ can use the `show()` and `hide()` methods and this attribute will reflect the de
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDatePanelProps = {
-  /**  */
-  open?: SlDatePanel["open"];
-  /**  */
-  value?: SlDatePanel["value"];
-  /**  */
-  type?: SlDatePanel["type"];
-  /**  */
-  min?: SlDatePanel["min"];
-  /**  */
-  max?: SlDatePanel["max"];
-  /**  */
-  format?: SlDatePanel["format"];
-  /**  */
-  calendar?: SlDatePanel["calendar"];
-  /**  */
-  yearColumn?: SlDatePanel["yearColumn"];
-  /**  */
-  monthColumn?: SlDatePanel["monthColumn"];
-  /**  */
-  hourColumn?: SlDatePanel["hourColumn"];
-  /**  */
-  minuteColumn?: SlDatePanel["minuteColumn"];
-  /**  */
-  secondColumn?: SlDatePanel["secondColumn"];
-  /**  */
-  "onsl-cancel"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onsl-clear"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onsl-confirm"?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
-type SlDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: SlDivider["vertical"];
-};
-
 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. */
@@ -651,6 +649,11 @@ accessible way for users to dismiss the dialog. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type SlDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: SlDivider["vertical"];
+};
+
 type SlDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -766,6 +769,47 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlFormatNumberProps = {
+  /** The number to format. */
+  value?: SlFormatNumber["value"];
+  /** The formatting style to use. */
+  type?: SlFormatNumber["type"];
+  /** Turns off grouping separators. */
+  "no-grouping"?: SlFormatNumber["noGrouping"];
+  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
+  currency?: SlFormatNumber["currency"];
+  /** How to display the currency. */
+  "currency-display"?: SlFormatNumber["currencyDisplay"];
+  /** The minimum number of integer digits to use. Possible values are 1-21. */
+  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
+  /** The minimum number of fraction digits to use. Possible values are 0-20. */
+  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
+  /** The maximum number of fraction digits to use. Possible values are 0-0. */
+  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
+  /** The minimum number of significant digits to use. Possible values are 1-21. */
+  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
+  /** The maximum number of significant digits to use,. Possible values are 1-21. */
+  "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"];
@@ -793,47 +837,6 @@ 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 SlFormatNumberProps = {
-  /** The number to format. */
-  value?: SlFormatNumber["value"];
-  /** The formatting style to use. */
-  type?: SlFormatNumber["type"];
-  /** Turns off grouping separators. */
-  "no-grouping"?: SlFormatNumber["noGrouping"];
-  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
-  currency?: SlFormatNumber["currency"];
-  /** How to display the currency. */
-  "currency-display"?: SlFormatNumber["currencyDisplay"];
-  /** The minimum number of integer digits to use. Possible values are 1-21. */
-  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
-  /** The minimum number of fraction digits to use. Possible values are 0-20. */
-  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
-  /** The maximum number of fraction digits to use. Possible values are 0-0. */
-  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
-  /** The minimum number of significant digits to use. Possible values are 1-21. */
-  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
-  /** The maximum number of significant digits to use,. Possible values are 1-21. */
-  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
-};
-
 type SlImageComparerProps = {
   /** The position of the divider as a percentage. */
   position?: SlImageComparer["position"];
@@ -861,8 +864,6 @@ code and can result in XSS attacks. */
   "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
 };
 
-type SlMenuLabelProps = {};
-
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -887,6 +888,8 @@ to `text`. */
   "help-text"?: SlInput["helpText"];
   /** Adds a clear button when the input is not empty. */
   clearable?: SlInput["clearable"];
+  /** Hides the suffix when the clear button is visible. */
+  "clear-hides-suffix"?: SlInput["clearHidesSuffix"];
   /** Disables the input. */
   disabled?: SlInput["disabled"];
   /** Placeholder text to show as a hint when the input is empty. */
@@ -960,6 +963,13 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+};
+
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -977,12 +987,7 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
-type SlMenuProps = {
-  /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
-};
+type SlMenuLabelProps = {};
 
 type SlMutationObserverProps = {
   /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
@@ -1003,6 +1008,19 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
+type SlNavProps = {
+  /** The value of the selected nav item. */
+  value?: SlNav["value"];
+  /** The mode of navigation. */
+  mode?: SlNav["mode"];
+  /**  */
+  defaultSlot?: SlNav["defaultSlot"];
+  /** Emitted when the selected nav item changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+};
+
 type SlNavGroupProps = {
   /** Draws the nav group in an active (selected) state. */
   active?: SlNavGroup["active"];
@@ -1078,17 +1096,23 @@ multiple values. */
   hasHover?: SlOption["hasHover"];
 };
 
-type SlNavProps = {
-  /** The value of the selected nav item. */
-  value?: SlNav["value"];
-  /** The mode of navigation. */
-  mode?: SlNav["mode"];
+type SlPaginationProps = {
   /**  */
-  defaultSlot?: SlNav["defaultSlot"];
-  /** Emitted when the selected nav item changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+  currentPage?: SlPagination["currentPage"];
+  /**  */
+  pageSize?: SlPagination["pageSize"];
+  /**  */
+  pageSizeOpts?: SlPagination["pageSizeOpts"];
+  /**  */
+  total?: SlPagination["total"];
+  /**  */
+  disabled?: SlPagination["disabled"];
+  /**  */
+  className?: SlPagination["className"];
+  /**  */
+  simpleMode?: SlPagination["simpleMode"];
+  /**  */
+  defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
 type SlPopupProps = {
@@ -1186,22 +1210,6 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
-attribute can typically be omitted. */
-  size?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1221,23 +1229,19 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlRadioButtonProps = {
+type SlRadioProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
-  /**  */
-  input?: SlRadioButton["input"];
+  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"];
   /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
   "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
+  /** Emitted when the control gains focus. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
@@ -1277,6 +1281,66 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRadioButtonProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadioButton["value"];
+  /** Disables the radio button. */
+  disabled?: SlRadioButton["disabled"];
+  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+this attribute can typically be omitted. */
+  size?: SlRadioButton["size"];
+  /** Draws a pill-style radio button with rounded edges. */
+  pill?: SlRadioButton["pill"];
+  /**  */
+  input?: SlRadioButton["input"];
+  /**  */
+  hiddenInput?: SlRadioButton["hiddenInput"];
+  /** Emitted when the button loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the button gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
+type SlRatingProps = {
+  /** A label that describes the rating to assistive devices. */
+  label?: SlRating["label"];
+  /** 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"];
@@ -1305,93 +1369,26 @@ the same document or shadow root for this to work. */
   /**  */
   input?: SlRange["input"];
   /**  */
-  output?: SlRange["output"];
-  /** A function used to format the tooltip's value. The range's value is passed as the first and only argument. The
-function should return a string to display in the tooltip. */
-  tooltipFormatter?: SlRange["tooltipFormatter"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: SlRange["defaultValue"];
-  /** Gets the validity state object */
-  validity?: SlRange["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlRange["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 SlPaginationProps = {
-  /**  */
-  currentPage?: SlPagination["currentPage"];
-  /**  */
-  pageSize?: SlPagination["pageSize"];
-  /**  */
-  pageSizeOpts?: SlPagination["pageSizeOpts"];
-  /**  */
-  total?: SlPagination["total"];
-  /**  */
-  disabled?: SlPagination["disabled"];
-  /**  */
-  className?: SlPagination["className"];
-  /**  */
-  simpleMode?: SlPagination["simpleMode"];
-  /**  */
-  defaultCurrentPage?: SlPagination["defaultCurrentPage"];
-};
-
-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. */
+  output?: SlRange["output"];
+  /** A function used to format the tooltip's value. The range's value is passed as the first and only argument. The
+function should return a string to display in the tooltip. */
+  tooltipFormatter?: SlRange["tooltipFormatter"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: SlRange["defaultValue"];
+  /** Gets the validity state object */
+  validity?: SlRange["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlRange["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 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"];
-
-  /** Emitted when the element is resized. */
-  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => 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 SlScreenProps = {
@@ -1409,36 +1406,12 @@ type SlScreenProps = {
   gridElement?: SlScreen["gridElement"];
 };
 
-type SlSkeletonProps = {
-  /** Determines which effect the skeleton will use. */
-  effect?: SlSkeleton["effect"];
-};
-
-type SlSpinnerProps = {};
+type SlResizeObserverProps = {
+  /** Disables the observer. */
+  disabled?: SlResizeObserver["disabled"];
 
-type SlSplitPanelProps = {
-  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
-container's initial size. */
-  position?: SlSplitPanel["position"];
-  /** The current position of the divider from the primary panel's edge in pixels. */
-  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
-  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
-  vertical?: SlSplitPanel["vertical"];
-  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
-  disabled?: SlSplitPanel["disabled"];
-  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
-primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
-host element is resized. */
-  primary?: SlSplitPanel["primary"];
-  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
-or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
-  snap?: SlSplitPanel["snap"];
-  /** How close the divider must be to a snap point until snapping occurs. */
-  "snap-threshold"?: SlSplitPanel["snapThreshold"];
-  /**  */
-  divider?: SlSplitPanel["divider"];
-  /** Emitted when the divider's position changes. */
-  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the element is resized. */
+  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
 type SlSelectProps = {
@@ -1532,6 +1505,38 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+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. */
+  position?: SlSplitPanel["position"];
+  /** The current position of the divider from the primary panel's edge in pixels. */
+  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  vertical?: SlSplitPanel["vertical"];
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  disabled?: SlSplitPanel["disabled"];
+  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+host element is resized. */
+  primary?: SlSplitPanel["primary"];
+  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
+or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
+  snap?: SlSplitPanel["snap"];
+  /** How close the divider must be to a snap point until snapping occurs. */
+  "snap-threshold"?: SlSplitPanel["snapThreshold"];
+  /**  */
+  divider?: SlSplitPanel["divider"];
+  /** Emitted when the divider's position changes. */
+  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+};
+
 type SlSwitchProps = {
   /**  */
   title?: SlSwitch["title"];
@@ -1597,6 +1602,28 @@ manual, the tab will receive focus but will not show until the user presses spac
   "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
 };
 
+type SlTabProps = {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SlTab["panel"];
+  /** Draws the tab in an active state. */
+  active?: SlTab["active"];
+  /** Makes the tab closable and shows a close button. */
+  closable?: SlTab["closable"];
+  /** Disables the tab and prevents selection. */
+  disabled?: SlTab["disabled"];
+  /**  */
+  tab?: SlTab["tab"];
+  /** Emitted when the tab is closable and the close button is activated. */
+  "onsl-close"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SlTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: SlTabPanel["active"];
+};
+
 type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -1621,6 +1648,8 @@ type SlTableProps = {
   /**  */
   expandProps?: SlTable["expandProps"];
   /**  */
+  tree?: SlTable["tree"];
+  /**  */
   enableColumnResizing?: SlTable["enableColumnResizing"];
   /**  */
   slHeaderRow?: SlTable["slHeaderRow"];
@@ -1678,11 +1707,18 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => 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 = {
@@ -1758,33 +1794,23 @@ 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 SlTabProps = {
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SlTab["panel"];
-  /** Draws the tab in an active state. */
-  active?: SlTab["active"];
-  /** Makes the tab closable and shows a close button. */
-  closable?: SlTab["closable"];
-  /** Disables the tab and prevents selection. */
-  disabled?: SlTab["disabled"];
+type SlTimepickerProps = {
   /**  */
-  tab?: SlTab["tab"];
-  /** Emitted when the tab is closable and the close button is activated. */
-  "onsl-close"?: (e: CustomEvent<never>) => void;
+  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;
 };
 
 type SlTooltipProps = {
@@ -1825,25 +1851,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;
-};
-
 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. */
@@ -1858,6 +1865,8 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
   "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
 type SlTreeItemProps = {
   /** Expands the tree item. */
   expanded?: SlTreeItem["expanded"];
@@ -1899,8 +1908,6 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlVisuallyHiddenProps = {};
-
 export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
@@ -1917,56 +1924,21 @@ export type CustomElements = {
    *  - **show()** - Shows the alert.
    * - **hide()** - Hides the alert
    * - **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   *
-   * ### **Slots:**
-   *  - _default_ - The alert's main content.
-   * - **icon** - An icon to show in the alert. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **icon** - The container that wraps the optional icon.
-   * - **message** - The container that wraps the alert's main content.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   */
-  "sl-alert": DefineComponent<SlAlertProps>;
-
-  /**
-   * 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>;
-
-  /**
-   * Badges are used to draw attention and display statuses or counts.
-   * ---
-   *
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
    *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - _default_ - The alert's main content.
+   * - **icon** - An icon to show in the alert. Works best with `<sl-icon>`.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the optional icon.
+   * - **message** - The container that wraps the alert's main content.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-alert": DefineComponent<SlAlertProps>;
 
   /**
    * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
@@ -1987,6 +1959,28 @@ export type CustomElements = {
    */
   "sl-animation": DefineComponent<SlAnimationProps>;
 
+  /**
+   * 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>;
+
   /**
    * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
@@ -2009,6 +2003,19 @@ export type CustomElements = {
    */
   "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
+  /**
+   * Badges are used to draw attention and display statuses or counts.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The badge's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-badge": DefineComponent<SlBadgeProps>;
+
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -2029,6 +2036,20 @@ export type CustomElements = {
    */
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
+  /**
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2076,33 +2097,6 @@ export type CustomElements = {
    */
   "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
-  /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
-
-  /**
-   * 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>;
-
   /**
    * Cards can be used to group related subjects in a container.
    * ---
@@ -2129,6 +2123,42 @@ export type CustomElements = {
    */
   "sl-card": DefineComponent<SlCardProps>;
 
+  /**
+   * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-slide-change** - Emitted when the active slide changes.
+   *
+   * ### **Methods:**
+   *  - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.
+   * - **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.
+   * - **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.
+   * - **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--slide-gap** - The space between each slide. _(default: undefined)_
+   * - **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_
+   * - **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The carousel's internal wrapper.
+   * - **scroll-container** - The scroll container that wraps the slides.
+   * - **pagination** - The pagination indicators wrapper.
+   * - **pagination-item** - The pagination indicator.
+   * - **pagination-item--active** - Applied when the item is active.
+   * - **navigation** - The navigation wrapper.
+   * - **navigation-button** - The navigation button.
+   * - **navigation-button--previous** - Applied to the previous button.
+   * - **navigation-button--next** - Applied to the next button.
+   */
+  "sl-carousel": DefineComponent<SlCarouselProps>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2167,72 +2197,6 @@ export type CustomElements = {
    */
   "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
-  /**
-   * Copies text data to the clipboard when the user clicks the trigger.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-copy** - Emitted when the data has been copied.
-   * - **sl-error** - Emitted when the data could not be copied.
-   *
-   * ### **Slots:**
-   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<sl-icon>`.
-   * - **success-icon** - The icon to show when the content is copied. Works best with `<sl-icon>`.
-   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
-   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **button** - The internal `<button>` element.
-   * - **copy-icon** - The container that holds the copy icon.
-   * - **success-icon** - The container that holds the success icon.
-   * - **error-icon** - The container that holds the error icon.
-   * - **tooltip__base** - The tooltip's exported `base` part.
-   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
-   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
-   * - **tooltip__body** - The tooltip's exported `body` part.
-   */
-  "sl-copy-button": DefineComponent<SlCopyButtonProps>;
-
-  /**
-   * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-slide-change** - Emitted when the active slide changes.
-   *
-   * ### **Methods:**
-   *  - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.
-   * - **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.
-   * - **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.
-   * - **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--slide-gap** - The space between each slide. _(default: undefined)_
-   * - **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_
-   * - **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The carousel's internal wrapper.
-   * - **scroll-container** - The scroll container that wraps the slides.
-   * - **pagination** - The pagination indicators wrapper.
-   * - **pagination-item** - The pagination indicator.
-   * - **pagination-item--active** - Applied when the item is active.
-   * - **navigation** - The navigation wrapper.
-   * - **navigation-button** - The navigation button.
-   * - **navigation-button--previous** - Applied to the previous button.
-   * - **navigation-button--next** - Applied to the next button.
-   */
-  "sl-carousel": DefineComponent<SlCarouselProps>;
-
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2295,25 +2259,81 @@ export type CustomElements = {
    */
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
+  /**
+   * 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>;
+
+  /**
+   * Copies text data to the clipboard when the user clicks the trigger.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-copy** - Emitted when the data has been copied.
+   * - **sl-error** - Emitted when the data could not be copied.
+   *
+   * ### **Slots:**
+   *  - **copy-icon** - The icon to show in the default copy state. Works best with `<sl-icon>`.
+   * - **success-icon** - The icon to show when the content is copied. Works best with `<sl-icon>`.
+   * - **error-icon** - The icon to show when a copy error occurs. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--success-color** - The color to use for success feedback. _(default: undefined)_
+   * - **--error-color** - The color to use for error feedback. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **button** - The internal `<button>` element.
+   * - **copy-icon** - The container that holds the copy icon.
+   * - **success-icon** - The container that holds the success icon.
+   * - **error-icon** - The container that holds the error icon.
+   * - **tooltip__base** - The tooltip's exported `base` part.
+   * - **tooltip__base__popup** - The tooltip's exported `popup` part.
+   * - **tooltip__base__arrow** - The tooltip's exported `arrow` part.
+   * - **tooltip__body** - The tooltip's exported `body` part.
+   */
+  "sl-copy-button": DefineComponent<SlCopyButtonProps>;
+
   /**
    *
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
-   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
-   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
-   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
+   * ### **Events:**
+   *  - **sl-cancel**
+   * - **sl-clear**
+   * - **sl-confirm**
+   * - **sl-date-change**
    */
-  "sl-daterange": DefineComponent<SlDaterangeProps>;
+  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
   /**
    *
    * ---
    *
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
+   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
+   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
+   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
    */
-  "sl-datepicker": DefineComponent<SlDatepickerProps>;
+  "sl-daterange": DefineComponent<SlDaterangeProps>;
 
   /**
    * Details show a brief summary and expand to show additional content.
@@ -2345,31 +2365,6 @@ export type CustomElements = {
    */
   "sl-details": DefineComponent<SlDetailsProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-cancel**
-   * - **sl-clear**
-   * - **sl-confirm**
-   * - **sl-date-change**
-   */
-  "sl-date-panel": DefineComponent<SlDatePanelProps>;
-
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "sl-divider": DefineComponent<SlDividerProps>;
-
   /**
    * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
    * ---
@@ -2413,6 +2408,18 @@ export type CustomElements = {
    */
   "sl-dialog": DefineComponent<SlDialogProps>;
 
+  /**
+   * Dividers are used to visually separate or group elements.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   */
+  "sl-divider": DefineComponent<SlDividerProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -2500,23 +2507,11 @@ export type CustomElements = {
   "sl-format-date": DefineComponent<SlFormatDateProps>;
 
   /**
-   * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+   * Formats a number using the specified locale and options.
    * ---
    *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the icon button loses focus.
-   * - **sl-focus** - Emitted when the icon button gains focus.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the icon button.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the icon button.
-   * - **blur()** - Removes focus from the icon button.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
    */
-  "sl-icon-button": DefineComponent<SlIconButtonProps>;
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
   /**
    * Icons are symbols that can be used to represent various options within an application.
@@ -2534,11 +2529,23 @@ export type CustomElements = {
   "sl-icon": DefineComponent<SlIconProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * 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-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
   /**
    * Compare visual differences between similar photos with a sliding panel.
@@ -2577,19 +2584,6 @@ export type CustomElements = {
    */
   "sl-include": DefineComponent<SlIncludeProps>;
 
-  /**
-   * Menu labels are used to describe a group of menu items.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
-
   /**
    * Inputs collect data from the user.
    * ---
@@ -2640,6 +2634,19 @@ export type CustomElements = {
    */
   "sl-input": DefineComponent<SlInputProps>;
 
+  /**
+   * Menus provide a list of options for the user to choose from.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-select** - Emitted when a menu item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   */
+  "sl-menu": DefineComponent<SlMenuProps>;
+
   /**
    * Menu items provide options for the user to pick from in a menu.
    * ---
@@ -2670,17 +2677,17 @@ export type CustomElements = {
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
-   * Menus provide a list of options for the user to choose from.
+   * Menu labels are used to describe a group of menu items.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
-   *
    * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   *  - _default_ - The menu label's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-menu": DefineComponent<SlMenuProps>;
+  "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).
@@ -2695,6 +2702,23 @@ export type CustomElements = {
    */
   "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
+  /**
+   * Navs are used to create navigation menus, including top bars and sidebars.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav items.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-nav": DefineComponent<SlNavProps>;
+
   /**
    * Nav groups are used to group related nav items.
    * ---
@@ -2790,21 +2814,11 @@ export type CustomElements = {
   "sl-option": DefineComponent<SlOptionProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
    *
-   * ### **Slots:**
-   *  - _default_ - The nav items.
+   * ---
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
    */
-  "sl-nav": DefineComponent<SlNavProps>;
+  "sl-pagination": DefineComponent<SlPaginationProps>;
 
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
@@ -2877,6 +2891,16 @@ export type CustomElements = {
    */
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
+  /**
+   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+
   /**
    * Radios allow the user to select a single option from a group.
    * ---
@@ -2899,14 +2923,36 @@ export type CustomElements = {
   "sl-radio": DefineComponent<SlRadioProps>;
 
   /**
-   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the radio group's selected value changes.
+   * - **sl-input** - Emitted when the radio group receives user input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the radio-group.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
+   * - **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+   *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The 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-qr-code": DefineComponent<SlQrCodeProps>;
+  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
@@ -2937,36 +2983,35 @@ export type CustomElements = {
   "sl-radio-button": DefineComponent<SlRadioButtonProps>;
 
   /**
-   * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
+   * Ratings give users a way to quickly view and provide feedback.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the radio group's selected value changes.
-   * - **sl-input** - Emitted when the radio group receives user input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *  - **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:**
-   *  - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the radio-group.
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
+   * - **blur()** - Removes focus from the rating.
    *
-   * ### **Slots:**
-   *  - _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
-   * - **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+   * ### **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:**
-   *  - **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.
+   *  - **base** - The component's base wrapper.
    */
-  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
+  "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.
@@ -3000,56 +3045,32 @@ export type CustomElements = {
    * - **--track-color-active** - The color of the portion of the track that represents the current value. _(default: undefined)_
    * - **--track-color-inactive** - The of the portion of the track that represents the remaining value. _(default: undefined)_
    * - **--track-height** - The height of the track. _(default: undefined)_
-   * - **--track-active-offset** - The point of origin of the active track. _(default: undefined)_
-   *
-   * ### **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 range's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **base** - The component's base wrapper.
-   * - **input** - The internal `<input>` element.
-   * - **tooltip** - The range's tooltip.
-   */
-  "sl-range": DefineComponent<SlRangeProps>;
-
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-pagination": DefineComponent<SlPaginationProps>;
-
-  /**
-   * 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)_
+   * - **--track-active-offset** - The point of origin of the active track. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The range's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **base** - The component's base wrapper.
+   * - **input** - The internal `<input>` element.
+   * - **tooltip** - The range's tooltip.
    */
-  "sl-rating": DefineComponent<SlRatingProps>;
+  "sl-range": DefineComponent<SlRangeProps>;
 
   /**
-   * Outputs a localized time phrase relative to the current date and time.
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
    * ---
    *
+   *
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The grid layout content.
    */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+  "sl-screen": DefineComponent<SlScreenProps>;
 
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
@@ -3065,18 +3086,61 @@ export type CustomElements = {
   "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
   /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * Selects allow you to choose items from a menu of predefined options.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-clear** - Emitted when the control's value is cleared.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-show** - Emitted when the select's menu opens.
+   * - **sl-after-show** - Emitted after the select's menu opens and all animations are complete.
+   * - **sl-hide** - Emitted when the select's menu closes.
+   * - **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
    * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *  - **show()** - Shows the listbox.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
+   * - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The select's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **listbox** - The listbox container where options are slotted.
+   * - **tags** - The container that houses option tags when `multiselect` is used.
+   * - **tag** - The individual tags that represent each multiselect option.
+   * - **tag__base** - The tag's base part.
+   * - **tag__content** - The tag's content part.
+   * - **tag__remove-button** - The tag's remove button.
+   * - **tag__remove-button__base** - The tag's remove button base part.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
    */
-  "sl-screen": DefineComponent<SlScreenProps>;
+  "sl-select": DefineComponent<SlSelectProps>;
 
   /**
    * Skeletons are used to provide a visual representation of where content will eventually be drawn.
@@ -3137,63 +3201,6 @@ export type CustomElements = {
    */
   "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
-  /**
-   * Selects allow you to choose items from a menu of predefined options.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the control's value changes.
-   * - **sl-clear** - Emitted when the control's value is cleared.
-   * - **sl-input** - Emitted when the control receives input.
-   * - **sl-focus** - Emitted when the control gains focus.
-   * - **sl-blur** - Emitted when the control loses focus.
-   * - **sl-show** - Emitted when the select's menu opens.
-   * - **sl-after-show** - Emitted after the select's menu opens and all animations are complete.
-   * - **sl-hide** - Emitted when the select's menu closes.
-   * - **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the listbox.
-   * - **hide()** - Hides the listbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
-   * - **blur()** - Removes focus from the control.
-   *
-   * ### **Slots:**
-   *  - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
-   * - **label** - The input's label. Alternatively, you can use the `label` attribute.
-   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
-   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
-   * - **clear-icon** - An icon to use in lieu of the default clear icon.
-   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
-   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The select's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
-   * - **prefix** - The container that wraps the prefix slot.
-   * - **suffix** - The container that wraps the suffix slot.
-   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
-   * - **listbox** - The listbox container where options are slotted.
-   * - **tags** - The container that houses option tags when `multiselect` is used.
-   * - **tag** - The individual tags that represent each multiselect option.
-   * - **tag__base** - The tag's base part.
-   * - **tag__content** - The tag's content part.
-   * - **tag__remove-button** - The tag's remove button.
-   * - **tag__remove-button__base** - The tag's remove button base part.
-   * - **clear-button** - The clear button.
-   * - **expand-icon** - The container that wraps the expand icon.
-   */
-  "sl-select": DefineComponent<SlSelectProps>;
-
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -3268,14 +3275,22 @@ export type CustomElements = {
   "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
   /**
-   *
+   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
    * ---
    *
    *
    * ### **Events:**
-   *  - **change**
+   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
    */
-  "sl-table": DefineComponent<SlTableProps>;
+  "sl-tab": DefineComponent<SlTabProps>;
 
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
@@ -3293,6 +3308,35 @@ export type CustomElements = {
    */
   "sl-tab-panel": DefineComponent<SlTabPanelProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change**
+   */
+  "sl-table": DefineComponent<SlTableProps>;
+
+  /**
+   * Tags are used as labels to organize things or to indicate a selection.
+   * ---
+   *
+   *
+   * ### **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.
    * ---
@@ -3332,41 +3376,25 @@ 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>;
-
-  /**
-   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+   * A time picker component that provides a time selection interface.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *  - **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.
    *
    * ### **Slots:**
-   *  - _default_ - The tab's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
+   *  - **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-tab": DefineComponent<SlTabProps>;
+  "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
   /**
    * Tooltips display additional information based on a specific action.
@@ -3400,27 +3428,6 @@ 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.
-   *
-   * ### **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.
    * ---
@@ -3446,6 +3453,16 @@ export type CustomElements = {
    */
   "sl-tree": DefineComponent<SlTreeProps>;
 
+  /**
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to be visually hidden.
+   */
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
+
   /**
    * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
@@ -3490,16 +3507,6 @@ 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>;
 };
 
 declare module "vue" {