@kdcloudjs/shoelace 1.0.21 → 1.0.23

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 { SlAnimation } from "../../components/animation/animation.component.js";
-import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
+import type { SlAnimation } from "../../components/animation/animation.component.js";
 import type { SlBadge } from "../../components/badge/badge.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 { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
-import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
+import type { 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 { 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 { SlDatePanel, CustomEvent } from "../../components/date-panel/date-panel.component.js";
 import type { SlDatepicker } from "../../components/datepicker/datepicker.component.js";
@@ -46,20 +46,20 @@ import type { SlProgressBar } from "../../components/progress-bar/progress-bar.c
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
 import type { SlRadio } from "../../components/radio/radio.component.js";
-import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
 import type { SlRadioButton } from "../../components/radio-button/radio-button.component.js";
+import type { SlRadioGroup } from "../../components/radio-group/radio-group.component.js";
+import type { SlRange } from "../../components/range/range.component.js";
 import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlRelativeTime } from "../../components/relative-time/relative-time.component.js";
-import type { SlRange } from "../../components/range/range.component.js";
-import type { SlScreen } from "../../components/screen/screen.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";
-import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
 import type { SlSwitch } from "../../components/switch/switch.component.js";
-import type { SlTabGroup } from "../../components/tab-group/tab-group.component.js";
+import type { SlSplitPanel } from "../../components/split-panel/split-panel.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, CustomEvent } from "../../components/table/table.component.js";
 import type { SlTag } from "../../components/tag/tag.component.js";
@@ -67,8 +67,8 @@ 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 { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 import type { SlTreeItem } from "../../components/tree-item/tree-item.component.js";
+import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
 
 type SlAlertProps = {
   /** Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can
@@ -99,6 +99,41 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlAnimatedImageProps = {
+  /** The path to the image to load. */
+  src?: SlAnimatedImage["src"];
+  /** A description of the image used by assistive devices. */
+  alt?: SlAnimatedImage["alt"];
+  /** Plays the animation. When this attribute is remove, the animation will pause. */
+  play?: SlAnimatedImage["play"];
+  /**  */
+  animatedImage?: SlAnimatedImage["animatedImage"];
+  /**  */
+  frozenFrame?: SlAnimatedImage["frozenFrame"];
+  /**  */
+  isLoaded?: SlAnimatedImage["isLoaded"];
+  /** Emitted when the image loads successfully. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the image fails to load. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
+type SlAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: SlAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -141,41 +176,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 SlAnimatedImageProps = {
-  /** The path to the image to load. */
-  src?: SlAnimatedImage["src"];
-  /** A description of the image used by assistive devices. */
-  alt?: SlAnimatedImage["alt"];
-  /** Plays the animation. When this attribute is remove, the animation will pause. */
-  play?: SlAnimatedImage["play"];
-  /**  */
-  animatedImage?: SlAnimatedImage["animatedImage"];
-  /**  */
-  frozenFrame?: SlAnimatedImage["frozenFrame"];
-  /**  */
-  isLoaded?: SlAnimatedImage["isLoaded"];
-  /** Emitted when the image loads successfully. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the image fails to load. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlBadgeProps = {
   /** The badge's theme variant. */
   variant?: SlBadge["variant"];
@@ -185,18 +185,6 @@ type SlBadgeProps = {
   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. */
-  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 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. */
@@ -276,6 +264,18 @@ 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 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. */
@@ -286,8 +286,6 @@ devices when interacting with the control and is strongly recommended. */
   disableRole?: SlButtonGroup["disableRole"];
 };
 
-type SlCardProps = {};
-
 type SlCarouselProps = {
   /** When set, allows the user to navigate the carousel in the same direction indefinitely. */
   loop?: SlCarousel["loop"];
@@ -322,6 +320,8 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
+type SlCardProps = {};
+
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -366,6 +366,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
@@ -432,8 +434,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlCarouselItemProps = {};
-
 type SlCopyButtonProps = {
   /** The text value to copy. */
   value?: SlCopyButton["value"];
@@ -1009,16 +1009,58 @@ type SlMutationObserverProps = {
 };
 
 type SlNavProps = {
-  /** The value of the selected nav item. */
-  value?: SlNav["value"];
-  /** The mode of navigation. */
+  /** Matches Antd's `mode` API. */
   mode?: SlNav["mode"];
+  /** Matches Antd's `multiple` API. */
+  multiple?: SlNav["multiple"];
+  /** Matches Antd's `selectable` API. */
+  selectable?: SlNav["selectable"];
+  /** Matches Antd's `inlineCollapsed` API. */
+  "inline-collapsed"?: SlNav["inlineCollapsed"];
+  /** Matches Antd's `inlineIndent` API. */
+  "inline-indent"?: SlNav["inlineIndent"];
+  /** Matches Antd's `subMenuOpenDelay` API, in seconds. */
+  "sub-menu-open-delay"?: SlNav["subMenuOpenDelay"];
+  /** Matches Antd's `subMenuCloseDelay` API, in seconds. */
+  "sub-menu-close-delay"?: SlNav["subMenuCloseDelay"];
+  /** Matches Antd's `triggerSubMenuAction` API. */
+  "trigger-sub-menu-action"?: SlNav["triggerSubMenuAction"];
+  /** Matches Antd's `theme` API. Present for compatibility and future styling. */
+  theme?: SlNav["theme"];
+  /** Matches Antd's `forceSubMenuRender` API. */
+  "force-sub-menu-render"?: SlNav["forceSubMenuRender"];
+  /** Matches Antd's `disabledOverflow` API. Present for compatibility. */
+  "disabled-overflow"?: SlNav["disabledOverflow"];
   /**  */
   defaultSlot?: SlNav["defaultSlot"];
+  /** Matches Antd's `items` API. */
+  items?: SlNav["items"];
+  /** Matches Antd's `selectedKeys` API. */
+  selectedKeys?: SlNav["selectedKeys"];
+  /** Matches Antd's `defaultSelectedKeys` API. */
+  defaultSelectedKeys?: SlNav["defaultSelectedKeys"];
+  /** Matches Antd's `openKeys` API. */
+  openKeys?: SlNav["openKeys"];
+  /** Matches Antd's `defaultOpenKeys` API. */
+  defaultOpenKeys?: SlNav["defaultOpenKeys"];
+  /** Matches Antd's `expandIcon` API. */
+  expandIcon?: SlNav["expandIcon"];
+  /** Matches Antd's `overflowedIndicator` API. Present for compatibility. */
+  overflowedIndicator?: SlNav["overflowedIndicator"];
+  /** Matches Antd's `onClick` callback API. */
+  onClick?: SlNav["onClick"];
+  /** Matches Antd's `onSelect` callback API. */
+  onSelect?: SlNav["onSelect"];
+  /** Matches Antd's `onDeselect` callback API. */
+  onDeselect?: SlNav["onDeselect"];
+  /** Matches Antd's `onOpenChange` callback API. */
+  onOpenChange?: SlNav["onOpenChange"];
   /** Emitted when the selected nav item changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
+  "onsl-change"?: (e: CustomEvent<{ item: SlNavItem | undefined; selectedKeys: string[] }>) => void;
+  /** Emitted when the open submenu keys change. */
+  "onsl-nav-open-change"?: (e: CustomEvent<{ openKeys: string[] }>) => void;
   /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem; domEvent: MouseEvent | KeyboardEvent }>) => void;
 };
 
 type SlNavGroupProps = {
@@ -1026,11 +1068,21 @@ type SlNavGroupProps = {
   active?: SlNavGroup["active"];
   /** The mode of navigation. */
   mode?: SlNavGroup["mode"];
+  /** Matches Antd's item group label. */
+  label?: SlNavGroup["label"];
 };
 
 type SlNavItemProps = {
-  /** The value to track selection. */
-  value?: SlNavItem["value"];
+  /** A stable key used by `sl-nav` to track selection. */
+  key?: SlNavItem["key"];
+  /** React-safe alias for `key`.
+
+React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
+  "item-key"?: SlNavItem["itemKey"];
+  /** Matches Antd's `danger` item flag. */
+  danger?: SlNavItem["danger"];
+  /** Tooltip text, primarily used when the menu is collapsed. */
+  title?: SlNavItem["title"];
   /** Draws the nav item in a disabled state. */
   disabled?: SlNavItem["disabled"];
   /** Draws the nav item in an active (selected) state. */
@@ -1045,18 +1097,33 @@ type SlNavItemProps = {
   rel?: SlNavItem["rel"];
   /** The mode of navigation. */
   mode?: SlNavItem["mode"];
-
+  /** Alternate label content when using Antd-style `items` configuration. */
+  label?: SlNavItem["label"];
+  /** Alternate icon content when using Antd-style `items` configuration. */
+  icon?: SlNavItem["icon"];
+  /** Extra content shown at the end of the item. */
+  extra?: SlNavItem["extra"];
   /** Emitted when a nav item is selected. */
   "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
 type SlNavSubmenuProps = {
+  /** A stable key used by `sl-nav` to track open state. */
+  key?: SlNavSubmenu["key"];
+  /** React-safe alias for `key`.
+
+React reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead. */
+  "item-key"?: SlNavSubmenu["itemKey"];
   /** Indicates whether or not the submenu is open. */
   open?: SlNavSubmenu["open"];
   /** Indicates if this submenu is nested within another submenu. */
   nested?: SlNavSubmenu["nested"];
   /** The summary to show in the header. If you need to display HTML, use the `title` slot instead. */
   title?: SlNavSubmenu["title"];
+  /** Matches Antd's `theme` field. */
+  theme?: SlNavSubmenu["theme"];
+  /** Matches Antd's `popupClassName` field. */
+  "popup-class-name"?: SlNavSubmenu["popupClassName"];
   /** Draws the submenu in a disabled state. */
   disabled?: SlNavSubmenu["disabled"];
   /** Draws the submenu in an active (selected) state. */
@@ -1069,6 +1136,14 @@ type SlNavSubmenuProps = {
   body?: SlNavSubmenu["body"];
   /**  */
   popup?: SlNavSubmenu["popup"];
+  /** Matches Antd's `label` field. */
+  label?: SlNavSubmenu["label"];
+  /** Matches Antd's `icon` field. */
+  icon?: SlNavSubmenu["icon"];
+  /** Matches Antd's `popupOffset` field. */
+  popupOffset?: SlNavSubmenu["popupOffset"];
+  /** Matches Antd's `onTitleClick` callback. */
+  onTitleClick?: SlNavSubmenu["onTitleClick"];
   /** Emitted when the submenu opens. */
   "onsl-show"?: (e: CustomEvent<never>) => void;
   /** Emitted after the submenu opens and all animations are complete. */
@@ -1245,6 +1320,26 @@ attribute can typically be omitted. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRadioButtonProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadioButton["value"];
+  /** Disables the radio button. */
+  disabled?: SlRadioButton["disabled"];
+  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+this attribute can typically be omitted. */
+  size?: SlRadioButton["size"];
+  /** Draws a pill-style radio button with rounded edges. */
+  pill?: SlRadioButton["pill"];
+  /**  */
+  input?: SlRadioButton["input"];
+  /**  */
+  hiddenInput?: SlRadioButton["hiddenInput"];
+  /** Emitted when the button loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the button gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlRadioGroupProps = {
   /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
 instead. */
@@ -1281,66 +1376,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlRadioButtonProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadioButton["value"];
-  /** Disables the radio button. */
-  disabled?: SlRadioButton["disabled"];
-  /** The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-this attribute can typically be omitted. */
-  size?: SlRadioButton["size"];
-  /** Draws a pill-style radio button with rounded edges. */
-  pill?: SlRadioButton["pill"];
-  /**  */
-  input?: SlRadioButton["input"];
-  /**  */
-  hiddenInput?: SlRadioButton["hiddenInput"];
-  /** Emitted when the button loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the button gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
-type SlRatingProps = {
-  /** A label that describes the rating to assistive devices. */
-  label?: SlRating["label"];
-  /** The current rating. */
-  value?: SlRating["value"];
-  /** The highest rating to show. */
-  max?: SlRating["max"];
-  /** The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this
-attribute to `0.5`. */
-  precision?: SlRating["precision"];
-  /** Makes the rating readonly. */
-  readonly?: SlRating["readonly"];
-  /** Disables the rating. */
-  disabled?: SlRating["disabled"];
-  /** A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.
-The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
-well with `<sl-icon>` elements. */
-  getSymbol?: SlRating["getSymbol"];
-  /**  */
-  rating?: SlRating["rating"];
-  /** Emitted when the rating's value changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value. */
-  "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
-};
-
-type SlRelativeTimeProps = {
-  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
-string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
-a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
-  date?: SlRelativeTime["date"];
-  /** The formatting style to use. */
-  format?: SlRelativeTime["format"];
-  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
-"1 day ago" and "in 1 day" will be shown. */
-  numeric?: SlRelativeTime["numeric"];
-  /** Keep the displayed value up to date as time passes. */
-  sync?: SlRelativeTime["sync"];
-};
-
 type SlRangeProps = {
   /**  */
   title?: SlRange["title"];
@@ -1391,33 +1426,73 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => 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"];
+type SlRatingProps = {
+  /** A label that describes the rating to assistive devices. */
+  label?: SlRating["label"];
+  /** The current rating. */
+  value?: SlRating["value"];
+  /** The highest rating to show. */
+  max?: SlRating["max"];
+  /** The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this
+attribute to `0.5`. */
+  precision?: SlRating["precision"];
+  /** Makes the rating readonly. */
+  readonly?: SlRating["readonly"];
+  /** Disables the rating. */
+  disabled?: SlRating["disabled"];
+  /** A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.
+The function should return a string containing trusted HTML of the symbol to render at the specified value. Works
+well with `<sl-icon>` elements. */
+  getSymbol?: SlRating["getSymbol"];
   /**  */
-  gridElement?: SlScreen["gridElement"];
-};
-
-type SlResizeObserverProps = {
-  /** Disables the observer. */
-  disabled?: SlResizeObserver["disabled"];
-
-  /** Emitted when the element is resized. */
-  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
+  rating?: SlRating["rating"];
+  /** Emitted when the rating's value changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value. */
+  "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
 };
 
-type SlSelectProps = {
-  /** The name of the select, submitted as a name/value pair with form data. */
-  name?: SlSelect["name"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
+type SlRelativeTimeProps = {
+  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
+string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
+a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
+  date?: SlRelativeTime["date"];
+  /** The formatting style to use. */
+  format?: SlRelativeTime["format"];
+  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
+"1 day ago" and "in 1 day" will be shown. */
+  numeric?: SlRelativeTime["numeric"];
+  /** Keep the displayed value up to date as time passes. */
+  sync?: SlRelativeTime["sync"];
+};
+
+type SlResizeObserverProps = {
+  /** Disables the observer. */
+  disabled?: SlResizeObserver["disabled"];
+
+  /** Emitted when the element is resized. */
+  "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"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
   value?: SlSelect["defaultValue"];
   /** The select's size. */
   size?: SlSelect["size"];
@@ -1512,31 +1587,6 @@ type SlSkeletonProps = {
 
 type SlSpinnerProps = {};
 
-type SlSplitPanelProps = {
-  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
-container's initial size. */
-  position?: SlSplitPanel["position"];
-  /** The current position of the divider from the primary panel's edge in pixels. */
-  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
-  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
-  vertical?: SlSplitPanel["vertical"];
-  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
-  disabled?: SlSplitPanel["disabled"];
-  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
-primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
-host element is resized. */
-  primary?: SlSplitPanel["primary"];
-  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
-or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
-  snap?: SlSplitPanel["snap"];
-  /** How close the divider must be to a snap point until snapping occurs. */
-  "snap-threshold"?: SlSplitPanel["snapThreshold"];
-  /**  */
-  divider?: SlSplitPanel["divider"];
-  /** Emitted when the divider's position changes. */
-  "onsl-reposition"?: (e: CustomEvent<never>) => void;
-};
-
 type SlSwitchProps = {
   /**  */
   title?: SlSwitch["title"];
@@ -1578,6 +1628,46 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlSplitPanelProps = {
+  /** The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the
+container's initial size. */
+  position?: SlSplitPanel["position"];
+  /** The current position of the divider from the primary panel's edge in pixels. */
+  "position-in-pixels"?: SlSplitPanel["positionInPixels"];
+  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */
+  vertical?: SlSplitPanel["vertical"];
+  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */
+  disabled?: SlSplitPanel["disabled"];
+  /** If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a
+primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the
+host element is resized. */
+  primary?: SlSplitPanel["primary"];
+  /** Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,
+or a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`. */
+  snap?: SlSplitPanel["snap"];
+  /** How close the divider must be to a snap point until snapping occurs. */
+  "snap-threshold"?: SlSplitPanel["snapThreshold"];
+  /**  */
+  divider?: SlSplitPanel["divider"];
+  /** Emitted when the divider's position changes. */
+  "onsl-reposition"?: (e: CustomEvent<never>) => void;
+};
+
+type SlTabProps = {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SlTab["panel"];
+  /** Draws the tab in an active state. */
+  active?: SlTab["active"];
+  /** Makes the tab closable and shows a close button. */
+  closable?: SlTab["closable"];
+  /** Disables the tab and prevents selection. */
+  disabled?: SlTab["disabled"];
+  /**  */
+  tab?: SlTab["tab"];
+  /** Emitted when the tab is closable and the close button is activated. */
+  "onsl-close"?: (e: CustomEvent<never>) => void;
+};
+
 type SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -1602,21 +1692,6 @@ manual, the tab will receive focus but will not show until the user presses spac
   "onsl-tab-hide"?: (e: CustomEvent<{ name: String }>) => void;
 };
 
-type SlTabProps = {
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SlTab["panel"];
-  /** Draws the tab in an active state. */
-  active?: SlTab["active"];
-  /** Makes the tab closable and shows a close button. */
-  closable?: SlTab["closable"];
-  /** Disables the tab and prevents selection. */
-  disabled?: SlTab["disabled"];
-  /**  */
-  tab?: SlTab["tab"];
-  /** Emitted when the tab is closable and the close button is activated. */
-  "onsl-close"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTabPanelProps = {
   /** The tab panel's name. */
   name?: SlTabPanel["name"];
@@ -1865,8 +1940,6 @@ displays checkboxes and allows more than one node to be selected. Leaf allows on
   "onsl-selection-change"?: (e: CustomEvent<{ selection: SlTreeItem[] }>) => void;
 };
 
-type SlVisuallyHiddenProps = {};
-
 type SlTreeItemProps = {
   /** Expands the tree item. */
   expanded?: SlTreeItem["expanded"];
@@ -1908,6 +1981,8 @@ type SlTreeItemProps = {
   "onsl-lazy-load"?: (e: CustomEvent<never>) => void;
 };
 
+type SlVisuallyHiddenProps = {};
+
 export type CustomElements = {
   /**
    * Alerts are used to display important messages inline or as toast notifications.
@@ -1941,23 +2016,26 @@ export type CustomElements = {
   "sl-alert": DefineComponent<SlAlertProps>;
 
   /**
-   * 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).
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
    *
    *
    * ### **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.
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
    *
    * ### **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.
+   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
+   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
    */
-  "sl-animation": DefineComponent<SlAnimationProps>;
+  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -1982,26 +2060,23 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
+   * 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-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
-   *
-   * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *  - **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 Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
+   * ### **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.
    *
-   * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
+   * ### **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-animated-image": DefineComponent<SlAnimatedImageProps>;
+  "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2016,26 +2091,6 @@ export type CustomElements = {
    */
   "sl-badge": DefineComponent<SlBadgeProps>;
 
-  /**
-   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The breadcrumb item's label.
-   * - **prefix** - An optional prefix, usually an icon or icon button.
-   * - **suffix** - An optional suffix, usually an icon or icon button.
-   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **label** - The breadcrumb item's label.
-   * - **prefix** - The container that wraps the prefix.
-   * - **suffix** - The container that wraps the suffix.
-   * - **separator** - The container that wraps the separator.
-   */
-  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
-
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
@@ -2085,43 +2140,37 @@ export type CustomElements = {
   "sl-button": DefineComponent<SlButtonProps>;
 
   /**
-   * Button groups can be used to group related buttons into sections.
+   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *  - _default_ - The breadcrumb item's label.
+   * - **prefix** - An optional prefix, usually an icon or icon button.
+   * - **suffix** - An optional suffix, usually an icon or icon button.
+   * - **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
+   * - **label** - The breadcrumb item's label.
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   * - **separator** - The container that wraps the separator.
    */
-  "sl-button-group": DefineComponent<SlButtonGroupProps>;
+  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
-   * Cards can be used to group related subjects in a container.
+   * Button groups can be used to group related buttons into sections.
    * ---
    *
    *
    * ### **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)_
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
    *
    * ### **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>;
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
@@ -2159,6 +2208,32 @@ export type CustomElements = {
    */
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
+  /**
+   * 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.
    * ---
@@ -2197,6 +2272,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.
    * ---
@@ -2259,19 +2347,6 @@ export type CustomElements = {
    */
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
-  /**
-   * 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>;
-
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2709,6 +2784,7 @@ export type CustomElements = {
    *
    * ### **Events:**
    *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-open-change** - Emitted when the open submenu keys change.
    * - **sl-nav-select** - Emitted when a nav item is selected.
    *
    * ### **Slots:**
@@ -2768,8 +2844,8 @@ export type CustomElements = {
    * - **sl-after-hide** - Emitted after the submenu closes and all animations are complete.
    *
    * ### **Methods:**
-   *  - **show()** - Shows the submenu.
-   * - **hide()** - Hides the submenu.
+   *  - **show(source: _'api' | 'nav' | 'user'_)** - Shows the submenu.
+   * - **hide(source: _'api' | 'nav' | 'user'_)** - Hides the submenu.
    *
    * ### **Slots:**
    *  - _default_ - The nav items within the submenu.
@@ -2922,38 +2998,6 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
-  /**
-   * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-change** - Emitted when the radio group's selected value changes.
-   * - **sl-input** - Emitted when the radio group receives user input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the radio-group.
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
-   * - **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
-   * - **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **form-control** - The form control that wraps the label, input, and help text.
-   * - **form-control-label** - The label's wrapper.
-   * - **form-control-input** - The input's wrapper.
-   * - **form-control-help-text** - The help text's wrapper.
-   * - **button-group** - The button group that wraps radio buttons.
-   * - **button-group__base** - The button group's `base` part.
-   */
-  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
-
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
@@ -2983,35 +3027,36 @@ export type CustomElements = {
   "sl-radio-button": DefineComponent<SlRadioButtonProps>;
 
   /**
-   * Ratings give users a way to quickly view and provide feedback.
+   * Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-change** - Emitted when the rating's value changes.
-   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
+   *  - **sl-change** - Emitted when the radio group's selected value changes.
+   * - **sl-input** - Emitted when the radio group receives user input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
    *
    * ### **Methods:**
-   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
-   * - **blur()** - Removes focus from the rating.
+   *  - **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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the radio-group.
    *
-   * ### **CSS Properties:**
-   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
-   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
-   * - **--symbol-size** - The size of symbols. _(default: undefined)_
-   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
+   * ### **Slots:**
+   *  - _default_ - The default slot where `<sl-radio>` or `<sl-radio-button>` elements are placed.
+   * - **label** - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
+   * - **help-text** - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-rating": DefineComponent<SlRatingProps>;
-
-  /**
-   * Outputs a localized time phrase relative to the current date and time.
-   * ---
-   *
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The input's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **button-group** - The button group that wraps radio buttons.
+   * - **button-group__base** - The button group's `base` part.
    */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+  "sl-radio-group": DefineComponent<SlRadioGroupProps>;
 
   /**
    * Ranges allow the user to select a single value within a given range using a slider.
@@ -3059,18 +3104,35 @@ export type CustomElements = {
   "sl-range": DefineComponent<SlRangeProps>;
 
   /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * Ratings give users a way to quickly view and provide feedback.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the rating's value changes.
+   * - **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.
+   *
    * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   *  - **focus(options: _FocusOptions_)** - Sets focus on the rating.
+   * - **blur()** - Removes focus from the rating.
+   *
+   * ### **CSS Properties:**
+   *  - **--symbol-color** - The inactive color for symbols. _(default: undefined)_
+   * - **--symbol-color-active** - The active color for symbols. _(default: undefined)_
+   * - **--symbol-size** - The size of symbols. _(default: undefined)_
+   * - **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
+   *  - **base** - The component's base wrapper.
    */
-  "sl-screen": DefineComponent<SlScreenProps>;
+  "sl-rating": DefineComponent<SlRatingProps>;
+
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
 
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
@@ -3085,6 +3147,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.
    * ---
@@ -3174,33 +3250,6 @@ export type CustomElements = {
    */
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
-  /**
-   * Split panels display two adjacent panels, allowing the user to reposition them.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-reposition** - Emitted when the divider's position changes.
-   *
-   * ### **Slots:**
-   *  - **start** - Content to place in the start panel.
-   * - **end** - Content to place in the end panel.
-   * - **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.
-   *
-   * ### **CSS Properties:**
-   *  - **--divider-width** - The width of the visible divider. _(default: 4px)_
-   * - **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_
-   * - **--min** - The minimum allowed size of the primary panel. _(default: 0)_
-   * - **--max** - The maximum allowed size of the primary panel. _(default: 100%)_
-   *
-   * ### **CSS Parts:**
-   *  - **start** - The start panel.
-   * - **end** - The end panel.
-   * - **panel** - Targets both the start and end panels.
-   * - **divider** - The divider that separates the start and end panels.
-   */
-  "sl-split-panel": DefineComponent<SlSplitPanelProps>;
-
   /**
    * Switches allow the user to toggle an option on or off.
    * ---
@@ -3240,6 +3289,51 @@ export type CustomElements = {
    */
   "sl-switch": DefineComponent<SlSwitchProps>;
 
+  /**
+   * Split panels display two adjacent panels, allowing the user to reposition them.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-reposition** - Emitted when the divider's position changes.
+   *
+   * ### **Slots:**
+   *  - **start** - Content to place in the start panel.
+   * - **end** - Content to place in the end panel.
+   * - **divider** - The divider. Useful for slotting in a custom icon that renders as a handle.
+   *
+   * ### **CSS Properties:**
+   *  - **--divider-width** - The width of the visible divider. _(default: 4px)_
+   * - **--divider-hit-area** - The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging. _(default: 12px)_
+   * - **--min** - The minimum allowed size of the primary panel. _(default: 0)_
+   * - **--max** - The maximum allowed size of the primary panel. _(default: 100%)_
+   *
+   * ### **CSS Parts:**
+   *  - **start** - The start panel.
+   * - **end** - The end panel.
+   * - **panel** - Targets both the start and end panels.
+   * - **divider** - The divider that separates the start and end panels.
+   */
+  "sl-split-panel": DefineComponent<SlSplitPanelProps>;
+
+  /**
+   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
+   */
+  "sl-tab": DefineComponent<SlTabProps>;
+
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -3274,24 +3368,6 @@ export type CustomElements = {
    */
   "sl-tab-group": DefineComponent<SlTabGroupProps>;
 
-  /**
-   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   */
-  "sl-tab": DefineComponent<SlTabProps>;
-
   /**
    * Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
    * ---
@@ -3453,16 +3529,6 @@ export type CustomElements = {
    */
   "sl-tree": DefineComponent<SlTreeProps>;
 
-  /**
-   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to be visually hidden.
-   */
-  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
-
   /**
    * A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).
    * ---
@@ -3507,6 +3573,16 @@ export type CustomElements = {
    * - **checkbox__label** - The checkbox's exported `label` part.
    */
   "sl-tree-item": DefineComponent<SlTreeItemProps>;
+
+  /**
+   * The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content to be visually hidden.
+   */
+  "sl-visually-hidden": DefineComponent<SlVisuallyHiddenProps>;
 };
 
 declare module "vue" {