@kdcloudjs/shoelace 1.0.0 → 1.0.1

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.0",
+  "version": "1.0.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1610,7 +1610,7 @@
         },
         {
           "name": "sl-datepicker",
-          "description": "\n---\n\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.",
+          "description": "\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the datepicker.\n- **blur()** - Removes focus from the datepicker.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\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.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.",
           "doc-url": "",
           "attributes": [
             { "name": "value", "value": { "type": "string", "default": "''" } },
@@ -1680,12 +1680,12 @@
             {
               "name": "min",
               "description": "The input's minimum value. Only applies to date and number input types.",
-              "value": { "type": "number | string" }
+              "value": { "type": "number | string", "default": "'0001-01-01'" }
             },
             {
               "name": "max",
               "description": "The input's maximum value. Only applies to date and number input types.",
-              "value": { "type": "number | string" }
+              "value": { "type": "number | string", "default": "'9999-12-31'" }
             },
             {
               "name": "autofocus",
@@ -2003,6 +2003,146 @@
             "events": []
           }
         },
+        {
+          "name": "sl-drawer",
+          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the drawer opens.\n- **sl-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sl-hide** - Emitted when the drawer closes.\n- **sl-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sl-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sl-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placement",
+              "description": "The direction from which the drawer will open.",
+              "value": {
+                "type": "'top' | 'end' | 'bottom' | 'start'",
+                "default": "'end'"
+              }
+            },
+            {
+              "name": "contained",
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-header",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The drawer's main content." },
+            {
+              "name": "label",
+              "description": "The drawer's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "header-actions",
+              "description": "Optional actions to add to the header. Works best with `<sl-icon-button>`."
+            },
+            {
+              "name": "footer",
+              "description": "The drawer's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-show",
+              "description": "Emitted when the drawer opens."
+            },
+            {
+              "name": "sl-after-show",
+              "description": "Emitted after the drawer opens and all animations are complete."
+            },
+            {
+              "name": "sl-hide",
+              "description": "Emitted when the drawer closes."
+            },
+            {
+              "name": "sl-after-hide",
+              "description": "Emitted after the drawer closes and all animations are complete."
+            },
+            {
+              "name": "sl-initial-focus",
+              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+            },
+            {
+              "name": "sl-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "modal",
+                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping."
+              },
+              { "name": "drawer", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "placement",
+                "description": "The direction from which the drawer will open.",
+                "type": "'top' | 'end' | 'bottom' | 'start'"
+              },
+              {
+                "name": "contained",
+                "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
+                "type": "boolean"
+              },
+              {
+                "name": "noHeader",
+                "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-show",
+                "description": "Emitted when the drawer opens."
+              },
+              {
+                "name": "sl-after-show",
+                "description": "Emitted after the drawer opens and all animations are complete."
+              },
+              {
+                "name": "sl-hide",
+                "description": "Emitted when the drawer closes."
+              },
+              {
+                "name": "sl-after-hide",
+                "description": "Emitted after the drawer closes and all animations are complete."
+              },
+              {
+                "name": "sl-initial-focus",
+                "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              },
+              {
+                "name": "sl-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-dropdown",
           "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the dropdown opens.\n- **sl-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sl-hide** - Emitted when the dropdown closes.\n- **sl-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sl-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
@@ -2152,237 +2292,97 @@
           }
         },
         {
-          "name": "sl-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the drawer opens.\n- **sl-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sl-hide** - Emitted when the drawer closes.\n- **sl-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sl-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sl-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+          "name": "sl-format-bytes",
+          "description": "Formats a number as a human readable bytes value.\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "open",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The number to format in bytes.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "label",
-              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "unit",
+              "description": "The type of unit to display.",
+              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
             },
             {
-              "name": "placement",
-              "description": "The direction from which the drawer will open.",
+              "name": "display",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
               "value": {
-                "type": "'top' | 'end' | 'bottom' | 'start'",
-                "default": "'end'"
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'short'"
               }
-            },
-            {
-              "name": "contained",
-              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "no-header",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-              "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [
-            { "name": "", "description": "The drawer's main content." },
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The number to format in bytes.",
+                "type": "number"
+              },
+              {
+                "name": "unit",
+                "description": "The type of unit to display.",
+                "type": "'byte' | 'bit'"
+              },
+              {
+                "name": "display",
+                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+                "type": "'long' | 'short' | 'narrow'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-format-date",
+          "description": "Formats a date/time using the specified locale and options.\n---\n",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "label",
-              "description": "The drawer's label. Alternatively, you can use the `label` attribute."
+              "name": "date",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin 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": "header-actions",
-              "description": "Optional actions to add to the header. Works best with `<sl-icon-button>`."
+              "name": "weekday",
+              "description": "The format for displaying the weekday.",
+              "value": { "type": "'narrow' | 'short' | 'long'" }
             },
             {
-              "name": "footer",
-              "description": "The drawer's footer, usually one or more buttons representing various options."
-            }
-          ],
-          "events": [
+              "name": "era",
+              "description": "The format for displaying the era.",
+              "value": { "type": "'narrow' | 'short' | 'long'" }
+            },
             {
-              "name": "sl-show",
-              "description": "Emitted when the drawer opens."
+              "name": "year",
+              "description": "The format for displaying the year.",
+              "value": { "type": "'numeric' | '2-digit'" }
             },
             {
-              "name": "sl-after-show",
-              "description": "Emitted after the drawer opens and all animations are complete."
+              "name": "month",
+              "description": "The format for displaying the month.",
+              "value": {
+                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+              }
             },
             {
-              "name": "sl-hide",
-              "description": "Emitted when the drawer closes."
+              "name": "day",
+              "description": "The format for displaying the day.",
+              "value": { "type": "'numeric' | '2-digit'" }
             },
             {
-              "name": "sl-after-hide",
-              "description": "Emitted after the drawer closes and all animations are complete."
+              "name": "hour",
+              "description": "The format for displaying the hour.",
+              "value": { "type": "'numeric' | '2-digit'" }
             },
             {
-              "name": "sl-initial-focus",
-              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-            },
-            {
-              "name": "sl-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "modal",
-                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping."
-              },
-              { "name": "drawer", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "placement",
-                "description": "The direction from which the drawer will open.",
-                "type": "'top' | 'end' | 'bottom' | 'start'"
-              },
-              {
-                "name": "contained",
-                "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
-                "type": "boolean"
-              },
-              {
-                "name": "noHeader",
-                "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-show",
-                "description": "Emitted when the drawer opens."
-              },
-              {
-                "name": "sl-after-show",
-                "description": "Emitted after the drawer opens and all animations are complete."
-              },
-              {
-                "name": "sl-hide",
-                "description": "Emitted when the drawer closes."
-              },
-              {
-                "name": "sl-after-hide",
-                "description": "Emitted after the drawer closes and all animations are complete."
-              },
-              {
-                "name": "sl-initial-focus",
-                "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-              },
-              {
-                "name": "sl-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sl-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The number to format in bytes.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "unit",
-              "description": "The type of unit to display.",
-              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
-            },
-            {
-              "name": "display",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'short'"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The number to format in bytes.",
-                "type": "number"
-              },
-              {
-                "name": "unit",
-                "description": "The type of unit to display.",
-                "type": "'byte' | 'bit'"
-              },
-              {
-                "name": "display",
-                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-                "type": "'long' | 'short' | 'narrow'"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "sl-format-date",
-          "description": "Formats a date/time using the specified locale and options.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "date",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin 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": "weekday",
-              "description": "The format for displaying the weekday.",
-              "value": { "type": "'narrow' | 'short' | 'long'" }
-            },
-            {
-              "name": "era",
-              "description": "The format for displaying the era.",
-              "value": { "type": "'narrow' | 'short' | 'long'" }
-            },
-            {
-              "name": "year",
-              "description": "The format for displaying the year.",
-              "value": { "type": "'numeric' | '2-digit'" }
-            },
-            {
-              "name": "month",
-              "description": "The format for displaying the month.",
-              "value": {
-                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
-              }
-            },
-            {
-              "name": "day",
-              "description": "The format for displaying the day.",
-              "value": { "type": "'numeric' | '2-digit'" }
-            },
-            {
-              "name": "hour",
-              "description": "The format for displaying the hour.",
-              "value": { "type": "'numeric' | '2-digit'" }
-            },
-            {
-              "name": "minute",
-              "description": "The format for displaying the minute.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "minute",
+              "description": "The format for displaying the minute.",
+              "value": { "type": "'numeric' | '2-digit'" }
             },
             {
               "name": "second",
@@ -3040,7 +3040,7 @@
             {
               "name": "autocomplete",
               "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
-              "value": { "type": "string" }
+              "value": { "type": "string", "default": "'off'" }
             },
             {
               "name": "autofocus",
@@ -3359,15 +3359,6 @@
             ]
           }
         },
-        {
-          "name": "sl-menu-label",
-          "description": "Menu labels are used to describe a group of menu items.\n---\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The menu label's content." }],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
         {
           "name": "sl-menu-item",
           "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item'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- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
@@ -3451,6 +3442,15 @@
             "events": []
           }
         },
+        {
+          "name": "sl-menu-label",
+          "description": "Menu labels are used to describe a group of menu items.\n---\n\n\n### **Slots:**\n - _default_ - The menu label's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "The menu label's content." }],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "sl-mutation-observer",
           "description": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n---\n\n\n### **Events:**\n - **sl-mutation** - Emitted when a mutation occurs.\n\n### **Slots:**\n - _default_ - The content to watch for mutations.",
@@ -3587,6 +3587,54 @@
             "events": []
           }
         },
+        {
+          "name": "sl-pagination",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "currentPage",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "pageSize",
+              "value": { "type": "number", "default": "20" }
+            },
+            {
+              "name": "pageSizeOpts",
+              "value": { "type": "array", "default": "[10, 20, 50, 100]" }
+            },
+            {
+              "name": "total",
+              "value": { "type": "number", "default": "5000" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "className",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "simpleMode",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "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" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sl-popup",
           "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **sl-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--sl-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
@@ -4706,6 +4754,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-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.",
@@ -5532,9 +5644,16 @@
         },
         {
           "name": "sl-table",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Events:**\n - **change**",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "rowKey",
+              "value": {
+                "type": "TableProps<TData>['rowKey']",
+                "default": "'key'"
+              }
+            },
             {
               "name": "columns",
               "value": {
@@ -5566,12 +5685,12 @@
             {
               "name": "direction",
               "value": {
-                "type": "TableProps<TData>['direction'] | undefined",
+                "type": "TableProps<TData>['direction']",
                 "default": "'ltr'"
               }
             },
             {
-              "name": "show-header",
+              "name": "showHeader",
               "value": {
                 "type": "TableProps<TData>['showHeader']",
                 "default": "true"
@@ -5579,105 +5698,61 @@
             },
             {
               "name": "rowSelection",
-              "value": { "type": "TableRowSelection<TData> | undefined" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "columns", "type": "TableProps<TData>['columns']" },
-              {
-                "name": "dataSource",
-                "type": "TableProps<TData>['dataSource']"
-              },
-              { "name": "loading", "type": "TableProps<TData>['loading']" },
-              { "name": "bordered", "type": "TableProps<TData>['bordered']" },
-              {
-                "name": "direction",
-                "type": "TableProps<TData>['direction'] | undefined"
-              },
-              {
-                "name": "showHeader",
-                "type": "TableProps<TData>['showHeader']"
-              },
-              {
-                "name": "rowSelection",
-                "type": "TableRowSelection<TData> | undefined"
-              },
-              { "name": "rowSelectedMap", "type": "RowSelectionState" },
-              { "name": "adapter", "type": "TableAdapter" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "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": [
+              "value": { "type": "TableRowSelection<TData>" }
+            },
             {
-              "name": "variant",
-              "description": "The tag's theme variant.",
+              "name": "tableScroll",
               "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
-                "default": "'neutral'"
+                "type": "TableProps<TData>['tableScroll']",
+                "default": "{}"
               }
             },
             {
-              "name": "size",
-              "description": "The tag's size.",
+              "name": "pagination",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "{\n    total?: number;\n    pageSize?: number;\n    currentPage?: number;\n    pageSizeOpts?: number[];\n    simpleMode?: boolean;\n    className?: string;\n    disabled?: boolean;\n    ['sl-page-change']?: (event: CustomEvent) => void;\n  } | undefined"
               }
-            },
-            {
-              "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."
             }
           ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
+              { "name": "rowKey", "type": "TableProps<TData>['rowKey']" },
+              { "name": "columns", "type": "TableProps<TData>['columns']" },
               {
-                "name": "variant",
-                "description": "The tag's theme variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "name": "dataSource",
+                "type": "TableProps<TData>['dataSource']"
               },
+              { "name": "loading", "type": "TableProps<TData>['loading']" },
+              { "name": "bordered", "type": "TableProps<TData>['bordered']" },
+              { "name": "direction", "type": "TableProps<TData>['direction']" },
               {
-                "name": "size",
-                "description": "The tag's size.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "showHeader",
+                "type": "TableProps<TData>['showHeader']"
               },
+              { "name": "rowSelection", "type": "TableRowSelection<TData>" },
               {
-                "name": "pill",
-                "description": "Draws a pill-style tag with rounded edges.",
-                "type": "boolean"
+                "name": "tableScroll",
+                "type": "TableProps<TData>['tableScroll']"
               },
               {
-                "name": "removable",
-                "description": "Makes the tag removable and shows a remove button.",
-                "type": "boolean"
-              }
+                "name": "pagination",
+                "type": "{\n    total?: number;\n    pageSize?: number;\n    currentPage?: number;\n    pageSizeOpts?: number[];\n    simpleMode?: boolean;\n    className?: string;\n    disabled?: boolean;\n    ['sl-page-change']?: (event: CustomEvent) => void;\n  } | undefined"
+              },
+              { "name": "rowSelectedMap", "type": "RowSelectionState" },
+              { "name": "sorting", "type": "SortingState" },
+              { "name": "columnFilters", "type": "ColumnFiltersState" },
+              { "name": "tableWidth", "type": "number" },
+              { "name": "adapter", "type": "TableAdapter" },
+              { "name": "handleBodyScroll" },
+              { "name": "handleBodyScrollLeft" },
+              { "name": "handleWindowResize" },
+              { "name": "syncTableWidth" },
+              { "name": "setScrollPositionClassName" },
+              { "name": "handleFilterDropdownChange" },
+              { "name": "handlePaginationChange" }
             ],
-            "events": [
-              {
-                "name": "sl-remove",
-                "description": "Emitted when the remove button is activated."
-              }
-            ]
+            "events": [{ "name": "change", "type": "CustomEvent" }]
           }
         },
         {
@@ -5994,6 +6069,226 @@
             ]
           }
         },
+        {
+          "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### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the datepicker.\n- **blur()** - Removes focus from the datepicker.\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.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "size",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "hoist",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "filled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "form", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "format",
+              "value": { "type": "string", "default": "'HH:mm:ss'" }
+            },
+            { "name": "autofocus", "value": { "type": "boolean" } }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "prefix",
+              "description": "The input's prefix, to prepend to the input."
+            },
+            {
+              "name": "suffix",
+              "description": "The input's suffix, to append to the input."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "help-text",
+              "description": "Help text that describes the input. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-change",
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "sl-input",
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "sl-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "sl-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "sl-clear",
+              "description": "Emitted when the clear button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "SlInput" },
+              { "name": "timePanel", "type": "SlTimePanel" },
+              { "name": "value", "type": "string" },
+              { "name": "defaultValue", "type": "string" },
+              { "name": "name", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "readonly", "type": "boolean" },
+              { "name": "clearable", "type": "boolean" },
+              { "name": "size", "type": "'small' | 'medium' | 'large'" },
+              { "name": "hoist", "type": "boolean" },
+              { "name": "filled", "type": "boolean" },
+              { "name": "pill", "type": "boolean" },
+              { "name": "helpText", "type": "string" },
+              { "name": "form", "type": "string" },
+              { "name": "required", "type": "boolean" },
+              { "name": "format", "type": "string" },
+              { "name": "autofocus", "type": "boolean" },
+              { "name": "validity" },
+              { "name": "validationMessage" }
+            ],
+            "events": [
+              {
+                "name": "sl-change",
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "sl-input",
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "sl-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sl-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sl-clear",
+                "description": "Emitted when the clear button is activated."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-tooltip",
           "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the tooltip begins to show.\n- **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sl-hide** - Emitted when the tooltip begins to hide.\n- **sl-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",