@kdcloudjs/shoelace 1.0.5 → 1.0.6

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

@@ -1,17 +1,17 @@
 import type { DefineComponent } from "vue";
 
-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 { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
+import type { SlBadge } from "../../components/badge/badge.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 { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
+import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
@@ -19,32 +19,36 @@ import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-
 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";
-import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
+import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
-import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
+import type { SlFormatNumber } from "../../components/format-number/format-number.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 { SlInput } from "../../components/input/input.component.js";
 import type { SlInclude } from "../../components/include/include.component.js";
+import type { SlInput } from "../../components/input/input.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
-import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
-import type { SlOption } from "../../components/option/option.component.js";
-import type { SlPagination } from "../../components/pagination/pagination.component.js";
-import type { SlPopup } from "../../components/popup/popup.component.js";
+import type { SlNav } from "../../components/nav/nav.component.js";
+import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
+import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
+import type { SlPopup } from "../../components/popup/popup.component.js";
+import type { SlPagination } from "../../components/pagination/pagination.component.js";
+import type { SlOption } from "../../components/option/option.component.js";
+import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
-import type { 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 { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
+import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
@@ -52,19 +56,48 @@ import type { SlSelect } from "../../components/select/select.component.js";
 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
-import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
+import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
-import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
+import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { 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"];
@@ -84,6 +117,22 @@ type SlAnimatedImageProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -126,49 +175,14 @@ 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"];
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
   /**  */
-  base?: SlAlert["base"];
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
   /**  */
-  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"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
 };
 
 type SlBadgeProps = {
@@ -180,16 +194,6 @@ type SlBadgeProps = {
   pulse?: SlBadge["pulse"];
 };
 
-type SlBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: SlBreadcrumb["label"];
-  /**  */
-  defaultSlot?: SlBreadcrumb["defaultSlot"];
-  /**  */
-  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. */
@@ -281,8 +285,6 @@ 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"];
@@ -319,6 +321,8 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type SlCarouselItemProps = {};
 
+type SlCardProps = {};
+
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -483,12 +487,20 @@ type SlDatePanelProps = {
   /**  */
   max?: SlDatePanel["max"];
   /**  */
+  format?: SlDatePanel["format"];
+  /**  */
   calendar?: SlDatePanel["calendar"];
   /**  */
   yearColumn?: SlDatePanel["yearColumn"];
   /**  */
   monthColumn?: SlDatePanel["monthColumn"];
   /**  */
+  hourColumn?: SlDatePanel["hourColumn"];
+  /**  */
+  minuteColumn?: SlDatePanel["minuteColumn"];
+  /**  */
+  secondColumn?: SlDatePanel["secondColumn"];
+  /**  */
   "onsl-cancel"?: (e: CustomEvent<CustomEvent>) => void;
   /**  */
   "onsl-clear"?: (e: CustomEvent<CustomEvent>) => void;
@@ -540,6 +552,11 @@ can use the `show()` and `hide()` methods and this attribute will reflect the de
 };
 
 type SlDialogProps = {
+  /** Indicates whether or not the dialog is resizable. When true, the user can resize the dialog by dragging the
+bottom-right corner, and double-clicking the header will toggle fullscreen mode. */
+  resize?: SlDialog["resize"];
+  /** Indicates whether or not the dialog is in fullscreen mode. */
+  fullscreen?: SlDialog["fullscreen"];
   /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state. */
   open?: SlDialog["open"];
@@ -571,11 +588,6 @@ accessible way for users to dismiss the dialog. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type SlDividerProps = {
-  /** Draws the divider in a vertical orientation. */
-  vertical?: SlDivider["vertical"];
-};
-
 type SlDrawerProps = {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
@@ -613,6 +625,11 @@ accessible way for users to dismiss the drawer. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
+type SlDividerProps = {
+  /** Draws the divider in a vertical orientation. */
+  vertical?: SlDivider["vertical"];
+};
+
 type SlDropdownProps = {
   /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
@@ -691,6 +708,24 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlIconProps = {
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  name?: SlIcon["name"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: SlIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: SlIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: SlIcon["library"];
+
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -714,24 +749,6 @@ type SlFormatNumberProps = {
   "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
-type SlIconProps = {
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  name?: SlIcon["name"];
-  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks. */
-  src?: SlIcon["src"];
-  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-ignored by assistive devices. */
-  label?: SlIcon["label"];
-  /** The name of a registered custom icon library. */
-  library?: SlIcon["library"];
-
-  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlIconButtonProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIconButton["name"];
@@ -770,6 +787,22 @@ 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"];
@@ -867,22 +900,6 @@ 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"];
@@ -890,8 +907,6 @@ 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"];
@@ -909,6 +924,8 @@ 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 `*`. */
@@ -928,41 +945,83 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
-type SlOptionProps = {
-  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
-from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-multiple values. */
-  value?: SlOption["value"];
-  /** Draws the option in a disabled state, preventing selection. */
-  disabled?: SlOption["disabled"];
-  /**  */
-  defaultSlot?: SlOption["defaultSlot"];
-  /**  */
-  current?: SlOption["current"];
-  /**  */
-  selected?: SlOption["selected"];
+type SlNavProps = {
+  /** The value of the selected nav item. */
+  value?: SlNav["value"];
+  /** The mode of navigation. */
+  mode?: SlNav["mode"];
   /**  */
-  hasHover?: SlOption["hasHover"];
+  defaultSlot?: SlNav["defaultSlot"];
+  /** Emitted when the selected nav item changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
-type SlPaginationProps = {
-  /**  */
-  currentPage?: SlPagination["currentPage"];
-  /**  */
-  pageSize?: SlPagination["pageSize"];
-  /**  */
-  pageSizeOpts?: SlPagination["pageSizeOpts"];
-  /**  */
-  total?: SlPagination["total"];
-  /**  */
-  disabled?: SlPagination["disabled"];
+type SlNavGroupProps = {
+  /** Draws the nav group in an active (selected) state. */
+  active?: SlNavGroup["active"];
+  /** The mode of navigation. */
+  mode?: SlNavGroup["mode"];
+};
+
+type SlNavItemProps = {
+  /** The value to track selection. */
+  value?: SlNavItem["value"];
+  /** Draws the nav item in a disabled state. */
+  disabled?: SlNavItem["disabled"];
+  /** Draws the nav item in an active (selected) state. */
+  active?: SlNavItem["active"];
+  /** The URL to link to. If set, the nav item will render as an anchor tag. */
+  href?: SlNavItem["href"];
+  /** The target attribute for the anchor tag. */
+  target?: SlNavItem["target"];
+  /** The download attribute for the anchor tag. */
+  download?: SlNavItem["download"];
+  /** The rel attribute for the anchor tag. */
+  rel?: SlNavItem["rel"];
+  /** The mode of navigation. */
+  mode?: SlNavItem["mode"];
+
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+};
+
+type SlNavSubmenuProps = {
+  /** Indicates whether or not the submenu is open. */
+  open?: SlNavSubmenu["open"];
+  /** The summary to show in the header. If you need to display HTML, use the `title` slot instead. */
+  title?: SlNavSubmenu["title"];
+  /** Draws the submenu in a disabled state. */
+  disabled?: SlNavSubmenu["disabled"];
+  /** Draws the submenu in an active (selected) state. */
+  active?: SlNavSubmenu["active"];
+  /** The mode of navigation. */
+  mode?: SlNavSubmenu["mode"];
   /**  */
-  className?: SlPagination["className"];
+  header?: SlNavSubmenu["header"];
   /**  */
-  simpleMode?: SlPagination["simpleMode"];
+  body?: SlNavSubmenu["body"];
   /**  */
-  defaultCurrentPage?: SlPagination["defaultCurrentPage"];
-};
+  popup?: SlNavSubmenu["popup"];
+  /** Emitted when the submenu opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the submenu opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the submenu closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the submenu closes and all animations are complete. */
+  "onsl-after-hide"?: (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 SlPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
@@ -1039,13 +1098,59 @@ 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 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 SlOptionProps = {
+  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
+from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+multiple values. */
+  value?: SlOption["value"];
+  /** Draws the option in a disabled state, preventing selection. */
+  disabled?: SlOption["disabled"];
+  /**  */
+  defaultSlot?: SlOption["defaultSlot"];
+  /**  */
+  current?: SlOption["current"];
+  /**  */
+  selected?: SlOption["selected"];
+  /**  */
+  hasHover?: SlOption["hasHover"];
+};
+
+type SlQrCodeProps = {
+  /** The QR code's value. */
+  value?: SlQrCode["value"];
+  /** The label for assistive devices to announce. If unspecified, the value will be used instead. */
+  label?: SlQrCode["label"];
+  /** The size of the QR code, in pixels. */
+  size?: SlQrCode["size"];
+  /** The fill color. This can be any valid CSS color, but not a CSS custom property. */
+  fill?: SlQrCode["fill"];
+  /** The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property. */
+  background?: SlQrCode["background"];
+  /** The edge radius of each module. Must be between 0 and 0.5. */
+  radius?: SlQrCode["radius"];
+  /** The level of error correction to use. [Learn more](https://www.qrcode.com/en/about/error_correction.html) */
+  "error-correction"?: SlQrCode["errorCorrection"];
+  /**  */
+  canvas?: SlQrCode["canvas"];
 };
 
 type SlProgressRingProps = {
@@ -1075,25 +1180,6 @@ attribute can typically be omitted. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlQrCodeProps = {
-  /** The QR code's value. */
-  value?: SlQrCode["value"];
-  /** The label for assistive devices to announce. If unspecified, the value will be used instead. */
-  label?: SlQrCode["label"];
-  /** The size of the QR code, in pixels. */
-  size?: SlQrCode["size"];
-  /** The fill color. This can be any valid CSS color, but not a CSS custom property. */
-  fill?: SlQrCode["fill"];
-  /** The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property. */
-  background?: SlQrCode["background"];
-  /** The edge radius of each module. Must be between 0 and 0.5. */
-  radius?: SlQrCode["radius"];
-  /** The level of error correction to use. [Learn more](https://www.qrcode.com/en/about/error_correction.html) */
-  "error-correction"?: SlQrCode["errorCorrection"];
-  /**  */
-  canvas?: SlQrCode["canvas"];
-};
-
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1150,32 +1236,6 @@ the same document or shadow root for this to work. */
   "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 = {
   /**  */
   title?: SlRange["title"];
@@ -1226,6 +1286,32 @@ 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
@@ -1386,6 +1472,21 @@ or a function which takes in a `SnapFunctionParams`, and returns a position to s
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTabProps = {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SlTab["panel"];
+  /** Draws the tab in an active state. */
+  active?: SlTab["active"];
+  /** Makes the tab closable and shows a close button. */
+  closable?: SlTab["closable"];
+  /** Disables the tab and prevents selection. */
+  disabled?: SlTab["disabled"];
+  /**  */
+  tab?: SlTab["tab"];
+  /** Emitted when the tab is closable and the close button is activated. */
+  "onsl-close"?: (e: CustomEvent<never>) => void;
+};
+
 type SlSwitchProps = {
   /**  */
   title?: SlSwitch["title"];
@@ -1427,21 +1528,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTabProps = {
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SlTab["panel"];
-  /** Draws the tab in an active state. */
-  active?: SlTab["active"];
-  /** Makes the tab closable and shows a close button. */
-  closable?: SlTab["closable"];
-  /** Disables the tab and prevents selection. */
-  disabled?: SlTab["disabled"];
-  /**  */
-  tab?: SlTab["tab"];
-  /** Emitted when the tab is closable and the close button is activated. */
-  "onsl-close"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -1505,6 +1591,8 @@ type SlTableProps = {
   /**  */
   onColumnResize?: SlTable["onColumnResize"];
   /**  */
+  virtualized?: SlTable["virtualized"];
+  /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
   expandedMap?: SlTable["expandedMap"];
@@ -1519,8 +1607,12 @@ type SlTableProps = {
   /**  */
   pageIndex?: SlTable["pageIndex"];
   /**  */
+  columnPinning?: SlTable["columnPinning"];
+  /**  */
   adapter?: SlTable["adapter"];
   /**  */
+  setColumnWidth?: SlTable["setColumnWidth"];
+  /**  */
   handleBodyScroll?: SlTable["handleBodyScroll"];
   /**  */
   handleBodyScrollLeft?: SlTable["handleBodyScrollLeft"];
@@ -1529,6 +1621,8 @@ type SlTableProps = {
   /**  */
   syncTableWidth?: SlTable["syncTableWidth"];
   /**  */
+  setScrollBarStyle?: SlTable["setScrollBarStyle"];
+  /**  */
   setScrollPositionClassName?: SlTable["setScrollPositionClassName"];
   /**  */
   generateCustomCellSlot?: SlTable["generateCustomCellSlot"];
@@ -1542,6 +1636,20 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type SlTagProps = {
+  /** The tag's theme variant. */
+  variant?: SlTag["variant"];
+  /** The tag's size. */
+  size?: SlTag["size"];
+  /** Draws a pill-style tag with rounded edges. */
+  pill?: SlTag["pill"];
+  /** Makes the tag removable and shows a remove button. */
+  removable?: SlTag["removable"];
+
+  /** Emitted when the remove button is activated. */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -1615,20 +1723,6 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTimepickerProps = {
   /**  */
   format?: SlTimepicker["format"];
@@ -1742,47 +1836,6 @@ type SlTreeItemProps = {
 type SlVisuallyHiddenProps = {};
 
 export type CustomElements = {
-  /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-   * ---
-   *
-   *
-   * ### **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>;
-
-  /**
-   * 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).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
-   *
-   * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
-   */
-  "sl-animation": DefineComponent<SlAnimationProps>;
-
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -1815,15 +1868,37 @@ export type CustomElements = {
   "sl-alert": DefineComponent<SlAlertProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
    *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. 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:**
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
+   */
+  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
+
+  /**
+   * Avatars are used to represent a person or object.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
+   * ### **Slots:**
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
    *
    * ### **CSS Properties:**
    *  - **--size** - The size of the avatar. _(default: undefined)_
@@ -1837,17 +1912,23 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * 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).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The badge's content.
+   * ### **Events:**
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **Methods:**
+   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -1863,6 +1944,19 @@ export type CustomElements = {
    */
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
+  /**
+   * Badges are used to draw attention and display statuses or counts.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The badge's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-badge": DefineComponent<SlBadgeProps>;
+
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -1930,32 +2024,6 @@ 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.
    * ---
@@ -2005,6 +2073,32 @@ export type CustomElements = {
    */
   "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
+  /**
+   * 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>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2152,9 +2246,6 @@ export type CustomElements = {
    *
    * ---
    *
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the picker.
    */
   "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
@@ -2231,18 +2322,6 @@ export type CustomElements = {
    */
   "sl-dialog": DefineComponent<SlDialogProps>;
 
-  /**
-   * Dividers are used to visually separate or group elements.
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--color** - The color of the divider. _(default: undefined)_
-   * - **--width** - The width of the divider. _(default: undefined)_
-   * - **--spacing** - The spacing of the divider. _(default: undefined)_
-   */
-  "sl-divider": DefineComponent<SlDividerProps>;
-
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -2286,6 +2365,18 @@ export type CustomElements = {
    */
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
+  /**
+   * Dividers are used to visually separate or group elements.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--color** - The color of the divider. _(default: undefined)_
+   * - **--width** - The width of the divider. _(default: undefined)_
+   * - **--spacing** - The spacing of the divider. _(default: undefined)_
+   */
+  "sl-divider": DefineComponent<SlDividerProps>;
+
   /**
    * Dropdowns expose additional content that "drops down" in a panel.
    * ---
@@ -2329,13 +2420,6 @@ export type CustomElements = {
    */
   "sl-format-date": DefineComponent<SlFormatDateProps>;
 
-  /**
-   * Formats a number using the specified locale and options.
-   * ---
-   *
-   */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
-
   /**
    * Icons are symbols that can be used to represent various options within an application.
    * ---
@@ -2351,6 +2435,13 @@ export type CustomElements = {
    */
   "sl-icon": DefineComponent<SlIconProps>;
 
+  /**
+   * Formats a number using the specified locale and options.
+   * ---
+   *
+   */
+  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
    * ---
@@ -2396,6 +2487,17 @@ 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.
    * ---
@@ -2446,17 +2548,6 @@ 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.
    * ---
@@ -2470,19 +2561,6 @@ 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.
    * ---
@@ -2512,6 +2590,19 @@ 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).
    * ---
@@ -2526,33 +2617,114 @@ export type CustomElements = {
   "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
-   * Options define the selectable items within various form controls such as [select](/components/select).
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **getTextLabel()** - Returns a plain text label based on the option's content.
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - The option's label.
-   * - **prefix** - Used to prepend an icon or similar element to the menu item.
-   * - **suffix** - Used to append an icon or similar element to the menu item.
+   *  - _default_ - The nav items.
    *
    * ### **CSS Parts:**
-   *  - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **base** - The component's base wrapper.
-   * - **label** - The option's label.
-   * - **prefix** - The container that wraps the prefix.
-   * - **suffix** - The container that wraps the suffix.
+   *  - **base** - The component's base wrapper.
    */
-  "sl-option": DefineComponent<SlOptionProps>;
+  "sl-nav": DefineComponent<SlNavProps>;
 
   /**
+   * Nav groups are used to group related nav items.
+   * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav items within the group.
+   * - **title** - The nav group's title.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **title** - The nav group title.
+   * - **body** - The nav group body.
+   */
+  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+
+  /**
+   * Nav items are the individual links or buttons within a navigation menu.
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the nav item.
+   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav item label.
+   * - **suffix** - The suffix container.
    */
-  "sl-pagination": DefineComponent<SlPaginationProps>;
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
+
+  /**
+   * Nav submenus are used to group related nav items in a hierarchical structure.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the submenu opens.
+   * - **sl-after-show** - Emitted after the submenu opens and all animations are complete.
+   * - **sl-hide** - Emitted when the submenu closes.
+   * - **sl-after-hide** - Emitted after the submenu closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the submenu.
+   * - **hide()** - Hides the submenu.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav items within the submenu.
+   * - **title** - The nav submenu's title.
+   * - **prefix** - Used to prepend an icon or similar element to the nav submenu.
+   * - **suffix** - Used to append an icon or similar element to the nav submenu.
+   * - **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **header** - The header that wraps the title, prefix, suffix and expand/collapse icon.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav submenu label.
+   * - **suffix** - The suffix container.
+   * - **expand-icon** - The container that wraps the expand/collapse icons.
+   * - **content** - The nav submenu content.
+   * - **popup** - The popup that wraps the content in horizontal mode.
+   */
+  "sl-nav-submenu": DefineComponent<SlNavSubmenuProps>;
+
+  /**
+   * 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.
@@ -2583,25 +2755,43 @@ export type CustomElements = {
   "sl-popup": DefineComponent<SlPopupProps>;
 
   /**
-   * Progress bars are used to show the status of an ongoing operation.
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
+  /**
+   * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
    *
    *
+   * ### **Methods:**
+   *  - **getTextLabel()** - Returns a plain text label based on the option's content.
+   *
    * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
+   *  - _default_ - The option's label.
+   * - **prefix** - Used to prepend an icon or similar element to the menu item.
+   * - **suffix** - Used to append an icon or similar element to the menu item.
+   *
+   * ### **CSS Parts:**
+   *  - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **base** - The component's base wrapper.
+   * - **label** - The option's label.
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   */
+  "sl-option": DefineComponent<SlOptionProps>;
+
+  /**
+   * 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 Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
    */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
@@ -2646,16 +2836,6 @@ 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.
    * ---
@@ -2716,30 +2896,6 @@ 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.
    * ---
@@ -2785,6 +2941,30 @@ 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.
    * ---
@@ -2935,6 +3115,24 @@ export type CustomElements = {
    */
   "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
+  /**
+   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
+   */
+  "sl-tab": DefineComponent<SlTabProps>;
+
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -2974,24 +3172,6 @@ export type CustomElements = {
    */
   "sl-switch": DefineComponent<SlSwitchProps>;
 
-  /**
-   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   */
-  "sl-tab": DefineComponent<SlTabProps>;
-
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -3052,6 +3232,25 @@ export type CustomElements = {
    */
   "sl-table": DefineComponent<SlTableProps>;
 
+  /**
+   * Tags are used as labels to organize things or to indicate a selection.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-remove** - Emitted when the remove button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tag's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **content** - The tag's content.
+   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
+   * - **remove-button__base** - The remove button's exported `base` part.
+   */
+  "sl-tag": DefineComponent<SlTagProps>;
+
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---
@@ -3090,25 +3289,6 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
-  /**
-   * Tags are used as labels to organize things or to indicate a selection.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tag's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **content** - The tag's content.
-   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
-   * - **remove-button__base** - The remove button's exported `base` part.
-   */
-  "sl-tag": DefineComponent<SlTagProps>;
-
   /**
    * A time picker component that provides a time selection interface.
    * ---