@kdcloudjs/shoelace 1.0.14 → 1.0.16

package/dist/themes/nova.styles.js

@@ -1,6 +1,7 @@
 import { css } from "lit";
 
 export default css`
+  :root,
   :host,
   .sl-theme-newtheme {
     color-scheme: nova;
@@ -302,7 +303,7 @@ export default css`
     --sl-border-radius-medium: calc(
       16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-border-radius-medium: calc(
+    --sl-border-radius-x-medium: calc(
       16 * 0.375 / var(--kdds-base-font-size, 16) * 1rem
     );
     --sl-border-radius-large: calc(
@@ -333,13 +334,13 @@ export default css`
     --sl-spacing-2x-small: calc(
       16 * 0.25 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-spacing-2x-small: calc(
+    --sl-spacing-1-5x-small: calc(
       16 * 0.375 / var(--kdds-base-font-size, 16) * 1rem
     );
     --sl-spacing-x-small: calc(
       16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-spacing-x-small: calc(
+    --sl-spacing-0-5x-small: calc(
       16 * 0.625 / var(--kdds-base-font-size, 16) * 1rem
     );
     --sl-spacing-small: calc(16 * 0.75 / var(--kdds-base-font-size, 16) * 1rem);

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

@@ -12,38 +12,38 @@ import type { SlButtonGroup } from "../../components/button-group/button-group.c
 import type { SlCard } from "../../components/card/card.component.js";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
 import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { SlCheckbox } from "../../components/checkbox/checkbox.component.js";
 import type { SlColorPicker } from "../../components/color-picker/color-picker.component.js";
+import type { SlCheckbox } from "../../components/checkbox/checkbox.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 { 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 { SlDatepicker } from "../../components/datepicker/datepicker.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";
-import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { SlIcon } from "../../components/icon/icon.component.js";
+import type { SlIconButton } from "../../components/icon-button/icon-button.component.js";
 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 { 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 { SlNav } from "../../components/nav/nav.component.js";
 import type { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
+import type { SlNav } from "../../components/nav/nav.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 { SlPagination } from "../../components/pagination/pagination.component.js";
 import type { SlPopup } from "../../components/popup/popup.component.js";
-import type { SlProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { SlProgressRing } from "../../components/progress-ring/progress-ring.component.js";
 import type { SlQrCode } from "../../components/qr-code/qr-code.component.js";
+import type { SlProgressBar } from "../../components/progress-bar/progress-bar.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";
@@ -323,50 +323,6 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type SlCarouselItemProps = {};
 
-type SlCheckboxProps = {
-  /**  */
-  title?: SlCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: SlCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: SlCheckbox["value"];
-  /** The checkbox's size. */
-  size?: SlCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: SlCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: SlCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: SlCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: SlCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: SlCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlCheckbox["helpText"];
-  /**  */
-  input?: SlCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: SlCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: SlCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: SlCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "onsl-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "onsl-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "onsl-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "onsl-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 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
@@ -433,6 +389,50 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlCheckboxProps = {
+  /**  */
+  title?: SlCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: SlCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: SlCheckbox["value"];
+  /** The checkbox's size. */
+  size?: SlCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: SlCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: SlCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: SlCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: SlCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: SlCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: SlCheckbox["helpText"];
+  /**  */
+  input?: SlCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: SlCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: SlCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: SlCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "onsl-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "onsl-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "onsl-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onsl-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type SlCopyButtonProps = {
   /** The text value to copy. */
   value?: SlCopyButton["value"];
@@ -510,19 +510,6 @@ type SlDatePanelProps = {
   "onsl-date-change"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SlDatepickerProps = {
-  /**  */
-  type?: SlDatepicker["type"];
-  /**  */
-  pattern?: SlDatepicker["pattern"];
-  /**  */
-  min?: SlDatepicker["min"];
-  /**  */
-  max?: SlDatepicker["max"];
-  /**  */
-  calendar?: SlDatepicker["calendar"];
-};
-
 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. */
@@ -670,6 +657,19 @@ components that use a dropdown internally. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type SlDatepickerProps = {
+  /**  */
+  type?: SlDatepicker["type"];
+  /**  */
+  pattern?: SlDatepicker["pattern"];
+  /**  */
+  min?: SlDatepicker["min"];
+  /**  */
+  max?: SlDatepicker["max"];
+  /**  */
+  calendar?: SlDatepicker["calendar"];
+};
+
 type SlFormatBytesProps = {
   /** The number to format in bytes. */
   value?: SlFormatBytes["value"];
@@ -731,6 +731,24 @@ type SlFormatNumberProps = {
   "maximum-significant-digits"?: SlFormatNumber["maximumSignificantDigits"];
 };
 
+type SlIconProps = {
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  name?: SlIcon["name"];
+  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+can result in XSS attacks. */
+  src?: SlIcon["src"];
+  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
+ignored by assistive devices. */
+  label?: SlIcon["label"];
+  /** The name of a registered custom icon library. */
+  library?: SlIcon["library"];
+
+  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
+  "onsl-load"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
+};
+
 type SlIconButtonProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: SlIconButton["name"];
@@ -758,24 +776,6 @@ that describes what the icon button does. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlIconProps = {
-  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  name?: SlIcon["name"];
-  /** An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
-can result in XSS attacks. */
-  src?: SlIcon["src"];
-  /** An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
-ignored by assistive devices. */
-  label?: SlIcon["label"];
-  /** The name of a registered custom icon library. */
-  library?: SlIcon["library"];
-
-  /** Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit. */
-  "onsl-load"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlImageComparerProps = {
   /** The position of the divider as a percentage. */
   position?: SlImageComparer["position"];
@@ -926,19 +926,6 @@ type SlMenuItemProps = {
 
 type SlMenuLabelProps = {};
 
-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 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 `*`. */
@@ -958,6 +945,19 @@ 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"];
@@ -1125,15 +1125,6 @@ active. */
   "onsl-reposition"?: (e: CustomEvent<never>) => void;
 };
 
-type SlProgressBarProps = {
-  /** The current progress as a percentage, 0 to 100. */
-  value?: SlProgressBar["value"];
-  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-  indeterminate?: SlProgressBar["indeterminate"];
-  /** A custom label for assistive devices. */
-  label?: SlProgressBar["label"];
-};
-
 type SlProgressRingProps = {
   /** The current progress as a percentage, 0 to 100. */
   value?: SlProgressRing["value"];
@@ -1164,6 +1155,15 @@ type SlQrCodeProps = {
   canvas?: SlQrCode["canvas"];
 };
 
+type SlProgressBarProps = {
+  /** The current progress as a percentage, 0 to 100. */
+  value?: SlProgressBar["value"];
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate?: SlProgressBar["indeterminate"];
+  /** A custom label for assistive devices. */
+  label?: SlProgressBar["label"];
+};
+
 type SlRadioProps = {
   /** The radio's value. When selected, the radio group will receive this value. */
   value?: SlRadio["value"];
@@ -2103,44 +2103,6 @@ export type CustomElements = {
    */
   "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-blur** - Emitted when the checkbox loses focus.
-   * - **sl-change** - Emitted when the checked state changes.
-   * - **sl-focus** - Emitted when the checkbox gains focus.
-   * - **sl-input** - Emitted when the checkbox receives input.
-   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **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()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   *
-   * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "sl-checkbox": DefineComponent<SlCheckboxProps>;
-
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2203,6 +2165,44 @@ export type CustomElements = {
    */
   "sl-color-picker": DefineComponent<SlColorPickerProps>;
 
+  /**
+   * Checkboxes allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-blur** - Emitted when the checkbox loses focus.
+   * - **sl-change** - Emitted when the checked state changes.
+   * - **sl-focus** - Emitted when the checkbox gains focus.
+   * - **sl-input** - Emitted when the checkbox receives input.
+   * - **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **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()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<sl-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "sl-checkbox": DefineComponent<SlCheckboxProps>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2246,13 +2246,6 @@ export type CustomElements = {
    */
   "sl-date-panel": DefineComponent<SlDatePanelProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "sl-datepicker": DefineComponent<SlDatepickerProps>;
-
   /**
    * Details show a brief summary and expand to show additional content.
    * ---
@@ -2410,6 +2403,13 @@ export type CustomElements = {
    */
   "sl-dropdown": DefineComponent<SlDropdownProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "sl-datepicker": DefineComponent<SlDatepickerProps>;
+
   /**
    * Formats a number as a human readable bytes value.
    * ---
@@ -2431,6 +2431,21 @@ export type CustomElements = {
    */
   "sl-format-number": DefineComponent<SlFormatNumberProps>;
 
+  /**
+   * Icons are symbols that can be used to represent various options within an application.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
+   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
+   *
+   * ### **CSS Parts:**
+   *  - **svg** - The internal SVG element.
+   * - **use** - The <use> element generated when using `spriteSheet: true`
+   */
+  "sl-icon": DefineComponent<SlIconProps>;
+
   /**
    * Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
    * ---
@@ -2450,21 +2465,6 @@ export type CustomElements = {
    */
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
-  /**
-   * Icons are symbols that can be used to represent various options within an application.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
-   * - **sl-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
-   *
-   * ### **CSS Parts:**
-   *  - **svg** - The internal SVG element.
-   * - **use** - The <use> element generated when using `spriteSheet: true`
-   */
-  "sl-icon": DefineComponent<SlIconProps>;
-
   /**
    * Compare visual differences between similar photos with a sliding panel.
    * ---
@@ -2608,34 +2608,34 @@ export type CustomElements = {
   "sl-menu-label": DefineComponent<SlMenuLabelProps>;
 
   /**
-   * Navs are used to create navigation menus, including top bars and sidebars.
+   * 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-change** - Emitted when the selected nav item changes.
-   * - **sl-nav-select** - Emitted when a nav item is selected.
+   *  - **sl-mutation** - Emitted when a mutation occurs.
    *
    * ### **Slots:**
-   *  - _default_ - The nav items.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   *  - _default_ - The content to watch for mutations.
    */
-  "sl-nav": DefineComponent<SlNavProps>;
+  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
 
   /**
-   * The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+   * Navs are used to create navigation menus, including top bars and sidebars.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-mutation** - Emitted when a mutation occurs.
+   *  - **sl-change** - Emitted when the selected nav item changes.
+   * - **sl-nav-select** - Emitted when a nav item is selected.
    *
    * ### **Slots:**
-   *  - _default_ - The content to watch for mutations.
+   *  - _default_ - The nav items.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-mutation-observer": DefineComponent<SlMutationObserverProps>;
+  "sl-nav": DefineComponent<SlNavProps>;
 
   /**
    * Nav groups are used to group related nav items.
@@ -2766,27 +2766,6 @@ export type CustomElements = {
    */
   "sl-popup": DefineComponent<SlPopupProps>;
 
-  /**
-   * Progress bars are used to show the status of an ongoing operation.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - A label to show inside the progress indicator.
-   *
-   * ### **CSS Properties:**
-   *  - **--height** - The progress bar's height. _(default: undefined)_
-   * - **--track-color** - The color of the track. _(default: undefined)_
-   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
-   * - **--label-color** - The color of the label. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **indicator** - The progress bar's indicator.
-   * - **label** - The progress bar's label.
-   */
-  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
-
   /**
    * Progress rings are used to show the progress of a determinate operation in a circular fashion.
    * ---
@@ -2819,6 +2798,27 @@ export type CustomElements = {
    */
   "sl-qr-code": DefineComponent<SlQrCodeProps>;
 
+  /**
+   * Progress bars are used to show the status of an ongoing operation.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - A label to show inside the progress indicator.
+   *
+   * ### **CSS Properties:**
+   *  - **--height** - The progress bar's height. _(default: undefined)_
+   * - **--track-color** - The color of the track. _(default: undefined)_
+   * - **--indicator-color** - The color of the indicator. _(default: undefined)_
+   * - **--label-color** - The color of the label. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **indicator** - The progress bar's indicator.
+   * - **label** - The progress bar's label.
+   */
+  "sl-progress-bar": DefineComponent<SlProgressBarProps>;
+
   /**
    * Radios allow the user to select a single option from a group.
    * ---