@kdcloudjs/shoelace 0.0.1 → 0.0.2

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

@@ -1,19 +1,19 @@
 import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.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 { SlButton } from "../../components/button/button.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 { 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 { SlCard } from "../../components/card/card.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
@@ -28,11 +28,11 @@ 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 { 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 { SlMenuLabel } from "../../components/menu-label/menu-label.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";
@@ -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 { SlTree } from "../../components/tree/tree.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 { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 
 type SlAlertProps = {
@@ -89,6 +90,22 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlAnimatedImageProps = {
   /** The path to the image to load. */
   src?: SlAnimatedImage["src"];
@@ -159,44 +176,6 @@ type SlBadgeProps = {
   pulse?: SlBadge["pulse"];
 };
 
-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 SlBreadcrumbProps = {
-  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
-screen readers and other assistive devices to provide more context for users. */
-  label?: SlBreadcrumb["label"];
-  /**  */
-  defaultSlot?: SlBreadcrumb["defaultSlot"];
-  /**  */
-  separatorSlot?: SlBreadcrumb["separatorSlot"];
-};
-
-type SlBreadcrumbItemProps = {
-  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
-internally. When unset, a button will be rendered instead. */
-  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"];
-  /**  */
-  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
-};
-
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -266,6 +245,28 @@ 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 SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
+type SlBreadcrumbItemProps = {
+  /** Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+internally. When unset, a button will be rendered instead. */
+  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"];
+  /**  */
+  defaultSlot?: SlBreadcrumbItem["defaultSlot"];
+};
+
 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. */
@@ -283,8 +284,6 @@ type SlCalendarProps = {
   value?: SlCalendar["value"];
 };
 
-type SlCardProps = {};
-
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -319,7 +318,7 @@ 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 SlCardProps = {};
 
 type SlCheckboxProps = {
   /**  */
@@ -365,6 +364,8 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlCarouselItemProps = {};
+
 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
@@ -748,13 +749,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"];
@@ -854,6 +848,13 @@ 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 SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -871,8 +872,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 `*`. */
@@ -892,6 +891,8 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
+type SlMenuLabelProps = {};
+
 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
@@ -1372,13 +1373,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 +1397,28 @@ 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"];
+  /**  */
+  adapter?: SlTable["adapter"];
+  /**  */
+  tableState?: SlTable["tableState"];
+};
+
 type SlTagProps = {
   /** The tag's theme variant. */
   variant?: SlTag["variant"];
@@ -1490,6 +1506,20 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (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 SlTooltipProps = {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   content?: SlTooltip["content"];
@@ -1569,20 +1599,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 = {
@@ -1617,6 +1633,28 @@ export type CustomElements = {
    */
   "sl-alert": DefineComponent<SlAlertProps>;
 
+  /**
+   * Avatars are used to represent a person or object.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
+   * ### **Slots:**
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
+   */
+  "sl-avatar": DefineComponent<SlAvatarProps>;
+
   /**
    * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
@@ -1672,26 +1710,38 @@ export type CustomElements = {
   "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Buttons represent actions that are available to the user.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *  - **sl-blur** - Emitted when the button loses focus.
+   * - **sl-focus** - Emitted when the button gains focus.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    *
-   * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the button.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the button.
+   * - **blur()** - Removes focus from the button.
+   * - **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. Pass an empty string to restore validity.
    *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   * ### **Slots:**
+   *  - _default_ - The 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.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
+   * - **prefix** - The container that wraps the prefix.
+   * - **label** - The button's label.
+   * - **suffix** - The container that wraps the suffix.
+   * - **caret** - The button's caret icon, an `<sl-icon>` element.
+   * - **spinner** - The spinner that shows when the button is in the loading state.
    */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
+  "sl-button": DefineComponent<SlButtonProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -1727,40 +1777,6 @@ export type CustomElements = {
    */
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
-  /**
-   * Buttons represent actions that are available to the user.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the button loses focus.
-   * - **sl-focus** - Emitted when the button gains focus.
-   * - **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 button.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the button.
-   * - **blur()** - Removes focus from the button.
-   * - **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. Pass an empty string to restore validity.
-   *
-   * ### **Slots:**
-   *  - _default_ - The 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.
-   * - **prefix** - The container that wraps the prefix.
-   * - **label** - The button's label.
-   * - **suffix** - The container that wraps the suffix.
-   * - **caret** - The button's caret icon, an `<sl-icon>` element.
-   * - **spinner** - The spinner that shows when the button is in the loading state.
-   */
-  "sl-button": DefineComponent<SlButtonProps>;
-
   /**
    * Button groups can be used to group related buttons into sections.
    * ---
@@ -1781,32 +1797,6 @@ export type CustomElements = {
    */
   "sl-calendar": DefineComponent<SlCalendarProps>;
 
-  /**
-   * 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.
    * ---
@@ -1844,17 +1834,30 @@ export type CustomElements = {
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
   /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * Cards can be used to group related subjects in a container.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The carousel item's content..
+   *  - _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:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   *  - **--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-carousel-item": DefineComponent<SlCarouselItemProps>;
+  "sl-card": DefineComponent<SlCardProps>;
 
   /**
    * Checkboxes allow the user to toggle an option on or off.
@@ -1894,6 +1897,19 @@ export type CustomElements = {
    */
   "sl-checkbox": DefineComponent<SlCheckboxProps>;
 
+  /**
+   * 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>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2235,19 +2251,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 +2301,19 @@ 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 items provide options for the user to pick from in a menu.
    * ---
@@ -2328,30 +2344,30 @@ export type CustomElements = {
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
-   * Menu labels are used to describe a group of menu items.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
+   * ### **Events:**
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **Slots:**
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+   * Menu labels are used to describe a group of menu items.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
-   *
    * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
+   *  - _default_ - The menu label's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
@@ -2799,22 +2815,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 +2849,38 @@ 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>;
+
+  /**
+   * TData是表格数据类型定义
+   * eg：
+   * type User = {
+   * firstName: string
+   * lastName: string
+   * age: number
+   * visits: number
+   * progress: number
+   * status: string
+   * }
+   * ---
+   *
+   */
+  "sl-table": DefineComponent<SlTableProps>;
+
   /**
    * Tags are used as labels to organize things or to indicate a selection.
    * ---
@@ -2906,6 +2938,31 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
+  /**
+   * 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>;
+
   /**
    * Tooltips display additional information based on a specific action.
    * ---
@@ -2983,31 +3040,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.
    * ---