@kdcloudjs/shoelace 1.0.0 → 1.0.2

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

@@ -2,16 +2,16 @@ import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
-import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlAvatar } from "../../components/avatar/avatar.component.js";
-import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.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 { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
+import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCopyButton } from "../../components/copy-button/copy-button.component.js";
@@ -19,8 +19,8 @@ import type { SlDatepicker } from "../../components/datepicker/datepicker.compon
 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 { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
+import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.component.js";
@@ -30,10 +30,11 @@ import type { SlImageComparer } from "../../components/image-comparer/image-comp
 import type { SlInclude } from "../../components/include/include.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
-import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SlMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlOption } from "../../components/option/option.component.js";
+import type { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
@@ -45,6 +46,7 @@ import type { SlRange } from "../../components/range/range.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
+import type { SlScreen } from "../../components/screen/screen.component.js";
 import type { SlSelect } from "../../components/select/select.component.js";
 import type { SlSkeleton } from "../../components/skeleton/skeleton.component.js";
 import type { SlSpinner } from "../../components/spinner/spinner.component.js";
@@ -53,9 +55,10 @@ import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
 import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SlTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SlTable } from "../../components/table/table.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";
 import type { SlTree } from "../../components/tree/tree.component.js";
 import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
@@ -109,6 +112,31 @@ 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 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 SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -151,41 +179,6 @@ 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 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 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. */
@@ -198,6 +191,16 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
+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 SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -277,10 +280,6 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
-type SlCardProps = {};
-
-type SlCarouselItemProps = {};
-
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -315,6 +314,10 @@ 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 = {
   /**  */
   title?: SlCheckbox["title"];
@@ -585,6 +588,43 @@ 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. */
@@ -625,43 +665,6 @@ 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"];
@@ -899,8 +902,6 @@ type SlMenuProps = {
   "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
 };
 
-type SlMenuLabelProps = {};
-
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -918,6 +919,8 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
+type SlMenuLabelProps = {};
+
 type SlMutationObserverProps = {
   /** Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.
 `attr="class id title"`. To watch all attributes, use `*`. */
@@ -954,6 +957,23 @@ multiple values. */
   hasHover?: SlOption["hasHover"];
 };
 
+type SlPaginationProps = {
+  /**  */
+  currentPage?: SlPagination["currentPage"];
+  /**  */
+  pageSize?: SlPagination["pageSize"];
+  /**  */
+  pageSizeOpts?: SlPagination["pageSizeOpts"];
+  /**  */
+  total?: SlPagination["total"];
+  /**  */
+  disabled?: SlPagination["disabled"];
+  /**  */
+  className?: SlPagination["className"];
+  /**  */
+  simpleMode?: SlPagination["simpleMode"];
+};
+
 type SlPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
 element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
@@ -1238,6 +1258,21 @@ type SlResizeObserverProps = {
   "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
 };
 
+type SlScreenProps = {
+  /** The options for the GridStack instance. */
+  options?: SlScreen["options"];
+  /** The initial configuration for the grid. */
+  data?: SlScreen["data"];
+  /** Whether the items in the grid can be removed. */
+  removable?: SlScreen["removable"];
+  /** Disables dragging and resizing of widgets. */
+  static?: SlScreen["static"];
+  /** The selector for items that can be dragged into the grid from outside. */
+  selector?: SlScreen["selector"];
+  /**  */
+  gridElement?: SlScreen["gridElement"];
+};
+
 type SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -1449,6 +1484,8 @@ type SlTabPanelProps = {
 };
 
 type SlTableProps = {
+  /**  */
+  rowKey?: SlTable["rowKey"];
   /**  */
   columns?: SlTable["columns"];
   /**  */
@@ -1460,13 +1497,41 @@ type SlTableProps = {
   /**  */
   direction?: SlTable["direction"];
   /**  */
-  "show-header"?: SlTable["showHeader"];
+  showHeader?: SlTable["showHeader"];
   /**  */
   rowSelection?: SlTable["rowSelection"];
   /**  */
+  tableScroll?: SlTable["tableScroll"];
+  /**  */
+  pagination?: SlTable["pagination"];
+  /**  */
   rowSelectedMap?: SlTable["rowSelectedMap"];
   /**  */
+  sorting?: SlTable["sorting"];
+  /**  */
+  columnFilters?: SlTable["columnFilters"];
+  /**  */
+  tableWidth?: SlTable["tableWidth"];
+  /**  */
   adapter?: SlTable["adapter"];
+  /**  */
+  handleBodyScroll?: SlTable["handleBodyScroll"];
+  /**  */
+  handleBodyScrollLeft?: SlTable["handleBodyScrollLeft"];
+  /**  */
+  handleWindowResize?: SlTable["handleWindowResize"];
+  /**  */
+  syncTableWidth?: SlTable["syncTableWidth"];
+  /**  */
+  setScrollPositionClassName?: SlTable["setScrollPositionClassName"];
+  /**  */
+  generateCustomCellSlot?: SlTable["generateCustomCellSlot"];
+  /**  */
+  handleFilterDropdownChange?: SlTable["handleFilterDropdownChange"];
+  /**  */
+  handlePaginationChange?: SlTable["handlePaginationChange"];
+  /**  */
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SlTagProps = {
@@ -1556,6 +1621,61 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTimePickerProps = {
+  /**  */
+  value?: SlTimePicker["value"];
+  /**  */
+  name?: SlTimePicker["name"];
+  /**  */
+  placeholder?: SlTimePicker["placeholder"];
+  /**  */
+  label?: SlTimePicker["label"];
+  /**  */
+  disabled?: SlTimePicker["disabled"];
+  /**  */
+  readonly?: SlTimePicker["readonly"];
+  /**  */
+  clearable?: SlTimePicker["clearable"];
+  /**  */
+  size?: SlTimePicker["size"];
+  /**  */
+  hoist?: SlTimePicker["hoist"];
+  /**  */
+  filled?: SlTimePicker["filled"];
+  /**  */
+  pill?: SlTimePicker["pill"];
+  /**  */
+  "help-text"?: SlTimePicker["helpText"];
+  /**  */
+  form?: SlTimePicker["form"];
+  /**  */
+  required?: SlTimePicker["required"];
+  /**  */
+  format?: SlTimePicker["format"];
+  /**  */
+  autofocus?: SlTimePicker["autofocus"];
+  /**  */
+  input?: SlTimePicker["input"];
+  /**  */
+  timePanel?: SlTimePicker["timePanel"];
+  /**  */
+  defaultValue?: SlTimePicker["defaultValue"];
+  /**  */
+  validity?: SlTimePicker["validity"];
+  /**  */
+  validationMessage?: SlTimePicker["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value changes. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the clear button is activated. */
+  "onsl-clear"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTooltipProps = {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   content?: SlTooltip["content"];
@@ -1705,25 +1825,6 @@ 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.
    * ---
@@ -1747,31 +1848,36 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
+   *  - _default_ - The badge's content.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
    */
-  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
+  "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The badge's content.
+   * ### **Events:**
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **Methods:**
+   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
    */
-  "sl-badge": DefineComponent<SlBadgeProps>;
+  "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
@@ -1793,6 +1899,20 @@ export type CustomElements = {
    */
   "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
+  /**
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more breadcrumb items to display.
+   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
+
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -1840,45 +1960,6 @@ export type CustomElements = {
    */
   "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
-  /**
-   * Cards can be used to group related subjects in a container.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The card's main content.
-   * - **header** - An optional header for the card.
-   * - **footer** - An optional footer for the card.
-   * - **image** - An optional image to render at the start of the card.
-   *
-   * ### **CSS Properties:**
-   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
-   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
-   * - **--border-width** - The width of the card's borders. _(default: undefined)_
-   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **image** - The container that wraps the card's image.
-   * - **header** - The container that wraps the card's header.
-   * - **body** - The container that wraps the card's main content.
-   * - **footer** - The container that wraps the card's footer.
-   */
-  "sl-card": DefineComponent<SlCardProps>;
-
-  /**
-   * 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.
    * ---
@@ -1915,6 +1996,45 @@ 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>;
+
+  /**
+   * Cards can be used to group related subjects in a container.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The card's main content.
+   * - **header** - An optional header for the card.
+   * - **footer** - An optional footer for the card.
+   * - **image** - An optional image to render at the start of the card.
+   *
+   * ### **CSS Properties:**
+   *  - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_
+   * - **--border-radius** - The border radius for the card's edges. _(default: undefined)_
+   * - **--border-width** - The width of the card's borders. _(default: undefined)_
+   * - **--padding** - The padding to use for the card's sections. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **image** - The container that wraps the card's image.
+   * - **header** - The container that wraps the card's header.
+   * - **body** - The container that wraps the card's main content.
+   * - **footer** - The container that wraps the card's footer.
+   */
+  "sl-card": DefineComponent<SlCardProps>;
+
   /**
    * Checkboxes allow the user to toggle an option on or off.
    * ---
@@ -2051,7 +2171,9 @@ export type CustomElements = {
    *
    *
    * ### **Methods:**
-   *  - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the datepicker.
+   * - **blur()** - Removes focus from the datepicker.
+   * - **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.
@@ -2143,35 +2265,6 @@ 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.
    * ---
@@ -2215,6 +2308,35 @@ 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.
    * ---
@@ -2370,19 +2492,6 @@ export type CustomElements = {
    */
   "sl-menu": DefineComponent<SlMenuProps>;
 
-  /**
-   * Menu labels are used to describe a group of menu items.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu label's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
-
   /**
    * Menu items provide options for the user to pick from in a menu.
    * ---
@@ -2412,6 +2521,19 @@ export type CustomElements = {
    */
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
+  /**
+   * Menu labels are used to describe a group of menu items.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu label's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-menu-label": DefineComponent<SlMenuLabelProps>;
+
   /**
    * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
@@ -2447,6 +2569,13 @@ export type CustomElements = {
    */
   "sl-option": DefineComponent<SlOptionProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
    * ---
@@ -2698,6 +2827,20 @@ export type CustomElements = {
    */
   "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
+  /**
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The grid layout content.
+   */
+  "sl-screen": DefineComponent<SlScreenProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -2925,6 +3068,9 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **change**
    */
   "sl-table": DefineComponent<SlTableProps>;
 
@@ -2985,6 +3131,31 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
+  /**
+   * A time picker component that provides a time selection interface.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-input** - Emitted when the control's value changes.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-clear** - Emitted when the clear button is activated.
+   *
+   * ### **Methods:**
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the datepicker.
+   * - **blur()** - Removes focus from the datepicker.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - The input's prefix, to prepend to the input.
+   * - **suffix** - The input's suffix, to append to the input.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.
+   */
+  "sl-timepicker": DefineComponent<SlTimePickerProps>;
+
   /**
    * Tooltips display additional information based on a specific action.
    * ---