@kdcloudjs/shoelace 1.0.20 → 1.0.22

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

@@ -3,26 +3,26 @@ 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 { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { SlButton } from "../../components/button/button.component.js";
+import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
+import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
-import type { SlCarousel } from "../../components/carousel/carousel.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 { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.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";
-import type { SlDaterange } from "../../components/daterange/daterange.component.js";
 import type { SlDetails } from "../../components/details/details.component.js";
 import type { SlDialog } from "../../components/dialog/dialog.component.js";
 import type { SlDivider } from "../../components/divider/divider.component.js";
 import type { SlDrawer } from "../../components/drawer/drawer.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
+import type { SlDaterange } from "../../components/daterange/daterange.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";
@@ -31,8 +31,8 @@ import type { SlIconButton } from "../../components/icon-button/icon-button.comp
 import type { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
 import type { SlInclude } from "../../components/include/include.component.js";
 import type { SlInput } from "../../components/input/input.component.js";
-import type { SlMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SlMenu } from "../../components/menu/menu.component.js";
+import type { 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 { SlNav } from "../../components/nav/nav.component.js";
@@ -160,6 +160,37 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (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. */
+  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 SlAvatarProps = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -176,25 +207,6 @@ type SlAvatarProps = {
   "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 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"];
@@ -264,18 +276,6 @@ 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,6 +286,8 @@ 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"];
@@ -320,10 +322,6 @@ 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 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
@@ -434,6 +432,8 @@ 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"];
@@ -524,63 +524,6 @@ type SlDatepickerProps = {
   calendar?: SlDatepicker["calendar"];
 };
 
-type SlDaterangeProps = {
-  /** The name of the input, submitted as a name/value pair with form data. */
-  name?: SlDaterange["name"];
-  /** The current value of the input, submitted as a name/value pair with form data. */
-  value?: SlDaterange["value"];
-  /** The input's size. */
-  size?: SlDaterange["size"];
-  /** Draws a filled input. */
-  filled?: SlDaterange["filled"];
-  /** Draws a pill-style input with rounded edges. */
-  pill?: SlDaterange["pill"];
-  /** The input's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlDaterange["label"];
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlDaterange["helpText"];
-  /** Adds a clear button when the input is not empty. */
-  clearable?: SlDaterange["clearable"];
-  /** Disables the input. */
-  disabled?: SlDaterange["disabled"];
-  /** Placeholder text to show as a hint for the start date. */
-  "start-placeholder"?: SlDaterange["startPlaceholder"];
-  /** Placeholder text to show as a hint for the end date. */
-  "end-placeholder"?: SlDaterange["endPlaceholder"];
-  /** Makes the input readonly. */
-  readonly?: SlDaterange["readonly"];
-  /** Makes the input a required field. */
-  required?: SlDaterange["required"];
-  /**  */
-  type?: SlDaterange["type"];
-  /** The minimum allowed date (in YYYY-MM-DD format). */
-  min?: SlDaterange["min"];
-  /** The maximum allowed date (in YYYY-MM-DD format). */
-  max?: SlDaterange["max"];
-  /** The date format to use. Defaults to YYYY-MM-DD. */
-  format?: SlDaterange["format"];
-  /**  */
-  startInput?: SlDaterange["startInput"];
-  /**  */
-  endInput?: SlDaterange["endInput"];
-  /**  */
-  popup?: SlDaterange["popup"];
-  /**  */
-  inputContainer?: SlDaterange["inputContainer"];
-  /**  */
-  calendars?: SlDaterange["calendars"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: SlDaterange["defaultValue"];
-  /** The start date value. */
-  startDate?: SlDaterange["startDate"];
-  /** The end date value. */
-  endDate?: SlDaterange["endDate"];
-  /** Gets the validity state object */
-  validity?: SlDaterange["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlDaterange["validationMessage"];
-};
-
 type SlDetailsProps = {
   /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
@@ -728,6 +671,66 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDaterangeProps = {
+  /** The name of the input, submitted as a name/value pair with form data. */
+  name?: SlDaterange["name"];
+  /** The current value of the input, submitted as a name/value pair with form data. */
+  value?: SlDaterange["value"];
+  /** The input's size. */
+  size?: SlDaterange["size"];
+  /** Draws a filled input. */
+  filled?: SlDaterange["filled"];
+  /** Draws a pill-style input with rounded edges. */
+  pill?: SlDaterange["pill"];
+  /** The input's label. If you need to display HTML, use the `label` slot instead. */
+  label?: SlDaterange["label"];
+  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlDaterange["helpText"];
+  /** Adds a clear button when the input is not empty. */
+  clearable?: SlDaterange["clearable"];
+  /** Disables the input. */
+  disabled?: SlDaterange["disabled"];
+  /** Placeholder text for the two inputs. Accepts a string in the format "startPlaceholder,endPlaceholder"
+as an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via JavaScript. */
+  placeholder?: SlDaterange["placeholder"];
+  /** Makes the input readonly. */
+  readonly?: SlDaterange["readonly"];
+  /** Makes the input a required field. */
+  required?: SlDaterange["required"];
+  /**  */
+  type?: SlDaterange["type"];
+  /** The minimum allowed date (in YYYY-MM-DD format). */
+  min?: SlDaterange["min"];
+  /** The maximum allowed date (in YYYY-MM-DD format). */
+  max?: SlDaterange["max"];
+  /** The date format to use. Defaults to YYYY-MM-DD. */
+  format?: SlDaterange["format"];
+  /**  */
+  startInput?: SlDaterange["startInput"];
+  /**  */
+  endInput?: SlDaterange["endInput"];
+  /**  */
+  popup?: SlDaterange["popup"];
+  /**  */
+  inputContainer?: SlDaterange["inputContainer"];
+  /**  */
+  calendars?: SlDaterange["calendars"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: SlDaterange["defaultValue"];
+  /**  */
+  startPlaceholder?: SlDaterange["startPlaceholder"];
+  /**  */
+  endPlaceholder?: SlDaterange["endPlaceholder"];
+  /** The start date value. */
+  startDate?: SlDaterange["startDate"];
+  /** The end date value. */
+  endDate?: SlDaterange["endDate"];
+  /** Gets the validity state object */
+  validity?: SlDaterange["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlDaterange["validationMessage"];
+};
+
 type SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -885,6 +888,8 @@ to `text`. */
   "help-text"?: SlInput["helpText"];
   /** Adds a clear button when the input is not empty. */
   clearable?: SlInput["clearable"];
+  /** Hides the suffix when the clear button is visible. */
+  "clear-hides-suffix"?: SlInput["clearHidesSuffix"];
   /** Disables the input. */
   disabled?: SlInput["disabled"];
   /** Placeholder text to show as a hint when the input is empty. */
@@ -958,6 +963,13 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlMenuProps = {
+  /**  */
+  defaultSlot?: SlMenu["defaultSlot"];
+  /** Emitted when a menu item is selected. */
+  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+};
+
 type SlMenuItemProps = {
   /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
   type?: SlMenuItem["type"];
@@ -975,13 +987,6 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
-type SlMenuProps = {
-  /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
-};
-
 type SlMenuLabelProps = {};
 
 type SlMutationObserverProps = {
@@ -1004,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 = {
@@ -1021,11 +1068,17 @@ 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"];
+  /** 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. */
@@ -1040,18 +1093,29 @@ 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"];
   /** 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. */
@@ -1064,6 +1128,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. */
@@ -1643,6 +1715,8 @@ type SlTableProps = {
   /**  */
   expandProps?: SlTable["expandProps"];
   /**  */
+  tree?: SlTable["tree"];
+  /**  */
   enableColumnResizing?: SlTable["enableColumnResizing"];
   /**  */
   slHeaderRow?: SlTable["slHeaderRow"];
@@ -1975,26 +2049,18 @@ export type CustomElements = {
   "sl-animation": DefineComponent<SlAnimationProps>;
 
   /**
-   * Avatars are used to represent a person or object.
+   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
-   *
    * ### **Slots:**
-   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *  - _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.
-   * - **icon** - The container that wraps the avatar's icon.
-   * - **initials** - The container that wraps the avatar's initials.
-   * - **image** - The avatar image. Only shown when the `image` attribute is set.
    */
-  "sl-avatar": DefineComponent<SlAvatarProps>;
+  "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2010,18 +2076,46 @@ export type CustomElements = {
   "sl-badge": DefineComponent<SlBadgeProps>;
 
   /**
-   * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more breadcrumb items to display.
-   * - **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.
+   *  - _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": DefineComponent<SlBreadcrumbProps>;
+  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
+
+  /**
+   * Avatars are used to represent a person or object.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.
+   *
+   * ### **Slots:**
+   *  - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--size** - The size of the avatar. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **icon** - The container that wraps the avatar's icon.
+   * - **initials** - The container that wraps the avatar's initials.
+   * - **image** - The avatar image. Only shown when the `image` attribute is set.
+   */
+  "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
    * Buttons represent actions that are available to the user.
@@ -2058,37 +2152,43 @@ export type CustomElements = {
   "sl-button": DefineComponent<SlButtonProps>;
 
   /**
-   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+   * Button groups can be used to group related buttons into sections.
    * ---
    *
    *
    * ### **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.
+   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
    *
    * ### **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>;
+  "sl-button-group": DefineComponent<SlButtonGroupProps>;
 
   /**
-   * Button groups can be used to group related buttons into sections.
+   * Cards can be used to group related subjects in a container.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - One or more `<sl-button>` elements to display in the button group.
+   *  - _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-button-group": DefineComponent<SlButtonGroupProps>;
+  "sl-card": DefineComponent<SlCardProps>;
 
   /**
    * Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
@@ -2126,45 +2226,6 @@ 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>;
-
-  /**
-   * 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.
    * ---
@@ -2265,6 +2326,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>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2315,19 +2389,6 @@ export type CustomElements = {
    */
   "sl-datepicker": DefineComponent<SlDatepickerProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Methods:**
-   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
-   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
-   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
-   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
-   */
-  "sl-daterange": DefineComponent<SlDaterangeProps>;
-
   /**
    * Details show a brief summary and expand to show additional content.
    * ---
@@ -2485,6 +2546,19 @@ export type CustomElements = {
    */
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）
+   * - **getForm(): _HTMLFormElement | null_** - 获取表单引用
+   * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
+   * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
+   */
+  "sl-daterange": DefineComponent<SlDaterangeProps>;
+
   /**
    * Formats a number as a human readable bytes value.
    * ---
@@ -2627,6 +2701,19 @@ export type CustomElements = {
    */
   "sl-input": DefineComponent<SlInputProps>;
 
+  /**
+   * Menus provide a list of options for the user to choose from.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-select** - Emitted when a menu item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
+   */
+  "sl-menu": DefineComponent<SlMenuProps>;
+
   /**
    * Menu items provide options for the user to pick from in a menu.
    * ---
@@ -2656,19 +2743,6 @@ export type CustomElements = {
    */
   "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
-  /**
-   * Menus provide a list of options for the user to choose from.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-select** - Emitted when a menu item is selected.
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu's content, including menu items, menu labels, and dividers.
-   */
-  "sl-menu": DefineComponent<SlMenuProps>;
-
   /**
    * Menu labels are used to describe a group of menu items.
    * ---
@@ -2702,6 +2776,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:**
@@ -2761,8 +2836,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.