@kdcloudjs/shoelace 1.0.16 → 1.0.17

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.16",
+  "version": "1.0.17",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -517,67 +517,6 @@
             "events": []
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "href",
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "target",
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "value": {
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              }
-            },
-            {
-              "name": "rel",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The breadcrumb item's label." },
-            {
-              "name": "prefix",
-              "description": "An optional prefix, usually an icon or icon button."
-            },
-            {
-              "name": "suffix",
-              "description": "An optional suffix, usually an icon or icon button."
-            },
-            {
-              "name": "separator",
-              "description": "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."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              {
-                "name": "href",
-                "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "target",
-                "description": "Tells the browser where to open the link. Only used when `href` is set.",
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              {
-                "name": "rel",
-                "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-button",
           "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the button loses focus.\n- **sl-focus** - Emitted when the button gains focus.\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 button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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 - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<sl-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
@@ -866,6 +805,67 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            },
+            {
+              "name": "rel",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The breadcrumb item's label." },
+            {
+              "name": "prefix",
+              "description": "An optional prefix, usually an icon or icon button."
+            },
+            {
+              "name": "suffix",
+              "description": "An optional suffix, usually an icon or icon button."
+            },
+            {
+              "name": "separator",
+              "description": "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."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "href",
+                "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is set.",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              {
+                "name": "rel",
+                "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sl-button-group",
           "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<sl-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -897,29 +897,6 @@
             "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.",
@@ -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)_",
@@ -1668,68 +1668,311 @@
           }
         },
         {
-          "name": "sl-details",
-          "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the details opens.\n- **sl-after-show** - Emitted after the details opens and all animations are complete.\n- **sl-hide** - Emitted when the details closes.\n- **sl-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\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 both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
+          "name": "sl-datepicker",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "open",
-              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "type",
+              "value": { "type": "'date' | 'datetime'", "default": "'date'" }
             },
+            { "name": "pattern", "value": { "type": "string" } },
             {
-              "name": "summary",
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "value": { "type": "string" }
+              "name": "min",
+              "value": { "type": "number | string", "default": "'0001-01-01'" }
             },
             {
-              "name": "disabled",
-              "description": "Disables the details so it can't be toggled.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "max",
+              "value": { "type": "number | string", "default": "'9999-12-31'" }
             }
           ],
-          "slots": [
-            { "name": "", "description": "The details' main content." },
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "calendar", "type": "SlCalendar" },
+              { "name": "type", "type": "'date' | 'datetime'" },
+              { "name": "pattern", "type": "string" },
+              { "name": "min", "type": "number | string" },
+              { "name": "max", "type": "number | string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-daterange",
+          "description": "\n---\n\n\n### **Methods:**\n - **checkValidity()** - 检查有效性并触发 sl-invalid 事件（如果无效）\n- **getForm(): _HTMLFormElement | null_** - 获取表单引用\n- **reportValidity()** - 检查有效性并显示浏览器原生的有效性提示\n- **setCustomValidity(message: _string_)** - 设置自定义有效性消息",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "summary",
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
+              "name": "name",
+              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "expand-icon",
-              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`."
+              "name": "value",
+              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "value": {
+                "type": "[Date | null, Date | null]",
+                "default": "[null, null]"
+              }
             },
             {
-              "name": "collapse-icon",
-              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`."
-            }
-          ],
-          "events": [
+              "name": "size",
+              "description": "The input's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
             {
-              "name": "sl-show",
-              "description": "Emitted when the details opens."
+              "name": "filled",
+              "description": "Draws a filled input.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sl-after-show",
-              "description": "Emitted after the details opens and all animations are complete."
+              "name": "pill",
+              "description": "Draws a pill-style input with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "sl-hide",
-              "description": "Emitted when the details closes."
+              "name": "label",
+              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "sl-after-hide",
-              "description": "Emitted after the details closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "details", "type": "HTMLDetailsElement" },
-              { "name": "header", "type": "HTMLElement" },
-              { "name": "body", "type": "HTMLElement" },
-              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
-              { "name": "detailsObserver", "type": "MutationObserver" },
-              {
-                "name": "open",
+              "name": "help-text",
+              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the input is not empty.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the input.",
+              "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": "readonly",
+              "description": "Makes the input readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the input a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "type",
+              "value": { "type": "'date' | 'datetime'", "default": "'date'" }
+            },
+            {
+              "name": "min",
+              "description": "The minimum allowed date (in YYYY-MM-DD format).",
+              "value": { "type": "string", "default": "'0001-01-01'" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum allowed date (in YYYY-MM-DD format).",
+              "value": { "type": "string", "default": "'9999-12-31'" }
+            },
+            {
+              "name": "format",
+              "description": "The date format to use. Defaults to YYYY-MM-DD.",
+              "value": { "type": "string", "default": "'YYYY-MM-DD'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "startInput", "type": "HTMLInputElement" },
+              { "name": "endInput", "type": "HTMLInputElement" },
+              { "name": "popup", "type": "SlPopup" },
+              { "name": "inputContainer", "type": "HTMLDivElement" },
+              { "name": "calendars", "type": "NodeListOf<SlCalendar>" },
+              {
+                "name": "name",
+                "description": "The name of the input, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input, submitted as a name/value pair with form data.",
+                "type": "[Date | null, Date | null]"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "[Date | null, Date | null]"
+              },
+              {
+                "name": "size",
+                "description": "The input's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "filled",
+                "description": "Draws a filled input.",
+                "type": "boolean"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style input with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the input is not empty.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the input.",
+                "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": "readonly",
+                "description": "Makes the input readonly.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the input a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "startDate",
+                "description": "The start date value.",
+                "type": "Date | null"
+              },
+              {
+                "name": "endDate",
+                "description": "The end date value.",
+                "type": "Date | null"
+              },
+              { "name": "type", "type": "'date' | 'datetime'" },
+              {
+                "name": "min",
+                "description": "The minimum allowed date (in YYYY-MM-DD format).",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "The maximum allowed date (in YYYY-MM-DD format).",
+                "type": "string"
+              },
+              {
+                "name": "format",
+                "description": "The date format to use. Defaults to YYYY-MM-DD.",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-details",
+          "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the details opens.\n- **sl-after-show** - Emitted after the details opens and all animations are complete.\n- **sl-hide** - Emitted when the details closes.\n- **sl-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\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 both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the details so it can't be toggled.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The details' main content." },
+            {
+              "name": "summary",
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
+            },
+            {
+              "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 details opens."
+            },
+            {
+              "name": "sl-after-show",
+              "description": "Emitted after the details opens and all animations are complete."
+            },
+            {
+              "name": "sl-hide",
+              "description": "Emitted when the details closes."
+            },
+            {
+              "name": "sl-after-hide",
+              "description": "Emitted after the details closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "details", "type": "HTMLDetailsElement" },
+              { "name": "header", "type": "HTMLElement" },
+              { "name": "body", "type": "HTMLElement" },
+              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
+              { "name": "detailsObserver", "type": "MutationObserver" },
+              {
+                "name": "open",
                 "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
                 "type": "boolean"
               },
@@ -2212,37 +2455,6 @@
             ]
           }
         },
-        {
-          "name": "sl-datepicker",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "type",
-              "value": { "type": "'date' | 'datetime'", "default": "'date'" }
-            },
-            { "name": "pattern", "value": { "type": "string" } },
-            {
-              "name": "min",
-              "value": { "type": "number | string", "default": "'0001-01-01'" }
-            },
-            {
-              "name": "max",
-              "value": { "type": "number | string", "default": "'9999-12-31'" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "calendar", "type": "SlCalendar" },
-              { "name": "type", "type": "'date' | 'datetime'" },
-              { "name": "pattern", "type": "string" },
-              { "name": "min", "type": "number | string" },
-              { "name": "max", "type": "number | string" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-format-bytes",
           "description": "Formats a number as a human readable bytes value.\n---\n",
@@ -4197,8 +4409,8 @@
           }
         },
         {
-          "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.",
+          "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": [
             {
@@ -4206,6 +4418,11 @@
               "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.",
@@ -4213,18 +4430,24 @@
             }
           ],
           "slots": [
-            { "name": "", "description": "A label to show inside the ring." }
+            {
+              "name": "",
+              "description": "A label to show inside the progress indicator."
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "indicator", "type": "SVGCircleElement" },
-              { "name": "indicatorOffset", "type": "string" },
               {
                 "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.",
@@ -4235,8 +4458,46 @@
           }
         },
         {
-          "name": "sl-qr-code",
-          "description": "Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The current progress as a percentage, 0 to 100.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "label",
+              "description": "A custom label for assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "A label to show inside the ring." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "indicator", "type": "SVGCircleElement" },
+              { "name": "indicatorOffset", "type": "string" },
+              {
+                "name": "value",
+                "description": "The current progress as a percentage, 0 to 100.",
+                "type": "number"
+              },
+              {
+                "name": "label",
+                "description": "A custom label for assistive devices.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-qr-code",
+          "description": "Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
@@ -4318,55 +4579,6 @@
             "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": "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-radio",
           "description": "Radios allow the user to select a single option from a group.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **label** - The container that wraps the radio's label.",
@@ -4657,6 +4869,110 @@
             ]
           }
         },
+        {
+          "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-range",
           "description": "Ranges allow the user to select a single value within a given range using a slider.\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 range.\n- **blur()** - Removes focus from the range.\n- **stepUp()** - Increments the value of the range by the value of the step attribute.\n- **stepDown()** - Decrements the value of the range by the value of the step attribute.\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 range'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 Properties:**\n - **--thumb-size** - The size of the thumb. _(default: undefined)_\n- **--tooltip-offset** - The vertical distance the tooltip is offset from the track. _(default: undefined)_\n- **--track-color-active** - The color of the portion of the track that represents the current value. _(default: undefined)_\n- **--track-color-inactive** - The of the portion of the track that represents the remaining value. _(default: undefined)_\n- **--track-height** - The height of the track. _(default: undefined)_\n- **--track-active-offset** - The point of origin of the active track. _(default: undefined)_\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 range's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` element.\n- **tooltip** - The range's tooltip.",
@@ -4847,166 +5163,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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "date",
-              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "value": { "type": "Date | string", "default": "new Date()" }
-            },
-            {
-              "name": "format",
-              "description": "The formatting style to use.",
-              "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'long'"
-              }
-            },
-            {
-              "name": "numeric",
-              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
-              "value": { "type": "'always' | 'auto'", "default": "'auto'" }
-            },
-            {
-              "name": "sync",
-              "description": "Keep the displayed value up to date as time passes.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "date",
-                "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-                "type": "Date | string"
-              },
-              {
-                "name": "format",
-                "description": "The formatting style to use.",
-                "type": "'long' | 'short' | 'narrow'"
-              },
-              {
-                "name": "numeric",
-                "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
-                "type": "'always' | 'auto'"
-              },
-              {
-                "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.",
@@ -5049,64 +5205,56 @@
           }
         },
         {
-          "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.",
+          "name": "sl-relative-time",
+          "description": "Outputs a localized time phrase relative to the current date and time.\n---\n",
           "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": "date",
+              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "value": { "type": "Date | string", "default": "new Date()" }
             },
             {
-              "name": "removable",
-              "description": "Whether the items in the grid can be removed.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "format",
+              "description": "The formatting style to use.",
+              "value": {
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'long'"
+              }
             },
             {
-              "name": "static",
-              "description": "Disables dragging and resizing of widgets.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "numeric",
+              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
+              "value": { "type": "'always' | 'auto'", "default": "'auto'" }
             },
             {
-              "name": "selector",
-              "description": "The selector for items that can be dragged into the grid from outside.",
-              "value": { "type": "string", "default": "''" }
+              "name": "sync",
+              "description": "Keep the displayed value up to date as time passes.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "gridElement", "type": "HTMLElement" },
               {
-                "name": "options",
-                "description": "The options for the GridStack instance.",
-                "type": "GridStackOptions"
+                "name": "date",
+                "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+                "type": "Date | string"
               },
               {
-                "name": "data",
-                "description": "The initial configuration for the grid.",
-                "type": "GridStackNode[]"
+                "name": "format",
+                "description": "The formatting style to use.",
+                "type": "'long' | 'short' | 'narrow'"
               },
               {
-                "name": "removable",
-                "description": "Whether the items in the grid can be removed.",
-                "type": "boolean"
+                "name": "numeric",
+                "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
+                "type": "'always' | 'auto'"
               },
               {
-                "name": "static",
-                "description": "Disables dragging and resizing of widgets.",
+                "name": "sync",
+                "description": "Keep the displayed value up to date as time passes.",
                 "type": "boolean"
-              },
-              {
-                "name": "selector",
-                "description": "The selector for items that can be dragged into the grid from outside.",
-                "type": "string"
               }
             ],
             "events": []
@@ -5442,6 +5590,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.",
@@ -6137,76 +6349,6 @@
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
-        {
-          "name": "sl-tag",
-          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sl-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<sl-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The tag's theme variant.",
-              "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
-                "default": "'neutral'"
-              }
-            },
-            {
-              "name": "size",
-              "description": "The tag's size.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "removable",
-              "description": "Makes the tag removable and shows a remove button.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The tag's content." }],
-          "events": [
-            {
-              "name": "sl-remove",
-              "description": "Emitted when the remove button is activated."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The tag's theme variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
-              },
-              {
-                "name": "size",
-                "description": "The tag's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style tag with rounded edges.",
-                "type": "boolean"
-              },
-              {
-                "name": "removable",
-                "description": "Makes the tag removable and shows a remove button.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-remove",
-                "description": "Emitted when the remove button is activated."
-              }
-            ]
-          }
-        },
         {
           "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.",
@@ -6521,6 +6663,76 @@
             ]
           }
         },
+        {
+          "name": "sl-tag",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sl-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<sl-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The tag's theme variant.",
+              "value": {
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
+                "default": "'neutral'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "removable",
+              "description": "Makes the tag removable and shows a remove button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tag's content." }],
+          "events": [
+            {
+              "name": "sl-remove",
+              "description": "Emitted when the remove button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The tag's theme variant.",
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style tag with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "removable",
+                "description": "Makes the tag removable and shows a remove button.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-timepicker",
           "description": "A time picker component that provides a time selection interface.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the control's value changes.\n- **sl-input** - Emitted when the control's value changes.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-blur** - Emitted when the control loses focus.\n- **sl-clear** - Emitted when the clear button is activated.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - The input's prefix, to prepend to the input.\n- **suffix** - The input's suffix, to append to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.",
@@ -6529,7 +6741,8 @@
             {
               "name": "format",
               "value": { "type": "string", "default": "'HH:mm:ss'" }
-            }
+            },
+            { "name": "pattern", "value": { "type": "string" } }
           ],
           "slots": [
             {
@@ -6578,7 +6791,8 @@
           "js": {
             "properties": [
               { "name": "timePanel", "type": "SlTimePanel" },
-              { "name": "format", "type": "string" }
+              { "name": "format", "type": "string" },
+              { "name": "pattern", "type": "string" }
             ],
             "events": [
               {