@kdcloudjs/shoelace 1.0.15 → 1.0.16

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

@@ -2,29 +2,29 @@ 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 { SlAvatar } from "../../components/avatar/avatar.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 { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
-import type { SlCard } from "../../components/card/card.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 { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
-import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
 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 { SlDatepicker } from "../../components/datepicker/datepicker.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 { 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 { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
@@ -33,18 +33,18 @@ 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 { SlNav } from "../../components/nav/nav.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.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 { SlPopup } from "../../components/popup/popup.component.js";
-import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.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 { SlRange } from "../../components/range/range.component.js";
@@ -53,15 +53,15 @@ import type { SlRelativeTime } from "../../components/relative-time/relative-tim
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
-import type { SlSpinner } from "../../components/spinner/spinner.component.js";
 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
-import type { SlSwitch } from "../../components/switch/switch.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 { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
+import type { SlTag } from "../../components/tag/tag.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
 import type { SlTimepicker } from "../../components/timepicker/timepicker.component.js";
 import type { SlTooltip } from "../../components/tooltip/tooltip.component.js";
@@ -117,22 +117,6 @@ 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"];
@@ -175,6 +159,22 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlBadgeProps = {
   /** The badge's theme variant. */
   variant?: SlBadge["variant"];
@@ -206,8 +206,6 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
-type SlCardProps = {};
-
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -287,6 +285,8 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
+type SlCardProps = {};
+
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -323,50 +323,6 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type SlCarouselItemProps = {};
 
-type SlCheckboxProps = {
-  /**  */
-  title?: SlCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: SlCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: SlCheckbox["value"];
-  /** The checkbox's size. */
-  size?: SlCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: SlCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: SlCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: SlCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: SlCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlCheckbox["helpText"];
-  /**  */
-  input?: SlCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type SlColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -433,6 +389,50 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlCheckboxProps = {
+  /**  */
+  title?: SlCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: SlCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: SlCheckbox["value"];
+  /** The checkbox's size. */
+  size?: SlCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: SlCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: SlCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: SlCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: SlCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlCheckbox["helpText"];
+  /**  */
+  input?: SlCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type SlCopyButtonProps = {
   /** The text value to copy. */
   value?: SlCopyButton["value"];
@@ -510,19 +510,6 @@ type SlDatePanelProps = {
   "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlDatepickerProps = {
-  /**  */
-  type?: SlDatepicker["type"];
-  /**  */
-  pattern?: SlDatepicker["pattern"];
-  /**  */
-  min?: SlDatepicker["min"];
-  /**  */
-  max?: SlDatepicker["max"];
-  /**  */
-  calendar?: SlDatepicker["calendar"];
-};
-
 type SlDetailsProps = {
   /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
@@ -670,6 +657,19 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDatepickerProps = {
+  /**  */
+  type?: SlDatepicker["type"];
+  /**  */
+  pattern?: SlDatepicker["pattern"];
+  /**  */
+  min?: SlDatepicker["min"];
+  /**  */
+  max?: SlDatepicker["max"];
+  /**  */
+  calendar?: SlDatepicker["calendar"];
+};
+
 type SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -679,29 +679,6 @@ type SlFormatBytesProps = {
   display?: SlFormatBytes["display"];
 };
 
-type SlFormatNumberProps = {
-  /** The number to format. */
-  value?: SlFormatNumber["value"];
-  /** The formatting style to use. */
-  type?: SlFormatNumber["type"];
-  /** Turns off grouping separators. */
-  "no-grouping"?: SlFormatNumber["noGrouping"];
-  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
-  currency?: SlFormatNumber["currency"];
-  /** How to display the currency. */
-  "currency-display"?: SlFormatNumber["currencyDisplay"];
-  /** The minimum number of integer digits to use. Possible values are 1-21. */
-  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
-  /** The minimum number of fraction digits to use. Possible values are 0-20. */
-  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
-  /** The maximum number of fraction digits to use. Possible values are 0-0. */
-  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
-  /** The minimum number of significant digits to use. Possible values are 1-21. */
-  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
-  /** The maximum number of significant digits to use,. Possible values are 1-21. */
-  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
-};
-
 type 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
@@ -731,6 +708,29 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlFormatNumberProps = {
+  /** The number to format. */
+  value?: SlFormatNumber["value"];
+  /** The formatting style to use. */
+  type?: SlFormatNumber["type"];
+  /** Turns off grouping separators. */
+  "no-grouping"?: SlFormatNumber["noGrouping"];
+  /** The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting. */
+  currency?: SlFormatNumber["currency"];
+  /** How to display the currency. */
+  "currency-display"?: SlFormatNumber["currencyDisplay"];
+  /** The minimum number of integer digits to use. Possible values are 1-21. */
+  "minimum-integer-digits"?: SlFormatNumber["minimumIntegerDigits"];
+  /** The minimum number of fraction digits to use. Possible values are 0-20. */
+  "minimum-fraction-digits"?: SlFormatNumber["minimumFractionDigits"];
+  /** The maximum number of fraction digits to use. Possible values are 0-0. */
+  "maximum-fraction-digits"?: SlFormatNumber["maximumFractionDigits"];
+  /** The minimum number of significant digits to use. Possible values are 1-21. */
+  "minimum-significant-digits"?: SlFormatNumber["minimumSignificantDigits"];
+  /** The maximum number of significant digits to use,. Possible values are 1-21. */
+  "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
+};
+
 type SlIconProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIcon["name"];
@@ -926,6 +926,25 @@ type SlMenuItemProps = {
 
 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 = {
   /** The value of the selected nav item. */
   value?: SlNav["value"];
@@ -946,25 +965,6 @@ type SlNavGroupProps = {
   mode?: SlNavGroup["mode"];
 };
 
-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 SlNavItemProps = {
   /** The value to track selection. */
   value?: SlNavItem["value"];
@@ -1125,15 +1125,6 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
-};
-
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1145,22 +1136,6 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
-attribute can typically be omitted. */
-  size?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1180,6 +1155,31 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
+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 SlRadioProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadio["value"];
+  /** The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
+attribute can typically be omitted. */
+  size?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
+  /**  */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1440,13 +1440,38 @@ 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. */
+  position?: SlSplitPanel["position"];
+  /** The current position of the divider from the primary panel's edge in pixels. */
+  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  vertical?: SlSplitPanel["vertical"];
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  disabled?: SlSplitPanel["disabled"];
+  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+host element is resized. */
+  primary?: SlSplitPanel["primary"];
+  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
+or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
+  snap?: SlSplitPanel["snap"];
+  /** How close the divider must be to a snap point until snapping occurs. */
+  "snap-threshold"?: SlSplitPanel["snapThreshold"];
+  /**  */
+  divider?: SlSplitPanel["divider"];
+  /** Emitted when the divider's position changes. */
+  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+};
+
 type SlSwitchProps = {
   /**  */
   title?: SlSwitch["title"];
@@ -1488,31 +1513,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlSplitPanelProps = {
-  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
-container's initial size. */
-  position?: SlSplitPanel["position"];
-  /** The current position of the divider from the primary panel's edge in pixels. */
-  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
-  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
-  vertical?: SlSplitPanel["vertical"];
-  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
-  disabled?: SlSplitPanel["disabled"];
-  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
-primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
-host element is resized. */
-  primary?: SlSplitPanel["primary"];
-  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
-or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
-  snap?: SlSplitPanel["snap"];
-  /** How close the divider must be to a snap point until snapping occurs. */
-  "snap-threshold"?: SlSplitPanel["snapThreshold"];
-  /**  */
-  divider?: SlSplitPanel["divider"];
-  /** Emitted when the divider's position changes. */
-  "onsl-reposition"?: (e: CustomEvent<never>) => void;
-};
-
 type 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"];
@@ -1559,20 +1559,6 @@ type SlTabPanelProps = {
   active?: SlTabPanel["active"];
 };
 
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTableProps = {
   /**  */
   rowKey?: SlTable["rowKey"];
@@ -1654,6 +1640,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"];
@@ -1893,6 +1893,25 @@ export type CustomElements = {
    */
   "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>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -1915,25 +1934,6 @@ export type CustomElements = {
    */
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
-  /**
-   * 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>;
-
   /**
    * Badges are used to draw attention and display statuses or counts.
    * ---
@@ -1981,32 +1981,6 @@ export type CustomElements = {
    */
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
-  /**
-   * 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>;
-
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2054,6 +2028,32 @@ export type CustomElements = {
    */
   "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
+  /**
+   * Cards can be used to group related subjects in a container.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The card's main content.
+   * - **header** - An optional header for the card.
+   * - **footer** - An optional footer for the card.
+   * - **image** - An optional image to render at the start of the card.
+   *
+   * ### **CSS Properties:**
+   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
+   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
+   * - **--border-width** - The width of the card's borders. _(default: undefined)_
+   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **image** - The container that wraps the card's image.
+   * - **header** - The container that wraps the card's header.
+   * - **body** - The container that wraps the card's main content.
+   * - **footer** - The container that wraps the card's footer.
+   */
+  "sl-card": DefineComponent<SlCardProps>;
+
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
    * ---
@@ -2086,60 +2086,22 @@ export type CustomElements = {
    * - **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>;
-
-  /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The carousel item's content..
-   *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
-   */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
-
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the checkbox loses focus.
-   * - **sl-change** - Emitted when the checked state changes.
-   * - **sl-focus** - Emitted when the checkbox gains focus.
-   * - **sl-input** - Emitted when the checkbox receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **navigation-button--next** - Applied to the next button.
+   */
+  "sl-carousel": DefineComponent<SlCarouselProps>;
+
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
    *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
    *
    * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *  - _default_ - The carousel item's content..
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
    */
-  "sl-checkbox": DefineComponent<SlCheckboxProps>;
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
   /**
    * Color pickers allow the user to select a color.
@@ -2203,6 +2165,44 @@ export type CustomElements = {
    */
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
+  /**
+   * Checkboxes allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the checkbox loses focus.
+   * - **sl-change** - Emitted when the checked state changes.
+   * - **sl-focus** - Emitted when the checkbox gains focus.
+   * - **sl-input** - Emitted when the checkbox receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2246,13 +2246,6 @@ export type CustomElements = {
    */
   "sl-date-panel": DefineComponent<SlDatePanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-datepicker": DefineComponent<SlDatepickerProps>;
-
   /**
    * Details show a brief summary and expand to show additional content.
    * ---
@@ -2411,18 +2404,18 @@ export type CustomElements = {
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   *
    * ---
    *
    */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+  "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
   /**
-   * Formats a number using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "sl-format-number": DefineComponent<SlFormatNumberProps>;
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
 
   /**
    * Formats a date/time using the specified locale and options.
@@ -2431,6 +2424,13 @@ 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.
    * ---
@@ -2607,6 +2607,19 @@ export type CustomElements = {
    */
   "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).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-mutation** - Emitted when a mutation occurs.
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to watch for mutations.
+   */
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+
   /**
    * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
@@ -2640,19 +2653,6 @@ export type CustomElements = {
    */
   "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
-  /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
-   */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
-
   /**
    * Nav items are the individual links or buttons within a navigation menu.
    * ---
@@ -2767,47 +2767,57 @@ export type CustomElements = {
   "sl-popup": DefineComponent<SlPopupProps>;
 
   /**
-   * Progress bars are used to show the status of an ongoing operation.
+   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
+   *  - _default_ - A label to show inside the ring.
    *
    * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
+   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
+   * - **--track-width** - The width of the track. _(default: undefined)_
    * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
    * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
+   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
+   * - **label** - The progress ring label.
    */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
   /**
-   * Progress rings are used to show the progress of a determinate operation in a circular fashion.
+   * 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>;
+
+  /**
+   * Progress bars are used to show the status of an ongoing operation.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - A label to show inside the ring.
+   *  - _default_ - A label to show inside the progress indicator.
    *
    * ### **CSS Properties:**
-   *  - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_
-   * - **--track-width** - The width of the track. _(default: undefined)_
+   *  - **--height** - The progress bar's height. _(default: undefined)_
    * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_
    * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **label** - The progress ring label.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
    */
-  "sl-progress-ring": DefineComponent<SlProgressRingProps>;
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
 
   /**
    * Radios allow the user to select a single option from a group.
@@ -2830,16 +2840,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.
    * ---
@@ -3060,6 +3060,22 @@ export type CustomElements = {
    */
   "sl-select": DefineComponent<SlSelectProps>;
 
+  /**
+   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
+   * ---
+   *
+   *
+   * ### **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)_
+   *
+   * ### **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>;
+
   /**
    * Spinners are used to show the progress of an indeterminate operation.
    * ---
@@ -3077,20 +3093,31 @@ export type CustomElements = {
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
   /**
-   * Skeletons are used to provide a visual representation of where content will eventually be drawn.
+   * Split panels display two adjacent panels, allowing the user to reposition them.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-reposition** - Emitted when the divider's position changes.
+   *
+   * ### **Slots:**
+   *  - **start** - Content to place in the start panel.
+   * - **end** - Content to place in the end panel.
+   * - **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.
+   *
    * ### **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)_
+   *  - **--divider-width** - The width of the visible divider. _(default: 4px)_
+   * - **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_
+   * - **--min** - The minimum allowed size of the primary panel. _(default: 0)_
+   * - **--max** - The maximum allowed size of the primary panel. _(default: 100%)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The skeleton's indicator which is responsible for its color and animation.
+   *  - **start** - The start panel.
+   * - **end** - The end panel.
+   * - **panel** - Targets both the start and end panels.
+   * - **divider** - The divider that separates the start and end panels.
    */
-  "sl-skeleton": DefineComponent<SlSkeletonProps>;
+  "sl-split-panel": DefineComponent<SlSplitPanelProps>;
 
   /**
    * Switches allow the user to toggle an option on or off.
@@ -3131,33 +3158,6 @@ export type CustomElements = {
    */
   "sl-switch": DefineComponent<SlSwitchProps>;
 
-  /**
-   * Split panels display two adjacent panels, allowing the user to reposition them.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-reposition** - Emitted when the divider's position changes.
-   *
-   * ### **Slots:**
-   *  - **start** - Content to place in the start panel.
-   * - **end** - Content to place in the end panel.
-   * - **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.
-   *
-   * ### **CSS Properties:**
-   *  - **--divider-width** - The width of the visible divider. _(default: 4px)_
-   * - **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_
-   * - **--min** - The minimum allowed size of the primary panel. _(default: 0)_
-   * - **--max** - The maximum allowed size of the primary panel. _(default: 100%)_
-   *
-   * ### **CSS Parts:**
-   *  - **start** - The start panel.
-   * - **end** - The end panel.
-   * - **panel** - Targets both the start and end panels.
-   * - **divider** - The divider that separates the start and end panels.
-   */
-  "sl-split-panel": DefineComponent<SlSplitPanelProps>;
-
   /**
    * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
    * ---
@@ -3226,6 +3226,16 @@ 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.
    * ---
@@ -3245,16 +3255,6 @@ export type CustomElements = {
    */
   "sl-tag": DefineComponent<SlTagProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change**
-   */
-  "sl-table": DefineComponent<SlTableProps>;
-
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---