@kdcloudjs/shoelace 1.0.4 → 1.0.5

package/dist/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 { SlAnimatedImage } from "../../components/animated-image/animated-image.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 { 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 { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
+import type { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { SlColorPicker } from "../../components/color-picker/color-picker.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,15 +28,15 @@ 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 { SlPopup } from "../../components/popup/popup.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";
@@ -58,41 +59,12 @@ import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
-import type { SlTimePicker } from "../../components/timepicker/timepicker.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"];
-  /**  */
-  base?: SlAlert["base"];
-  /**  */
-  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 SlAnimatedImageProps = {
   /** The path to the image to load. */
   src?: SlAnimatedImage["src"];
@@ -154,6 +126,35 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+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"];
+  /**  */
+  base?: SlAlert["base"];
+  /**  */
+  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 = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -280,6 +281,8 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
+type SlCardProps = {};
+
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -314,10 +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 SlCardProps = {};
-
 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,6 +471,33 @@ scenarios. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDatePanelProps = {
+  /**  */
+  open?: SlDatePanel["open"];
+  /**  */
+  value?: SlDatePanel["value"];
+  /**  */
+  type?: SlDatePanel["type"];
+  /**  */
+  min?: SlDatePanel["min"];
+  /**  */
+  max?: SlDatePanel["max"];
+  /**  */
+  calendar?: SlDatePanel["calendar"];
+  /**  */
+  yearColumn?: SlDatePanel["yearColumn"];
+  /**  */
+  monthColumn?: SlDatePanel["monthColumn"];
+  /**  */
+  "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"];
@@ -481,10 +509,6 @@ type SlDatepickerProps = {
   max?: SlDatepicker["max"];
   /**  */
   calendar?: SlDatepicker["calendar"];
-  /**  */
-  yearColumn?: SlDatepicker["yearColumn"];
-  /**  */
-  monthColumn?: SlDatepicker["monthColumn"];
 };
 
 type SlDetailsProps = {
@@ -746,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"];
@@ -859,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"];
@@ -866,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"];
@@ -883,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 `*`. */
@@ -921,6 +945,25 @@ multiple values. */
   hasHover?: SlOption["hasHover"];
 };
 
+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 SlPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
 element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
@@ -996,23 +1039,6 @@ active. */
   "onsl-reposition"?: (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"];
-};
-
 type SlProgressBarProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressBar["value"];
@@ -1471,6 +1497,14 @@ type SlTableProps = {
   /**  */
   expandProps?: SlTable["expandProps"];
   /**  */
+  enableColumnResizing?: SlTable["enableColumnResizing"];
+  /**  */
+  onHeaderRow?: SlTable["onHeaderRow"];
+  /**  */
+  onRow?: SlTable["onRow"];
+  /**  */
+  onColumnResize?: SlTable["onColumnResize"];
+  /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
   expandedMap?: SlTable["expandedMap"];
@@ -1481,6 +1515,10 @@ type SlTableProps = {
   /**  */
   tableWidth?: SlTable["tableWidth"];
   /**  */
+  columnSizing?: SlTable["columnSizing"];
+  /**  */
+  pageIndex?: SlTable["pageIndex"];
+  /**  */
   adapter?: SlTable["adapter"];
   /**  */
   handleBodyScroll?: SlTable["handleBodyScroll"];
@@ -1591,11 +1629,11 @@ type SlTagProps = {
   "onsl-remove"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTimePickerProps = {
+type SlTimepickerProps = {
   /**  */
-  format?: SlTimePicker["format"];
+  format?: SlTimepicker["format"];
   /**  */
-  timePanel?: SlTimePicker["timePanel"];
+  timePanel?: SlTimepicker["timePanel"];
   /** Emitted when the control's value changes. */
   "onsl-change"?: (e: CustomEvent<never>) => void;
   /** Emitted when the control's value changes. */
@@ -1704,37 +1742,6 @@ type SlTreeItemProps = {
 type SlVisuallyHiddenProps = {};
 
 export type CustomElements = {
-  /**
-   * Alerts are used to display important messages inline or as toast notifications.
-   * ---
-   *
-   *
-   * ### **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.
-   *
-   * ### **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>;
-
   /**
    * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
@@ -1776,6 +1783,37 @@ export type CustomElements = {
    */
   "sl-animation": DefineComponent<SlAnimationProps>;
 
+  /**
+   * Alerts are used to display important messages inline or as toast notifications.
+   * ---
+   *
+   *
+   * ### **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.
+   *
+   * ### **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.
    * ---
@@ -1892,6 +1930,32 @@ export type CustomElements = {
    */
   "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
+  /**
+   * Cards can be used to group related subjects in a container.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The card's main content.
+   * - **header** - An optional header for the card.
+   * - **footer** - An optional footer for the card.
+   * - **image** - An optional image to render at the start of the card.
+   *
+   * ### **CSS Properties:**
+   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
+   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
+   * - **--border-width** - The width of the card's borders. _(default: undefined)_
+   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **image** - The container that wraps the card's image.
+   * - **header** - The container that wraps the card's header.
+   * - **body** - The container that wraps the card's main content.
+   * - **footer** - The container that wraps the card's footer.
+   */
+  "sl-card": DefineComponent<SlCardProps>;
+
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
    * ---
@@ -1929,43 +1993,55 @@ export type CustomElements = {
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
   /**
-   * Cards can be used to group related subjects in a container.
+   * A carousel item represent a slide within a [carousel](/components/carousel).
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The card's main content.
-   * - **header** - An optional header for the card.
-   * - **footer** - An optional footer for the card.
-   * - **image** - An optional image to render at the start of the card.
+   *  - _default_ - The carousel item's content..
    *
    * ### **CSS Properties:**
-   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
-   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
-   * - **--border-width** - The width of the card's borders. _(default: undefined)_
-   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **image** - The container that wraps the card's image.
-   * - **header** - The container that wraps the card's header.
-   * - **body** - The container that wraps the card's main content.
-   * - **footer** - The container that wraps the card's footer.
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
    */
-  "sl-card": DefineComponent<SlCardProps>;
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
   /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * 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 carousel item's content..
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
    *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **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-carousel-item": DefineComponent<SlCarouselItemProps>;
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
   /**
    * Color pickers allow the user to select a color.
@@ -2029,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.
    * ---
@@ -2097,6 +2135,19 @@ export type CustomElements = {
    */
   "sl-copy-button": DefineComponent<SlCopyButtonProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel**
+   * - **sl-clear**
+   * - **sl-confirm**
+   * - **sl-date-change**
+   */
+  "sl-date-panel": DefineComponent<SlDatePanelProps>;
+
   /**
    *
    * ---
@@ -2345,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.
    * ---
@@ -2406,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.
    * ---
@@ -2419,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.
    * ---
@@ -2448,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).
    * ---
@@ -2496,6 +2547,13 @@ export type CustomElements = {
    */
   "sl-option": DefineComponent<SlOptionProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
    * ---
@@ -2524,13 +2582,6 @@ export type CustomElements = {
    */
   "sl-popup": DefineComponent<SlPopupProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-pagination": DefineComponent<SlPaginationProps>;
-
   /**
    * Progress bars are used to show the status of an ongoing operation.
    * ---
@@ -3077,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.