@kdcloudjs/shoelace 1.0.24 → 1.0.26

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

@@ -1,39 +1,39 @@
 import type { DefineComponent } from "vue";
 
 import type { SlAlert } from "../../components/alert/alert.component.js";
-import type { SlAvatar } from "../../components/avatar/avatar.component.js";
 import type { SlAnimation } from "../../components/animation/animation.component.js";
+import type { SlAvatar } from "../../components/avatar/avatar.component.js";
+import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
 import type { SlBadge } from "../../components/badge/badge.component.js";
 import type { SlBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
-import type { SlAnimatedImage } from "../../components/animated-image/animated-image.component.js";
 import type { SlBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.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";
 import type { SlCarousel } from "../../components/carousel/carousel.component.js";
-import type { SlCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
 import type { SlCol } from "../../components/col/col.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 { 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 { SlDaterangepicker } from "../../components/daterangepicker/daterangepicker.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 { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlDropdown } from "../../components/dropdown/dropdown.component.js";
 import type { SlFormatDate } from "../../components/format-date/format-date.component.js";
+import type { SlFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { SlFormatNumber } from "../../components/format-number/format-number.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 { SlImageComparer } from "../../components/image-comparer/image-comparer.component.js";
+import type { SlMenuItem } from "../../components/menu-item/menu-item.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 { SlMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { SlNav } from "../../components/nav/nav.component.js";
@@ -50,23 +50,23 @@ 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 { SlRow } from "../../components/row/row.component.js";
+import type { SlRating } from "../../components/rating/rating.component.js";
 import type { SlResizeObserver } from "../../components/resize-observer/resize-observer.component.js";
 import type { SlScreen } from "../../components/screen/screen.component.js";
+import type { SlRow } from "../../components/row/row.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 { SlTab } from "../../components/tab/tab.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 { SlThink } from "../../components/think/think.component.js";
 import type { SlTextarea } from "../../components/textarea/textarea.component.js";
+import type { SlThink } from "../../components/think/think.component.js";
 import type { SlThoughtChain } from "../../components/thought-chain/thought-chain.component.js";
 import type { SlThoughtChainItem } from "../../components/thought-chain-item/thought-chain-item.component.js";
 import type { SlThoughtChainNode } from "../../components/thought-chain-node/thought-chain-node.component.js";
@@ -105,22 +105,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onsl-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
-type SlAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: SlAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: SlAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: SlAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: SlAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: SlAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onsl-error"?: (e: CustomEvent<never>) => void;
-};
-
 type SlAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: SlAnimation["name"];
@@ -163,23 +147,20 @@ 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"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: SlAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: SlAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: SlAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: SlAvatar["shape"];
 
-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"];
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onsl-error"?: (e: CustomEvent<never>) => void;
 };
 
 type SlAnimatedImageProps = {
@@ -201,6 +182,25 @@ type SlAnimatedImageProps = {
   "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. */
@@ -328,8 +328,6 @@ greater than one. It can't be higher than `slides-per-page`. */
   "onsl-slide-change"?: (e: CustomEvent<{ index: number; slide: SlCarouselItem }>) => void;
 };
 
-type SlCarouselItemProps = {};
-
 type SlColProps = {
   /** Number of cells to span (out of 24) */
   span?: SlCol["span"];
@@ -359,6 +357,8 @@ type SlColProps = {
   rowContext?: SlCol["rowContext"];
 };
 
+type SlCarouselItemProps = {};
+
 type SlCheckboxProps = {
   /**  */
   title?: SlCheckbox["title"];
@@ -559,64 +559,64 @@ type SlDatepickerProps = {
   calendar?: SlDatepicker["calendar"];
 };
 
-type SlDaterangeProps = {
+type SlDaterangepickerProps = {
   /** The name of the input, submitted as a name/value pair with form data. */
-  name?: SlDaterange["name"];
+  name?: SlDaterangepicker["name"];
   /** The current value of the input, submitted as a name/value pair with form data. */
-  value?: SlDaterange["value"];
+  value?: SlDaterangepicker["value"];
   /** The input's size. */
-  size?: SlDaterange["size"];
+  size?: SlDaterangepicker["size"];
   /** Draws a filled input. */
-  filled?: SlDaterange["filled"];
+  filled?: SlDaterangepicker["filled"];
   /** Draws a pill-style input with rounded edges. */
-  pill?: SlDaterange["pill"];
+  pill?: SlDaterangepicker["pill"];
   /** The input's label. If you need to display HTML, use the `label` slot instead. */
-  label?: SlDaterange["label"];
+  label?: SlDaterangepicker["label"];
   /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: SlDaterange["helpText"];
+  "help-text"?: SlDaterangepicker["helpText"];
   /** Adds a clear button when the input is not empty. */
-  clearable?: SlDaterange["clearable"];
+  clearable?: SlDaterangepicker["clearable"];
   /** Disables the input. */
-  disabled?: SlDaterange["disabled"];
+  disabled?: SlDaterangepicker["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"];
+  placeholder?: SlDaterangepicker["placeholder"];
   /** Makes the input readonly. */
-  readonly?: SlDaterange["readonly"];
+  readonly?: SlDaterangepicker["readonly"];
   /** Makes the input a required field. */
-  required?: SlDaterange["required"];
+  required?: SlDaterangepicker["required"];
   /**  */
-  type?: SlDaterange["type"];
+  type?: SlDaterangepicker["type"];
   /** The minimum allowed date (in YYYY-MM-DD format). */
-  min?: SlDaterange["min"];
+  min?: SlDaterangepicker["min"];
   /** The maximum allowed date (in YYYY-MM-DD format). */
-  max?: SlDaterange["max"];
+  max?: SlDaterangepicker["max"];
   /** The date format to use. Defaults to YYYY-MM-DD. */
-  format?: SlDaterange["format"];
+  format?: SlDaterangepicker["format"];
   /**  */
-  startInput?: SlDaterange["startInput"];
+  startInput?: SlDaterangepicker["startInput"];
   /**  */
-  endInput?: SlDaterange["endInput"];
+  endInput?: SlDaterangepicker["endInput"];
   /**  */
-  popup?: SlDaterange["popup"];
+  popup?: SlDaterangepicker["popup"];
   /**  */
-  inputContainer?: SlDaterange["inputContainer"];
+  inputContainer?: SlDaterangepicker["inputContainer"];
   /**  */
-  calendars?: SlDaterange["calendars"];
+  calendars?: SlDaterangepicker["calendars"];
   /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultValue?: SlDaterange["defaultValue"];
+  defaultValue?: SlDaterangepicker["defaultValue"];
   /**  */
-  startPlaceholder?: SlDaterange["startPlaceholder"];
+  startPlaceholder?: SlDaterangepicker["startPlaceholder"];
   /**  */
-  endPlaceholder?: SlDaterange["endPlaceholder"];
+  endPlaceholder?: SlDaterangepicker["endPlaceholder"];
   /** The start date value. */
-  startDate?: SlDaterange["startDate"];
+  startDate?: SlDaterangepicker["startDate"];
   /** The end date value. */
-  endDate?: SlDaterange["endDate"];
+  endDate?: SlDaterangepicker["endDate"];
   /** Gets the validity state object */
-  validity?: SlDaterange["validity"];
+  validity?: SlDaterangepicker["validity"];
   /** Gets the validation message */
-  validationMessage?: SlDaterange["validationMessage"];
+  validationMessage?: SlDaterangepicker["validationMessage"];
 };
 
 type SlDetailsProps = {
@@ -726,15 +726,6 @@ accessible way for users to dismiss the drawer. */
   "onsl-request-close"?: (e: CustomEvent<{ source: "close-button" | "keyboard" | "overlay" }>) => void;
 };
 
-type SlFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: SlFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: SlFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: SlFormatBytes["display"];
-};
-
 type SlDropdownProps = {
   /** Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state. */
@@ -804,6 +795,15 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: SlFormatDate["hourFormat"];
 };
 
+type SlFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: SlFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: SlFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: SlFormatBytes["display"];
+};
+
 type SlFormatNumberProps = {
   /** The number to format. */
   value?: SlFormatNumber["value"];
@@ -872,17 +872,6 @@ that describes what the icon button does. */
   "onsl-focus"?: (e: CustomEvent<never>) => void;
 };
 
-type SlImageComparerProps = {
-  /** The position of the divider as a percentage. */
-  position?: SlImageComparer["position"];
-  /**  */
-  base?: SlImageComparer["base"];
-  /**  */
-  handle?: SlImageComparer["handle"];
-  /** Emitted when the position changes. */
-  "onsl-change"?: (e: CustomEvent<never>) => void;
-};
-
 type SlIncludeProps = {
   /** The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
 code and can result in XSS attacks. */
@@ -899,6 +888,34 @@ code and can result in XSS attacks. */
   "onsl-error"?: (e: CustomEvent<{ status: number }>) => void;
 };
 
+type SlImageComparerProps = {
+  /** The position of the divider as a percentage. */
+  position?: SlImageComparer["position"];
+  /**  */
+  base?: SlImageComparer["base"];
+  /**  */
+  handle?: SlImageComparer["handle"];
+  /** Emitted when the position changes. */
+  "onsl-change"?: (e: CustomEvent<never>) => void;
+};
+
+type SlMenuItemProps = {
+  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+  type?: SlMenuItem["type"];
+  /** Draws the item in a checked state. */
+  checked?: SlMenuItem["checked"];
+  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+  value?: SlMenuItem["value"];
+  /** Draws the menu item in a loading state. */
+  loading?: SlMenuItem["loading"];
+  /** Draws the menu item in a disabled state, preventing selection. */
+  disabled?: SlMenuItem["disabled"];
+  /**  */
+  defaultSlot?: SlMenuItem["defaultSlot"];
+  /**  */
+  menuItem?: SlMenuItem["menuItem"];
+};
+
 type SlInputProps = {
   /**  */
   title?: SlInput["title"];
@@ -1005,23 +1022,6 @@ type SlMenuProps = {
   "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"];
-  /** Draws the item in a checked state. */
-  checked?: SlMenuItem["checked"];
-  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-  value?: SlMenuItem["value"];
-  /** Draws the menu item in a loading state. */
-  loading?: SlMenuItem["loading"];
-  /** Draws the menu item in a disabled state, preventing selection. */
-  disabled?: SlMenuItem["disabled"];
-  /**  */
-  defaultSlot?: SlMenuItem["defaultSlot"];
-  /**  */
-  menuItem?: SlMenuItem["menuItem"];
-};
-
 type SlMenuLabelProps = {};
 
 type SlMutationObserverProps = {
@@ -1132,6 +1132,8 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   rel?: SlNavItem["rel"];
   /** The mode of navigation. */
   mode?: SlNavItem["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavItem["collapsed"];
   /** Alternate label content when using Antd-style `items` configuration. */
   label?: SlNavItem["label"];
   /** Alternate icon content when using Antd-style `items` configuration. */
@@ -1165,6 +1167,8 @@ React reserves `key` and won't forward it to custom elements, so wrapper users c
   active?: SlNavSubmenu["active"];
   /** The mode of navigation. */
   mode?: SlNavSubmenu["mode"];
+  /** Whether the parent nav is in inline-collapsed mode. */
+  collapsed?: SlNavSubmenu["collapsed"];
   /**  */
   header?: SlNavSubmenu["header"];
   /**  */
@@ -1222,6 +1226,8 @@ type SlPaginationProps = {
   /**  */
   simpleMode?: SlPagination["simpleMode"];
   /**  */
+  direction?: SlPagination["direction"];
+  /**  */
   defaultCurrentPage?: SlPagination["defaultCurrentPage"];
 };
 
@@ -1461,6 +1467,20 @@ function should return a string to display in the tooltip. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlRelativeTimeProps = {
+  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
+string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
+a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
+  date?: SlRelativeTime["date"];
+  /** The formatting style to use. */
+  format?: SlRelativeTime["format"];
+  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
+"1 day ago" and "in 1 day" will be shown. */
+  numeric?: SlRelativeTime["numeric"];
+  /** Keep the displayed value up to date as time passes. */
+  sync?: SlRelativeTime["sync"];
+};
+
 type SlRatingProps = {
   /** A label that describes the rating to assistive devices. */
   label?: SlRating["label"];
@@ -1487,31 +1507,6 @@ well with `<sl-icon>` elements. */
   "onsl-hover"?: (e: CustomEvent<{ phase: "start" | "move" | "end"; value: number }>) => void;
 };
 
-type SlRelativeTimeProps = {
-  /** The date from which to calculate time from. If not set, the current date and time will be used. When passing a
-string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert
-a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). */
-  date?: SlRelativeTime["date"];
-  /** The formatting style to use. */
-  format?: SlRelativeTime["format"];
-  /** When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as
-"1 day ago" and "in 1 day" will be shown. */
-  numeric?: SlRelativeTime["numeric"];
-  /** Keep the displayed value up to date as time passes. */
-  sync?: SlRelativeTime["sync"];
-};
-
-type SlRowProps = {
-  /** Spacing between columns, can be a number or responsive object */
-  gutter?: SlRow["gutter"];
-  /** Vertical alignment of columns */
-  align?: SlRow["align"];
-  /** Horizontal arrangement of columns */
-  justify?: SlRow["justify"];
-  /** Whether to wrap columns */
-  wrap?: SlRow["wrap"];
-};
-
 type SlResizeObserverProps = {
   /** Disables the observer. */
   disabled?: SlResizeObserver["disabled"];
@@ -1535,6 +1530,17 @@ type SlScreenProps = {
   gridElement?: SlScreen["gridElement"];
 };
 
+type SlRowProps = {
+  /** Spacing between columns, can be a number or responsive object */
+  gutter?: SlRow["gutter"];
+  /** Vertical alignment of columns */
+  align?: SlRow["align"];
+  /** Horizontal arrangement of columns */
+  justify?: SlRow["justify"];
+  /** Whether to wrap columns */
+  wrap?: SlRow["wrap"];
+};
+
 type SlSelectProps = {
   /** The name of the select, submitted as a name/value pair with form data. */
   name?: SlSelect["name"];
@@ -1633,6 +1639,21 @@ type SlSkeletonProps = {
 
 type SlSpinnerProps = {};
 
+type SlTabProps = {
+  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SlTab["panel"];
+  /** Draws the tab in an active state. */
+  active?: SlTab["active"];
+  /** Makes the tab closable and shows a close button. */
+  closable?: SlTab["closable"];
+  /** Disables the tab and prevents selection. */
+  disabled?: SlTab["disabled"];
+  /**  */
+  tab?: SlTab["tab"];
+  /** Emitted when the tab is closable and the close button is activated. */
+  "onsl-close"?: (e: CustomEvent<never>) => void;
+};
+
 type 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. */
@@ -1699,21 +1720,6 @@ the same document or shadow root for this to work. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type SlTabProps = {
-  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SlTab["panel"];
-  /** Draws the tab in an active state. */
-  active?: SlTab["active"];
-  /** Makes the tab closable and shows a close button. */
-  closable?: SlTab["closable"];
-  /** Disables the tab and prevents selection. */
-  disabled?: SlTab["disabled"];
-  /**  */
-  tab?: SlTab["tab"];
-  /** Emitted when the tab is closable and the close button is activated. */
-  "onsl-close"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTabGroupProps = {
   /** The placement of the tabs. */
   placement?: SlTabGroup["placement"];
@@ -1842,44 +1848,6 @@ type SlTagProps = {
   "onsl-remove"?: (e: CustomEvent<never>) => void;
 };
 
-type SlThinkProps = {
-  /** The title text shown in the status bar. Accepts plain text.
-For rich HTML content, use the `title` slot instead.
-Maps to React's `title: React.ReactNode` prop. */
-  title?: SlThink["title"];
-  /** When true, the status icon is replaced by a loading spinner
-(or the content of the `loading-icon` slot for a custom indicator).
-Maps to React's `loading: boolean | React.ReactNode` prop:
-  - `loading` (boolean) → boolean attribute
-  - `loading` (ReactNode) → use the `loading-icon` slot */
-  loading?: SlThink["loading"];
-  /** Whether the content body is expanded.
-When used without `default-expanded`, this acts as a controlled prop
-(the parent is responsible for updating it).
-When neither this nor `default-expanded` is set on the element,
-the component defaults to expanded (equivalent to React's `defaultExpanded = true`).
-Maps to React's `expanded: boolean` prop. */
-  expanded?: SlThink["expanded"];
-  /** The initial expanded state when the component is first rendered.
-Only applies if `expanded` is not set as an attribute on the element.
-Maps to React's `defaultExpanded: boolean` prop (default: `true`).
-
-Because Lit's `type: Boolean` treats attribute *presence* as `true`,
-setting `default-expanded="false"` in HTML does NOT work — this is
-consistent with all other Shoelace boolean attributes.
-To start collapsed, set the property via JS: `el.defaultExpanded = false`. */
-  "default-expanded"?: SlThink["defaultExpanded"];
-  /** When true, applies a blinking animation to the title text to signal ongoing activity.
-Maps to React's `blink: boolean` prop. */
-  blink?: SlThink["blink"];
-  /**  */
-  body?: SlThink["body"];
-  /** Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`. */
-  "onsl-expand"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`. */
-  "onsl-collapse"?: (e: CustomEvent<never>) => void;
-};
-
 type SlTextareaProps = {
   /**  */
   title?: SlTextarea["title"];
@@ -1953,6 +1921,44 @@ keyboard on supportive devices. */
   "onsl-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type SlThinkProps = {
+  /** The title text shown in the status bar. Accepts plain text.
+For rich HTML content, use the `title` slot instead.
+Maps to React's `title: React.ReactNode` prop. */
+  title?: SlThink["title"];
+  /** When true, the status icon is replaced by a loading spinner
+(or the content of the `loading-icon` slot for a custom indicator).
+Maps to React's `loading: boolean | React.ReactNode` prop:
+  - `loading` (boolean) → boolean attribute
+  - `loading` (ReactNode) → use the `loading-icon` slot */
+  loading?: SlThink["loading"];
+  /** Whether the content body is expanded.
+When used without `default-expanded`, this acts as a controlled prop
+(the parent is responsible for updating it).
+When neither this nor `default-expanded` is set on the element,
+the component defaults to expanded (equivalent to React's `defaultExpanded = true`).
+Maps to React's `expanded: boolean` prop. */
+  expanded?: SlThink["expanded"];
+  /** The initial expanded state when the component is first rendered.
+Only applies if `expanded` is not set as an attribute on the element.
+Maps to React's `defaultExpanded: boolean` prop (default: `true`).
+
+Because Lit's `type: Boolean` treats attribute *presence* as `true`,
+setting `default-expanded="false"` in HTML does NOT work — this is
+consistent with all other Shoelace boolean attributes.
+To start collapsed, set the property via JS: `el.defaultExpanded = false`. */
+  "default-expanded"?: SlThink["defaultExpanded"];
+  /** When true, applies a blinking animation to the title text to signal ongoing activity.
+Maps to React's `blink: boolean` prop. */
+  blink?: SlThink["blink"];
+  /**  */
+  body?: SlThink["body"];
+  /** Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`. */
+  "onsl-expand"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`. */
+  "onsl-collapse"?: (e: CustomEvent<never>) => void;
+};
+
 type SlThoughtChainProps = {
   /** Size of the thought chain nodes.
 - `'small'`: compact layout
@@ -2168,6 +2174,25 @@ export type CustomElements = {
    */
   "sl-alert": DefineComponent<SlAlertProps>;
 
+  /**
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-cancel** - Emitted when the animation is canceled.
+   * - **sl-finish** - Emitted when the animation finishes.
+   * - **sl-start** - Emitted when the animation starts or restarts.
+   *
+   * ### **Methods:**
+   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   */
+  "sl-animation": DefineComponent<SlAnimationProps>;
+
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -2191,23 +2216,26 @@ export type CustomElements = {
   "sl-avatar": DefineComponent<SlAvatarProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
    * ---
    *
    *
    * ### **Events:**
-   *  - **sl-cancel** - Emitted when the animation is canceled.
-   * - **sl-finish** - Emitted when the animation finishes.
-   * - **sl-start** - Emitted when the animation starts or restarts.
-   *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   *  - **sl-load** - Emitted when the image loads successfully.
+   * - **sl-error** - Emitted when the image fails to load.
    *
    * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.
+   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
+   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
+   *
+   * ### **CSS Properties:**
+   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
+   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
    */
-  "sl-animation": DefineComponent<SlAnimationProps>;
+  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
 
   /**
    * Badges are used to draw attention and display statuses or counts.
@@ -2236,28 +2264,6 @@ export type CustomElements = {
    */
   "sl-breadcrumb": DefineComponent<SlBreadcrumbProps>;
 
-  /**
-   * A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the image loads successfully.
-   * - **sl-error** - Emitted when the image fails to load.
-   *
-   * ### **Slots:**
-   *  - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.
-   * - **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.
-   *
-   * ### **CSS Properties:**
-   *  - **--control-box-size** - The size of the icon box. _(default: undefined)_
-   * - **--icon-size** - The size of the play/pause icons. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **control-box** - The container that surrounds the pause/play icons and provides their background.
-   */
-  "sl-animated-image": DefineComponent<SlAnimatedImageProps>;
-
   /**
    * Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
    * ---
@@ -2388,30 +2394,30 @@ export type CustomElements = {
   "sl-carousel": DefineComponent<SlCarouselProps>;
 
   /**
-   * A carousel item represent a slide within a [carousel](/components/carousel).
+   * Col component for grid layout system.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The carousel item's content..
+   *  - _default_ - The default slot for content.
    *
-   * ### **CSS Properties:**
-   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
    */
-  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
+  "sl-col": DefineComponent<SlColProps>;
 
   /**
-   * Col component for grid layout system.
+   * A carousel item represent a slide within a [carousel](/components/carousel).
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The default slot for content.
+   *  - _default_ - The carousel item's content..
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
+   * ### **CSS Properties:**
+   *  - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_
    */
-  "sl-col": DefineComponent<SlColProps>;
+  "sl-carousel-item": DefineComponent<SlCarouselItemProps>;
 
   /**
    * Checkboxes allow the user to toggle an option on or off.
@@ -2574,7 +2580,7 @@ export type CustomElements = {
    * - **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示
    * - **setCustomValidity(message: _string_)** - 设置自定义有效性消息
    */
-  "sl-daterange": DefineComponent<SlDaterangeProps>;
+  "sl-daterangepicker": DefineComponent<SlDaterangepickerProps>;
 
   /**
    * Details show a brief summary and expand to show additional content.
@@ -2704,13 +2710,6 @@ export type CustomElements = {
    */
   "sl-drawer": DefineComponent<SlDrawerProps>;
 
-  /**
-   * Formats a number as a human readable bytes value.
-   * ---
-   *
-   */
-  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
-
   /**
    * Dropdowns expose additional content that "drops down" in a panel.
    * ---
@@ -2747,6 +2746,13 @@ export type CustomElements = {
    */
   "sl-format-date": DefineComponent<SlFormatDateProps>;
 
+  /**
+   * Formats a number as a human readable bytes value.
+   * ---
+   *
+   */
+  "sl-format-bytes": DefineComponent<SlFormatBytesProps>;
+
   /**
    * Formats a number using the specified locale and options.
    * ---
@@ -2788,6 +2794,17 @@ export type CustomElements = {
    */
   "sl-icon-button": DefineComponent<SlIconButtonProps>;
 
+  /**
+   * Includes give you the power to embed external HTML files into the page.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-load** - Emitted when the included file is loaded.
+   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   */
+  "sl-include": DefineComponent<SlIncludeProps>;
+
   /**
    * Compare visual differences between similar photos with a sliding panel.
    * ---
@@ -2815,15 +2832,33 @@ export type CustomElements = {
   "sl-image-comparer": DefineComponent<SlImageComparerProps>;
 
   /**
-   * Includes give you the power to embed external HTML files into the page.
+   * Menu items provide options for the user to pick from in a menu.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **sl-load** - Emitted when the included file is loaded.
-   * - **sl-error** - Emitted when the included file fails to load due to an error.
+   * ### **Methods:**
+   *  - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu item's label.
+   * - **prefix** - Used to prepend an icon or similar element to the menu item.
+   * - **suffix** - Used to append an icon or similar element to the menu item.
+   * - **submenu** - Used to denote a nested menu.
+   *
+   * ### **CSS Properties:**
+   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **checked-icon** - The checked icon, which is only visible when the menu item is checked.
+   * - **prefix** - The prefix container.
+   * - **label** - The menu item label.
+   * - **suffix** - The suffix container.
+   * - **spinner** - The spinner that shows when the menu item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
    */
-  "sl-include": DefineComponent<SlIncludeProps>;
+  "sl-menu-item": DefineComponent<SlMenuItemProps>;
 
   /**
    * Inputs collect data from the user.
@@ -2888,35 +2923,6 @@ export type CustomElements = {
    */
   "sl-menu": DefineComponent<SlMenuProps>;
 
-  /**
-   * Menu items provide options for the user to pick from in a menu.
-   * ---
-   *
-   *
-   * ### **Methods:**
-   *  - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu item's label.
-   * - **prefix** - Used to prepend an icon or similar element to the menu item.
-   * - **suffix** - Used to append an icon or similar element to the menu item.
-   * - **submenu** - Used to denote a nested menu.
-   *
-   * ### **CSS Properties:**
-   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **checked-icon** - The checked icon, which is only visible when the menu item is checked.
-   * - **prefix** - The prefix container.
-   * - **label** - The menu item label.
-   * - **suffix** - The suffix container.
-   * - **spinner** - The spinner that shows when the menu item is in the loading state.
-   * - **spinner__base** - The spinner's base part.
-   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
-   */
-  "sl-menu-item": DefineComponent<SlMenuItemProps>;
-
   /**
    * Menu labels are used to describe a group of menu items.
    * ---
@@ -3269,6 +3275,13 @@ export type CustomElements = {
    */
   "sl-range": DefineComponent<SlRangeProps>;
 
+  /**
+   * Outputs a localized time phrase relative to the current date and time.
+   * ---
+   *
+   */
+  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
+
   /**
    * Ratings give users a way to quickly view and provide feedback.
    * ---
@@ -3293,26 +3306,6 @@ export type CustomElements = {
    */
   "sl-rating": DefineComponent<SlRatingProps>;
 
-  /**
-   * Outputs a localized time phrase relative to the current date and time.
-   * ---
-   *
-   */
-  "sl-relative-time": DefineComponent<SlRelativeTimeProps>;
-
-  /**
-   * Row component for grid layout system.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot for Col components.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "sl-row": DefineComponent<SlRowProps>;
-
   /**
    * The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
    * ---
@@ -3340,6 +3333,19 @@ export type CustomElements = {
    */
   "sl-screen": DefineComponent<SlScreenProps>;
 
+  /**
+   * Row component for grid layout system.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot for Col components.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "sl-row": DefineComponent<SlRowProps>;
+
   /**
    * Selects allow you to choose items from a menu of predefined options.
    * ---
@@ -3429,6 +3435,24 @@ export type CustomElements = {
    */
   "sl-spinner": DefineComponent<SlSpinnerProps>;
 
+  /**
+   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab's label.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **close-button** - The close button, an `<sl-icon-button>`.
+   * - **close-button__base** - The close button's exported `base` part.
+   */
+  "sl-tab": DefineComponent<SlTabProps>;
+
   /**
    * Split panels display two adjacent panels, allowing the user to reposition them.
    * ---
@@ -3495,24 +3519,6 @@ export type CustomElements = {
    */
   "sl-switch": DefineComponent<SlSwitchProps>;
 
-  /**
-   * Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-close** - Emitted when the tab is closable and the close button is activated.
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab's label.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **close-button** - The close button, an `<sl-icon-button>`.
-   * - **close-button__base** - The close button's exported `base` part.
-   */
-  "sl-tab": DefineComponent<SlTabProps>;
-
   /**
    * Tab groups organize content into a container that shows one section at a time.
    * ---
@@ -3592,41 +3598,6 @@ export type CustomElements = {
    */
   "sl-tag": DefineComponent<SlTagProps>;
 
-  /**
-   * Think is used to display an AI model's thinking process with expandable/collapsible content.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.
-   * - **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.
-   *
-   * ### **Methods:**
-   *  - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.
-   * Emits the appropriate event immediately (matching React's `onExpand` timing,
-   * which fires before the animation), then plays the expand/collapse animation.
-   *
-   * ### **Slots:**
-   *  - _default_ - The thinking content body.
-   * - **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.
-   * - **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.
-   * - **loading-icon** - A custom icon displayed when `loading` is true. Overrides the default spinner. This is the web-component equivalent of passing a ReactNode to the React `loading` prop.
-   *
-   * ### **CSS Properties:**
-   *  - **--sl-c-think-TitleTextBlink-color-default** - Base text color shown during the blink/shimmer animation. Equivalent to React's `colorTextBlinkDefault` (`colorTextDescription`) design token. Defaults to `var(--sl-color-neutral-600)`. _(default: undefined)_
-   * - **--sl-c-think-TitleTextBlink-color** - Highlight (shine) color of the blink shimmer beam. Equivalent to React's `colorTextBlink` (`colorTextBase`) design token. Defaults to `var(--sl-color-neutral-900)`. _(default: undefined)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper (maps to React's `root` semantic DOM).
-   * - **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).
-   * - **status-icon** - The icon container within the status bar.
-   * - **status-text** - The title text area within the status bar.
-   * - **chevron** - The expand/collapse chevron indicator.
-   * - **body** - The collapsible body container.
-   * - **content** - The content area inside the body (maps to React's `content` semantic DOM).
-   */
-  "sl-think": DefineComponent<SlThinkProps>;
-
   /**
    * Textareas collect data from the user and allow multiple lines of text.
    * ---
@@ -3665,6 +3636,41 @@ export type CustomElements = {
    */
   "sl-textarea": DefineComponent<SlTextareaProps>;
 
+  /**
+   * Think is used to display an AI model's thinking process with expandable/collapsible content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.
+   * - **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.
+   *
+   * ### **Methods:**
+   *  - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.
+   * Emits the appropriate event immediately (matching React's `onExpand` timing,
+   * which fires before the animation), then plays the expand/collapse animation.
+   *
+   * ### **Slots:**
+   *  - _default_ - The thinking content body.
+   * - **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.
+   * - **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.
+   * - **loading-icon** - A custom icon displayed when `loading` is true. Overrides the default spinner. This is the web-component equivalent of passing a ReactNode to the React `loading` prop.
+   *
+   * ### **CSS Properties:**
+   *  - **--sl-c-think-TitleTextBlink-color-default** - Base text color shown during the blink/shimmer animation. Equivalent to React's `colorTextBlinkDefault` (`colorTextDescription`) design token. Defaults to `var(--sl-color-neutral-600)`. _(default: undefined)_
+   * - **--sl-c-think-TitleTextBlink-color** - Highlight (shine) color of the blink shimmer beam. Equivalent to React's `colorTextBlink` (`colorTextBase`) design token. Defaults to `var(--sl-color-neutral-900)`. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper (maps to React's `root` semantic DOM).
+   * - **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).
+   * - **status-icon** - The icon container within the status bar.
+   * - **status-text** - The title text area within the status bar.
+   * - **chevron** - The expand/collapse chevron indicator.
+   * - **body** - The collapsible body container.
+   * - **content** - The content area inside the body (maps to React's `content` semantic DOM).
+   */
+  "sl-think": DefineComponent<SlThinkProps>;
+
   /**
    * ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.
    * It renders a vertical list of nodes, each optionally with an icon, title, description,