@kdcloudjs/shoelace 1.0.0 → 1.0.1

package/dist/themes/light.styles.js

@@ -490,7 +490,7 @@ export default css`
       16 * 1.5 / var(--kdds-base-font-size, 16) * 1rem
     );
 
-    --sl-overlay-background-color: hsl(0, 0%, 10.2%/ 30%);
+    --sl-overlay-background-color: hsla(0, 0%, 0%, 0.3);
 
     --sl-panel-background-color: var(--sl-color-neutral-0);
     --sl-panel-border-color: var(--sl-color-neutral-200);
@@ -508,6 +508,8 @@ export default css`
 
     --sl-details-height: 40px;
 
+    --sl-dialog-header-height: 50px;
+
     --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
     --sl-table-header-background: var(--sl-color-neutral-100, #f5f5f5);
     --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
@@ -520,6 +522,7 @@ export default css`
     --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
     --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
     --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
+    --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
     --sl-table-mask: rgba(255, 255, 255, 0.65);
     --sl-table-range-selection-background: #f2f9ff;
 
@@ -555,6 +558,26 @@ export default css`
     --sl-z-index-toast: 950;
     --sl-z-index-tooltip: 1000;
     --sl-z-index-table-overlay: 1100;
+
+    --sl-dashboard-bg-color: var(--sl-color-purple-gray-50);
+    --sl-dashboard-card-bg-color: var(--sl-color-purple-gray-100);
+    --sl-dashboard-card-bg-color-hover: var(--sl-color-purple-gray-200);
+    --sl-dashboard-card-border-color: var(--sl-color-purple-gray-200);
+    --sl-dashboard-card-border-width: 1px;
+    --sl-dashboard-card-border-radius: var(--sl-border-radius-large);
+    --sl-dashboard-card-shadow: var(--sl-shadow-medium);
+    --sl-dashboard-card-shadow-hover: var(--sl-shadow-large);
+    --sl-card-dragging-bg: var(--sl-color-primary-50);
+    --sl-card-dragging-border: var(--sl-color-primary-600);
+    --sl-card-dragging-shadow: var(--sl-shadow-x-large);
+    --sl-card-dragging-opacity: 0.9;
+    --sl-card-resize-handle-size: 12px;
+    --sl-del-btn-bg-color: var(--sl-color-purple-gray-200);
+    --sl-del-btn-color: var(--sl-color-purple-gray-700);
+    --sl-del-btn-hover-bg-color: var(--sl-color-primary-600);
+    --sl-del-btn-hover-color: var(--sl-color-neutral-0);
+    --sl-del-btn-active-bg-color: var(--sl-color-primary-700);
+    --sl-del-btn-active-color: var(--sl-color-neutral-0);
   }
 
   @supports (scrollbar-gutter: stable) {
@@ -577,8 +600,9 @@ export default css`
   .sl-toast-stack {
     position: fixed;
     top: 0;
-    inset-inline-end: 0;
+    inset-inline-start: 50%;
     z-index: var(--sl-z-index-toast);
+    transform: translateX(-50%);
     width: 28rem;
     max-width: 100%;
     max-height: 100%;

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

@@ -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 { SlTag } from "../../components/tag/tag.component.js";
+import type { SlTable, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
+import type { SlTag } from "../../components/tag/tag.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";
@@ -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,27 +1497,39 @@ 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"];
-};
-
-type SlTagProps = {
-  /** The tag's theme variant. */
-  variant?: SlTag["variant"];
-  /** The tag's size. */
-  size?: SlTag["size"];
-  /** Draws a pill-style tag with rounded edges. */
-  pill?: SlTag["pill"];
-  /** Makes the tag removable and shows a remove button. */
-  removable?: SlTag["removable"];
-
-  /** Emitted when the remove button is activated. */
-  "onsl-remove"?: (e: CustomEvent<never>) => void;
+  /**  */
+  handleBodyScroll?: SlTable["handleBodyScroll"];
+  /**  */
+  handleBodyScrollLeft?: SlTable["handleBodyScrollLeft"];
+  /**  */
+  handleWindowResize?: SlTable["handleWindowResize"];
+  /**  */
+  syncTableWidth?: SlTable["syncTableWidth"];
+  /**  */
+  setScrollPositionClassName?: SlTable["setScrollPositionClassName"];
+  /**  */
+  handleFilterDropdownChange?: SlTable["handleFilterDropdownChange"];
+  /**  */
+  handlePaginationChange?: SlTable["handlePaginationChange"];
+  /**  */
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SlTextareaProps = {
@@ -1556,6 +1605,75 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTagProps = {
+  /** The tag's theme variant. */
+  variant?: SlTag["variant"];
+  /** The tag's size. */
+  size?: SlTag["size"];
+  /** Draws a pill-style tag with rounded edges. */
+  pill?: SlTag["pill"];
+  /** Makes the tag removable and shows a remove button. */
+  removable?: SlTag["removable"];
+
+  /** Emitted when the remove button is activated. */
+  "onsl-remove"?: (e: CustomEvent<never>) => void;
+};
+
+type 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"];
@@ -2051,7 +2169,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 +2263,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 +2306,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 +2490,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 +2519,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 +2567,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 +2825,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,27 +3066,11 @@ export type CustomElements = {
    *
    * ---
    *
-   */
-  "sl-table": DefineComponent<SlTableProps>;
-
-  /**
-   * Tags are used as labels to organize things or to indicate a selection.
-   * ---
-   *
    *
    * ### **Events:**
-   *  - **sl-remove** - Emitted when the remove button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tag's content.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **content** - The tag's content.
-   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
-   * - **remove-button__base** - The remove button's exported `base` part.
+   *  - **change**
    */
-  "sl-tag": DefineComponent<SlTagProps>;
+  "sl-table": DefineComponent<SlTableProps>;
 
   /**
    * Textareas collect data from the user and allow multiple lines of text.
@@ -2985,6 +3110,50 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
+  /**
+   * Tags are used as labels to organize things or to indicate a selection.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-remove** - Emitted when the remove button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tag's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **content** - The tag's content.
+   * - **remove-button** - The tag's remove button, an `<sl-icon-button>`.
+   * - **remove-button__base** - The remove button's exported `base` part.
+   */
+  "sl-tag": DefineComponent<SlTagProps>;
+
+  /**
+   * 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.
    * ---

package/dist/utilities/spread.js

@@ -0,0 +1,7 @@
+import {
+  spread_default
+} from "../chunks/chunk.26MJV2ME.js";
+import "../chunks/chunk.KAW7D32O.js";
+export {
+  spread_default as default
+};