@kdcloudjs/shoelace 1.0.3 → 1.0.5

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

@@ -1,20 +1,21 @@
 import type { DefineComponent } from "vue";
 
-import type { SlAlert } from "../../components/alert/alert.component.js";
-import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
+import type { SlAlert } from "../../components/alert/alert.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
-import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
+import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
@@ -27,23 +28,23 @@ import type { SlFormatNumber } from "../../components/format-number/format-numbe
 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 { SlInput } from "../../components/input/input.component.js";
+import type { SlInclude } from "../../components/include/include.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 { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
-import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
+import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
-import type { SlRange } from "../../components/range/range.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
+import type { SlRange } from "../../components/range/range.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
@@ -56,41 +57,31 @@ import type { SlTab } from "../../components/tab/tab.component.js";
 import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
-import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
-import type { SlTimePicker } from "../../components/timepicker/timepicker.component.js";
+import type { SlTag } from "../../components/tag/tag.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";
 
-type SlAlertProps = {
-  /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the alert's open state. */
-  open?: SlAlert["open"];
-  /** Enables a close button that allows the user to dismiss the alert. */
-  closable?: SlAlert["closable"];
-  /** The alert's theme variant. */
-  variant?: SlAlert["variant"];
-  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
-the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning
-the alert will not close on its own. */
-  duration?: SlAlert["duration"];
-  /** Enables a countdown that indicates the remaining time the alert will be displayed.
-Typically used to indicate the remaining time before a whole app refresh. */
-  countdown?: SlAlert["countdown"];
+type SlAnimatedImageProps = {
+  /** The path to the image to load. */
+  src?: SlAnimatedImage["src"];
+  /** A description of the image used by assistive devices. */
+  alt?: SlAnimatedImage["alt"];
+  /** Plays the animation. When this attribute is remove, the animation will pause. */
+  play?: SlAnimatedImage["play"];
   /**  */
-  base?: SlAlert["base"];
+  animatedImage?: SlAnimatedImage["animatedImage"];
   /**  */
-  countdownElement?: SlAlert["countdownElement"];
-  /** Emitted when the alert opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the alert closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the alert closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  frozenFrame?: SlAnimatedImage["frozenFrame"];
+  /**  */
+  isLoaded?: SlAnimatedImage["isLoaded"];
+  /** Emitted when the image loads successfully. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the image fails to load. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
 type SlAnimationProps = {
@@ -135,32 +126,33 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
-type SlAnimatedImageProps = {
-  /** The path to the image to load. */
-  src?: SlAnimatedImage["src"];
-  /** A description of the image used by assistive devices. */
-  alt?: SlAnimatedImage["alt"];
-  /** Plays the animation. When this attribute is remove, the animation will pause. */
-  play?: SlAnimatedImage["play"];
-  /**  */
-  animatedImage?: SlAnimatedImage["animatedImage"];
+type SlAlertProps = {
+  /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the alert's open state. */
+  open?: SlAlert["open"];
+  /** Enables a close button that allows the user to dismiss the alert. */
+  closable?: SlAlert["closable"];
+  /** The alert's theme variant. */
+  variant?: SlAlert["variant"];
+  /** The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
+the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning
+the alert will not close on its own. */
+  duration?: SlAlert["duration"];
+  /** Enables a countdown that indicates the remaining time the alert will be displayed.
+Typically used to indicate the remaining time before a whole app refresh. */
+  countdown?: SlAlert["countdown"];
   /**  */
-  frozenFrame?: SlAnimatedImage["frozenFrame"];
+  base?: SlAlert["base"];
   /**  */
-  isLoaded?: SlAnimatedImage["isLoaded"];
-  /** Emitted when the image loads successfully. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the image fails to load. */
-  "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"];
+  countdownElement?: SlAlert["countdownElement"];
+  /** Emitted when the alert opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the alert closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the alert closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
 type SlAvatarProps = {
@@ -179,16 +171,13 @@ type SlAvatarProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBreadcrumbItemProps = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  href?: SlBreadcrumbItem["href"];
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  target?: SlBreadcrumbItem["target"];
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  rel?: SlBreadcrumbItem["rel"];
-  /**  */
-  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
 };
 
 type SlBreadcrumbProps = {
@@ -201,6 +190,18 @@ screen readers and other assistive devices to provide more context for users. */
   separatorSlot?: SlBreadcrumb["separatorSlot"];
 };
 
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
+  /**  */
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+};
+
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -282,8 +283,6 @@ devices when interacting with the control and is strongly recommended. */
 
 type SlCardProps = {};
 
-type SlCarouselItemProps = {};
-
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -318,6 +317,52 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
+type SlCarouselItemProps = {};
+
+type SlCheckboxProps = {
+  /**  */
+  title?: SlCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: SlCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: SlCheckbox["value"];
+  /** The checkbox's size. */
+  size?: SlCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: SlCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: SlCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: SlCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: SlCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlCheckbox["helpText"];
+  /**  */
+  input?: SlCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox 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 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
@@ -384,50 +429,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCheckboxProps = {
-  /**  */
-  title?: SlCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: SlCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: SlCheckbox["value"];
-  /** The checkbox's size. */
-  size?: SlCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: SlCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: SlCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: SlCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: SlCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlCheckbox["helpText"];
-  /**  */
-  input?: SlCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox 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 SlCopyButtonProps = {
   /** The text value to copy. */
   value?: SlCopyButton["value"];
@@ -470,57 +471,44 @@ scenarios. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlDatepickerProps = {
+type SlDatePanelProps = {
   /**  */
-  value?: SlDatepicker["value"];
+  open?: SlDatePanel["open"];
   /**  */
-  name?: SlDatepicker["name"];
+  value?: SlDatePanel["value"];
   /**  */
-  type?: SlDatepicker["type"];
+  type?: SlDatePanel["type"];
   /**  */
-  placeholder?: SlDatepicker["placeholder"];
+  min?: SlDatePanel["min"];
   /**  */
-  label?: SlDatepicker["label"];
+  max?: SlDatePanel["max"];
   /**  */
-  disabled?: SlDatepicker["disabled"];
+  calendar?: SlDatePanel["calendar"];
   /**  */
-  readonly?: SlDatepicker["readonly"];
+  yearColumn?: SlDatePanel["yearColumn"];
   /**  */
-  clearable?: SlDatepicker["clearable"];
+  monthColumn?: SlDatePanel["monthColumn"];
   /**  */
-  size?: SlDatepicker["size"];
+  "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"];
   /**  */
-  hoist?: SlDatepicker["hoist"];
-  /** Draws a filled input. */
-  filled?: SlDatepicker["filled"];
-  /** Draws a pill-style input with rounded edges. */
-  pill?: SlDatepicker["pill"];
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlDatepicker["helpText"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlDatepicker["form"];
-  /** Makes the input a required field. */
-  required?: SlDatepicker["required"];
-  /** A regular expression pattern to validate input against. */
   pattern?: SlDatepicker["pattern"];
-  /** The input's minimum value. Only applies to date and number input types. */
+  /**  */
   min?: SlDatepicker["min"];
-  /** The input's maximum value. Only applies to date and number input types. */
-  max?: SlDatepicker["max"];
-  /** Indicates that the input should receive focus on page load. */
-  autofocus?: SlDatepicker["autofocus"];
   /**  */
-  input?: SlDatepicker["input"];
+  max?: SlDatepicker["max"];
   /**  */
   calendar?: SlDatepicker["calendar"];
-  /**  */
-  defaultValue?: SlDatepicker["defaultValue"];
-  /** Gets the validity state object */
-  validity?: SlDatepicker["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlDatepicker["validationMessage"];
 };
 
 type SlDetailsProps = {
@@ -782,22 +770,6 @@ type SlImageComparerProps = {
   "onsl-change"?: (e: CustomEvent<never>) => void;
 };
 
-type SlIncludeProps = {
-  /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
-code and can result in XSS attacks. */
-  src?: SlInclude["src"];
-  /** The fetch mode to use. */
-  mode?: SlInclude["mode"];
-  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
-code and can result in XSS attacks. */
-  "allow-scripts"?: SlInclude["allowScripts"];
-
-  /** Emitted when the included file is loaded. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the included file fails to load due to an error. */
-  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
-};
-
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -895,6 +867,22 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlIncludeProps = {
+  /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  src?: SlInclude["src"];
+  /** The fetch mode to use. */
+  mode?: SlInclude["mode"];
+  /** Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
+code and can result in XSS attacks. */
+  "allow-scripts"?: SlInclude["allowScripts"];
+
+  /** Emitted when the included file is loaded. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the included file fails to load due to an error. */
+  "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
+};
+
 type SlMenuProps = {
   /**  */
   defaultSlot?: SlMenu["defaultSlot"];
@@ -902,6 +890,8 @@ type SlMenuProps = {
   "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
 };
 
+type SlMenuLabelProps = {};
+
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -919,8 +909,6 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
-type SlMenuLabelProps = {};
-
 type SlMutationObserverProps = {
   /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
 `attr="class id title"`. To watch all attributes, use `*`. */
@@ -972,15 +960,8 @@ type SlPaginationProps = {
   className?: SlPagination["className"];
   /**  */
   simpleMode?: SlPagination["simpleMode"];
-};
-
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
+  /**  */
+  defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
 type SlPopupProps = {
@@ -1058,6 +1039,15 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
+};
+
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1069,6 +1059,22 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
+type SlRadioProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadio["value"];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  size?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
+  /**  */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1088,22 +1094,6 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
-attribute can typically be omitted. */
-  size?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1154,10 +1144,36 @@ the same document or shadow root for this to work. */
   validationMessage?: SlRadioGroup["validationMessage"];
   /** Emitted when the radio group's selected value changes. */
   "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the radio group receives user 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;
+  /** Emitted when the radio group receives user 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 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 SlRangeProps = {
@@ -1210,32 +1226,6 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRatingProps = {
-  /** A label that describes the rating to assistive devices. */
-  label?: SlRating["label"];
-  /** The current rating. */
-  value?: SlRating["value"];
-  /** The highest rating to show. */
-  max?: SlRating["max"];
-  /** The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this
-attribute to `0.5`. */
-  precision?: SlRating["precision"];
-  /** Makes the rating readonly. */
-  readonly?: SlRating["readonly"];
-  /** Disables the rating. */
-  disabled?: SlRating["disabled"];
-  /** A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.
-The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
-well with `<sl-icon>` elements. */
-  getSymbol?: SlRating["getSymbol"];
-  /**  */
-  rating?: SlRating["rating"];
-  /** Emitted when the rating's value changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value. */
-  "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
-};
-
 type SlRelativeTimeProps = {
   /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
 string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
@@ -1505,14 +1495,30 @@ type SlTableProps = {
   /**  */
   pagination?: SlTable["pagination"];
   /**  */
+  expandProps?: SlTable["expandProps"];
+  /**  */
+  enableColumnResizing?: SlTable["enableColumnResizing"];
+  /**  */
+  onHeaderRow?: SlTable["onHeaderRow"];
+  /**  */
+  onRow?: SlTable["onRow"];
+  /**  */
+  onColumnResize?: SlTable["onColumnResize"];
+  /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
+  expandedMap?: SlTable["expandedMap"];
+  /**  */
   sorting?: SlTable["sorting"];
   /**  */
   columnFilters?: SlTable["columnFilters"];
   /**  */
   tableWidth?: SlTable["tableWidth"];
   /**  */
+  columnSizing?: SlTable["columnSizing"];
+  /**  */
+  pageIndex?: SlTable["pageIndex"];
+  /**  */
   adapter?: SlTable["adapter"];
   /**  */
   handleBodyScroll?: SlTable["handleBodyScroll"];
@@ -1527,6 +1533,8 @@ type SlTableProps = {
   /**  */
   generateCustomCellSlot?: SlTable["generateCustomCellSlot"];
   /**  */
+  generateCustomRowSlot?: SlTable["generateCustomRowSlot"];
+  /**  */
   handleFilterDropdownChange?: SlTable["handleFilterDropdownChange"];
   /**  */
   handlePaginationChange?: SlTable["handlePaginationChange"];
@@ -1534,20 +1542,6 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -1621,49 +1615,25 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTimePickerProps = {
-  /**  */
-  value?: SlTimePicker["value"];
-  /**  */
-  name?: SlTimePicker["name"];
-  /**  */
-  placeholder?: SlTimePicker["placeholder"];
-  /**  */
-  label?: SlTimePicker["label"];
-  /**  */
-  disabled?: SlTimePicker["disabled"];
-  /**  */
-  readonly?: SlTimePicker["readonly"];
-  /**  */
-  clearable?: SlTimePicker["clearable"];
-  /**  */
-  size?: SlTimePicker["size"];
-  /**  */
-  hoist?: SlTimePicker["hoist"];
-  /**  */
-  filled?: SlTimePicker["filled"];
-  /**  */
-  pill?: SlTimePicker["pill"];
-  /**  */
-  "help-text"?: SlTimePicker["helpText"];
-  /**  */
-  form?: SlTimePicker["form"];
-  /**  */
-  required?: SlTimePicker["required"];
-  /**  */
-  format?: SlTimePicker["format"];
-  /**  */
-  autofocus?: SlTimePicker["autofocus"];
-  /**  */
-  input?: SlTimePicker["input"];
-  /**  */
-  timePanel?: SlTimePicker["timePanel"];
-  /**  */
-  defaultValue?: SlTimePicker["defaultValue"];
+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 SlTimepickerProps = {
   /**  */
-  validity?: SlTimePicker["validity"];
+  format?: SlTimepicker["format"];
   /**  */
-  validationMessage?: SlTimePicker["validationMessage"];
+  timePanel?: SlTimepicker["timePanel"];
   /** Emitted when the control's value changes. */
   "onsl-change"?: (e: CustomEvent<never>) => void;
   /** Emitted when the control's value changes. */
@@ -1773,35 +1743,26 @@ type SlVisuallyHiddenProps = {};
 
 export type CustomElements = {
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-show** - Emitted when the alert opens.
-   * - **sl-after-show** - Emitted after the alert opens and all animations are complete.
-   * - **sl-hide** - Emitted when the alert closes.
-   * - **sl-after-hide** - Emitted after the alert closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **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.
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
    *
    * ### **Slots:**
-   *  - _default_ - The alert's main content.
-   * - **icon** - An icon to show in the alert. Works best with `<sl-icon>`.
+   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
+   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
    *
    * ### **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.
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
    */
-  "sl-alert": DefineComponent<SlAlertProps>;
+  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
   /**
    * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
@@ -1823,39 +1784,35 @@ export type CustomElements = {
   "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
-   *
-   * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
-   */
-  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
-
-  /**
-   * Badges are used to draw attention and display statuses or counts.
-   * ---
+   *  - **sl-show** - Emitted when the alert opens.
+   * - **sl-after-show** - Emitted after the alert opens and all animations are complete.
+   * - **sl-hide** - Emitted when the alert closes.
+   * - **sl-after-hide** - Emitted after the alert closes and all animations are complete.
    *
+   * ### **Methods:**
+   *  - **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 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>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -1880,24 +1837,17 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The breadcrumb item's label.
-   * - **prefix** - An optional prefix, usually an icon or icon button.
-   * - **suffix** - An optional suffix, usually an icon or icon button.
-   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **label** - The breadcrumb item's label.
-   * - **prefix** - The container that wraps the prefix.
-   * - **suffix** - The container that wraps the suffix.
-   * - **separator** - The container that wraps the separator.
    */
-  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -1913,6 +1863,26 @@ export type CustomElements = {
    */
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
+  /**
+   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The breadcrumb item's label.
+   * - **prefix** - An optional prefix, usually an icon or icon button.
+   * - **suffix** - An optional suffix, usually an icon or icon button.
+   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **label** - The breadcrumb item's label.
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   * - **separator** - The container that wraps the separator.
+   */
+  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -1986,19 +1956,6 @@ export type CustomElements = {
    */
   "sl-card": DefineComponent<SlCardProps>;
 
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
    * ---
@@ -2033,7 +1990,58 @@ export type CustomElements = {
    * - **navigation-button--previous** - Applied to the previous button.
    * - **navigation-button--next** - Applied to the next button.
    */
-  "sl-carousel": DefineComponent<SlCarouselProps>;
+  "sl-carousel": DefineComponent<SlCarouselProps>;
+
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel item's content..
+   *
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   */
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+
+  /**
+   * Checkboxes allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the checkbox loses focus.
+   * - **sl-change** - Emitted when the checked state changes.
+   * - **sl-focus** - Emitted when the checkbox gains focus.
+   * - **sl-input** - Emitted when the checkbox receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **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. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
   /**
    * Color pickers allow the user to select a color.
@@ -2097,44 +2105,6 @@ export type CustomElements = {
    */
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the checkbox loses focus.
-   * - **sl-change** - Emitted when the checked state changes.
-   * - **sl-focus** - Emitted when the checkbox gains focus.
-   * - **sl-input** - Emitted when the checkbox receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **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. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   *
-   * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "sl-checkbox": DefineComponent<SlCheckboxProps>;
-
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2165,18 +2135,26 @@ export type CustomElements = {
    */
   "sl-copy-button": DefineComponent<SlCopyButtonProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel**
+   * - **sl-clear**
+   * - **sl-confirm**
+   * - **sl-date-change**
+   */
+  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+
   /**
    *
    * ---
    *
    *
    * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the datepicker.
-   * - **blur()** - Removes focus from the datepicker.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the picker.
    */
   "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
@@ -2418,17 +2396,6 @@ export type CustomElements = {
    */
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
-  /**
-   * Includes give you the power to embed external HTML files into the page.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the included file is loaded.
-   * - **sl-error** - Emitted when the included file fails to load due to an error.
-   */
-  "sl-include": DefineComponent<SlIncludeProps>;
-
   /**
    * Inputs collect data from the user.
    * ---
@@ -2479,6 +2446,17 @@ export type CustomElements = {
    */
   "sl-input": DefineComponent<SlInputProps>;
 
+  /**
+   * Includes give you the power to embed external HTML files into the page.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the included file is loaded.
+   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   */
+  "sl-include": DefineComponent<SlIncludeProps>;
+
   /**
    * Menus provide a list of options for the user to choose from.
    * ---
@@ -2492,6 +2470,19 @@ export type CustomElements = {
    */
   "sl-menu": DefineComponent<SlMenuProps>;
 
+  /**
+   * 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>;
+
   /**
    * Menu items provide options for the user to pick from in a menu.
    * ---
@@ -2521,19 +2512,6 @@ export type CustomElements = {
    */
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
-  /**
-   * 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>;
-
   /**
    * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
@@ -2576,27 +2554,6 @@ export type CustomElements = {
    */
   "sl-pagination": DefineComponent<SlPaginationProps>;
 
-  /**
-   * Progress bars are used to show the status of an ongoing operation.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
-   *
-   * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
-   */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
-
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
    * ---
@@ -2626,36 +2583,47 @@ export type CustomElements = {
   "sl-popup": DefineComponent<SlPopupProps>;
 
   /**
-   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
+   * Progress bars are used to show the status of an ongoing operation.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - A label to show inside the ring.
+   *  - _default_ - A label to show inside the progress indicator.
    *
    * ### **CSS Properties:**
-   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
-   * - **--track-width** - The width of the track. _(default: undefined)_
+   *  - **--height** - The progress bar's height. _(default: undefined)_
    * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
    * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **label** - The progress ring label.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
    */
-  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
 
   /**
-   * 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).
+   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
    *
    *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the ring.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
+   * - **--track-width** - The width of the track. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
+   *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **label** - The progress ring label.
    */
-  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
   /**
    * Radios allow the user to select a single option from a group.
@@ -2678,6 +2646,16 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
+  /**
+   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
@@ -2738,6 +2716,30 @@ export type CustomElements = {
    */
   "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
+  /**
+   * Ratings give users a way to quickly view and provide feedback.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the rating's value changes.
+   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
+   * - **blur()** - Removes focus from the rating.
+   *
+   * ### **CSS Properties:**
+   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
+   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
+   * - **--symbol-size** - The size of symbols. _(default: undefined)_
+   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-rating": DefineComponent<SlRatingProps>;
+
   /**
    * Ranges allow the user to select a single value within a given range using a slider.
    * ---
@@ -2783,30 +2785,6 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
-  /**
-   * Ratings give users a way to quickly view and provide feedback.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the rating's value changes.
-   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
-   * - **blur()** - Removes focus from the rating.
-   *
-   * ### **CSS Properties:**
-   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
-   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
-   * - **--symbol-size** - The size of symbols. _(default: undefined)_
-   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-rating": DefineComponent<SlRatingProps>;
-
   /**
    * Outputs a localized time phrase relative to the current date and time.
    * ---
@@ -3074,25 +3052,6 @@ export type CustomElements = {
    */
   "sl-table": DefineComponent<SlTableProps>;
 
-  /**
-   * Tags are used as labels to organize things or to indicate a selection.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tag's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **content** - The tag's content.
-   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
-   * - **remove-button__base** - The remove button's exported `base` part.
-   */
-  "sl-tag": DefineComponent<SlTagProps>;
-
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---
@@ -3131,6 +3090,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>;
+
   /**
    * A time picker component that provides a time selection interface.
    * ---
@@ -3143,10 +3121,6 @@ export type CustomElements = {
    * - **sl-blur** - Emitted when the control loses focus.
    * - **sl-clear** - Emitted when the clear button is activated.
    *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the datepicker.
-   * - **blur()** - Removes focus from the datepicker.
-   *
    * ### **Slots:**
    *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
    * - **prefix** - The input's prefix, to prepend to the input.
@@ -3154,7 +3128,7 @@ export type CustomElements = {
    * - **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>;
+  "sl-timepicker": DefineComponent<SlTimepickerProps>;
 
   /**
    * Tooltips display additional information based on a specific action.