@kdcloudjs/shoelace 1.0.20 → 1.0.21

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.20",
+  "version": "0.0.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -897,6 +897,29 @@
             "events": []
           }
         },
+        {
+          "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",
           "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.",
@@ -1034,29 +1057,6 @@
             ]
           }
         },
-        {
-          "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)_",
@@ -1068,177 +1068,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "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": "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": "size",
-              "description": "The checkbox's size.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the checkbox.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "checked",
-              "description": "Draws the checkbox in a checked state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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": "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": "required",
-              "description": "Makes the checkbox a required field.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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": "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."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "title", "type": "string" },
-              {
-                "name": "name",
-                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The checkbox's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the checkbox.",
-                "type": "boolean"
-              },
-              {
-                "name": "checked",
-                "description": "Draws the checkbox in a checked state.",
-                "type": "boolean"
-              },
-              {
-                "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": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "boolean"
-              },
-              {
-                "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": "required",
-                "description": "Makes the checkbox a required field.",
-                "type": "boolean"
-              },
-              {
-                "name": "helpText",
-                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "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-color-picker",
           "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the color picker loses focus.\n- **sl-change** - Emitted when the color picker's value changes.\n- **sl-focus** - Emitted when the color picker receives focus.\n- **sl-input** - Emitted when the color picker 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 color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\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 color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
@@ -1465,38 +1294,209 @@
           }
         },
         {
-          "name": "sl-copy-button",
-          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **sl-copy** - Emitted when the data has been copied.\n- **sl-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<sl-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<sl-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
+          "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": "value",
-              "description": "The text value to copy.",
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "from",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "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": "size",
+              "description": "The checkbox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
             },
             {
               "name": "disabled",
-              "description": "Disables the copy button.",
+              "description": "Disables the checkbox.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "copy-label",
-              "description": "A custom label to show in the tooltip.",
-              "value": { "type": "string", "default": "''" }
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "success-label",
-              "description": "A custom label to show in the tooltip after copying.",
-              "value": { "type": "string", "default": "''" }
+              "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": "error-label",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "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": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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": "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."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "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": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
+              },
+              {
+                "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": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "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-copy-button",
+          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **sl-copy** - Emitted when the data has been copied.\n- **sl-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<sl-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<sl-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The text value to copy.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "from",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the copy button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "copy-label",
+              "description": "A custom label to show in the tooltip.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "success-label",
+              "description": "A custom label to show in the tooltip after copying.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "error-label",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -1755,14 +1755,12 @@
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "start-placeholder",
-              "description": "Placeholder text to show as a hint for the start date.",
-              "value": { "type": "string", "default": "'开始日期'" }
-            },
-            {
-              "name": "end-placeholder",
-              "description": "Placeholder text to show as a hint for the end date.",
-              "value": { "type": "string", "default": "'结束日期'" }
+              "name": "placeholder",
+              "description": "Placeholder text for the two inputs. Accepts a string in the format \"startPlaceholder,endPlaceholder\"\nas an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via JavaScript.",
+              "value": {
+                "type": "[string, string]",
+                "default": "['开始日期', '结束日期']"
+              }
             },
             {
               "name": "readonly",
@@ -1853,15 +1851,12 @@
                 "type": "boolean"
               },
               {
-                "name": "startPlaceholder",
-                "description": "Placeholder text to show as a hint for the start date.",
-                "type": "string"
-              },
-              {
-                "name": "endPlaceholder",
-                "description": "Placeholder text to show as a hint for the end date.",
-                "type": "string"
+                "name": "placeholder",
+                "description": "Placeholder text for the two inputs. Accepts a string in the format \"startPlaceholder,endPlaceholder\"\nas an HTML attribute, or a [startPlaceholder, endPlaceholder] tuple when set via JavaScript.",
+                "type": "[string, string]"
               },
+              { "name": "startPlaceholder" },
+              { "name": "endPlaceholder" },
               {
                 "name": "readonly",
                 "description": "Makes the input readonly.",
@@ -3119,6 +3114,11 @@
               "description": "Adds a clear button when the input is not empty.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "clear-hides-suffix",
+              "description": "Hides the suffix when the clear button is visible.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Disables the input.",
@@ -3342,6 +3342,11 @@
                 "description": "Adds a clear button when the input is not empty.",
                 "type": "boolean"
               },
+              {
+                "name": "clearHidesSuffix",
+                "description": "Hides the suffix when the clear button is visible.",
+                "type": "boolean"
+              },
               {
                 "name": "disabled",
                 "description": "Disables the input.",
@@ -3703,46 +3708,6 @@
             ]
           }
         },
-        {
-          "name": "sl-nav-group",
-          "description": "Nav groups are used to group related nav items.\n---\n\n\n### **Slots:**\n - _default_ - The nav items within the group.\n- **title** - The nav group's title.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The nav group title.\n- **body** - The nav group body.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "active",
-              "description": "Draws the nav group in an active (selected) state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "mode",
-              "description": "The mode of navigation.",
-              "value": {
-                "type": "'horizontal' | 'vertical' | 'vertical-popup'",
-                "default": "'vertical'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The nav items within the group." },
-            { "name": "title", "description": "The nav group's title." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "active",
-                "description": "Draws the nav group in an active (selected) state.",
-                "type": "boolean"
-              },
-              {
-                "name": "mode",
-                "description": "The mode of navigation.",
-                "type": "'horizontal' | 'vertical' | 'vertical-popup'"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-nav",
           "description": "Navs are used to create navigation menus, including top bars and sidebars.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the selected nav item changes.\n- **sl-nav-select** - Emitted when a nav item is selected.\n\n### **Slots:**\n - _default_ - The nav items.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3920,6 +3885,179 @@
             ]
           }
         },
+        {
+          "name": "sl-nav-group",
+          "description": "Nav groups are used to group related nav items.\n---\n\n\n### **Slots:**\n - _default_ - The nav items within the group.\n- **title** - The nav group's title.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **title** - The nav group title.\n- **body** - The nav group body.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "description": "Draws the nav group in an active (selected) state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "mode",
+              "description": "The mode of navigation.",
+              "value": {
+                "type": "'horizontal' | 'vertical' | 'vertical-popup'",
+                "default": "'vertical'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The nav items within the group." },
+            { "name": "title", "description": "The nav group's title." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "active",
+                "description": "Draws the nav group in an active (selected) state.",
+                "type": "boolean"
+              },
+              {
+                "name": "mode",
+                "description": "The mode of navigation.",
+                "type": "'horizontal' | 'vertical' | 'vertical-popup'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-nav-submenu",
+          "description": "Nav submenus are used to group related nav items in a hierarchical structure.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the submenu opens.\n- **sl-after-show** - Emitted after the submenu opens and all animations are complete.\n- **sl-hide** - Emitted when the submenu closes.\n- **sl-after-hide** - Emitted after the submenu closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the submenu.\n- **hide()** - Hides the submenu.\n\n### **Slots:**\n - _default_ - The nav items within the submenu.\n- **title** - The nav submenu's title.\n- **prefix** - Used to prepend an icon or similar element to the nav submenu.\n- **suffix** - Used to append an icon or similar element to the nav submenu.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps the title, prefix, suffix and expand/collapse icon.\n- **prefix** - The prefix container.\n- **label** - The nav submenu label.\n- **suffix** - The suffix container.\n- **expand-icon** - The container that wraps the expand/collapse icons.\n- **content** - The nav submenu content.\n- **popup** - The popup that wraps the content in horizontal mode.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the submenu is open.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "nested",
+              "description": "Indicates if this submenu is nested within another submenu.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "title",
+              "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Draws the submenu in a disabled state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Draws the submenu in an active (selected) state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "mode",
+              "description": "The mode of navigation.",
+              "value": {
+                "type": "'horizontal' | 'vertical' | 'vertical-popup'",
+                "default": "'vertical'"
+              }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The nav items within the submenu." },
+            { "name": "title", "description": "The nav submenu's title." },
+            {
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the nav submenu."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the nav submenu."
+            },
+            {
+              "name": "expand-icon",
+              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`."
+            },
+            {
+              "name": "collapse-icon",
+              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-show",
+              "description": "Emitted when the submenu opens."
+            },
+            {
+              "name": "sl-after-show",
+              "description": "Emitted after the submenu opens and all animations are complete."
+            },
+            {
+              "name": "sl-hide",
+              "description": "Emitted when the submenu closes."
+            },
+            {
+              "name": "sl-after-hide",
+              "description": "Emitted after the submenu closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "header", "type": "HTMLElement" },
+              { "name": "body", "type": "HTMLElement" },
+              { "name": "popup", "type": "SlPopup" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the submenu is open.",
+                "type": "boolean"
+              },
+              {
+                "name": "nested",
+                "description": "Indicates if this submenu is nested within another submenu.",
+                "type": "boolean"
+              },
+              {
+                "name": "title",
+                "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the submenu in a disabled state.",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "Draws the submenu in an active (selected) state.",
+                "type": "boolean"
+              },
+              {
+                "name": "mode",
+                "description": "The mode of navigation.",
+                "type": "'horizontal' | 'vertical' | 'vertical-popup'"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-show",
+                "description": "Emitted when the submenu opens."
+              },
+              {
+                "name": "sl-after-show",
+                "description": "Emitted after the submenu opens and all animations are complete."
+              },
+              {
+                "name": "sl-hide",
+                "description": "Emitted when the submenu closes."
+              },
+              {
+                "name": "sl-after-hide",
+                "description": "Emitted after the submenu closes and all animations are complete."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-option",
           "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
@@ -4000,155 +4138,71 @@
             },
             {
               "name": "defaultCurrentPage",
-              "value": { "type": "number", "default": "1" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "currentPage", "type": "number" },
-              { "name": "pageSize", "type": "number" },
-              { "name": "pageSizeOpts", "type": "array" },
-              { "name": "total", "type": "number" },
-              { "name": "disabled", "type": "boolean" },
-              { "name": "className", "type": "string" },
-              { "name": "simpleMode", "type": "boolean" },
-              { "name": "defaultCurrentPage", "type": "number" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "sl-nav-submenu",
-          "description": "Nav submenus are used to group related nav items in a hierarchical structure.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the submenu opens.\n- **sl-after-show** - Emitted after the submenu opens and all animations are complete.\n- **sl-hide** - Emitted when the submenu closes.\n- **sl-after-hide** - Emitted after the submenu closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the submenu.\n- **hide()** - Hides the submenu.\n\n### **Slots:**\n - _default_ - The nav items within the submenu.\n- **title** - The nav submenu's title.\n- **prefix** - Used to prepend an icon or similar element to the nav submenu.\n- **suffix** - Used to append an icon or similar element to the nav submenu.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps the title, prefix, suffix and expand/collapse icon.\n- **prefix** - The prefix container.\n- **label** - The nav submenu label.\n- **suffix** - The suffix container.\n- **expand-icon** - The container that wraps the expand/collapse icons.\n- **content** - The nav submenu content.\n- **popup** - The popup that wraps the content in horizontal mode.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Indicates whether or not the submenu is open.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "nested",
-              "description": "Indicates if this submenu is nested within another submenu.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "title",
-              "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "disabled",
-              "description": "Draws the submenu in a disabled state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "active",
-              "description": "Draws the submenu in an active (selected) state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "mode",
-              "description": "The mode of navigation.",
-              "value": {
-                "type": "'horizontal' | 'vertical' | 'vertical-popup'",
-                "default": "'vertical'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The nav items within the submenu." },
-            { "name": "title", "description": "The nav submenu's title." },
-            {
-              "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the nav submenu."
-            },
-            {
-              "name": "suffix",
-              "description": "Used to append an icon or similar element to the nav submenu."
-            },
-            {
-              "name": "expand-icon",
-              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`."
-            },
-            {
-              "name": "collapse-icon",
-              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`."
+              "value": { "type": "number", "default": "1" }
             }
           ],
-          "events": [
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "currentPage", "type": "number" },
+              { "name": "pageSize", "type": "number" },
+              { "name": "pageSizeOpts", "type": "array" },
+              { "name": "total", "type": "number" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "className", "type": "string" },
+              { "name": "simpleMode", "type": "boolean" },
+              { "name": "defaultCurrentPage", "type": "number" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-progress-bar",
+          "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "sl-show",
-              "description": "Emitted when the submenu opens."
+              "name": "value",
+              "description": "The current progress as a percentage, 0 to 100.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "sl-after-show",
-              "description": "Emitted after the submenu opens and all animations are complete."
+              "name": "indeterminate",
+              "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sl-hide",
-              "description": "Emitted when the submenu closes."
-            },
+              "name": "label",
+              "description": "A custom label for assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
             {
-              "name": "sl-after-hide",
-              "description": "Emitted after the submenu closes and all animations are complete."
+              "name": "",
+              "description": "A label to show inside the progress indicator."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "header", "type": "HTMLElement" },
-              { "name": "body", "type": "HTMLElement" },
-              { "name": "popup", "type": "SlPopup" },
               {
-                "name": "open",
-                "description": "Indicates whether or not the submenu is open.",
-                "type": "boolean"
+                "name": "value",
+                "description": "The current progress as a percentage, 0 to 100.",
+                "type": "number"
               },
               {
-                "name": "nested",
-                "description": "Indicates if this submenu is nested within another submenu.",
+                "name": "indeterminate",
+                "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
                 "type": "boolean"
               },
               {
-                "name": "title",
-                "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
+                "name": "label",
+                "description": "A custom label for assistive devices.",
                 "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Draws the submenu in a disabled state.",
-                "type": "boolean"
-              },
-              {
-                "name": "active",
-                "description": "Draws the submenu in an active (selected) state.",
-                "type": "boolean"
-              },
-              {
-                "name": "mode",
-                "description": "The mode of navigation.",
-                "type": "'horizontal' | 'vertical' | 'vertical-popup'"
               }
             ],
-            "events": [
-              {
-                "name": "sl-show",
-                "description": "Emitted when the submenu opens."
-              },
-              {
-                "name": "sl-after-show",
-                "description": "Emitted after the submenu opens and all animations are complete."
-              },
-              {
-                "name": "sl-hide",
-                "description": "Emitted when the submenu closes."
-              },
-              {
-                "name": "sl-after-hide",
-                "description": "Emitted after the submenu closes and all animations are complete."
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -4418,55 +4472,6 @@
             ]
           }
         },
-        {
-          "name": "sl-progress-bar",
-          "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The current progress as a percentage, 0 to 100.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "indeterminate",
-              "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "A custom label for assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "A label to show inside the progress indicator."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The current progress as a percentage, 0 to 100.",
-                "type": "number"
-              },
-              {
-                "name": "indeterminate",
-                "description": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "A custom label for assistive devices.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-progress-ring",
           "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
@@ -4855,26 +4860,130 @@
                 "type": "boolean"
               },
               {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-change",
+                "description": "Emitted when the radio group's selected value changes."
+              },
+              {
+                "name": "sl-input",
+                "description": "Emitted when the radio group receives user input."
+              },
+              {
+                "name": "sl-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sl-rating",
+          "description": "Ratings give users a way to quickly view and provide feedback.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the rating's value changes.\n- **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the rating.\n- **blur()** - Removes focus from the rating.\n\n### **CSS Properties:**\n - **--symbol-color** - The inactive color for symbols. _(default: undefined)_\n- **--symbol-color-active** - The active color for symbols. _(default: undefined)_\n- **--symbol-size** - The size of symbols. _(default: undefined)_\n- **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "A label that describes the rating to assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current rating.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The highest rating to show.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "precision",
+              "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the rating readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the rating.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "getSymbol",
+              "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<sl-icon>` elements.",
+              "value": { "type": "(value: number) => string" }
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-change",
+              "description": "Emitted when the rating's value changes."
+            },
+            {
+              "name": "sl-hover",
+              "type": "{ phase: 'start' | 'move' | 'end', value: number }",
+              "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "rating", "type": "HTMLElement" },
+              {
+                "name": "label",
+                "description": "A label that describes the rating to assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current rating.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "The highest rating to show.",
+                "type": "number"
+              },
+              {
+                "name": "precision",
+                "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
+                "type": "number"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the rating readonly.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the rating.",
+                "type": "boolean"
+              },
+              {
+                "name": "getSymbol",
+                "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<sl-icon>` elements.",
+                "type": "(value: number) => string"
               }
             ],
             "events": [
               {
                 "name": "sl-change",
-                "description": "Emitted when the radio group's selected value changes."
-              },
-              {
-                "name": "sl-input",
-                "description": "Emitted when the radio group receives user input."
+                "description": "Emitted when the rating's value changes."
               },
               {
-                "name": "sl-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+                "name": "sl-hover",
+                "type": "{ phase: 'start' | 'move' | 'end', value: number }",
+                "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value."
               }
             ]
           }
@@ -5069,110 +5178,6 @@
             ]
           }
         },
-        {
-          "name": "sl-rating",
-          "description": "Ratings give users a way to quickly view and provide feedback.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the rating's value changes.\n- **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the rating.\n- **blur()** - Removes focus from the rating.\n\n### **CSS Properties:**\n - **--symbol-color** - The inactive color for symbols. _(default: undefined)_\n- **--symbol-color-active** - The active color for symbols. _(default: undefined)_\n- **--symbol-size** - The size of symbols. _(default: undefined)_\n- **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "A label that describes the rating to assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current rating.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "max",
-              "description": "The highest rating to show.",
-              "value": { "type": "number", "default": "5" }
-            },
-            {
-              "name": "precision",
-              "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
-              "value": { "type": "number", "default": "1" }
-            },
-            {
-              "name": "readonly",
-              "description": "Makes the rating readonly.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the rating.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "getSymbol",
-              "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<sl-icon>` elements.",
-              "value": { "type": "(value: number) => string" }
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-change",
-              "description": "Emitted when the rating's value changes."
-            },
-            {
-              "name": "sl-hover",
-              "type": "{ phase: 'start' | 'move' | 'end', value: number }",
-              "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "rating", "type": "HTMLElement" },
-              {
-                "name": "label",
-                "description": "A label that describes the rating to assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "value",
-                "description": "The current rating.",
-                "type": "number"
-              },
-              {
-                "name": "max",
-                "description": "The highest rating to show.",
-                "type": "number"
-              },
-              {
-                "name": "precision",
-                "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
-                "type": "number"
-              },
-              {
-                "name": "readonly",
-                "description": "Makes the rating readonly.",
-                "type": "boolean"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the rating.",
-                "type": "boolean"
-              },
-              {
-                "name": "getSymbol",
-                "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<sl-icon>` elements.",
-                "type": "(value: number) => string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-change",
-                "description": "Emitted when the rating's value changes."
-              },
-              {
-                "name": "sl-hover",
-                "type": "{ phase: 'start' | 'move' | 'end', value: number }",
-                "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-relative-time",
           "description": "Outputs a localized time phrase relative to the current date and time.\n---\n",
@@ -5270,70 +5275,6 @@
             ]
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "options",
-              "description": "The options for the GridStack instance.",
-              "value": { "type": "GridStackOptions", "default": "{}" }
-            },
-            {
-              "name": "data",
-              "description": "The initial configuration for the grid.",
-              "value": { "type": "GridStackNode[]", "default": "[]" }
-            },
-            {
-              "name": "removable",
-              "description": "Whether the items in the grid can be removed.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "static",
-              "description": "Disables dragging and resizing of widgets.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "selector",
-              "description": "The selector for items that can be dragged into the grid from outside.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "gridElement", "type": "HTMLElement" },
-              {
-                "name": "options",
-                "description": "The options for the GridStack instance.",
-                "type": "GridStackOptions"
-              },
-              {
-                "name": "data",
-                "description": "The initial configuration for the grid.",
-                "type": "GridStackNode[]"
-              },
-              {
-                "name": "removable",
-                "description": "Whether the items in the grid can be removed.",
-                "type": "boolean"
-              },
-              {
-                "name": "static",
-                "description": "Disables dragging and resizing of widgets.",
-                "type": "boolean"
-              },
-              {
-                "name": "selector",
-                "description": "The selector for items that can be dragged into the grid from outside.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-select",
           "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the control's value changes.\n- **sl-clear** - Emitted when the control's value is cleared.\n- **sl-input** - Emitted when the control receives input.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-blur** - Emitted when the control loses focus.\n- **sl-show** - Emitted when the select's menu opens.\n- **sl-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sl-hide** - Emitted when the select's menu closes.\n- **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\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 select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -5664,6 +5605,70 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "options",
+              "description": "The options for the GridStack instance.",
+              "value": { "type": "GridStackOptions", "default": "{}" }
+            },
+            {
+              "name": "data",
+              "description": "The initial configuration for the grid.",
+              "value": { "type": "GridStackNode[]", "default": "[]" }
+            },
+            {
+              "name": "removable",
+              "description": "Whether the items in the grid can be removed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "static",
+              "description": "Disables dragging and resizing of widgets.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selector",
+              "description": "The selector for items that can be dragged into the grid from outside.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "gridElement", "type": "HTMLElement" },
+              {
+                "name": "options",
+                "description": "The options for the GridStack instance.",
+                "type": "GridStackOptions"
+              },
+              {
+                "name": "data",
+                "description": "The initial configuration for the grid.",
+                "type": "GridStackNode[]"
+              },
+              {
+                "name": "removable",
+                "description": "Whether the items in the grid can be removed.",
+                "type": "boolean"
+              },
+              {
+                "name": "static",
+                "description": "Disables dragging and resizing of widgets.",
+                "type": "boolean"
+              },
+              {
+                "name": "selector",
+                "description": "The selector for items that can be dragged into the grid from outside.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sl-skeleton",
           "description": "Skeletons are used to provide a visual representation of where content will eventually be drawn.\n---\n\n\n### **CSS Properties:**\n - **--border-radius** - The skeleton's border radius. _(default: undefined)_\n- **--color** - The color of the skeleton. _(default: undefined)_\n- **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The skeleton's indicator which is responsible for its color and animation.",
@@ -6233,6 +6238,10 @@
                 "type": "TableProps<TData>['expandProps'] | undefined"
               }
             },
+            {
+              "name": "tree",
+              "value": { "type": "TableProps<TData>['tree'] | undefined" }
+            },
             {
               "name": "enableColumnResizing",
               "value": {
@@ -6305,6 +6314,10 @@
                 "name": "expandProps",
                 "type": "TableProps<TData>['expandProps'] | undefined"
               },
+              {
+                "name": "tree",
+                "type": "TableProps<TData>['tree'] | undefined"
+              },
               {
                 "name": "enableColumnResizing",
                 "type": "TableProps<TData>['enableColumnResizing']"