@kdcloudjs/shoelace 1.0.26 → 1.0.28

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

@@ -3,15 +3,15 @@ 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 { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { 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 { SlButton } from "../../components/button/button.component.js";
+import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
+import type { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlCol } from "../../components/col/col.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
@@ -24,8 +24,8 @@ import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
-import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
+import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
@@ -33,22 +33,22 @@ import type { SlImageComparer } from "../../components/image-comparer/image-comp
 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 { 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 { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
+import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
 import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
-import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
+import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
-import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
+import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
 import type { SlRange } from "../../components/range/range.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
@@ -56,16 +56,16 @@ import type { SlResizeObserver } from "../../components/resize-observer/resize-o
 import type { SlRow } from "../../components/row/row.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
-import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
+import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
 import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
+import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlThink } from "../../components/think/think.component.js";
 import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
@@ -73,8 +73,8 @@ import type { SlThoughtChainNode } from "../../components/thought-chain-node/tho
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -166,6 +166,15 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlBadgeProps = {
+  /** The badge's theme variant. */
+  variant?: SlBadge["variant"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: SlBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: SlBadge["pulse"];
+};
+
 type SlAvatarProps = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -182,15 +191,6 @@ type SlAvatarProps = {
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
-type SlBadgeProps = {
-  /** The badge's theme variant. */
-  variant?: SlBadge["variant"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: SlBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: SlBadge["pulse"];
-};
-
 type SlBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -201,16 +201,14 @@ screen readers and other assistive devices to provide more context for users. */
   separatorSlot?: SlBreadcrumb["separatorSlot"];
 };
 
-type SlBreadcrumbItemProps = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  href?: SlBreadcrumbItem["href"];
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  target?: SlBreadcrumbItem["target"];
-  /** The `rel` attribute to use on the link. Only used when `href` is set. */
-  rel?: SlBreadcrumbItem["rel"];
+type SlButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: SlButtonGroup["label"];
   /**  */
-  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+  defaultSlot?: SlButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: SlButtonGroup["disableRole"];
 };
 
 type SlButtonProps = {
@@ -282,16 +280,22 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: SlButtonGroup["label"];
-  /**  */
-  defaultSlot?: SlButtonGroup["defaultSlot"];
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  href?: SlBreadcrumbItem["href"];
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  target?: SlBreadcrumbItem["target"];
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  rel?: SlBreadcrumbItem["rel"];
   /**  */
-  disableRole?: SlButtonGroup["disableRole"];
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
+type SlCardProps = {};
+
+type SlCarouselItemProps = {};
+
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -326,10 +330,6 @@ 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"];
@@ -557,6 +557,18 @@ type SlDatepickerProps = {
   max?: SlDatepicker["max"];
   /**  */
   calendar?: SlDatepicker["calendar"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an alteration to the control's value is committed by the user. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the clear button is activated. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
 };
 
 type SlDaterangepickerProps = {
@@ -766,15 +778,6 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: SlFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: SlFormatBytes["display"];
-};
-
 type SlFormatDateProps = {
   /** The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
 recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
@@ -804,6 +807,15 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: SlFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: SlFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: SlFormatBytes["display"];
+};
+
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -1005,6 +1017,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"];
@@ -1022,27 +1036,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 `*`. */
-  attr?: SlMutationObserver["attr"];
-  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
-  "attr-old-value"?: SlMutationObserver["attrOldValue"];
-  /** Watches for changes to the character data contained within the node. */
-  "char-data"?: SlMutationObserver["charData"];
-  /** Indicates whether or not the previous value of the node's text should be recorded. */
-  "char-data-old-value"?: SlMutationObserver["charDataOldValue"];
-  /** Watches for the addition or removal of new child nodes. */
-  "child-list"?: SlMutationObserver["childList"];
-  /** Disables the observer. */
-  disabled?: SlMutationObserver["disabled"];
-
-  /** Emitted when a mutation occurs. */
-  "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
-};
-
 type SlNavProps = {
   /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
@@ -1098,6 +1091,25 @@ type SlNavProps = {
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
+type SlMutationObserverProps = {
+  /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
+`attr="class id title"`. To watch all attributes, use `*`. */
+  attr?: SlMutationObserver["attr"];
+  /** Indicates whether or not the attribute's previous value should be recorded when monitoring changes. */
+  "attr-old-value"?: SlMutationObserver["attrOldValue"];
+  /** Watches for changes to the character data contained within the node. */
+  "char-data"?: SlMutationObserver["charData"];
+  /** Indicates whether or not the previous value of the node's text should be recorded. */
+  "char-data-old-value"?: SlMutationObserver["charDataOldValue"];
+  /** Watches for the addition or removal of new child nodes. */
+  "child-list"?: SlMutationObserver["childList"];
+  /** Disables the observer. */
+  disabled?: SlMutationObserver["disabled"];
+
+  /** Emitted when a mutation occurs. */
+  "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
+};
+
 type SlNavGroupProps = {
   /** Draws the nav group in an active (selected) state. */
   active?: SlNavGroup["active"];
@@ -1193,23 +1205,6 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlOptionProps = {
-  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
-from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-multiple values. */
-  value?: SlOption["value"];
-  /** Draws the option in a disabled state, preventing selection. */
-  disabled?: SlOption["disabled"];
-  /**  */
-  defaultSlot?: SlOption["defaultSlot"];
-  /**  */
-  current?: SlOption["current"];
-  /**  */
-  selected?: SlOption["selected"];
-  /**  */
-  hasHover?: SlOption["hasHover"];
-};
-
 type SlPaginationProps = {
   /**  */
   currentPage?: SlPagination["currentPage"];
@@ -1231,6 +1226,23 @@ type SlPaginationProps = {
   defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
+type SlOptionProps = {
+  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
+from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+multiple values. */
+  value?: SlOption["value"];
+  /** Draws the option in a disabled state, preventing selection. */
+  disabled?: SlOption["disabled"];
+  /**  */
+  defaultSlot?: SlOption["defaultSlot"];
+  /**  */
+  current?: SlOption["current"];
+  /**  */
+  selected?: SlOption["selected"];
+  /**  */
+  hasHover?: SlOption["hasHover"];
+};
+
 type SlPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
 element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
@@ -1361,26 +1373,6 @@ attribute can typically be omitted. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRadioButtonProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
-  /**  */
-  input?: SlRadioButton["input"];
-  /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlRadioGroupProps = {
   /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
 instead. */
@@ -1417,6 +1409,26 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRadioButtonProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadioButton["value"];
+  /** Disables the radio button. */
+  disabled?: SlRadioButton["disabled"];
+  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+this attribute can typically be omitted. */
+  size?: SlRadioButton["size"];
+  /** Draws a pill-style radio button with rounded edges. */
+  pill?: SlRadioButton["pill"];
+  /**  */
+  input?: SlRadioButton["input"];
+  /**  */
+  hiddenInput?: SlRadioButton["hiddenInput"];
+  /** Emitted when the button loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the button gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlRangeProps = {
   /**  */
   title?: SlRange["title"];
@@ -1632,13 +1644,13 @@ be an array. **For this reason, values must not contain spaces.** */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlSpinnerProps = {};
+
 type SlSkeletonProps = {
   /** Determines which effect the skeleton will use. */
   effect?: SlSkeleton["effect"];
 };
 
-type SlSpinnerProps = {};
-
 type SlSplitPanelProps = {
   /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
 container's initial size. */
@@ -1751,15 +1763,102 @@ type SlTabPanelProps = {
   active?: SlTabPanel["active"];
 };
 
-type SlTableProps = {
-  /**  */
-  rowKey?: SlTable["rowKey"];
-  /**  */
-  columns?: SlTable["columns"];
-  /**  */
-  dataSource?: SlTable["dataSource"];
-  /**  */
-  loading?: SlTable["loading"];
+type SlTagProps = {
+  /** The tag's theme variant. */
+  variant?: SlTag["variant"];
+  /** The tag's size. */
+  size?: SlTag["size"];
+  /** Draws a pill-style tag with rounded edges. */
+  pill?: SlTag["pill"];
+  /** Makes the tag removable and shows a remove button. */
+  removable?: SlTag["removable"];
+
+  /** Emitted when the remove button is activated. */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTextareaProps = {
+  /**  */
+  title?: SlTextarea["title"];
+  /** The name of the textarea, submitted as a name/value pair with form data. */
+  name?: SlTextarea["name"];
+  /** The current value of the textarea, submitted as a name/value pair with form data. */
+  value?: SlTextarea["value"];
+  /** The textarea's size. */
+  size?: SlTextarea["size"];
+  /** Draws a filled textarea. */
+  filled?: SlTextarea["filled"];
+  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlTextarea["label"];
+  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlTextarea["helpText"];
+  /** Placeholder text to show as a hint when the input is empty. */
+  placeholder?: SlTextarea["placeholder"];
+  /** The number of rows to display by default. */
+  rows?: SlTextarea["rows"];
+  /** Controls how the textarea can be resized. */
+  resize?: SlTextarea["resize"];
+  /** Disables the textarea. */
+  disabled?: SlTextarea["disabled"];
+  /** Makes the textarea readonly. */
+  readonly?: SlTextarea["readonly"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlTextarea["form"];
+  /** Makes the textarea a required field. */
+  required?: SlTextarea["required"];
+  /** The minimum length of input that will be considered valid. */
+  minlength?: SlTextarea["minlength"];
+  /** The maximum length of input that will be considered valid. */
+  maxlength?: SlTextarea["maxlength"];
+  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
+  autocapitalize?: SlTextarea["autocapitalize"];
+  /** Indicates whether the browser's autocorrect feature is on or off. */
+  autocorrect?: SlTextarea["autocorrect"];
+  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
+  autocomplete?: SlTextarea["autocomplete"];
+  /** Indicates that the input should receive focus on page load. */
+  autofocus?: SlTextarea["autofocus"];
+  /** Used to customize the label or icon of the Enter key on virtual keyboards. */
+  enterkeyhint?: SlTextarea["enterkeyhint"];
+  /** Enables spell checking on the textarea. */
+  spellcheck?: SlTextarea["spellcheck"];
+  /** Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+keyboard on supportive devices. */
+  inputmode?: SlTextarea["inputmode"];
+  /**  */
+  input?: SlTextarea["input"];
+  /**  */
+  sizeAdjuster?: SlTextarea["sizeAdjuster"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: SlTextarea["defaultValue"];
+  /** Gets the validity state object */
+  validity?: SlTextarea["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlTextarea["validationMessage"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when an alteration to the control's value is committed by the user. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTableProps = {
+  /**  */
+  rowKey?: SlTable["rowKey"];
+  /**  */
+  columns?: SlTable["columns"];
+  /**  */
+  dataSource?: SlTable["dataSource"];
+  /**  */
+  loading?: SlTable["loading"];
   /**  */
   bordered?: SlTable["bordered"];
   /**  */
@@ -1834,93 +1933,6 @@ type SlTableProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
-type SlTextareaProps = {
-  /**  */
-  title?: SlTextarea["title"];
-  /** The name of the textarea, submitted as a name/value pair with form data. */
-  name?: SlTextarea["name"];
-  /** The current value of the textarea, submitted as a name/value pair with form data. */
-  value?: SlTextarea["value"];
-  /** The textarea's size. */
-  size?: SlTextarea["size"];
-  /** Draws a filled textarea. */
-  filled?: SlTextarea["filled"];
-  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlTextarea["label"];
-  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlTextarea["helpText"];
-  /** Placeholder text to show as a hint when the input is empty. */
-  placeholder?: SlTextarea["placeholder"];
-  /** The number of rows to display by default. */
-  rows?: SlTextarea["rows"];
-  /** Controls how the textarea can be resized. */
-  resize?: SlTextarea["resize"];
-  /** Disables the textarea. */
-  disabled?: SlTextarea["disabled"];
-  /** Makes the textarea readonly. */
-  readonly?: SlTextarea["readonly"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlTextarea["form"];
-  /** Makes the textarea a required field. */
-  required?: SlTextarea["required"];
-  /** The minimum length of input that will be considered valid. */
-  minlength?: SlTextarea["minlength"];
-  /** The maximum length of input that will be considered valid. */
-  maxlength?: SlTextarea["maxlength"];
-  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
-  autocapitalize?: SlTextarea["autocapitalize"];
-  /** Indicates whether the browser's autocorrect feature is on or off. */
-  autocorrect?: SlTextarea["autocorrect"];
-  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
-  autocomplete?: SlTextarea["autocomplete"];
-  /** Indicates that the input should receive focus on page load. */
-  autofocus?: SlTextarea["autofocus"];
-  /** Used to customize the label or icon of the Enter key on virtual keyboards. */
-  enterkeyhint?: SlTextarea["enterkeyhint"];
-  /** Enables spell checking on the textarea. */
-  spellcheck?: SlTextarea["spellcheck"];
-  /** Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
-keyboard on supportive devices. */
-  inputmode?: SlTextarea["inputmode"];
-  /**  */
-  input?: SlTextarea["input"];
-  /**  */
-  sizeAdjuster?: SlTextarea["sizeAdjuster"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: SlTextarea["defaultValue"];
-  /** Gets the validity state object */
-  validity?: SlTextarea["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlTextarea["validationMessage"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when an alteration to the control's value is committed by the user. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type SlThinkProps = {
   /** The title text shown in the status bar. Accepts plain text.
 For rich HTML content, use the `title` slot instead.
@@ -2045,6 +2057,8 @@ type SlTimepickerProps = {
   "onsl-blur"?: (e: CustomEvent<never>) => void;
   /** Emitted when the clear button is activated. */
   "onsl-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
 type SlTooltipProps = {
@@ -2099,6 +2113,8 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
   "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
 type SlTreeItemProps = {
   /** Expands the tree item. */
   expanded?: SlTreeItem["expanded"];
@@ -2140,8 +2156,6 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlVisuallyHiddenProps = {};
-
 export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
@@ -2215,6 +2229,19 @@ export type CustomElements = {
    */
   "sl-animation": DefineComponent<SlAnimationProps>;
 
+  /**
+   * 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>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2237,19 +2264,6 @@ export type CustomElements = {
    */
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
-  /**
-   * 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>;
-
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -2265,24 +2279,17 @@ export type CustomElements = {
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
   /**
-   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+   * Button groups can be used to group related buttons into sections.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The breadcrumb item's label.
-   * - **prefix** - An optional prefix, usually an icon or icon button.
-   * - **suffix** - An optional suffix, usually an icon or icon button.
-   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **label** - The breadcrumb item's label.
-   * - **prefix** - The container that wraps the prefix.
-   * - **suffix** - The container that wraps the suffix.
-   * - **separator** - The container that wraps the separator.
    */
-  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -2319,53 +2326,24 @@ export type CustomElements = {
   "sl-button": DefineComponent<SlButtonProps>;
 
   /**
-   * Button groups can be used to group related buttons into sections.
+   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *  - _default_ - The breadcrumb item's label.
+   * - **prefix** - An optional prefix, usually an icon or icon button.
+   * - **suffix** - An optional suffix, usually an icon or icon button.
+   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **label** - The breadcrumb item's label.
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   * - **separator** - The container that wraps the separator.
    */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
-
-  /**
-   * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-slide-change** - Emitted when the active slide changes.
-   *
-   * ### **Methods:**
-   *  - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.
-   * - **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.
-   * - **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.
-   * - **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--slide-gap** - The space between each slide. _(default: undefined)_
-   * - **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_
-   * - **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The carousel's internal wrapper.
-   * - **scroll-container** - The scroll container that wraps the slides.
-   * - **pagination** - The pagination indicators wrapper.
-   * - **pagination-item** - The pagination indicator.
-   * - **pagination-item--active** - Applied when the item is active.
-   * - **navigation** - The navigation wrapper.
-   * - **navigation-button** - The navigation button.
-   * - **navigation-button--previous** - Applied to the previous button.
-   * - **navigation-button--next** - Applied to the next button.
-   */
-  "sl-carousel": DefineComponent<SlCarouselProps>;
+  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
    * Cards can be used to group related subjects in a container.
@@ -2406,6 +2384,42 @@ export type CustomElements = {
    */
   "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
+  /**
+   * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-slide-change** - Emitted when the active slide changes.
+   *
+   * ### **Methods:**
+   *  - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.
+   * - **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.
+   * - **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.
+   * - **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--slide-gap** - The space between each slide. _(default: undefined)_
+   * - **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_
+   * - **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The carousel's internal wrapper.
+   * - **scroll-container** - The scroll container that wraps the slides.
+   * - **pagination** - The pagination indicators wrapper.
+   * - **pagination-item** - The pagination indicator.
+   * - **pagination-item--active** - Applied when the item is active.
+   * - **navigation** - The navigation wrapper.
+   * - **navigation-button** - The navigation button.
+   * - **navigation-button--previous** - Applied to the previous button.
+   * - **navigation-button--next** - Applied to the next button.
+   */
+  "sl-carousel": DefineComponent<SlCarouselProps>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2563,9 +2577,17 @@ export type CustomElements = {
   "sl-date-panel": DefineComponent<SlDatePanelProps>;
 
   /**
-   *
+   * Datepickers allow users to select a date using a calendar interface.
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-change** - Emitted when an alteration to the control's value is committed by the user.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-input** - Emitted when the control receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **sl-clear** - Emitted when the clear button is activated.
    */
   "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
@@ -2740,18 +2762,18 @@ export type CustomElements = {
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+  "sl-format-date": DefineComponent<SlFormatDateProps>;
 
   /**
-   * Formats a date/time using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "sl-format-date": DefineComponent<SlFormatDateProps>;
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
    * Formats a number using the specified locale and options.
@@ -2894,6 +2916,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.
    * ---
@@ -2924,17 +2959,22 @@ export type CustomElements = {
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
-   * Menu labels are used to describe a group of menu items.
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *
    * ### **Slots:**
-   *  - _default_ - The menu label's content.
+   *  - _default_ - The nav items.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
+  "sl-nav": DefineComponent<SlNavProps>;
 
   /**
    * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
@@ -2949,24 +2989,6 @@ export type CustomElements = {
    */
   "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
-  /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The nav items.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-nav": DefineComponent<SlNavProps>;
-
   /**
    * Nav groups are used to group related nav items.
    * ---
@@ -3039,6 +3061,13 @@ export type CustomElements = {
    */
   "sl-nav-submenu": DefineComponent<SlNavSubmenuProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
@@ -3061,13 +3090,6 @@ 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.
    * ---
@@ -3170,34 +3192,6 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
-  /**
-   * Radios buttons allow the user to select a single option from a group using a button-like control.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the button loses focus.
-   * - **sl-focus** - Emitted when the button gains focus.
-   *
-   * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
-   * - **blur()** - Removes focus from the radio button.
-   *
-   * ### **Slots:**
-   *  - _default_ - The radio button's label.
-   * - **prefix** - A presentational prefix icon or similar element.
-   * - **suffix** - A presentational suffix icon or similar element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **button** - The internal `<button>` element.
-   * - **button--checked** - The internal button element when the radio button is checked.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The container that wraps the radio button's label.
-   * - **suffix** - The container that wraps the suffix.
-   */
-  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
-
   /**
    * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
@@ -3230,6 +3224,34 @@ export type CustomElements = {
    */
   "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
+  /**
+   * Radios buttons allow the user to select a single option from a group using a button-like control.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the button loses focus.
+   * - **sl-focus** - Emitted when the button gains focus.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the radio button.
+   * - **blur()** - Removes focus from the radio button.
+   *
+   * ### **Slots:**
+   *  - _default_ - The radio button's label.
+   * - **prefix** - A presentational prefix icon or similar element.
+   * - **suffix** - A presentational suffix icon or similar element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **button** - The internal `<button>` element.
+   * - **button--checked** - The internal button element when the radio button is checked.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The container that wraps the radio button's label.
+   * - **suffix** - The container that wraps the suffix.
+   */
+  "sl-radio-button": DefineComponent<SlRadioButtonProps>;
+
   /**
    * Ranges allow the user to select a single value within a given range using a slider.
    * ---
@@ -3404,36 +3426,36 @@ export type CustomElements = {
   "sl-select": DefineComponent<SlSelectProps>;
 
   /**
-   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
+   * Spinners are used to show the progress of an indeterminate operation.
    * ---
    *
    *
    * ### **CSS Properties:**
-   *  - **--border-radius** - The skeleton's border radius. _(default: undefined)_
-   * - **--color** - The color of the skeleton. _(default: undefined)_
-   * - **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_
+   *  - **--track-width** - The width of the track. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_
+   * - **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
    */
-  "sl-skeleton": DefineComponent<SlSkeletonProps>;
+  "sl-spinner": DefineComponent<SlSpinnerProps>;
 
   /**
-   * Spinners are used to show the progress of an indeterminate operation.
+   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
    * ---
    *
    *
    * ### **CSS Properties:**
-   *  - **--track-width** - The width of the track. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_
-   * - **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_
+   *  - **--border-radius** - The skeleton's border radius. _(default: undefined)_
+   * - **--color** - The color of the skeleton. _(default: undefined)_
+   * - **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
    */
-  "sl-spinner": DefineComponent<SlSpinnerProps>;
+  "sl-skeleton": DefineComponent<SlSkeletonProps>;
 
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
@@ -3569,16 +3591,6 @@ export type CustomElements = {
    */
   "sl-tab-panel": DefineComponent<SlTabPanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change**
-   */
-  "sl-table": DefineComponent<SlTableProps>;
-
   /**
    * Tags are used as labels to organize things or to indicate a selection.
    * ---
@@ -3636,6 +3648,16 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change**
+   */
+  "sl-table": DefineComponent<SlTableProps>;
+
   /**
    * Think is used to display an AI model's thinking process with expandable/collapsible content.
    * ---
@@ -3763,6 +3785,7 @@ export type CustomElements = {
    * - **sl-focus** - Emitted when the control gains focus.
    * - **sl-blur** - Emitted when the control loses focus.
    * - **sl-clear** - Emitted when the clear button is activated.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    *
    * ### **Slots:**
    *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
@@ -3830,6 +3853,16 @@ export type CustomElements = {
    */
   "sl-tree": DefineComponent<SlTreeProps>;
 
+  /**
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to be visually hidden.
+   */
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
+
   /**
    * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
@@ -3874,16 +3907,6 @@ export type CustomElements = {
    * - **checkbox__label** - The checkbox's exported `label` part.
    */
   "sl-tree-item": DefineComponent<SlTreeItemProps>;
-
-  /**
-   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to be visually hidden.
-   */
-  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 };
 
 declare module "vue" {