@kdcloudjs/shoelace 1.0.24 → 1.0.26

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kdcloudjs/shoelace",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -115,83 +115,75 @@
           }
         },
         {
-          "name": "sl-avatar",
-          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+          "name": "sl-animated-image",
+          "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "image",
-              "description": "The image source to use for the avatar.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "initials",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "value": { "type": "string", "default": "''" }
+              "name": "src",
+              "description": "The path to the image to load.",
+              "value": { "type": "string" }
             },
             {
-              "name": "loading",
-              "description": "Indicates how the browser should load the image.",
-              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
+              "name": "alt",
+              "description": "A description of the image used by assistive devices.",
+              "value": { "type": "string" }
             },
             {
-              "name": "shape",
-              "description": "The shape of the avatar.",
-              "value": {
-                "type": "'circle' | 'square' | 'rounded'",
-                "default": "'circle'"
-              }
+              "name": "play",
+              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+              "value": { "type": "boolean" }
             }
           ],
           "slots": [
             {
-              "name": "icon",
-              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`."
+              "name": "play-icon",
+              "description": "Optional play icon to use instead of the default. Works best with `<sl-icon>`."
+            },
+            {
+              "name": "pause-icon",
+              "description": "Optional pause icon to use instead of the default. Works best with `<sl-icon>`."
             }
           ],
           "events": [
+            {
+              "name": "sl-load",
+              "description": "Emitted when the image loads successfully."
+            },
             {
               "name": "sl-error",
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              "description": "Emitted when the image fails to load."
             }
           ],
           "js": {
             "properties": [
+              { "name": "animatedImage", "type": "HTMLImageElement" },
+              { "name": "frozenFrame", "type": "string" },
+              { "name": "isLoaded", "type": "boolean" },
               {
-                "name": "image",
-                "description": "The image source to use for the avatar.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "A label to use to describe the avatar to assistive devices.",
+                "name": "src",
+                "description": "The path to the image to load.",
                 "type": "string"
               },
               {
-                "name": "initials",
-                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "name": "alt",
+                "description": "A description of the image used by assistive devices.",
                 "type": "string"
               },
               {
-                "name": "loading",
-                "description": "Indicates how the browser should load the image.",
-                "type": "'eager' | 'lazy'"
-              },
-              {
-                "name": "shape",
-                "description": "The shape of the avatar.",
-                "type": "'circle' | 'square' | 'rounded'"
+                "name": "play",
+                "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+                "type": "boolean"
               }
             ],
             "events": [
+              {
+                "name": "sl-load",
+                "description": "Emitted when the image loads successfully."
+              },
               {
                 "name": "sl-error",
-                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+                "description": "Emitted when the image fails to load."
               }
             ]
           }
@@ -361,6 +353,88 @@
             ]
           }
         },
+        {
+          "name": "sl-avatar",
+          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "image",
+              "description": "The image source to use for the avatar.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "initials",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading",
+              "description": "Indicates how the browser should load the image.",
+              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
+            },
+            {
+              "name": "shape",
+              "description": "The shape of the avatar.",
+              "value": {
+                "type": "'circle' | 'square' | 'rounded'",
+                "default": "'circle'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "icon",
+              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-error",
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "image",
+                "description": "The image source to use for the avatar.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "A label to use to describe the avatar to assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "initials",
+                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+                "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "Indicates how the browser should load the image.",
+                "type": "'eager' | 'lazy'"
+              },
+              {
+                "name": "shape",
+                "description": "The shape of the avatar.",
+                "type": "'circle' | 'square' | 'rounded'"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-error",
+                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-badge",
           "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -443,80 +517,6 @@
             "events": []
           }
         },
-        {
-          "name": "sl-animated-image",
-          "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "src",
-              "description": "The path to the image to load.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "alt",
-              "description": "A description of the image used by assistive devices.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "play",
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "value": { "type": "boolean" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "play-icon",
-              "description": "Optional play icon to use instead of the default. Works best with `<sl-icon>`."
-            },
-            {
-              "name": "pause-icon",
-              "description": "Optional pause icon to use instead of the default. Works best with `<sl-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-load",
-              "description": "Emitted when the image loads successfully."
-            },
-            {
-              "name": "sl-error",
-              "description": "Emitted when the image fails to load."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "animatedImage", "type": "HTMLImageElement" },
-              { "name": "frozenFrame", "type": "string" },
-              { "name": "isLoaded", "type": "boolean" },
-              {
-                "name": "src",
-                "description": "The path to the image to load.",
-                "type": "string"
-              },
-              {
-                "name": "alt",
-                "description": "A description of the image used by assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "play",
-                "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-load",
-                "description": "Emitted when the image loads successfully."
-              },
-              {
-                "name": "sl-error",
-                "description": "Emitted when the image fails to load."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-breadcrumb-item",
           "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **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.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
@@ -898,42 +898,19 @@
           }
         },
         {
-          "name": "sl-card",
-          "description": "Cards can be used to group related subjects in a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
+          "name": "sl-carousel",
+          "description": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\n---\n\n\n### **Events:**\n - **sl-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
           "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card's main content." },
+          "attributes": [
             {
-              "name": "header",
-              "description": "An optional header for the card."
+              "name": "loop",
+              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "footer",
-              "description": "An optional footer for the card."
-            },
-            {
-              "name": "image",
-              "description": "An optional image to render at the start of the card."
-            }
-          ],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
-        {
-          "name": "sl-carousel",
-          "description": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\n---\n\n\n### **Events:**\n - **sl-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "loop",
-              "description": "When set, allows the user to navigate the carousel in the same direction indefinitely.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "navigation",
-              "description": "When set, show the carousel's navigation.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "navigation",
+              "description": "When set, show the carousel's navigation.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "pagination",
@@ -1057,6 +1034,29 @@
             ]
           }
         },
+        {
+          "name": "sl-card",
+          "description": "Cards can be used to group related subjects in a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The card's main content." },
+            {
+              "name": "header",
+              "description": "An optional header for the card."
+            },
+            {
+              "name": "footer",
+              "description": "An optional footer for the card."
+            },
+            {
+              "name": "image",
+              "description": "An optional image to render at the start of the card."
+            }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "sl-carousel-item",
           "description": "A carousel item represent a slide within a [carousel](/components/carousel).\n---\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
@@ -1069,311 +1069,311 @@
           "js": { "properties": [], "events": [] }
         },
         {
-          "name": "sl-col",
-          "description": "Col component for grid layout system.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "sl-checkbox",
+          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the checkbox loses focus.\n- **sl-change** - Emitted when the checked state changes.\n- **sl-focus** - Emitted when the checkbox gains focus.\n- **sl-input** - Emitted when the checkbox receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
           "doc-url": "",
           "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
-              "name": "span",
-              "description": "Number of cells to span (out of 24)",
-              "value": { "type": "ColSpanType | undefined" }
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "offset",
-              "description": "Number of cells to offset from the left",
-              "value": { "type": "ColSpanType | undefined" }
+              "name": "value",
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
             },
             {
-              "name": "order",
-              "description": "Order of the column",
-              "value": { "type": "ColSpanType | undefined" }
+              "name": "size",
+              "description": "The checkbox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
             },
             {
-              "name": "push",
-              "description": "Number of cells to push from the left",
-              "value": { "type": "ColSpanType | undefined" }
+              "name": "disabled",
+              "description": "Disables the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "pull",
-              "description": "Number of cells to pull from the right",
-              "value": { "type": "ColSpanType | undefined" }
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "flex",
-              "description": "Flex layout style",
-              "value": { "type": "FlexType | undefined" }
+              "name": "indeterminate",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "xs",
-              "description": "Responsive config for xs screens (< 576px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "sm",
-              "description": "Responsive config for sm screens (≥ 576px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "md",
-              "description": "Responsive config for md screens (≥ 768px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
+              "name": "help-text",
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The checkbox's label." },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-blur",
+              "description": "Emitted when the checkbox loses focus."
             },
             {
-              "name": "lg",
-              "description": "Responsive config for lg screens (≥ 992px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
+              "name": "sl-change",
+              "description": "Emitted when the checked state changes."
             },
             {
-              "name": "xl",
-              "description": "Responsive config for xl screens (≥ 1200px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
+              "name": "sl-focus",
+              "description": "Emitted when the checkbox gains focus."
             },
             {
-              "name": "xxl",
-              "description": "Responsive config for xxl screens (≥ 1600px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
+              "name": "sl-input",
+              "description": "Emitted when the checkbox receives input."
+            },
+            {
+              "name": "sl-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
-          "slots": [
-            { "name": "", "description": "The default slot for content." }
-          ],
-          "events": [],
           "js": {
             "properties": [
-              { "name": "rowContext", "type": "RowContext" },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
               {
-                "name": "span",
-                "description": "Number of cells to span (out of 24)",
-                "type": "ColSpanType | undefined"
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "offset",
-                "description": "Number of cells to offset from the left",
-                "type": "ColSpanType | undefined"
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
-                "name": "order",
-                "description": "Order of the column",
-                "type": "ColSpanType | undefined"
+                "name": "size",
+                "description": "The checkbox's size.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
-                "name": "push",
-                "description": "Number of cells to push from the left",
-                "type": "ColSpanType | undefined"
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
               },
               {
-                "name": "pull",
-                "description": "Number of cells to pull from the right",
-                "type": "ColSpanType | undefined"
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "type": "boolean"
               },
               {
-                "name": "flex",
-                "description": "Flex layout style",
-                "type": "FlexType | undefined"
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "type": "boolean"
               },
               {
-                "name": "xs",
-                "description": "Responsive config for xs screens (< 576px)",
-                "type": "ColSpanType | ColSize | undefined"
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
               },
               {
-                "name": "sm",
-                "description": "Responsive config for sm screens (≥ 576px)",
-                "type": "ColSpanType | ColSize | undefined"
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
               },
               {
-                "name": "md",
-                "description": "Responsive config for md screens (≥ 768px)",
-                "type": "ColSpanType | ColSize | undefined"
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
               },
               {
-                "name": "lg",
-                "description": "Responsive config for lg screens (≥ 992px)",
-                "type": "ColSpanType | ColSize | undefined"
+                "name": "helpText",
+                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
-                "name": "xl",
-                "description": "Responsive config for xl screens (≥ 1200px)",
-                "type": "ColSpanType | ColSize | undefined"
+                "name": "validity",
+                "description": "Gets the validity state object"
               },
               {
-                "name": "xxl",
-                "description": "Responsive config for xxl screens (≥ 1600px)",
-                "type": "ColSpanType | ColSize | undefined"
+                "name": "validationMessage",
+                "description": "Gets the validation message"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "sl-blur",
+                "description": "Emitted when the checkbox loses focus."
+              },
+              {
+                "name": "sl-change",
+                "description": "Emitted when the checked state changes."
+              },
+              {
+                "name": "sl-focus",
+                "description": "Emitted when the checkbox gains focus."
+              },
+              {
+                "name": "sl-input",
+                "description": "Emitted when the checkbox receives input."
+              },
+              {
+                "name": "sl-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
           }
         },
         {
-          "name": "sl-checkbox",
-          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the checkbox loses focus.\n- **sl-change** - Emitted when the checked state changes.\n- **sl-focus** - Emitted when the checkbox gains focus.\n- **sl-input** - Emitted when the checkbox receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
+          "name": "sl-col",
+          "description": "Col component for grid layout system.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
-            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
-              "name": "name",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string" }
+              "name": "span",
+              "description": "Number of cells to span (out of 24)",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "size",
-              "description": "The checkbox's size.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
+              "name": "offset",
+              "description": "Number of cells to offset from the left",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the checkbox.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "order",
+              "description": "Order of the column",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "checked",
-              "description": "Draws the checkbox in a checked state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "push",
+              "description": "Number of cells to push from the left",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "indeterminate",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "pull",
+              "description": "Number of cells to pull from the right",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "value": { "type": "string", "default": "''" }
+              "name": "flex",
+              "description": "Flex layout style",
+              "value": { "type": "FlexType | undefined" }
             },
             {
-              "name": "required",
-              "description": "Makes the checkbox a required field.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "xs",
+              "description": "Responsive config for xs screens (< 576px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
             },
             {
-              "name": "help-text",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The checkbox's label." },
-            {
-              "name": "help-text",
-              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-blur",
-              "description": "Emitted when the checkbox loses focus."
+              "name": "sm",
+              "description": "Responsive config for sm screens (≥ 576px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
             },
             {
-              "name": "sl-change",
-              "description": "Emitted when the checked state changes."
+              "name": "md",
+              "description": "Responsive config for md screens (≥ 768px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
             },
             {
-              "name": "sl-focus",
-              "description": "Emitted when the checkbox gains focus."
+              "name": "lg",
+              "description": "Responsive config for lg screens (≥ 992px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
             },
             {
-              "name": "sl-input",
-              "description": "Emitted when the checkbox receives input."
+              "name": "xl",
+              "description": "Responsive config for xl screens (≥ 1200px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
             },
             {
-              "name": "sl-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              "name": "xxl",
+              "description": "Responsive config for xxl screens (≥ 1600px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
             }
           ],
+          "slots": [
+            { "name": "", "description": "The default slot for content." }
+          ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "title", "type": "string" },
+              { "name": "rowContext", "type": "RowContext" },
               {
-                "name": "name",
-                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "span",
+                "description": "Number of cells to span (out of 24)",
+                "type": "ColSpanType | undefined"
               },
               {
-                "name": "value",
-                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
+                "name": "offset",
+                "description": "Number of cells to offset from the left",
+                "type": "ColSpanType | undefined"
               },
               {
-                "name": "size",
-                "description": "The checkbox's size.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "order",
+                "description": "Order of the column",
+                "type": "ColSpanType | undefined"
               },
               {
-                "name": "disabled",
-                "description": "Disables the checkbox.",
-                "type": "boolean"
+                "name": "push",
+                "description": "Number of cells to push from the left",
+                "type": "ColSpanType | undefined"
               },
               {
-                "name": "checked",
-                "description": "Draws the checkbox in a checked state.",
-                "type": "boolean"
+                "name": "pull",
+                "description": "Number of cells to pull from the right",
+                "type": "ColSpanType | undefined"
               },
               {
-                "name": "indeterminate",
-                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-                "type": "boolean"
+                "name": "flex",
+                "description": "Flex layout style",
+                "type": "FlexType | undefined"
               },
               {
-                "name": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "boolean"
+                "name": "xs",
+                "description": "Responsive config for xs screens (< 576px)",
+                "type": "ColSpanType | ColSize | undefined"
               },
               {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-                "type": "string"
+                "name": "sm",
+                "description": "Responsive config for sm screens (≥ 576px)",
+                "type": "ColSpanType | ColSize | undefined"
               },
               {
-                "name": "required",
-                "description": "Makes the checkbox a required field.",
-                "type": "boolean"
+                "name": "md",
+                "description": "Responsive config for md screens (≥ 768px)",
+                "type": "ColSpanType | ColSize | undefined"
               },
               {
-                "name": "helpText",
-                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
+                "name": "lg",
+                "description": "Responsive config for lg screens (≥ 992px)",
+                "type": "ColSpanType | ColSize | undefined"
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
+                "name": "xl",
+                "description": "Responsive config for xl screens (≥ 1200px)",
+                "type": "ColSpanType | ColSize | undefined"
               },
               {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
+                "name": "xxl",
+                "description": "Responsive config for xxl screens (≥ 1600px)",
+                "type": "ColSpanType | ColSize | undefined"
               }
             ],
-            "events": [
-              {
-                "name": "sl-blur",
-                "description": "Emitted when the checkbox loses focus."
-              },
-              {
-                "name": "sl-change",
-                "description": "Emitted when the checked state changes."
-              },
-              {
-                "name": "sl-focus",
-                "description": "Emitted when the checkbox gains focus."
-              },
-              {
-                "name": "sl-input",
-                "description": "Emitted when the checkbox receives input."
-              },
-              {
-                "name": "sl-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -1836,7 +1836,7 @@
           }
         },
         {
-          "name": "sl-daterange",
+          "name": "sl-daterangepicker",
           "description": "\n---\n\n\n### **Methods:**\n - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）\n- **getForm(): _HTMLFormElement | null_** - 获取表单引用\n- **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示\n- **setCustomValidity(message: _string_)** - 设置自定义有效性消息",
           "doc-url": "",
           "attributes": [
@@ -2439,52 +2439,6 @@
             ]
           }
         },
-        {
-          "name": "sl-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The number to format in bytes.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "unit",
-              "description": "The type of unit to display.",
-              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
-            },
-            {
-              "name": "display",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'short'"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The number to format in bytes.",
-                "type": "number"
-              },
-              {
-                "name": "unit",
-                "description": "The type of unit to display.",
-                "type": "'byte' | 'bit'"
-              },
-              {
-                "name": "display",
-                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-                "type": "'long' | 'short' | 'narrow'"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-dropdown",
           "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the dropdown opens.\n- **sl-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sl-hide** - Emitted when the dropdown closes.\n- **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sl-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
@@ -2633,6 +2587,52 @@
             ]
           }
         },
+        {
+          "name": "sl-format-bytes",
+          "description": "Formats a number as a human readable bytes value.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The number to format in bytes.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "unit",
+              "description": "The type of unit to display.",
+              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
+            },
+            {
+              "name": "display",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "value": {
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'short'"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The number to format in bytes.",
+                "type": "number"
+              },
+              {
+                "name": "unit",
+                "description": "The type of unit to display.",
+                "type": "'byte' | 'bit'"
+              },
+              {
+                "name": "display",
+                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+                "type": "'long' | 'short' | 'narrow'"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sl-format-date",
           "description": "Formats a date/time using the specified locale and options.\n---\n",
@@ -3254,7 +3254,7 @@
             {
               "name": "clear-hides-suffix",
               "description": "Hides the suffix when the clear button is visible.",
-              "value": { "type": "boolean", "default": "true" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "disabled",
@@ -4167,6 +4167,11 @@
                 "type": "'horizontal' | 'inline' | 'vertical'",
                 "default": "'inline'"
               }
+            },
+            {
+              "name": "collapsed",
+              "description": "Whether the parent nav is in inline-collapsed mode.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -4258,6 +4263,11 @@
                 "name": "mode",
                 "description": "The mode of navigation.",
                 "type": "'horizontal' | 'inline' | 'vertical'"
+              },
+              {
+                "name": "collapsed",
+                "description": "Whether the parent nav is in inline-collapsed mode.",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -4326,6 +4336,11 @@
                 "type": "'horizontal' | 'inline' | 'vertical'",
                 "default": "'inline'"
               }
+            },
+            {
+              "name": "collapsed",
+              "description": "Whether the parent nav is in inline-collapsed mode.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -4440,6 +4455,11 @@
                 "name": "mode",
                 "description": "The mode of navigation.",
                 "type": "'horizontal' | 'inline' | 'vertical'"
+              },
+              {
+                "name": "collapsed",
+                "description": "Whether the parent nav is in inline-collapsed mode.",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -4540,6 +4560,10 @@
               "name": "simpleMode",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "direction",
+              "value": { "type": "'ltr' | 'rtl'", "default": "'ltr'" }
+            },
             {
               "name": "defaultCurrentPage",
               "value": { "type": "number", "default": "1" }
@@ -4555,6 +4579,7 @@
               { "name": "disabled", "type": "boolean" },
               { "name": "className", "type": "string" },
               { "name": "simpleMode", "type": "boolean" },
+              { "name": "direction", "type": "'ltr' | 'rtl'" },
               { "name": "defaultCurrentPage", "type": "number" }
             ],
             "events": []
@@ -5630,12 +5655,53 @@
                 "type": "'always' | 'auto'"
               },
               {
-                "name": "sync",
-                "description": "Keep the displayed value up to date as time passes.",
+                "name": "sync",
+                "description": "Keep the displayed value up to date as time passes.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-resize-observer",
+          "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **sl-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables the observer.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more elements to watch for resizing."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-resize",
+              "type": "{ entries: ResizeObserverEntry[] }",
+              "description": "Emitted when the element is resized."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "Disables the observer.",
                 "type": "boolean"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "sl-resize",
+                "type": "{ entries: ResizeObserverEntry[] }",
+                "description": "Emitted when the element is resized."
+              }
+            ]
           }
         },
         {
@@ -5697,47 +5763,6 @@
             "events": []
           }
         },
-        {
-          "name": "sl-resize-observer",
-          "description": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n---\n\n\n### **Events:**\n - **sl-resize** - Emitted when the element is resized.\n\n### **Slots:**\n - _default_ - One or more elements to watch for resizing.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables the observer.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more elements to watch for resizing."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-resize",
-              "type": "{ entries: ResizeObserverEntry[] }",
-              "description": "Emitted when the element is resized."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "disabled",
-                "description": "Disables the observer.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-resize",
-                "type": "{ entries: ResizeObserverEntry[] }",
-                "description": "Emitted when the element is resized."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-screen",
           "description": "Screen is a grid layout component based on gridstack.js and Shoelace.\n---\n\n\n### **Methods:**\n - **getGridData(): __** - 获取 GridStack 实例的序列化数据\n- **getInstance(): __** - 获取 GridStack 实例的序列化数据\n\n### **CSS Parts:**\n - **base** - The grid layout content.",
@@ -6905,103 +6930,6 @@
             ]
           }
         },
-        {
-          "name": "sl-think",
-          "description": "Think is used to display an AI model's thinking process with expandable/collapsible content.\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.\n- **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.\n\n### **Methods:**\n - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.\nEmits the appropriate event immediately (matching React's `onExpand` timing,\nwhich fires before the animation), then plays the expand/collapse animation.\n\n### **Slots:**\n - _default_ - The thinking content body.\n- **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.\n- **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.\n- **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.\n\n### **CSS Properties:**\n - **--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)_\n- **--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)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (maps to React's `root` semantic DOM).\n- **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).\n- **status-icon** - The icon container within the status bar.\n- **status-text** - The title text area within the status bar.\n- **chevron** - The expand/collapse chevron indicator.\n- **body** - The collapsible body container.\n- **content** - The content area inside the body (maps to React's `content` semantic DOM).",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "title",
-              "description": "The title text shown in the status bar. Accepts plain text.\nFor rich HTML content, use the `title` slot instead.\nMaps to React's `title: React.ReactNode` prop.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "loading",
-              "description": "When true, the status icon is replaced by a loading spinner\n(or the content of the `loading-icon` slot for a custom indicator).\nMaps to React's `loading: boolean | React.ReactNode` prop:\n  - `loading` (boolean) → boolean attribute\n  - `loading` (ReactNode) → use the `loading-icon` slot",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "expanded",
-              "description": "Whether the content body is expanded.\nWhen used without `default-expanded`, this acts as a controlled prop\n(the parent is responsible for updating it).\nWhen neither this nor `default-expanded` is set on the element,\nthe component defaults to expanded (equivalent to React's `defaultExpanded = true`).\nMaps to React's `expanded: boolean` prop.",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "default-expanded",
-              "description": "The initial expanded state when the component is first rendered.\nOnly applies if `expanded` is not set as an attribute on the element.\nMaps to React's `defaultExpanded: boolean` prop (default: `true`).\n\nBecause Lit's `type: Boolean` treats attribute *presence* as `true`,\nsetting `default-expanded=\"false\"` in HTML does NOT work — this is\nconsistent with all other Shoelace boolean attributes.\nTo start collapsed, set the property via JS: `el.defaultExpanded = false`.",
-              "value": { "type": "boolean", "default": "true" }
-            },
-            {
-              "name": "blink",
-              "description": "When true, applies a blinking animation to the title text to signal ongoing activity.\nMaps to React's `blink: boolean` prop.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The thinking content body." },
-            {
-              "name": "title",
-              "description": "Rich HTML content for the status bar title. Overrides the `title` attribute."
-            },
-            {
-              "name": "icon",
-              "description": "A custom icon displayed in the status bar when not loading. Defaults to the Think icon."
-            },
-            {
-              "name": "loading-icon",
-              "description": "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."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-expand",
-              "description": "Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`."
-            },
-            {
-              "name": "sl-collapse",
-              "description": "Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "body", "type": "HTMLElement" },
-              {
-                "name": "title",
-                "description": "The title text shown in the status bar. Accepts plain text.\nFor rich HTML content, use the `title` slot instead.\nMaps to React's `title: React.ReactNode` prop.",
-                "type": "string"
-              },
-              {
-                "name": "loading",
-                "description": "When true, the status icon is replaced by a loading spinner\n(or the content of the `loading-icon` slot for a custom indicator).\nMaps to React's `loading: boolean | React.ReactNode` prop:\n  - `loading` (boolean) → boolean attribute\n  - `loading` (ReactNode) → use the `loading-icon` slot",
-                "type": "boolean"
-              },
-              {
-                "name": "expanded",
-                "description": "Whether the content body is expanded.\nWhen used without `default-expanded`, this acts as a controlled prop\n(the parent is responsible for updating it).\nWhen neither this nor `default-expanded` is set on the element,\nthe component defaults to expanded (equivalent to React's `defaultExpanded = true`).\nMaps to React's `expanded: boolean` prop.",
-                "type": "boolean"
-              },
-              {
-                "name": "defaultExpanded",
-                "description": "The initial expanded state when the component is first rendered.\nOnly applies if `expanded` is not set as an attribute on the element.\nMaps to React's `defaultExpanded: boolean` prop (default: `true`).\n\nBecause Lit's `type: Boolean` treats attribute *presence* as `true`,\nsetting `default-expanded=\"false\"` in HTML does NOT work — this is\nconsistent with all other Shoelace boolean attributes.\nTo start collapsed, set the property via JS: `el.defaultExpanded = false`.",
-                "type": "boolean"
-              },
-              {
-                "name": "blink",
-                "description": "When true, applies a blinking animation to the title text to signal ongoing activity.\nMaps to React's `blink: boolean` prop.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-expand",
-                "description": "Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`."
-              },
-              {
-                "name": "sl-collapse",
-                "description": "Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-textarea",
           "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-input** - Emitted when the control receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
@@ -7316,6 +7244,103 @@
             ]
           }
         },
+        {
+          "name": "sl-think",
+          "description": "Think is used to display an AI model's thinking process with expandable/collapsible content.\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.\n- **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.\n\n### **Methods:**\n - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.\nEmits the appropriate event immediately (matching React's `onExpand` timing,\nwhich fires before the animation), then plays the expand/collapse animation.\n\n### **Slots:**\n - _default_ - The thinking content body.\n- **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.\n- **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.\n- **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.\n\n### **CSS Properties:**\n - **--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)_\n- **--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)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (maps to React's `root` semantic DOM).\n- **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).\n- **status-icon** - The icon container within the status bar.\n- **status-text** - The title text area within the status bar.\n- **chevron** - The expand/collapse chevron indicator.\n- **body** - The collapsible body container.\n- **content** - The content area inside the body (maps to React's `content` semantic DOM).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "title",
+              "description": "The title text shown in the status bar. Accepts plain text.\nFor rich HTML content, use the `title` slot instead.\nMaps to React's `title: React.ReactNode` prop.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading",
+              "description": "When true, the status icon is replaced by a loading spinner\n(or the content of the `loading-icon` slot for a custom indicator).\nMaps to React's `loading: boolean | React.ReactNode` prop:\n  - `loading` (boolean) → boolean attribute\n  - `loading` (ReactNode) → use the `loading-icon` slot",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "expanded",
+              "description": "Whether the content body is expanded.\nWhen used without `default-expanded`, this acts as a controlled prop\n(the parent is responsible for updating it).\nWhen neither this nor `default-expanded` is set on the element,\nthe component defaults to expanded (equivalent to React's `defaultExpanded = true`).\nMaps to React's `expanded: boolean` prop.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "default-expanded",
+              "description": "The initial expanded state when the component is first rendered.\nOnly applies if `expanded` is not set as an attribute on the element.\nMaps to React's `defaultExpanded: boolean` prop (default: `true`).\n\nBecause Lit's `type: Boolean` treats attribute *presence* as `true`,\nsetting `default-expanded=\"false\"` in HTML does NOT work — this is\nconsistent with all other Shoelace boolean attributes.\nTo start collapsed, set the property via JS: `el.defaultExpanded = false`.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "blink",
+              "description": "When true, applies a blinking animation to the title text to signal ongoing activity.\nMaps to React's `blink: boolean` prop.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The thinking content body." },
+            {
+              "name": "title",
+              "description": "Rich HTML content for the status bar title. Overrides the `title` attribute."
+            },
+            {
+              "name": "icon",
+              "description": "A custom icon displayed in the status bar when not loading. Defaults to the Think icon."
+            },
+            {
+              "name": "loading-icon",
+              "description": "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."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-expand",
+              "description": "Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`."
+            },
+            {
+              "name": "sl-collapse",
+              "description": "Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "body", "type": "HTMLElement" },
+              {
+                "name": "title",
+                "description": "The title text shown in the status bar. Accepts plain text.\nFor rich HTML content, use the `title` slot instead.\nMaps to React's `title: React.ReactNode` prop.",
+                "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "When true, the status icon is replaced by a loading spinner\n(or the content of the `loading-icon` slot for a custom indicator).\nMaps to React's `loading: boolean | React.ReactNode` prop:\n  - `loading` (boolean) → boolean attribute\n  - `loading` (ReactNode) → use the `loading-icon` slot",
+                "type": "boolean"
+              },
+              {
+                "name": "expanded",
+                "description": "Whether the content body is expanded.\nWhen used without `default-expanded`, this acts as a controlled prop\n(the parent is responsible for updating it).\nWhen neither this nor `default-expanded` is set on the element,\nthe component defaults to expanded (equivalent to React's `defaultExpanded = true`).\nMaps to React's `expanded: boolean` prop.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultExpanded",
+                "description": "The initial expanded state when the component is first rendered.\nOnly applies if `expanded` is not set as an attribute on the element.\nMaps to React's `defaultExpanded: boolean` prop (default: `true`).\n\nBecause Lit's `type: Boolean` treats attribute *presence* as `true`,\nsetting `default-expanded=\"false\"` in HTML does NOT work — this is\nconsistent with all other Shoelace boolean attributes.\nTo start collapsed, set the property via JS: `el.defaultExpanded = false`.",
+                "type": "boolean"
+              },
+              {
+                "name": "blink",
+                "description": "When true, applies a blinking animation to the title text to signal ongoing activity.\nMaps to React's `blink: boolean` prop.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-expand",
+                "description": "Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`."
+              },
+              {
+                "name": "sl-collapse",
+                "description": "Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-thought-chain",
           "description": "ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.\nIt renders a vertical list of nodes, each optionally with an icon, title, description,\ncollapsible content, footer, and status indicator. Nodes are connected by a vertical line.\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.\n\n### **Methods:**\n - **getExpandedKeys(): _string[]_** - Get the effective expanded keys\n- **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node\n\n### **Slots:**\n - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).\n\n### **CSS Properties:**\n - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_\n- **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_\n- **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",