@kdcloudjs/shoelace 0.0.1 → 1.0.0

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

@@ -3,24 +3,24 @@ 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 { 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 { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
-import type { SlCalendar } from "../../components/calendar/calendar.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 { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
+import type { 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 { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
@@ -28,10 +28,10 @@ import type { SlIcon } from "../../components/icon/icon.component.js";
 import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
 import type { SlInclude } from "../../components/include/include.component.js";
-import type { SlMenu } from "../../components/menu/menu.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
-import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SlMenu } from "../../components/menu/menu.component.js";
 import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
+import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
@@ -51,13 +51,14 @@ 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 { SlTabPanel } from "../../components/tab-panel/tab-panel.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 } 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 { SlTooltip } from "../../components/tooltip/tooltip.component.js";
-import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlTree } from "../../components/tree/tree.component.js";
+import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 
 type SlAlertProps = {
@@ -150,15 +151,6 @@ 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"];
@@ -185,6 +177,15 @@ screen readers and other assistive devices to provide more context for users. */
   separatorSlot?: SlBreadcrumb["separatorSlot"];
 };
 
+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 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. */
@@ -276,15 +277,10 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
-type SlCalendarProps = {
-  /**  */
-  date?: SlCalendar["date"];
-  /**  */
-  value?: SlCalendar["value"];
-};
-
 type SlCardProps = {};
 
+type SlCarouselItemProps = {};
+
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -319,8 +315,6 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
-type SlCarouselItemProps = {};
-
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -473,6 +467,59 @@ scenarios. */
   "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDatepickerProps = {
+  /**  */
+  value?: SlDatepicker["value"];
+  /**  */
+  name?: SlDatepicker["name"];
+  /**  */
+  type?: SlDatepicker["type"];
+  /**  */
+  placeholder?: SlDatepicker["placeholder"];
+  /**  */
+  label?: SlDatepicker["label"];
+  /**  */
+  disabled?: SlDatepicker["disabled"];
+  /**  */
+  readonly?: SlDatepicker["readonly"];
+  /**  */
+  clearable?: SlDatepicker["clearable"];
+  /**  */
+  size?: SlDatepicker["size"];
+  /**  */
+  hoist?: SlDatepicker["hoist"];
+  /** Draws a filled input. */
+  filled?: SlDatepicker["filled"];
+  /** Draws a pill-style input with rounded edges. */
+  pill?: SlDatepicker["pill"];
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlDatepicker["helpText"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlDatepicker["form"];
+  /** Makes the input a required field. */
+  required?: SlDatepicker["required"];
+  /** A regular expression pattern to validate input against. */
+  pattern?: SlDatepicker["pattern"];
+  /** The input's minimum value. Only applies to date and number input types. */
+  min?: SlDatepicker["min"];
+  /** The input's maximum value. Only applies to date and number input types. */
+  max?: SlDatepicker["max"];
+  /** Indicates that the input should receive focus on page load. */
+  autofocus?: SlDatepicker["autofocus"];
+  /**  */
+  input?: SlDatepicker["input"];
+  /**  */
+  calendar?: SlDatepicker["calendar"];
+  /**  */
+  defaultValue?: SlDatepicker["defaultValue"];
+  /** Gets the validity state object */
+  validity?: SlDatepicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlDatepicker["validationMessage"];
+};
+
 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. */
@@ -538,43 +585,6 @@ type SlDividerProps = {
   vertical?: SlDivider["vertical"];
 };
 
-type SlDrawerProps = {
-  /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
-use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
-  open?: SlDrawer["open"];
-  /** The drawer's label as displayed in the header. You should always include a relevant label even when using
-`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
-  label?: SlDrawer["label"];
-  /** The direction from which the drawer will open. */
-  placement?: SlDrawer["placement"];
-  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-its parent element, set this attribute and add `position: relative` to the parent. */
-  contained?: SlDrawer["contained"];
-  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-accessible way for users to dismiss the drawer. */
-  "no-header"?: SlDrawer["noHeader"];
-  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */
-  modal?: SlDrawer["modal"];
-  /**  */
-  drawer?: SlDrawer["drawer"];
-  /**  */
-  panel?: SlDrawer["panel"];
-  /**  */
-  overlay?: SlDrawer["overlay"];
-  /** Emitted when the drawer opens. */
-  "onsl-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer opens and all animations are complete. */
-  "onsl-after-show"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer closes. */
-  "onsl-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted after the drawer closes and all animations are complete. */
-  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
-  "onsl-initial-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
-  "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
-};
-
 type SlDropdownProps = {
   /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
@@ -615,6 +625,43 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDrawerProps = {
+  /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
+  open?: SlDrawer["open"];
+  /** The drawer's label as displayed in the header. You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+  label?: SlDrawer["label"];
+  /** The direction from which the drawer will open. */
+  placement?: SlDrawer["placement"];
+  /** By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+its parent element, set this attribute and add `position: relative` to the parent. */
+  contained?: SlDrawer["contained"];
+  /** Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the drawer. */
+  "no-header"?: SlDrawer["noHeader"];
+  /** Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */
+  modal?: SlDrawer["modal"];
+  /**  */
+  drawer?: SlDrawer["drawer"];
+  /**  */
+  panel?: SlDrawer["panel"];
+  /**  */
+  overlay?: SlDrawer["overlay"];
+  /** Emitted when the drawer opens. */
+  "onsl-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the drawer opens and all animations are complete. */
+  "onsl-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer closes. */
+  "onsl-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the drawer closes and all animations are complete. */
+  "onsl-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. */
+  "onsl-initial-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. */
+  "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
+};
+
 type SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -748,13 +795,6 @@ code and can result in XSS attacks. */
   "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
 };
 
-type SlMenuProps = {
-  /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
-};
-
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -828,8 +868,6 @@ keyboard on supportive devices. */
   inputmode?: SlInput["inputmode"];
   /**  */
   input?: SlInput["input"];
-  /**  */
-  calendar?: SlInput["calendar"];
   /** The default value of the form control. Primarily used for resetting the form control. */
   defaultValue?: SlInput["defaultValue"];
   /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error. */
@@ -854,6 +892,15 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "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"];
@@ -871,8 +918,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 `*`. */
@@ -1372,13 +1417,6 @@ type SlTabProps = {
   "onsl-close"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTabPanelProps = {
-  /** The tab panel's name. */
-  name?: SlTabPanel["name"];
-  /** When true, the tab panel will be shown. */
-  active?: SlTabPanel["active"];
-};
-
 type SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -1403,6 +1441,34 @@ manual, the tab will receive focus but will not show until the user presses spac
   "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
 };
 
+type SlTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SlTabPanel["name"];
+  /** When true, the tab panel will be shown. */
+  active?: SlTabPanel["active"];
+};
+
+type SlTableProps = {
+  /**  */
+  columns?: SlTable["columns"];
+  /**  */
+  dataSource?: SlTable["dataSource"];
+  /**  */
+  loading?: SlTable["loading"];
+  /**  */
+  bordered?: SlTable["bordered"];
+  /**  */
+  direction?: SlTable["direction"];
+  /**  */
+  "show-header"?: SlTable["showHeader"];
+  /**  */
+  rowSelection?: SlTable["rowSelection"];
+  /**  */
+  rowSelectedMap?: SlTable["rowSelectedMap"];
+  /**  */
+  adapter?: SlTable["adapter"];
+};
+
 type SlTagProps = {
   /** The tag's theme variant. */
   variant?: SlTag["variant"];
@@ -1528,6 +1594,20 @@ scenarios. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTreeProps = {
+  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
+displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
+  selection?: SlTree["selection"];
+  /**  */
+  defaultSlot?: SlTree["defaultSlot"];
+  /**  */
+  expandedIconSlot?: SlTree["expandedIconSlot"];
+  /**  */
+  collapsedIconSlot?: SlTree["collapsedIconSlot"];
+  /** Emitted when a tree item is selected or deselected. */
+  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
+};
+
 type SlTreeItemProps = {
   /** Expands the tree item. */
   expanded?: SlTreeItem["expanded"];
@@ -1569,20 +1649,6 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTreeProps = {
-  /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
-displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
-  selection?: SlTree["selection"];
-  /**  */
-  defaultSlot?: SlTree["defaultSlot"];
-  /**  */
-  expandedIconSlot?: SlTree["expandedIconSlot"];
-  /**  */
-  collapsedIconSlot?: SlTree["collapsedIconSlot"];
-  /** Emitted when a tree item is selected or deselected. */
-  "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
-};
-
 type SlVisuallyHiddenProps = {};
 
 export type CustomElements = {
@@ -1658,19 +1724,6 @@ 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.
    * ---
@@ -1707,6 +1760,19 @@ export type CustomElements = {
    */
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
+  /**
+   * Badges are used to draw attention and display statuses or counts.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The badge's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-badge": DefineComponent<SlBadgeProps>;
+
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -1774,13 +1840,6 @@ export type CustomElements = {
    */
   "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
-  /**
-   * 日历组件，支持年份和月份选择
-   * ---
-   *
-   */
-  "sl-calendar": DefineComponent<SlCalendarProps>;
-
   /**
    * Cards can be used to group related subjects in a container.
    * ---
@@ -1807,6 +1866,19 @@ export type CustomElements = {
    */
   "sl-card": DefineComponent<SlCardProps>;
 
+  /**
+   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The carousel item's content..
+   *
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   */
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
    * ---
@@ -1843,19 +1915,6 @@ export type CustomElements = {
    */
   "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.
    * ---
@@ -1986,6 +2045,19 @@ export type CustomElements = {
    */
   "sl-copy-button": DefineComponent<SlCopyButtonProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   */
+  "sl-datepicker": DefineComponent<SlDatepickerProps>;
+
   /**
    * Details show a brief summary and expand to show additional content.
    * ---
@@ -2071,6 +2143,35 @@ export type CustomElements = {
    */
   "sl-divider": DefineComponent<SlDividerProps>;
 
+  /**
+   * Dropdowns expose additional content that "drops down" in a panel.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-show** - Emitted when the dropdown opens.
+   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
+   * - **sl-hide** - Emitted when the dropdown closes.
+   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the dropdown panel.
+   * - **hide()** - Hides the dropdown panel
+   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The dropdown's main content.
+   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+   * - **trigger** - The container that wraps the trigger.
+   * - **panel** - The panel that gets shown when the dropdown is open.
+   */
+  "sl-dropdown": DefineComponent<SlDropdownProps>;
+
   /**
    * Drawers slide in from a container to expose additional options and information.
    * ---
@@ -2114,35 +2215,6 @@ export type CustomElements = {
    */
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
-  /**
-   * Dropdowns expose additional content that "drops down" in a panel.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-show** - Emitted when the dropdown opens.
-   * - **sl-after-show** - Emitted after the dropdown opens and all animations are complete.
-   * - **sl-hide** - Emitted when the dropdown closes.
-   * - **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the dropdown panel.
-   * - **hide()** - Hides the dropdown panel
-   * - **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The dropdown's main content.
-   * - **trigger** - The dropdown's trigger, usually a `<sl-button>` element.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
-   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
-   * - **trigger** - The container that wraps the trigger.
-   * - **panel** - The panel that gets shown when the dropdown is open.
-   */
-  "sl-dropdown": DefineComponent<SlDropdownProps>;
-
   /**
    * Formats a number as a human readable bytes value.
    * ---
@@ -2235,19 +2307,6 @@ export type CustomElements = {
    */
   "sl-include": DefineComponent<SlIncludeProps>;
 
-  /**
-   * Menus provide a list of options for the user to choose from.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
-   */
-  "sl-menu": DefineComponent<SlMenuProps>;
-
   /**
    * Inputs collect data from the user.
    * ---
@@ -2298,6 +2357,32 @@ export type CustomElements = {
    */
   "sl-input": DefineComponent<SlInputProps>;
 
+  /**
+   * Menus provide a list of options for the user to choose from.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-select** - Emitted when a menu item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   */
+  "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.
    * ---
@@ -2327,19 +2412,6 @@ export type CustomElements = {
    */
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
-  /**
-   * Menu labels are used to describe a group of menu items.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
-
   /**
    * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
@@ -2799,22 +2871,6 @@ export type CustomElements = {
    */
   "sl-tab": DefineComponent<SlTabProps>;
 
-  /**
-   * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab panel's content.
-   *
-   * ### **CSS Properties:**
-   *  - **--padding** - The tab panel's padding. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
-
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -2849,6 +2905,29 @@ export type CustomElements = {
    */
   "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
+  /**
+   * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab panel's content.
+   *
+   * ### **CSS Properties:**
+   *  - **--padding** - The tab panel's padding. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-tab-panel": DefineComponent<SlTabPanelProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-table": DefineComponent<SlTableProps>;
+
   /**
    * Tags are used as labels to organize things or to indicate a selection.
    * ---
@@ -2938,6 +3017,31 @@ export type CustomElements = {
    */
   "sl-tooltip": DefineComponent<SlTooltipProps>;
 
+  /**
+   * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-selection-change** - Emitted when a tree item is selected or deselected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   * - **expand-icon** - The icon to show when the tree item is expanded. Works best with `<sl-icon>`.
+   * - **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--indent-size** - The size of the indentation for nested items. _(default: var(--sl-spacing-medium))_
+   * - **--indent-guide-color** - The color of the indentation line. _(default: var(--sl-color-neutral-200))_
+   * - **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_
+   * - **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_
+   * - **--indent-guide-width** - The width of the indentation line. _(default: 0)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-tree": DefineComponent<SlTreeProps>;
+
   /**
    * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
@@ -2983,31 +3087,6 @@ export type CustomElements = {
    */
   "sl-tree-item": DefineComponent<SlTreeItemProps>;
 
-  /**
-   * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-selection-change** - Emitted when a tree item is selected or deselected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   * - **expand-icon** - The icon to show when the tree item is expanded. Works best with `<sl-icon>`.
-   * - **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--indent-size** - The size of the indentation for nested items. _(default: var(--sl-spacing-medium))_
-   * - **--indent-guide-color** - The color of the indentation line. _(default: var(--sl-color-neutral-200))_
-   * - **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_
-   * - **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_
-   * - **--indent-guide-width** - The width of the indentation line. _(default: 0)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-tree": DefineComponent<SlTreeProps>;
-
   /**
    * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
    * ---