@kdcloudjs/shoelace 1.0.3 → 1.0.5

package/cdn/web-types.json

@@ -1,119 +1,11 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kdcloudjs/shoelace",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
-        {
-          "name": "sl-alert",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the alert opens.\n- **sl-after-show** - Emitted after the alert opens and all animations are complete.\n- **sl-hide** - Emitted when the alert closes.\n- **sl-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "closable",
-              "description": "Enables a close button that allows the user to dismiss the alert.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "variant",
-              "description": "The alert's theme variant.",
-              "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "duration",
-              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
-              "value": { "type": "string", "default": "Infinity" }
-            },
-            {
-              "name": "countdown",
-              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-              "value": { "type": "'rtl' | 'ltr' | undefined" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The alert's main content." },
-            {
-              "name": "icon",
-              "description": "An icon to show in the alert. Works best with `<sl-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-show",
-              "description": "Emitted when the alert opens."
-            },
-            {
-              "name": "sl-after-show",
-              "description": "Emitted after the alert opens and all animations are complete."
-            },
-            {
-              "name": "sl-hide",
-              "description": "Emitted when the alert closes."
-            },
-            {
-              "name": "sl-after-hide",
-              "description": "Emitted after the alert closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "countdownElement", "type": "HTMLElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
-                "type": "boolean"
-              },
-              {
-                "name": "closable",
-                "description": "Enables a close button that allows the user to dismiss the alert.",
-                "type": "boolean"
-              },
-              {
-                "name": "variant",
-                "description": "The alert's theme variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              {
-                "name": "duration",
-                "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own."
-              },
-              {
-                "name": "countdown",
-                "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-                "type": "'rtl' | 'ltr' | undefined"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-show",
-                "description": "Emitted when the alert opens."
-              },
-              {
-                "name": "sl-after-show",
-                "description": "Emitted after the alert opens and all animations are complete."
-              },
-              {
-                "name": "sl-hide",
-                "description": "Emitted when the alert closes."
-              },
-              {
-                "name": "sl-after-hide",
-                "description": "Emitted after the alert closes and all animations are complete."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-animated-image",
           "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
@@ -188,88 +80,6 @@
             ]
           }
         },
-        {
-          "name": "sl-avatar",
-          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "image",
-              "description": "The image source to use for the avatar.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "initials",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "loading",
-              "description": "Indicates how the browser should load the image.",
-              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
-            },
-            {
-              "name": "shape",
-              "description": "The shape of the avatar.",
-              "value": {
-                "type": "'circle' | 'square' | 'rounded'",
-                "default": "'circle'"
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "icon",
-              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-error",
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "image",
-                "description": "The image source to use for the avatar.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "A label to use to describe the avatar to assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "initials",
-                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-                "type": "string"
-              },
-              {
-                "name": "loading",
-                "description": "Indicates how the browser should load the image.",
-                "type": "'eager' | 'lazy'"
-              },
-              {
-                "name": "shape",
-                "description": "The shape of the avatar.",
-                "type": "'circle' | 'square' | 'rounded'"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-error",
-                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-animation",
           "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **sl-cancel** - Emitted when the animation is canceled.\n- **sl-finish** - Emitted when the animation finishes.\n- **sl-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.",
@@ -436,38 +246,193 @@
           }
         },
         {
-          "name": "sl-breadcrumb",
-          "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "name": "sl-alert",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the alert opens.\n- **sl-after-show** - Emitted after the alert opens and all animations are complete.\n- **sl-hide** - Emitted when the alert closes.\n- **sl-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "closable",
+              "description": "Enables a close button that allows the user to dismiss the alert.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "description": "The alert's theme variant.",
+              "value": {
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "duration",
+              "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
+              "value": { "type": "string", "default": "Infinity" }
+            },
+            {
+              "name": "countdown",
+              "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+              "value": { "type": "'rtl' | 'ltr' | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The alert's main content." },
+            {
+              "name": "icon",
+              "description": "An icon to show in the alert. Works best with `<sl-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-show",
+              "description": "Emitted when the alert opens."
+            },
+            {
+              "name": "sl-after-show",
+              "description": "Emitted after the alert opens and all animations are complete."
+            },
+            {
+              "name": "sl-hide",
+              "description": "Emitted when the alert closes."
+            },
+            {
+              "name": "sl-after-hide",
+              "description": "Emitted after the alert closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "countdownElement", "type": "HTMLElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "closable",
+                "description": "Enables a close button that allows the user to dismiss the alert.",
+                "type": "boolean"
+              },
+              {
+                "name": "variant",
+                "description": "The alert's theme variant.",
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              {
+                "name": "duration",
+                "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own."
+              },
+              {
+                "name": "countdown",
+                "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+                "type": "'rtl' | 'ltr' | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-show",
+                "description": "Emitted when the alert opens."
+              },
+              {
+                "name": "sl-after-show",
+                "description": "Emitted after the alert opens and all animations are complete."
+              },
+              {
+                "name": "sl-hide",
+                "description": "Emitted when the alert closes."
+              },
+              {
+                "name": "sl-after-hide",
+                "description": "Emitted after the alert closes and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sl-avatar",
+          "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "image",
+              "description": "The image source to use for the avatar.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "label",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "description": "A label to use to describe the avatar to assistive devices.",
               "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "initials",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "loading",
+              "description": "Indicates how the browser should load the image.",
+              "value": { "type": "'eager' | 'lazy'", "default": "'eager'" }
+            },
+            {
+              "name": "shape",
+              "description": "The shape of the avatar.",
+              "value": {
+                "type": "'circle' | 'square' | 'rounded'",
+                "default": "'circle'"
+              }
             }
           ],
           "slots": [
             {
-              "name": "",
-              "description": "One or more breadcrumb items to display."
-            },
+              "name": "icon",
+              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`."
+            }
+          ],
+          "events": [
             {
-              "name": "separator",
-              "description": "The separator to use between breadcrumb items. Works best with `<sl-icon>`."
+              "name": "sl-error",
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "separatorSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "image",
+                "description": "The image source to use for the avatar.",
+                "type": "string"
+              },
               {
                 "name": "label",
-                "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+                "description": "A label to use to describe the avatar to assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "initials",
+                "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
                 "type": "string"
+              },
+              {
+                "name": "loading",
+                "description": "Indicates how the browser should load the image.",
+                "type": "'eager' | 'lazy'"
+              },
+              {
+                "name": "shape",
+                "description": "The shape of the avatar.",
+                "type": "'circle' | 'square' | 'rounded'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "sl-error",
+                "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
+              }
+            ]
           }
         },
         {
@@ -517,6 +482,41 @@
             "events": []
           }
         },
+        {
+          "name": "sl-breadcrumb",
+          "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more breadcrumb items to display."
+            },
+            {
+              "name": "separator",
+              "description": "The separator to use between breadcrumb items. Works best with `<sl-icon>`."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "separatorSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "label",
+                "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+                "type": "string"
+              }
+            ],
+            "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.",
@@ -884,18 +884,41 @@
             }
           ],
           "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "disableRole", "type": "boolean" },
-              {
-                "name": "label",
-                "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "disableRole", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+                "type": "string"
+              }
+            ],
+            "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",
@@ -1034,29 +1057,6 @@
             ]
           }
         },
-        {
-          "name": "sl-card",
-          "description": "Cards can be used to group related subjects in a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The card's main content." },
-            {
-              "name": "header",
-              "description": "An optional header for the card."
-            },
-            {
-              "name": "footer",
-              "description": "An optional footer for the card."
-            },
-            {
-              "name": "image",
-              "description": "An optional image to render at the start of the card."
-            }
-          ],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
         {
           "name": "sl-carousel-item",
           "description": "A carousel item represent a slide within a [carousel](/components/carousel).\n---\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
@@ -1609,159 +1609,80 @@
           }
         },
         {
-          "name": "sl-datepicker",
-          "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.",
+          "name": "sl-date-panel",
+          "description": "\n---\n\n\n### **Events:**\n - **sl-cancel**\n- **sl-clear**\n- **sl-confirm**\n- **sl-date-change**",
           "doc-url": "",
           "attributes": [
-            { "name": "value", "value": { "type": "string", "default": "''" } },
-            { "name": "name", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "type",
-              "value": { "type": "'date' | 'datetime'", "default": "'date'" }
-            },
-            {
-              "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",
-              "description": "Draws a filled input.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
-              "name": "pill",
-              "description": "Draws a pill-style input with rounded edges.",
+              "name": "open",
               "value": { "type": "boolean", "default": "false" }
             },
+            { "name": "value", "value": { "type": "string", "default": "''" } },
             {
-              "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": "type",
+              "value": { "type": "'date' | 'datetime'", "default": "'date'" }
             },
             {
-              "name": "form",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "value": { "type": "string", "default": "''" }
+              "name": "min",
+              "value": { "type": "number | string", "default": "'0001-01-01'" }
             },
             {
-              "name": "required",
-              "description": "Makes the input a required field.",
-              "value": { "type": "boolean", "default": "false" }
-            },
+              "name": "max",
+              "value": { "type": "number | string", "default": "'9999-12-31'" }
+            }
+          ],
+          "events": [
+            { "name": "sl-cancel", "type": "CustomEvent" },
+            { "name": "sl-clear", "type": "CustomEvent" },
+            { "name": "sl-confirm", "type": "CustomEvent" },
+            { "name": "sl-date-change", "type": "CustomEvent" }
+          ],
+          "js": {
+            "properties": [
+              { "name": "calendar", "type": "SlCalendar" },
+              { "name": "yearColumn", "type": "HTMLElement" },
+              { "name": "monthColumn", "type": "HTMLElement" },
+              { "name": "open", "type": "boolean" },
+              { "name": "value", "type": "string" },
+              { "name": "type", "type": "'date' | 'datetime'" },
+              { "name": "min", "type": "number | string" },
+              { "name": "max", "type": "number | string" }
+            ],
+            "events": [
+              { "name": "sl-cancel", "type": "CustomEvent" },
+              { "name": "sl-clear", "type": "CustomEvent" },
+              { "name": "sl-confirm", "type": "CustomEvent" },
+              { "name": "sl-date-change", "type": "CustomEvent" }
+            ]
+          }
+        },
+        {
+          "name": "sl-datepicker",
+          "description": "\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the picker.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "pattern",
-              "description": "A regular expression pattern to validate input against.",
-              "value": { "type": "string" }
+              "name": "type",
+              "value": { "type": "'date' | 'datetime'", "default": "'date'" }
             },
+            { "name": "pattern", "value": { "type": "string" } },
             {
               "name": "min",
-              "description": "The input's minimum value. Only applies to date and number input types.",
               "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", "default": "'9999-12-31'" }
-            },
-            {
-              "name": "autofocus",
-              "description": "Indicates that the input should receive focus on page load.",
-              "value": { "type": "boolean" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "input", "type": "SlInput" },
               { "name": "calendar", "type": "SlCalendar" },
-              { "name": "value", "type": "string" },
-              { "name": "defaultValue", "type": "string" },
-              { "name": "name", "type": "string" },
               { "name": "type", "type": "'date' | 'datetime'" },
-              { "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",
-                "description": "Draws a filled input.",
-                "type": "boolean"
-              },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style input with rounded edges.",
-                "type": "boolean"
-              },
-              {
-                "name": "helpText",
-                "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-                "type": "string"
-              },
-              {
-                "name": "required",
-                "description": "Makes the input a required field.",
-                "type": "boolean"
-              },
-              {
-                "name": "pattern",
-                "description": "A regular expression pattern to validate input against.",
-                "type": "string"
-              },
-              {
-                "name": "min",
-                "description": "The input's minimum value. Only applies to date and number input types.",
-                "type": "number | string"
-              },
-              {
-                "name": "max",
-                "description": "The input's maximum value. Only applies to date and number input types.",
-                "type": "number | string"
-              },
-              {
-                "name": "autofocus",
-                "description": "Indicates that the input should receive focus on page load.",
-                "type": "boolean"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
+              { "name": "pattern", "type": "string" },
+              { "name": "min", "type": "number | string" },
+              { "name": "max", "type": "number | string" }
             ],
             "events": []
           }
@@ -2803,93 +2724,27 @@
               "name": "handle",
               "description": "The icon used inside the handle."
             }
-          ],
-          "events": [
-            {
-              "name": "sl-change",
-              "description": "Emitted when the position changes."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "handle", "type": "HTMLElement" },
-              {
-                "name": "position",
-                "description": "The position of the divider as a percentage.",
-                "type": "number"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-change",
-                "description": "Emitted when the position changes."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sl-include",
-          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the included file is loaded.\n- **sl-error** - Emitted when the included file fails to load due to an error.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "src",
-              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "mode",
-              "description": "The fetch mode to use.",
-              "value": {
-                "type": "'cors' | 'no-cors' | 'same-origin'",
-                "default": "'cors'"
-              }
-            },
-            {
-              "name": "allow-scripts",
-              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-load",
-              "description": "Emitted when the included file is loaded."
-            },
-            {
-              "name": "sl-error",
-              "type": "{ status: number }",
-              "description": "Emitted when the included file fails to load due to an error."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "src",
-                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-                "type": "string"
-              },
-              {
-                "name": "mode",
-                "description": "The fetch mode to use.",
-                "type": "'cors' | 'no-cors' | 'same-origin'"
-              },
+          ],
+          "events": [
+            {
+              "name": "sl-change",
+              "description": "Emitted when the position changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "handle", "type": "HTMLElement" },
               {
-                "name": "allowScripts",
-                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-                "type": "boolean"
+                "name": "position",
+                "description": "The position of the divider as a percentage.",
+                "type": "number"
               }
             ],
             "events": [
               {
-                "name": "sl-load",
-                "description": "Emitted when the included file is loaded."
-              },
-              {
-                "name": "sl-error",
-                "type": "{ status: number }",
-                "description": "Emitted when the included file fails to load due to an error."
+                "name": "sl-change",
+                "description": "Emitted when the position changes."
               }
             ]
           }
@@ -3328,6 +3183,72 @@
             ]
           }
         },
+        {
+          "name": "sl-include",
+          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the included file is loaded.\n- **sl-error** - Emitted when the included file fails to load due to an error.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mode",
+              "description": "The fetch mode to use.",
+              "value": {
+                "type": "'cors' | 'no-cors' | 'same-origin'",
+                "default": "'cors'"
+              }
+            },
+            {
+              "name": "allow-scripts",
+              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-load",
+              "description": "Emitted when the included file is loaded."
+            },
+            {
+              "name": "sl-error",
+              "type": "{ status: number }",
+              "description": "Emitted when the included file fails to load due to an error."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "type": "string"
+              },
+              {
+                "name": "mode",
+                "description": "The fetch mode to use.",
+                "type": "'cors' | 'no-cors' | 'same-origin'"
+              },
+              {
+                "name": "allowScripts",
+                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-load",
+                "description": "Emitted when the included file is loaded."
+              },
+              {
+                "name": "sl-error",
+                "type": "{ status: number }",
+                "description": "Emitted when the included file fails to load due to an error."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-menu",
           "description": "Menus provide a list of options for the user to choose from.\n---\n\n\n### **Events:**\n - **sl-select** - Emitted when a menu item is selected.\n\n### **Slots:**\n - _default_ - The menu's content, including menu items, menu labels, and dividers.",
@@ -3359,6 +3280,15 @@
             ]
           }
         },
+        {
+          "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).",
@@ -3442,15 +3372,6 @@
             "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.",
@@ -3592,10 +3513,7 @@
           "description": "\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "currentPage",
-              "value": { "type": "number", "default": "1" }
-            },
+            { "name": "currentPage", "value": { "type": "number" } },
             {
               "name": "pageSize",
               "value": { "type": "number", "default": "20" }
@@ -3619,6 +3537,10 @@
             {
               "name": "simpleMode",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "defaultCurrentPage",
+              "value": { "type": "number", "default": "1" }
             }
           ],
           "events": [],
@@ -3630,7 +3552,8 @@
               { "name": "total", "type": "number" },
               { "name": "disabled", "type": "boolean" },
               { "name": "className", "type": "string" },
-              { "name": "simpleMode", "type": "boolean" }
+              { "name": "simpleMode", "type": "boolean" },
+              { "name": "defaultCurrentPage", "type": "number" }
             ],
             "events": []
           }
@@ -3989,6 +3912,72 @@
             "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "size",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The radio's label." }],
+          "events": [
+            {
+              "name": "sl-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "sl-focus",
+              "description": "Emitted when the control gains focus."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sl-focus",
+                "description": "Emitted when the control gains focus."
+              }
+            ]
+          }
+        },
         {
           "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.",
@@ -4055,88 +4044,22 @@
                 "type": "string"
               },
               {
-                "name": "background",
-                "description": "The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property.",
-                "type": "string"
-              },
-              {
-                "name": "radius",
-                "description": "The edge radius of each module. Must be between 0 and 0.5.",
-                "type": "number"
-              },
-              {
-                "name": "errorCorrection",
-                "description": "The level of error correction to use. [Learn more](https://www.qrcode.com/en/about/error_correction.html)",
-                "type": "'L' | 'M' | 'Q' | 'H'"
-              }
-            ],
-            "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "size",
-              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the radio.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The radio's label." }],
-          "events": [
-            {
-              "name": "sl-blur",
-              "description": "Emitted when the control loses focus."
-            },
-            {
-              "name": "sl-focus",
-              "description": "Emitted when the control gains focus."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "checked", "type": "boolean" },
-              {
-                "name": "value",
-                "description": "The radio's value. When selected, the radio group will receive this value.",
-                "type": "string"
-              },
-              {
-                "name": "size",
-                "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the radio.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "background",
+                "description": "The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property.",
+                "type": "string"
               },
               {
-                "name": "sl-focus",
-                "description": "Emitted when the control gains focus."
+                "name": "radius",
+                "description": "The edge radius of each module. Must be between 0 and 0.5.",
+                "type": "number"
+              },
+              {
+                "name": "errorCorrection",
+                "description": "The level of error correction to use. [Learn more](https://www.qrcode.com/en/about/error_correction.html)",
+                "type": "'L' | 'M' | 'Q' | 'H'"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -4363,6 +4286,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.",
@@ -4477,182 +4504,78 @@
               },
               {
                 "name": "helpText",
-                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the range.",
-                "type": "boolean"
-              },
-              {
-                "name": "min",
-                "description": "The minimum acceptable value of the range.",
-                "type": "number"
-              },
-              {
-                "name": "max",
-                "description": "The maximum acceptable value of the range.",
-                "type": "number"
-              },
-              {
-                "name": "step",
-                "description": "The interval at which the range will increase and decrease.",
-                "type": "number"
-              },
-              {
-                "name": "tooltip",
-                "description": "The preferred placement of the range's tooltip.",
-                "type": "'top' | 'bottom' | 'none'"
-              },
-              {
-                "name": "tooltipFormatter",
-                "description": "A function used to format the tooltip's value. The range's value is passed as the first and only argument. The\nfunction should return a string to display in the tooltip.",
-                "type": "(value: number) => string"
-              },
-              {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-                "type": "string"
-              },
-              {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "number"
-              },
-              {
-                "name": "validity",
-                "description": "Gets the validity state object"
-              },
-              {
-                "name": "validationMessage",
-                "description": "Gets the validation message"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-blur",
-                "description": "Emitted when the control loses focus."
-              },
-              {
-                "name": "sl-change",
-                "description": "Emitted when an alteration to the control's value is committed by the user."
-              },
-              {
-                "name": "sl-focus",
-                "description": "Emitted when the control gains focus."
-              },
-              {
-                "name": "sl-input",
-                "description": "Emitted when the control receives input."
-              },
-              {
-                "name": "sl-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sl-rating",
-          "description": "Ratings give users a way to quickly view and provide feedback.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the rating's value changes.\n- **sl-hover** - Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the rating.\n- **blur()** - Removes focus from the rating.\n\n### **CSS Properties:**\n - **--symbol-color** - The inactive color for symbols. _(default: undefined)_\n- **--symbol-color-active** - The active color for symbols. _(default: undefined)_\n- **--symbol-size** - The size of symbols. _(default: undefined)_\n- **--symbol-spacing** - The spacing to use around symbols. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "A label that describes the rating to assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current rating.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "max",
-              "description": "The highest rating to show.",
-              "value": { "type": "number", "default": "5" }
-            },
-            {
-              "name": "precision",
-              "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
-              "value": { "type": "number", "default": "1" }
-            },
-            {
-              "name": "readonly",
-              "description": "Makes the rating readonly.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the rating.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "getSymbol",
-              "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<sl-icon>` elements.",
-              "value": { "type": "(value: number) => string" }
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-change",
-              "description": "Emitted when the rating's value changes."
-            },
-            {
-              "name": "sl-hover",
-              "type": "{ phase: 'start' | 'move' | 'end', value: number }",
-              "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "rating", "type": "HTMLElement" },
-              {
-                "name": "label",
-                "description": "A label that describes the rating to assistive devices.",
+                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
                 "type": "string"
               },
               {
-                "name": "value",
-                "description": "The current rating.",
+                "name": "disabled",
+                "description": "Disables the range.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "The minimum acceptable value of the range.",
                 "type": "number"
               },
               {
                 "name": "max",
-                "description": "The highest rating to show.",
+                "description": "The maximum acceptable value of the range.",
                 "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`.",
+                "name": "step",
+                "description": "The interval at which the range will increase and decrease.",
                 "type": "number"
               },
               {
-                "name": "readonly",
-                "description": "Makes the rating readonly.",
-                "type": "boolean"
+                "name": "tooltip",
+                "description": "The preferred placement of the range's tooltip.",
+                "type": "'top' | 'bottom' | 'none'"
               },
               {
-                "name": "disabled",
-                "description": "Disables the rating.",
-                "type": "boolean"
+                "name": "tooltipFormatter",
+                "description": "A function used to format the tooltip's value. The range's value is passed as the first and only argument. The\nfunction should return a string to display in the tooltip.",
+                "type": "(value: number) => string"
               },
               {
-                "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"
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "number"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
               }
             ],
             "events": [
+              {
+                "name": "sl-blur",
+                "description": "Emitted when the control loses focus."
+              },
               {
                 "name": "sl-change",
-                "description": "Emitted when the rating's value changes."
+                "description": "Emitted when an alteration to the control's value is committed by the user."
               },
               {
-                "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-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sl-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "sl-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
@@ -5709,8 +5632,35 @@
             },
             {
               "name": "pagination",
+              "value": { "type": "TableProps<TData>['pagination'] | undefined" }
+            },
+            {
+              "name": "expandProps",
+              "value": {
+                "type": "TableProps<TData>['expandProps'] | undefined"
+              }
+            },
+            {
+              "name": "enableColumnResizing",
+              "value": {
+                "type": "TableProps<TData>['enableColumnResizing']",
+                "default": "false"
+              }
+            },
+            {
+              "name": "onHeaderRow",
+              "value": {
+                "type": "TableProps<TData>['onHeaderRow'] | undefined"
+              }
+            },
+            {
+              "name": "onRow",
+              "value": { "type": "TableProps<TData>['onRow'] | undefined" }
+            },
+            {
+              "name": "onColumnResize",
               "value": {
-                "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"
+                "type": "TableProps<TData>['onColumnResize'] | undefined"
               }
             }
           ],
@@ -5737,12 +5687,35 @@
               },
               {
                 "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"
+                "type": "TableProps<TData>['pagination'] | undefined"
+              },
+              {
+                "name": "expandProps",
+                "type": "TableProps<TData>['expandProps'] | undefined"
+              },
+              {
+                "name": "enableColumnResizing",
+                "type": "TableProps<TData>['enableColumnResizing']"
+              },
+              {
+                "name": "onHeaderRow",
+                "type": "TableProps<TData>['onHeaderRow'] | undefined"
+              },
+              {
+                "name": "onRow",
+                "type": "TableProps<TData>['onRow'] | undefined"
+              },
+              {
+                "name": "onColumnResize",
+                "type": "TableProps<TData>['onColumnResize'] | undefined"
               },
               { "name": "rowSelectedMap", "type": "RowSelectionState" },
+              { "name": "expandedMap", "type": "Record<string, boolean>" },
               { "name": "sorting", "type": "SortingState" },
               { "name": "columnFilters", "type": "ColumnFiltersState" },
               { "name": "tableWidth", "type": "number" },
+              { "name": "columnSizing", "type": "Record<string, number>" },
+              { "name": "pageIndex", "type": "number" },
               { "name": "adapter", "type": "TableAdapter" },
               { "name": "handleBodyScroll" },
               { "name": "handleBodyScrollLeft" },
@@ -5750,82 +5723,13 @@
               { "name": "syncTableWidth" },
               { "name": "setScrollPositionClassName" },
               { "name": "generateCustomCellSlot" },
+              { "name": "generateCustomRowSlot" },
               { "name": "handleFilterDropdownChange" },
               { "name": "handlePaginationChange" }
             ],
             "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.",
@@ -6141,62 +6045,84 @@
           }
         },
         {
-          "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.",
+          "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": "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": "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": "hoist",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "filled",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "pill",
+              "description": "Draws a pill-style tag with rounded edges.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "help-text",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "form", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "required",
+              "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.",
+          "doc-url": "",
+          "attributes": [
             {
               "name": "format",
               "value": { "type": "string", "default": "'HH:mm:ss'" }
-            },
-            { "name": "autofocus", "value": { "type": "boolean" } }
+            }
           ],
           "slots": [
             {
@@ -6244,27 +6170,8 @@
           ],
           "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" }
+              { "name": "format", "type": "string" }
             ],
             "events": [
               {