@kdcloudjs/shoelace 1.0.11 → 1.0.13

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

@@ -3,10 +3,10 @@ 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 { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
+import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SlButton } from "../../components/button/button.component.js";
 import type { SlButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { SlCard } from "../../components/card/card.component.js";
@@ -30,41 +30,41 @@ 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";
+import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNavGroup } from "../../components/nav-group/nav-group.component.js";
-import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlNavSubmenu } from "../../components/nav-submenu/nav-submenu.component.js";
-import type { SlOption } from "../../components/option/option.component.js";
+import type { SlNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SlPagination } from "../../components/pagination/pagination.component.js";
+import type { SlOption } from "../../components/option/option.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
 import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
-import type { SlRadio } from "../../components/radio/radio.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
+import type { SlRadio } from "../../components/radio/radio.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 { 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 { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlSplitPanel } from "../../components/split-panel/split-panel.component.js";
+import type { SlSwitch } from "../../components/switch/switch.component.js";
 import type { SlTab } from "../../components/tab/tab.component.js";
 import type { 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";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
-import type { SlTooltip } from "../../components/tooltip/tooltip.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";
 import type { SlVisuallyHidden } from "../../components/visually-hidden/visually-hidden.component.js";
@@ -159,6 +159,15 @@ value can be changed without causing the animation to restart. */
   "onsl-start"?: (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 SlAvatarProps = {
   /** The image source to use for the avatar. */
   image?: SlAvatar["image"];
@@ -175,25 +184,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 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. */
@@ -206,6 +196,16 @@ internally. When unset, a button will be rendered instead. */
   defaultSlot?: SlBreadcrumbItem["defaultSlot"];
 };
 
+type SlBreadcrumbProps = {
+  /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+screen readers and other assistive devices to provide more context for users. */
+  label?: SlBreadcrumb["label"];
+  /**  */
+  defaultSlot?: SlBreadcrumb["defaultSlot"];
+  /**  */
+  separatorSlot?: SlBreadcrumb["separatorSlot"];
+};
+
 type SlButtonProps = {
   /**  */
   title?: SlButton["title"];
@@ -900,6 +900,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"];
@@ -917,15 +924,21 @@ type SlMenuItemProps = {
   menuItem?: SlMenuItem["menuItem"];
 };
 
-type SlMenuProps = {
+type SlMenuLabelProps = {};
+
+type SlNavProps = {
+  /** The value of the selected nav item. */
+  value?: SlNav["value"];
+  /** The mode of navigation. */
+  mode?: SlNav["mode"];
   /**  */
-  defaultSlot?: SlMenu["defaultSlot"];
-  /** Emitted when a menu item is selected. */
-  "onsl-select"?: (e: CustomEvent<{ item: SlMenuItem }>) => void;
+  defaultSlot?: SlNav["defaultSlot"];
+  /** Emitted when the selected nav item changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
-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 `*`. */
@@ -945,19 +958,6 @@ type SlMutationObserverProps = {
   "onsl-mutation"?: (e: CustomEvent<{ mutationList: MutationRecord[] }>) => void;
 };
 
-type SlNavProps = {
-  /** The value of the selected nav item. */
-  value?: SlNav["value"];
-  /** The mode of navigation. */
-  mode?: SlNav["mode"];
-  /**  */
-  defaultSlot?: SlNav["defaultSlot"];
-  /** Emitted when the selected nav item changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
-};
-
 type SlNavGroupProps = {
   /** Draws the nav group in an active (selected) state. */
   active?: SlNavGroup["active"];
@@ -965,28 +965,6 @@ type SlNavGroupProps = {
   mode?: SlNavGroup["mode"];
 };
 
-type SlNavItemProps = {
-  /** The value to track selection. */
-  value?: SlNavItem["value"];
-  /** Draws the nav item in a disabled state. */
-  disabled?: SlNavItem["disabled"];
-  /** Draws the nav item in an active (selected) state. */
-  active?: SlNavItem["active"];
-  /** The URL to link to. If set, the nav item will render as an anchor tag. */
-  href?: SlNavItem["href"];
-  /** The target attribute for the anchor tag. */
-  target?: SlNavItem["target"];
-  /** The download attribute for the anchor tag. */
-  download?: SlNavItem["download"];
-  /** The rel attribute for the anchor tag. */
-  rel?: SlNavItem["rel"];
-  /** The mode of navigation. */
-  mode?: SlNavItem["mode"];
-
-  /** Emitted when a nav item is selected. */
-  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
-};
-
 type SlNavSubmenuProps = {
   /** Indicates whether or not the submenu is open. */
   open?: SlNavSubmenu["open"];
@@ -1014,21 +992,26 @@ type SlNavSubmenuProps = {
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlOptionProps = {
-  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
-from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-multiple values. */
-  value?: SlOption["value"];
-  /** Draws the option in a disabled state, preventing selection. */
-  disabled?: SlOption["disabled"];
-  /**  */
-  defaultSlot?: SlOption["defaultSlot"];
-  /**  */
-  current?: SlOption["current"];
-  /**  */
-  selected?: SlOption["selected"];
-  /**  */
-  hasHover?: SlOption["hasHover"];
+type SlNavItemProps = {
+  /** The value to track selection. */
+  value?: SlNavItem["value"];
+  /** Draws the nav item in a disabled state. */
+  disabled?: SlNavItem["disabled"];
+  /** Draws the nav item in an active (selected) state. */
+  active?: SlNavItem["active"];
+  /** The URL to link to. If set, the nav item will render as an anchor tag. */
+  href?: SlNavItem["href"];
+  /** The target attribute for the anchor tag. */
+  target?: SlNavItem["target"];
+  /** The download attribute for the anchor tag. */
+  download?: SlNavItem["download"];
+  /** The rel attribute for the anchor tag. */
+  rel?: SlNavItem["rel"];
+  /** The mode of navigation. */
+  mode?: SlNavItem["mode"];
+
+  /** Emitted when a nav item is selected. */
+  "onsl-nav-select"?: (e: CustomEvent<{ item: SlNavItem }>) => void;
 };
 
 type SlPaginationProps = {
@@ -1050,6 +1033,23 @@ type SlPaginationProps = {
   defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
+type SlOptionProps = {
+  /** The option's value. When selected, the containing form control will receive this value. The value must be unique
+from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
+multiple values. */
+  value?: SlOption["value"];
+  /** Draws the option in a disabled state, preventing selection. */
+  disabled?: SlOption["disabled"];
+  /**  */
+  defaultSlot?: SlOption["defaultSlot"];
+  /**  */
+  current?: SlOption["current"];
+  /**  */
+  selected?: SlOption["selected"];
+  /**  */
+  hasHover?: SlOption["hasHover"];
+};
+
 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
@@ -1145,22 +1145,6 @@ type SlProgressRingProps = {
   indicatorOffset?: SlProgressRing["indicatorOffset"];
 };
 
-type SlRadioProps = {
-  /** The radio's value. When selected, the radio group will receive this value. */
-  value?: SlRadio["value"];
-  /** The radio'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?: SlRadio["size"];
-  /** Disables the radio. */
-  disabled?: SlRadio["disabled"];
-  /**  */
-  checked?: SlRadio["checked"];
-  /** Emitted when the control loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the control gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-};
-
 type SlQrCodeProps = {
   /** The QR code's value. */
   value?: SlQrCode["value"];
@@ -1180,6 +1164,22 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
+type SlRadioProps = {
+  /** The radio's value. When selected, the radio group will receive this value. */
+  value?: SlRadio["value"];
+  /** The radio'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?: SlRadio["size"];
+  /** Disables the radio. */
+  disabled?: SlRadio["disabled"];
+  /**  */
+  checked?: SlRadio["checked"];
+  /** Emitted when the control loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+};
+
 type SlRadioButtonProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadioButton["value"];
@@ -1326,6 +1326,14 @@ a date to this format in JavaScript, use [`date.toISOString()`](https://develope
   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"];
@@ -1341,14 +1349,6 @@ type SlScreenProps = {
   gridElement?: SlScreen["gridElement"];
 };
 
-type SlResizeObserverProps = {
-  /** Disables the observer. */
-  disabled?: SlResizeObserver["disabled"];
-
-  /** Emitted when the element is resized. */
-  "onsl-resize"?: (e: CustomEvent<{ entries: ResizeObserverEntry[] }>) => void;
-};
-
 type SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -1447,6 +1447,31 @@ 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"];
@@ -1488,31 +1513,6 @@ 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"];
@@ -1727,6 +1727,23 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlTimepickerProps = {
+  /**  */
+  format?: SlTimepicker["format"];
+  /**  */
+  timePanel?: SlTimepicker["timePanel"];
+  /** 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"];
@@ -1765,23 +1782,6 @@ scenarios. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTimepickerProps = {
-  /**  */
-  format?: SlTimepicker["format"];
-  /**  */
-  timePanel?: SlTimepicker["timePanel"];
-  /** 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 SlTreeProps = {
   /** The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple
 displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. */
@@ -1912,6 +1912,19 @@ export type CustomElements = {
    */
   "sl-animation": DefineComponent<SlAnimationProps>;
 
+  /**
+   * Badges are used to draw attention and display statuses or counts.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The badge's content.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-badge": DefineComponent<SlBadgeProps>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -1935,17 +1948,24 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - _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-badge": DefineComponent<SlBadgeProps>;
+  "sl-breadcrumb-item": DefineComponent<SlBreadcrumbItemProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -1961,26 +1981,6 @@ export type CustomElements = {
    */
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
-  /**
-   * 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>;
-
   /**
    * Buttons represent actions that are available to the user.
    * ---
@@ -2552,6 +2552,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.
    * ---
@@ -2581,19 +2594,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.
    * ---
@@ -2607,19 +2607,6 @@ export type CustomElements = {
    */
   "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).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
-   *
-   * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
-   */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
-
   /**
    * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
@@ -2638,41 +2625,33 @@ export type CustomElements = {
   "sl-nav": DefineComponent<SlNavProps>;
 
   /**
-   * Nav groups are used to group related nav items.
+   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The nav items within the group.
-   * - **title** - The nav group's title.
+   * ### **Events:**
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **title** - The nav group title.
-   * - **body** - The nav group body.
+   * ### **Slots:**
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-nav-group": DefineComponent<SlNavGroupProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
-   * Nav items are the individual links or buttons within a navigation menu.
+   * Nav groups are used to group related nav items.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-nav-select** - Emitted when a nav item is selected.
-   *
    * ### **Slots:**
-   *  - _default_ - The nav item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the nav item.
-   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *  - _default_ - The nav items within the group.
+   * - **title** - The nav group's title.
    *
    * ### **CSS Parts:**
    *  - **base** - The component's base wrapper.
-   * - **prefix** - The prefix container.
-   * - **label** - The nav item label.
-   * - **suffix** - The suffix container.
+   * - **title** - The nav group title.
+   * - **body** - The nav group body.
    */
-  "sl-nav-item": DefineComponent<SlNavItemProps>;
+  "sl-nav-group": DefineComponent<SlNavGroupProps>;
 
   /**
    * Nav submenus are used to group related nav items in a hierarchical structure.
@@ -2709,6 +2688,34 @@ export type CustomElements = {
    */
   "sl-nav-submenu": DefineComponent<SlNavSubmenuProps>;
 
+  /**
+   * Nav items are the individual links or buttons within a navigation menu.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-nav-select** - Emitted when a nav item is selected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The nav item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the nav item.
+   * - **suffix** - Used to append an icon or similar element to the nav item.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **prefix** - The prefix container.
+   * - **label** - The nav item label.
+   * - **suffix** - The suffix container.
+   */
+  "sl-nav-item": DefineComponent<SlNavItemProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-pagination": DefineComponent<SlPaginationProps>;
+
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---
@@ -2731,13 +2738,6 @@ 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.
    * ---
@@ -2809,6 +2809,16 @@ export type CustomElements = {
    */
   "sl-progress-ring": DefineComponent<SlProgressRingProps>;
 
+  /**
+   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
+   * ---
+   *
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-qr-code": DefineComponent<SlQrCodeProps>;
+
   /**
    * Radios allow the user to select a single option from a group.
    * ---
@@ -2830,16 +2840,6 @@ export type CustomElements = {
    */
   "sl-radio": DefineComponent<SlRadioProps>;
 
-  /**
-   * Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
-   * ---
-   *
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-qr-code": DefineComponent<SlQrCodeProps>;
-
   /**
    * Radios buttons allow the user to select a single option from a group using a button-like control.
    * ---
@@ -2977,31 +2977,31 @@ export type CustomElements = {
   "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
 
   /**
-   * Screen is a grid layout component based on gridstack.js and Shoelace.
+   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
    *
    *
-   * ### **Methods:**
-   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
-   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
+   * ### **Events:**
+   *  - **sl-resize** - Emitted when the element is resized.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The grid layout content.
+   * ### **Slots:**
+   *  - _default_ - One or more elements to watch for resizing.
    */
-  "sl-screen": DefineComponent<SlScreenProps>;
+  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
 
   /**
-   * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+   * Screen is a grid layout component based on gridstack.js and Shoelace.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-resize** - Emitted when the element is resized.
+   * ### **Methods:**
+   *  - **getGridData(): __** - 获取 GridStack 实例的序列化数据
+   * - **getInstance(): __** - 获取 GridStack 实例的序列化数据
    *
-   * ### **Slots:**
-   *  - _default_ - One or more elements to watch for resizing.
+   * ### **CSS Parts:**
+   *  - **base** - The grid layout content.
    */
-  "sl-resize-observer": DefineComponent<SlResizeObserverProps>;
+  "sl-screen": DefineComponent<SlScreenProps>;
 
   /**
    * Selects allow you to choose items from a menu of predefined options.
@@ -3092,6 +3092,33 @@ 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.
    * ---
@@ -3131,33 +3158,6 @@ 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).
    * ---
@@ -3293,6 +3293,27 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
+  /**
+   * A time picker component that provides a time selection interface.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-change** - Emitted when the control's value changes.
+   * - **sl-input** - Emitted when the control's value changes.
+   * - **sl-focus** - Emitted when the control gains focus.
+   * - **sl-blur** - Emitted when the control loses focus.
+   * - **sl-clear** - Emitted when the clear button is activated.
+   *
+   * ### **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.
    * ---
@@ -3325,27 +3346,6 @@ export type CustomElements = {
    */
   "sl-tooltip": DefineComponent<SlTooltipProps>;
 
-  /**
-   * 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.
-   *
-   * ### **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>;
-
   /**
    * Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.
    * ---