@kdcloudjs/shoelace 1.0.14 → 1.0.15

package/dist/custom-elements.json

@@ -517,6 +517,207 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatar/avatar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlAvatar",
+          "cssProperties": [
+            {
+              "description": "The size of the avatar.",
+              "name": "--size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the avatar's icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The container that wraps the avatar's initials.",
+              "name": "initials"
+            },
+            {
+              "description": "The avatar image. Only shown when the `image` attribute is set.",
+              "name": "image"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "hasError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "attribute": "image"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "attribute": "initials"
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "attribute": "shape",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleImageChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleImageLoadError",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.",
+              "name": "sl-error",
+              "reactName": "onSlError",
+              "eventName": "SlErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "fieldName": "image"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "fieldName": "label"
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "fieldName": "initials"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "fieldName": "shape"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Avatars are used to represent a person or object.",
+          "tagNameWithoutPrefix": "avatar",
+          "tagName": "sl-avatar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://shoelace.style/components/avatar\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
+          "documentation": "https://shoelace.style/components/avatar",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlAvatar",
+            "module": "components/avatar/avatar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.js",
@@ -873,253 +1074,52 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.js",
+      "path": "components/badge/badge.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlAvatar",
-          "cssProperties": [
-            {
-              "description": "The size of the avatar.",
-              "name": "--size"
-            }
-          ],
+          "name": "SlBadge",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The container that wraps the avatar's icon.",
-              "name": "icon"
-            },
-            {
-              "description": "The container that wraps the avatar's initials.",
-              "name": "initials"
-            },
-            {
-              "description": "The avatar image. Only shown when the `image` attribute is set.",
-              "name": "image"
             }
           ],
           "slots": [
             {
-              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`.",
-              "name": "icon"
+              "description": "The badge's content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "variant",
               "type": {
-                "text": "object"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasError",
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "image",
+              "name": "pulse",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "attribute": "image"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "attribute": "initials"
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "attribute": "loading"
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "attribute": "shape",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleImageChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleImageLoadError",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.",
-              "name": "sl-error",
-              "reactName": "onSlError",
-              "eventName": "SlErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "fieldName": "image"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "fieldName": "label"
-            },
-            {
-              "name": "initials",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "fieldName": "initials"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "'eager' | 'lazy'"
-              },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "fieldName": "loading"
-            },
-            {
-              "name": "shape",
-              "type": {
-                "text": "'circle' | 'square' | 'rounded'"
-              },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "fieldName": "shape"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Avatars are used to represent a person or object.",
-          "tagNameWithoutPrefix": "avatar",
-          "tagName": "sl-avatar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://shoelace.style/components/avatar\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */",
-          "documentation": "https://shoelace.style/components/avatar",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlAvatar",
-            "module": "components/avatar/avatar.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlBadge",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
+                "text": "boolean"
               },
               "default": "false",
               "description": "Makes the badge pulsate to draw attention.",
@@ -1469,70 +1469,176 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button/button.js",
+      "path": "components/calendar/calendar.js",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/card/card.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlButton",
+          "name": "SlCard",
+          "cssProperties": [
+            {
+              "description": "The card's border color, including borders that occur inside the card.",
+              "name": "--border-color"
+            },
+            {
+              "description": "The border radius for the card's edges.",
+              "name": "--border-radius"
+            },
+            {
+              "description": "The width of the card's borders.",
+              "name": "--border-width"
+            },
+            {
+              "description": "The padding to use for the card's sections.",
+              "name": "--padding"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The button's label.",
-              "name": "label"
+              "description": "The container that wraps the card's image.",
+              "name": "image"
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "description": "The container that wraps the card's header.",
+              "name": "header"
             },
             {
-              "description": "The button's caret icon, an `<sl-icon>` element.",
-              "name": "caret"
+              "description": "The container that wraps the card's main content.",
+              "name": "body"
             },
             {
-              "description": "The spinner that shows when the button is in the loading state.",
-              "name": "spinner"
+              "description": "The container that wraps the card's footer.",
+              "name": "footer"
             }
           ],
           "slots": [
             {
-              "description": "The button's label.",
+              "description": "The card's main content.",
               "name": ""
             },
             {
-              "description": "A presentational prefix icon or similar element.",
-              "name": "prefix"
+              "description": "An optional header for the card.",
+              "name": "header"
             },
             {
-              "description": "A presentational suffix icon or similar element.",
-              "name": "suffix"
+              "description": "An optional footer for the card.",
+              "name": "footer"
+            },
+            {
+              "description": "An optional image to render at the start of the card.",
+              "name": "image"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }"
-            },
-            {
-              "kind": "field",
-              "name": "formControlController",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, { assumeInteractionOn: ['click'] })"
-            },
-            {
+              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Cards can be used to group related subjects in a container.",
+          "tagNameWithoutPrefix": "card",
+          "tagName": "sl-card",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://shoelace.style/components/card\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */",
+          "documentation": "https://shoelace.style/components/card",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlCard",
+            "module": "components/card/card.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/button/button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlButton",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The button's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The button's caret icon, an `<sl-icon>` element.",
+              "name": "caret"
+            },
+            {
+              "description": "The spinner that shows when the button is in the loading state.",
+              "name": "spinner"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button's label.",
+              "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { assumeInteractionOn: ['click'] })"
+            },
+            {
               "kind": "field",
               "name": "hasSlotController",
               "privacy": "private",
@@ -2281,106 +2387,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/card/card.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlCard",
-          "cssProperties": [
-            {
-              "description": "The card's border color, including borders that occur inside the card.",
-              "name": "--border-color"
-            },
-            {
-              "description": "The border radius for the card's edges.",
-              "name": "--border-radius"
-            },
-            {
-              "description": "The width of the card's borders.",
-              "name": "--border-width"
-            },
-            {
-              "description": "The padding to use for the card's sections.",
-              "name": "--padding"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The container that wraps the card's image.",
-              "name": "image"
-            },
-            {
-              "description": "The container that wraps the card's header.",
-              "name": "header"
-            },
-            {
-              "description": "The container that wraps the card's main content.",
-              "name": "body"
-            },
-            {
-              "description": "The container that wraps the card's footer.",
-              "name": "footer"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The card's main content.",
-              "name": ""
-            },
-            {
-              "description": "An optional header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "An optional footer for the card.",
-              "name": "footer"
-            },
-            {
-              "description": "An optional image to render at the start of the card.",
-              "name": "image"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'footer', 'header', 'image')"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Cards can be used to group related subjects in a container.",
-          "tagNameWithoutPrefix": "card",
-          "tagName": "sl-card",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://shoelace.style/components/card\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */",
-          "documentation": "https://shoelace.style/components/card",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlCard",
-            "module": "components/card/card.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/carousel/carousel.js",
@@ -2965,12 +2971,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/calendar/calendar.js",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "components/carousel-item/carousel-item.js",
@@ -7235,12 +7235,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/format-date/format-date.js",
+      "path": "components/format-number/format-number.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlFormatDate",
+          "name": "SlFormatNumber",
           "members": [
             {
               "kind": "field",
@@ -7251,58 +7251,282 @@
             },
             {
               "kind": "field",
-              "name": "date",
+              "name": "value",
               "type": {
-                "text": "Date | string"
+                "text": "number"
               },
-              "default": "new Date()",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "attribute": "date"
+              "default": "0",
+              "description": "The number to format.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "weekday",
+              "name": "type",
               "type": {
-                "text": "'narrow' | 'short' | 'long'"
+                "text": "'currency' | 'decimal' | 'percent'"
               },
-              "description": "The format for displaying the weekday.",
-              "attribute": "weekday"
+              "default": "'decimal'",
+              "description": "The formatting style to use.",
+              "attribute": "type"
             },
             {
               "kind": "field",
-              "name": "era",
+              "name": "noGrouping",
               "type": {
-                "text": "'narrow' | 'short' | 'long'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the era.",
-              "attribute": "era"
+              "default": "false",
+              "description": "Turns off grouping separators.",
+              "attribute": "no-grouping"
             },
             {
               "kind": "field",
-              "name": "year",
+              "name": "currency",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the year.",
-              "attribute": "year"
+              "default": "'USD'",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "attribute": "currency"
             },
             {
               "kind": "field",
-              "name": "month",
+              "name": "currencyDisplay",
               "type": {
-                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
               },
-              "description": "The format for displaying the month.",
-              "attribute": "month"
+              "default": "'symbol'",
+              "description": "How to display the currency.",
+              "attribute": "currency-display"
             },
             {
               "kind": "field",
-              "name": "day",
+              "name": "minimumIntegerDigits",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "number"
               },
-              "description": "The format for displaying the day.",
-              "attribute": "day"
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "attribute": "minimum-integer-digits"
+            },
+            {
+              "kind": "field",
+              "name": "minimumFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "attribute": "minimum-fraction-digits"
+            },
+            {
+              "kind": "field",
+              "name": "maximumFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "attribute": "maximum-fraction-digits"
+            },
+            {
+              "kind": "field",
+              "name": "minimumSignificantDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "attribute": "minimum-significant-digits"
+            },
+            {
+              "kind": "field",
+              "name": "maximumSignificantDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+              "attribute": "maximum-significant-digits"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number to format.",
+              "fieldName": "value"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "'currency' | 'decimal' | 'percent'"
+              },
+              "default": "'decimal'",
+              "description": "The formatting style to use.",
+              "fieldName": "type"
+            },
+            {
+              "name": "no-grouping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Turns off grouping separators.",
+              "fieldName": "noGrouping"
+            },
+            {
+              "name": "currency",
+              "type": {
+                "text": "string"
+              },
+              "default": "'USD'",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "fieldName": "currency"
+            },
+            {
+              "name": "currency-display",
+              "type": {
+                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+              },
+              "default": "'symbol'",
+              "description": "How to display the currency.",
+              "fieldName": "currencyDisplay"
+            },
+            {
+              "name": "minimum-integer-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "fieldName": "minimumIntegerDigits"
+            },
+            {
+              "name": "minimum-fraction-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "fieldName": "minimumFractionDigits"
+            },
+            {
+              "name": "maximum-fraction-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "fieldName": "maximumFractionDigits"
+            },
+            {
+              "name": "minimum-significant-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "fieldName": "minimumSignificantDigits"
+            },
+            {
+              "name": "maximum-significant-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+              "fieldName": "maximumSignificantDigits"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Formats a number using the specified locale and options.",
+          "tagNameWithoutPrefix": "format-number",
+          "tagName": "sl-format-number",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Formats a number using the specified locale and options.\n * @documentation https://shoelace.style/components/format-number\n * @status stable\n * @since 2.0\n */",
+          "documentation": "https://shoelace.style/components/format-number",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlFormatNumber",
+            "module": "components/format-number/format-number.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/format-date/format-date.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlFormatDate",
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "Date | string"
+              },
+              "default": "new Date()",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "attribute": "date"
+            },
+            {
+              "kind": "field",
+              "name": "weekday",
+              "type": {
+                "text": "'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the weekday.",
+              "attribute": "weekday"
+            },
+            {
+              "kind": "field",
+              "name": "era",
+              "type": {
+                "text": "'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the era.",
+              "attribute": "era"
+            },
+            {
+              "kind": "field",
+              "name": "year",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the year.",
+              "attribute": "year"
+            },
+            {
+              "kind": "field",
+              "name": "month",
+              "type": {
+                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the month.",
+              "attribute": "month"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the day.",
+              "attribute": "day"
             },
             {
               "kind": "field",
@@ -7487,213 +7711,186 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/format-number/format-number.js",
+      "path": "components/icon/icon.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlFormatNumber",
-          "members": [
+          "name": "SlIcon",
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "description": "The internal SVG element.",
+              "name": "svg"
             },
+            {
+              "description": "The <use> element generated when using `spriteSheet: true`",
+              "name": "use"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "initialRender",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The number to format.",
-              "attribute": "value"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "'currency' | 'decimal' | 'percent'"
-              },
-              "default": "'decimal'",
-              "description": "The formatting style to use.",
-              "attribute": "type"
+              "kind": "method",
+              "name": "resolveIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<SVGResult>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "library",
+                  "optional": true,
+                  "type": {
+                    "text": "IconLibrary"
+                  }
+                }
+              ],
+              "description": "Given a URL, this function returns the resulting SVG element or an appropriate error symbol."
             },
             {
               "kind": "field",
-              "name": "noGrouping",
+              "name": "svg",
               "type": {
-                "text": "boolean"
+                "text": "SVGElement | HTMLTemplateResult | null"
               },
-              "default": "false",
-              "description": "Turns off grouping separators.",
-              "attribute": "no-grouping"
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "currency",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'USD'",
-              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
-              "attribute": "currency"
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "currencyDisplay",
+              "name": "src",
               "type": {
-                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+                "text": "string | undefined"
               },
-              "default": "'symbol'",
-              "description": "How to display the currency.",
-              "attribute": "currency-display"
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "minimumIntegerDigits",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
-              "attribute": "minimum-integer-digits"
+              "default": "''",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "minimumFractionDigits",
+              "name": "library",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
-              "attribute": "minimum-fraction-digits"
+              "default": "'default'",
+              "description": "The name of a registered custom icon library.",
+              "attribute": "library",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "maximumFractionDigits",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
-              "attribute": "maximum-fraction-digits"
+              "kind": "method",
+              "name": "getIconSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "IconSource"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "minimumSignificantDigits",
-              "type": {
-                "text": "number"
-              },
-              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
-              "attribute": "minimum-significant-digits"
+              "kind": "method",
+              "name": "handleLabelChange"
             },
             {
-              "kind": "field",
-              "name": "maximumSignificantDigits",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
-              "attribute": "maximum-significant-digits"
+              "kind": "method",
+              "name": "setIcon"
             }
           ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number to format.",
-              "fieldName": "value"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "'currency' | 'decimal' | 'percent'"
-              },
-              "default": "'decimal'",
-              "description": "The formatting style to use.",
-              "fieldName": "type"
-            },
-            {
-              "name": "no-grouping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Turns off grouping separators.",
-              "fieldName": "noGrouping"
-            },
-            {
-              "name": "currency",
-              "type": {
-                "text": "string"
-              },
-              "default": "'USD'",
-              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
-              "fieldName": "currency"
-            },
+          "events": [
             {
-              "name": "currency-display",
-              "type": {
-                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
-              },
-              "default": "'symbol'",
-              "description": "How to display the currency.",
-              "fieldName": "currencyDisplay"
+              "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.",
+              "name": "sl-load",
+              "reactName": "onSlLoad",
+              "eventName": "SlLoadEvent"
             },
             {
-              "name": "minimum-integer-digits",
-              "type": {
-                "text": "number"
-              },
-              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
-              "fieldName": "minimumIntegerDigits"
-            },
+              "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.",
+              "name": "sl-error",
+              "reactName": "onSlError",
+              "eventName": "SlErrorEvent"
+            }
+          ],
+          "attributes": [
             {
-              "name": "minimum-fraction-digits",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
-              "fieldName": "minimumFractionDigits"
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "fieldName": "name"
             },
             {
-              "name": "maximum-fraction-digits",
+              "name": "src",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
-              "fieldName": "maximumFractionDigits"
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "fieldName": "src"
             },
             {
-              "name": "minimum-significant-digits",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
-              "fieldName": "minimumSignificantDigits"
+              "default": "''",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "fieldName": "label"
             },
             {
-              "name": "maximum-significant-digits",
+              "name": "library",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
-              "fieldName": "maximumSignificantDigits"
+              "default": "'default'",
+              "description": "The name of a registered custom icon library.",
+              "fieldName": "library"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Formats a number using the specified locale and options.",
-          "tagNameWithoutPrefix": "format-number",
-          "tagName": "sl-format-number",
+          "summary": "Icons are symbols that can be used to represent various options within an application.",
+          "tagNameWithoutPrefix": "icon",
+          "tagName": "sl-icon",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Formats a number using the specified locale and options.\n * @documentation https://shoelace.style/components/format-number\n * @status stable\n * @since 2.0\n */",
-          "documentation": "https://shoelace.style/components/format-number",
+          "jsDoc": "/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://shoelace.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event sl-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event sl-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */",
+          "documentation": "https://shoelace.style/components/icon",
           "status": "stable",
           "since": "2.0"
         }
@@ -7703,8 +7900,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlFormatNumber",
-            "module": "components/format-number/format-number.js"
+            "name": "SlIcon",
+            "module": "components/icon/icon.js"
           }
         }
       ]
@@ -7984,223 +8181,26 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/icon/icon.js",
+      "path": "components/image-comparer/image-comparer.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlIcon",
-          "cssParts": [
+          "name": "SlImageComparer",
+          "cssProperties": [
             {
-              "description": "The internal SVG element.",
-              "name": "svg"
+              "description": "The width of the dividing line.",
+              "name": "--divider-width"
             },
             {
-              "description": "The <use> element generated when using `spriteSheet: true`",
-              "name": "use"
+              "description": "The size of the compare handle.",
+              "name": "--handle-size"
             }
           ],
-          "members": [
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "initialRender",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "resolveIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<SVGResult>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "library",
-                  "optional": true,
-                  "type": {
-                    "text": "IconLibrary"
-                  }
-                }
-              ],
-              "description": "Given a URL, this function returns the resulting SVG element or an appropriate error symbol."
-            },
-            {
-              "kind": "field",
-              "name": "svg",
-              "type": {
-                "text": "SVGElement | HTMLTemplateResult | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "library",
-              "type": {
-                "text": "string"
-              },
-              "default": "'default'",
-              "description": "The name of a registered custom icon library.",
-              "attribute": "library",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getIconSource",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "IconSource"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleLabelChange"
-            },
-            {
-              "kind": "method",
-              "name": "setIcon"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.",
-              "name": "sl-load",
-              "reactName": "onSlLoad",
-              "eventName": "SlLoadEvent"
-            },
-            {
-              "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.",
-              "name": "sl-error",
-              "reactName": "onSlError",
-              "eventName": "SlErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "fieldName": "name"
-            },
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "fieldName": "src"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "fieldName": "label"
-            },
-            {
-              "name": "library",
-              "type": {
-                "text": "string"
-              },
-              "default": "'default'",
-              "description": "The name of a registered custom icon library.",
-              "fieldName": "library"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Icons are symbols that can be used to represent various options within an application.",
-          "tagNameWithoutPrefix": "icon",
-          "tagName": "sl-icon",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://shoelace.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event sl-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event sl-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */",
-          "documentation": "https://shoelace.style/components/icon",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlIcon",
-            "module": "components/icon/icon.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/image-comparer/image-comparer.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlImageComparer",
-          "cssProperties": [
-            {
-              "description": "The width of the dividing line.",
-              "name": "--divider-width"
-            },
-            {
-              "description": "The size of the compare handle.",
-              "name": "--handle-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
               "description": "The container that wraps the before image.",
@@ -10141,79 +10141,180 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/mutation-observer/mutation-observer.js",
+      "path": "components/nav-group/nav-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlMutationObserver",
-          "slots": [
+          "name": "SlNavGroup",
+          "cssParts": [
             {
-              "description": "The content to watch for mutations.",
-              "name": ""
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The nav group title.",
+              "name": "title"
+            },
+            {
+              "description": "The nav group body.",
+              "name": "body"
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "mutationObserver",
-              "type": {
-                "text": "MutationObserver"
-              },
-              "privacy": "private"
+              "description": "The nav items within the group.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "attr",
-              "type": {
-                "text": "string"
-              },
-              "description": "Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.\n`attr=\"class id title\"`. To watch all attributes, use `*`.",
-              "attribute": "attr",
-              "reflects": true
-            },
+              "description": "The nav group's title.",
+              "name": "title"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "attrOldValue",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the attribute's previous value should be recorded when monitoring changes.",
-              "attribute": "attr-old-value",
+              "description": "Draws the nav group in an active (selected) state.",
+              "attribute": "active",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "charData",
+              "name": "mode",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "false",
-              "description": "Watches for changes to the character data contained within the node.",
-              "attribute": "char-data",
+              "default": "'vertical'",
+              "description": "The mode of navigation.",
+              "attribute": "mode",
               "reflects": true
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "charDataOldValue",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the previous value of the node's text should be recorded.",
-              "attribute": "char-data-old-value",
-              "reflects": true
+              "description": "Draws the nav group in an active (selected) state.",
+              "fieldName": "active"
             },
             {
-              "kind": "field",
-              "name": "childList",
+              "name": "mode",
               "type": {
-                "text": "boolean"
+                "text": "'horizontal' | 'vertical'"
               },
-              "default": "false",
-              "description": "Watches for the addition or removal of new child nodes.",
-              "attribute": "child-list",
+              "default": "'vertical'",
+              "description": "The mode of navigation.",
+              "fieldName": "mode"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Nav groups are used to group related nav items.",
+          "tagNameWithoutPrefix": "nav-group",
+          "tagName": "sl-nav-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Nav groups are used to group related nav items.\n * @documentation https://shoelace.style/components/nav-group\n * @status experimental\n * @since 2.16\n *\n * @slot - The nav items within the group.\n * @slot title - The nav group's title.\n *\n * @csspart base - The component's base wrapper.\n * @csspart title - The nav group title.\n * @csspart body - The nav group body.\n */",
+          "documentation": "https://shoelace.style/components/nav-group",
+          "status": "experimental",
+          "since": "2.16"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlNavGroup",
+            "module": "components/nav-group/nav-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/mutation-observer/mutation-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlMutationObserver",
+          "slots": [
+            {
+              "description": "The content to watch for mutations.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "mutationObserver",
+              "type": {
+                "text": "MutationObserver"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "attr",
+              "type": {
+                "text": "string"
+              },
+              "description": "Watches for changes to attributes. To watch only specific attributes, separate them by a space, e.g.\n`attr=\"class id title\"`. To watch all attributes, use `*`.",
+              "attribute": "attr",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "attrOldValue",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the attribute's previous value should be recorded when monitoring changes.",
+              "attribute": "attr-old-value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "charData",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Watches for changes to the character data contained within the node.",
+              "attribute": "char-data",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "charDataOldValue",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the previous value of the node's text should be recorded.",
+              "attribute": "char-data-old-value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "childList",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Watches for the addition or removal of new child nodes.",
+              "attribute": "child-list",
               "reflects": true
             },
             {
@@ -10342,107 +10443,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nav-group/nav-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlNavGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The nav group title.",
-              "name": "title"
-            },
-            {
-              "description": "The nav group body.",
-              "name": "body"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The nav items within the group.",
-              "name": ""
-            },
-            {
-              "description": "The nav group's title.",
-              "name": "title"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the nav group in an active (selected) state.",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The mode of navigation.",
-              "attribute": "mode",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the nav group in an active (selected) state.",
-              "fieldName": "active"
-            },
-            {
-              "name": "mode",
-              "type": {
-                "text": "'horizontal' | 'vertical'"
-              },
-              "default": "'vertical'",
-              "description": "The mode of navigation.",
-              "fieldName": "mode"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Nav groups are used to group related nav items.",
-          "tagNameWithoutPrefix": "nav-group",
-          "tagName": "sl-nav-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Nav groups are used to group related nav items.\n * @documentation https://shoelace.style/components/nav-group\n * @status experimental\n * @since 2.16\n *\n * @slot - The nav items within the group.\n * @slot title - The nav group's title.\n *\n * @csspart base - The component's base wrapper.\n * @csspart title - The nav group title.\n * @csspart body - The nav group body.\n */",
-          "documentation": "https://shoelace.style/components/nav-group",
-          "status": "experimental",
-          "since": "2.16"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlNavGroup",
-            "module": "components/nav-group/nav-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/nav-item/nav-item.js",
@@ -12314,46 +12314,239 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/qr-code/qr-code.js",
+      "path": "components/radio/radio.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlQrCode",
+          "name": "SlRadio",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The circular container that wraps the radio's checked state.",
+              "name": "control"
+            },
+            {
+              "description": "The radio control when the radio is checked.",
+              "name": "control--checked"
+            },
+            {
+              "description": "The checked icon, an `<sl-icon>` element.",
+              "name": "checked-icon"
+            },
+            {
+              "description": "The container that wraps the radio's label.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The radio's label.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "canvas",
+              "name": "dependencies",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The QR code's value.",
-              "attribute": "value"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "hasFocus",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The label for assistive devices to announce. If unspecified, the value will be used instead.",
-              "attribute": "label"
-            },
+              "privacy": "protected",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "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.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setInitialAttributes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "sl-blur",
+              "reactName": "onSlBlur",
+              "eventName": "SlBlurEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "sl-focus",
+              "reactName": "onSlFocus",
+              "eventName": "SlFocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "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.",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Radios allow the user to select a single option from a group.",
+          "tagNameWithoutPrefix": "radio",
+          "tagName": "sl-radio",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://shoelace.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @slot - The radio's label.\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<sl-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
+          "documentation": "https://shoelace.style/components/radio",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlRadio",
+            "module": "components/radio/radio.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/qr-code/qr-code.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlQrCode",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "canvas",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The QR code's value.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for assistive devices to announce. If unspecified, the value will be used instead.",
+              "attribute": "label"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -12501,57 +12694,73 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio/radio.js",
+      "path": "components/radio-button/radio-button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlRadio",
+          "name": "SlRadioButton",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The circular container that wraps the radio's checked state.",
-              "name": "control"
+              "description": "The internal `<button>` element.",
+              "name": "button"
             },
             {
-              "description": "The radio control when the radio is checked.",
-              "name": "control--checked"
+              "description": "The internal button element when the radio button is checked.",
+              "name": "button--checked"
             },
             {
-              "description": "The checked icon, an `<sl-icon>` element.",
-              "name": "checked-icon"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
-              "description": "The container that wraps the radio's label.",
+              "description": "The container that wraps the radio button's label.",
               "name": "label"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
             }
           ],
           "slots": [
             {
-              "description": "The radio's label.",
+              "description": "The radio button's label.",
               "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "input",
               "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "hiddenInput",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
@@ -12571,6 +12780,17 @@
               "description": "The radio's value. When selected, the radio group will receive this value.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the radio button.",
+              "attribute": "disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -12578,248 +12798,28 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "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.",
+              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio.",
-              "attribute": "disabled",
+              "description": "Draws a pill-style radio button with rounded edges.",
+              "attribute": "pill",
               "reflects": true
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "handleBlur",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setInitialAttributes",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleCheckedChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the control loses focus.",
-              "name": "sl-blur",
-              "reactName": "onSlBlur",
-              "eventName": "SlBlurEvent"
-            },
-            {
-              "description": "Emitted when the control gains focus.",
-              "name": "sl-focus",
-              "reactName": "onSlFocus",
-              "eventName": "SlFocusEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "fieldName": "value"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "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.",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the radio.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Radios allow the user to select a single option from a group.",
-          "tagNameWithoutPrefix": "radio",
-          "tagName": "sl-radio",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Radios allow the user to select a single option from a group.\n * @documentation https://shoelace.style/components/radio\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @slot - The radio's label.\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-focus - Emitted when the control gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The circular container that wraps the radio's checked state.\n * @csspart control--checked - The radio control when the radio is checked.\n * @csspart checked-icon - The checked icon, an `<sl-icon>` element.\n * @csspart label - The container that wraps the radio's label.\n */",
-          "documentation": "https://shoelace.style/components/radio",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlRadio",
-            "module": "components/radio/radio.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/radio-button/radio-button.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlRadioButton",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The internal `<button>` element.",
-              "name": "button"
-            },
-            {
-              "description": "The internal button element when the radio button is checked.",
-              "name": "button--checked"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The container that wraps the radio button's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The radio button's label.",
-              "name": ""
-            },
-            {
-              "description": "A presentational prefix icon or similar element.",
-              "name": "prefix"
-            },
-            {
-              "description": "A presentational suffix icon or similar element.",
-              "name": "suffix"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hiddenInput",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The radio's value. When selected, the radio group will receive this value.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the radio button.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style radio button with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
+              "kind": "method",
               "name": "handleClick",
               "privacy": "private",
               "parameters": [
@@ -15881,69 +15881,55 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/skeleton/skeleton.js",
+      "path": "components/spinner/spinner.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlSkeleton",
+          "name": "SlSpinner",
           "cssProperties": [
             {
-              "description": "The skeleton's border radius.",
-              "name": "--border-radius"
+              "description": "The width of the track.",
+              "name": "--track-width"
             },
             {
-              "description": "The color of the skeleton.",
-              "name": "--color"
+              "description": "The color of the track.",
+              "name": "--track-color"
             },
             {
-              "description": "The sheen color when the skeleton is in its loading state.",
-              "name": "--sheen-color"
+              "description": "The color of the spinner's indicator.",
+              "name": "--indicator-color"
+            },
+            {
+              "description": "The time it takes for the spinner to complete one animation cycle.",
+              "name": "--speed"
             }
           ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The skeleton's indicator which is responsible for its color and animation.",
-              "name": "indicator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "effect",
-              "type": {
-                "text": "'pulse' | 'sheen' | 'none'"
-              },
-              "default": "'none'",
-              "description": "Determines which effect the skeleton will use.",
-              "attribute": "effect"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "effect",
-              "type": {
-                "text": "'pulse' | 'sheen' | 'none'"
-              },
-              "default": "'none'",
-              "description": "Determines which effect the skeleton will use.",
-              "fieldName": "effect"
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Skeletons are used to provide a visual representation of where content will eventually be drawn.",
-          "tagNameWithoutPrefix": "skeleton",
-          "tagName": "sl-skeleton",
+          "summary": "Spinners are used to show the progress of an indeterminate operation.",
+          "tagNameWithoutPrefix": "spinner",
+          "tagName": "sl-spinner",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.\n * @documentation https://shoelace.style/components/skeleton\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.\n *\n * @cssproperty --border-radius - The skeleton's border radius.\n * @cssproperty --color - The color of the skeleton.\n * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.\n */",
-          "documentation": "https://shoelace.style/components/skeleton",
+          "jsDoc": "/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://shoelace.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
+          "documentation": "https://shoelace.style/components/spinner",
           "status": "stable",
           "since": "2.0"
         }
@@ -15953,63 +15939,77 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlSkeleton",
-            "module": "components/skeleton/skeleton.js"
+            "name": "SlSpinner",
+            "module": "components/spinner/spinner.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/spinner/spinner.js",
+      "path": "components/skeleton/skeleton.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlSpinner",
+          "name": "SlSkeleton",
           "cssProperties": [
             {
-              "description": "The width of the track.",
-              "name": "--track-width"
-            },
-            {
-              "description": "The color of the track.",
-              "name": "--track-color"
+              "description": "The skeleton's border radius.",
+              "name": "--border-radius"
             },
             {
-              "description": "The color of the spinner's indicator.",
-              "name": "--indicator-color"
+              "description": "The color of the skeleton.",
+              "name": "--color"
             },
             {
-              "description": "The time it takes for the spinner to complete one animation cycle.",
-              "name": "--speed"
+              "description": "The sheen color when the skeleton is in its loading state.",
+              "name": "--sheen-color"
             }
           ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The skeleton's indicator which is responsible for its color and animation.",
+              "name": "indicator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "effect",
+              "type": {
+                "text": "'pulse' | 'sheen' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Determines which effect the skeleton will use.",
+              "attribute": "effect"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "effect",
+              "type": {
+                "text": "'pulse' | 'sheen' | 'none'"
+              },
+              "default": "'none'",
+              "description": "Determines which effect the skeleton will use.",
+              "fieldName": "effect"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Spinners are used to show the progress of an indeterminate operation.",
-          "tagNameWithoutPrefix": "spinner",
-          "tagName": "sl-spinner",
+          "summary": "Skeletons are used to provide a visual representation of where content will eventually be drawn.",
+          "tagNameWithoutPrefix": "skeleton",
+          "tagName": "sl-skeleton",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://shoelace.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */",
-          "documentation": "https://shoelace.style/components/spinner",
+          "jsDoc": "/**\n * @summary Skeletons are used to provide a visual representation of where content will eventually be drawn.\n * @documentation https://shoelace.style/components/skeleton\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.\n *\n * @cssproperty --border-radius - The skeleton's border radius.\n * @cssproperty --color - The color of the skeleton.\n * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.\n */",
+          "documentation": "https://shoelace.style/components/skeleton",
           "status": "stable",
           "since": "2.0"
         }
@@ -16019,288 +16019,243 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlSpinner",
-            "module": "components/spinner/spinner.js"
+            "name": "SlSkeleton",
+            "module": "components/skeleton/skeleton.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/split-panel/split-panel.js",
+      "path": "components/switch/switch.js",
       "declarations": [
-        {
-          "kind": "function",
-          "name": "SNAP_NONE",
-          "description": "A SnapFunction which performs no snapping."
-        },
         {
           "kind": "class",
           "description": "",
-          "name": "SlSplitPanel",
+          "name": "SlSwitch",
           "cssProperties": [
             {
-              "description": "The width of the visible divider.",
-              "name": "--divider-width",
-              "default": "4px"
-            },
-            {
-              "description": "The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging.",
-              "name": "--divider-hit-area",
-              "default": "12px"
+              "description": "The width of the switch.",
+              "name": "--width"
             },
             {
-              "description": "The minimum allowed size of the primary panel.",
-              "name": "--min",
-              "default": "0"
+              "description": "The height of the switch.",
+              "name": "--height"
             },
             {
-              "description": "The maximum allowed size of the primary panel.",
-              "name": "--max",
-              "default": "100%"
+              "description": "The size of the thumb.",
+              "name": "--thumb-size"
             }
           ],
           "cssParts": [
             {
-              "description": "The start panel.",
-              "name": "start"
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "description": "The end panel.",
-              "name": "end"
+              "description": "The control that houses the switch's thumb.",
+              "name": "control"
             },
             {
-              "description": "Targets both the start and end panels.",
-              "name": "panel"
+              "description": "The switch's thumb.",
+              "name": "thumb"
             },
             {
-              "description": "The divider that separates the start and end panels.",
-              "name": "divider"
+              "description": "The switch's label.",
+              "name": "label"
+            },
+            {
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             }
           ],
           "slots": [
             {
-              "description": "Content to place in the start panel.",
-              "name": "start"
-            },
-            {
-              "description": "Content to place in the end panel.",
-              "name": "end"
+              "description": "The switch's label.",
+              "name": ""
             },
             {
-              "description": "The divider. Useful for slotting in a custom icon that renders as a handle.",
-              "name": "divider"
+              "description": "Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "cachedPositionInPixels",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private"
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SlSwitch) => control.defaultChecked, setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked) })"
             },
             {
               "kind": "field",
-              "name": "isCollapsed",
-              "type": {
-                "text": "boolean"
-              },
+              "name": "hasSlotController",
               "privacy": "private",
-              "default": "false"
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text')"
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "positionBeforeCollapsing",
+              "name": "hasFocus",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
               "privacy": "private",
-              "default": "0"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "resizeObserver",
+              "name": "title",
               "type": {
-                "text": "ResizeObserver"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "divider",
+              "name": "value",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "description": "The current value of the switch, submitted as a name/value pair with form data.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "50",
-              "description": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size.",
-              "attribute": "position",
+              "default": "'medium'",
+              "description": "The switch's size.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "positionInPixels",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The current position of the divider from the primary panel's edge in pixels.",
-              "attribute": "position-in-pixels"
+              "default": "false",
+              "description": "Disables the switch.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "vertical",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
-              "attribute": "vertical",
+              "description": "Draws the switch in a checked state.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "defaultChecked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables resizing. Note that the position may still change as a result of resizing the host element.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "primary",
+              "name": "form",
               "type": {
-                "text": "'start' | 'end' | undefined"
+                "text": "string"
               },
-              "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
-              "attribute": "primary"
+              "default": "''",
+              "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.",
+              "attribute": "form",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "snapValue",
+              "name": "required",
               "type": {
-                "text": "string | SnapFunction"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "false",
+              "description": "Makes the switch a required field.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "snapFunction",
+              "name": "helpText",
               "type": {
-                "text": "SnapFunction"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "SNAP_NONE"
+              "default": "''",
+              "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
             },
             {
-              "kind": "method",
-              "name": "toSnapFunction",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "snap",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The snap string."
-                }
-              ],
-              "description": "Converts a string containing either a series of fixed/repeated snap points (e.g. \"repeat(20%)\", \"100px 200px 800px\", or \"10% 50% repeat(10px)\") into a SnapFunction. `SnapFunction`s take in a `SnapFunctionOpts` and return the position that the split panel should snap to."
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "snap",
-              "description": "Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,\nor a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`.",
-              "type": {
-                "text": "string | SnapFunction"
-              },
-              "attribute": "snap",
-              "reflects": true
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "snapThreshold",
-              "type": {
-                "text": "number"
-              },
-              "default": "12",
-              "description": "How close the divider must be to a snap point until snapping occurs.",
-              "attribute": "snap-threshold"
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "detectSize",
+              "name": "handleInput",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "percentageToPixels",
+              "name": "handleInvalid",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "pixelsToPercentage",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "handleClick",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -16317,64 +16272,136 @@
             },
             {
               "kind": "method",
-              "name": "handleResize",
-              "privacy": "private",
+              "name": "handleCheckedChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the switch."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
               "parameters": [
                 {
-                  "name": "entries",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "ResizeObserverEntry[]"
+                    "text": "FocusOptions"
                   }
                 }
-              ]
+              ],
+              "description": "Sets focus on the switch."
             },
             {
               "kind": "method",
-              "name": "handlePositionChange"
+              "name": "blur",
+              "description": "Removes focus from the switch."
             },
             {
               "kind": "method",
-              "name": "handlePositionInPixelsChange"
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
             },
             {
               "kind": "method",
-              "name": "handleVerticalChange"
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              },
+              "description": "Gets the associated form, if one exists."
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the divider's position changes.",
-              "name": "sl-reposition",
-              "reactName": "onSlReposition",
-              "eventName": "SlRepositionEvent"
+              "description": "Emitted when the control loses focus.",
+              "name": "sl-blur",
+              "reactName": "onSlBlur",
+              "eventName": "SlBlurEvent"
+            },
+            {
+              "description": "Emitted when the control's checked state changes.",
+              "name": "sl-change",
+              "reactName": "onSlChange",
+              "eventName": "SlChangeEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "sl-input",
+              "reactName": "onSlInput",
+              "eventName": "SlInputEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "sl-focus",
+              "reactName": "onSlFocus",
+              "eventName": "SlFocusEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "sl-invalid",
+              "reactName": "onSlInvalid",
+              "eventName": "SlInvalidEvent"
             }
           ],
           "attributes": [
             {
-              "name": "position",
+              "name": "title",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "50",
-              "description": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size.",
-              "fieldName": "position"
+              "default": "''",
+              "fieldName": "title"
             },
             {
-              "name": "position-in-pixels",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The current position of the divider from the primary panel's edge in pixels.",
-              "fieldName": "positionInPixels"
+              "default": "''",
+              "description": "The name of the switch, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "vertical",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
-              "fieldName": "vertical"
+              "description": "The current value of the switch, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The switch's size.",
+              "fieldName": "size"
             },
             {
               "name": "disabled",
@@ -16382,513 +16409,486 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables resizing. Note that the position may still change as a result of resizing the host element.",
+              "description": "Disables the switch.",
               "fieldName": "disabled"
             },
             {
-              "name": "primary",
+              "name": "checked",
               "type": {
-                "text": "'start' | 'end' | undefined"
+                "text": "boolean"
               },
-              "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
-              "fieldName": "primary"
+              "default": "false",
+              "description": "Draws the switch in a checked state.",
+              "fieldName": "checked"
             },
             {
-              "name": "snap",
-              "description": "Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,\nor a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`.",
+              "name": "form",
               "type": {
-                "text": "string | SnapFunction"
+                "text": "string"
               },
-              "fieldName": "snap"
+              "default": "''",
+              "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.",
+              "fieldName": "form"
             },
             {
-              "name": "snap-threshold",
+              "name": "required",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "12",
-              "description": "How close the divider must be to a snap point until snapping occurs.",
-              "fieldName": "snapThreshold"
+              "default": "false",
+              "description": "Makes the switch a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Split panels display two adjacent panels, allowing the user to reposition them.",
-          "tagNameWithoutPrefix": "split-panel",
-          "tagName": "sl-split-panel",
+          "summary": "Switches allow the user to toggle an option on or off.",
+          "tagNameWithoutPrefix": "switch",
+          "tagName": "sl-switch",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Split panels display two adjacent panels, allowing the user to reposition them.\n * @documentation https://shoelace.style/components/split-panel\n * @status stable\n * @since 2.0\n *\n * @event sl-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */",
-          "documentation": "https://shoelace.style/components/split-panel",
+          "jsDoc": "/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://shoelace.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-change - Emitted when the control's checked state changes.\n * @event sl-input - Emitted when the control receives input.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */",
+          "documentation": "https://shoelace.style/components/switch",
           "status": "stable",
           "since": "2.0"
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "SNAP_NONE",
-          "declaration": {
-            "name": "SNAP_NONE",
-            "module": "components/split-panel/split-panel.js"
-          }
-        },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlSplitPanel",
-            "module": "components/split-panel/split-panel.js"
+            "name": "SlSwitch",
+            "module": "components/switch/switch.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/switch/switch.js",
+      "path": "components/split-panel/split-panel.js",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "SNAP_NONE",
+          "description": "A SnapFunction which performs no snapping."
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "SlSwitch",
+          "name": "SlSplitPanel",
           "cssProperties": [
             {
-              "description": "The width of the switch.",
-              "name": "--width"
+              "description": "The width of the visible divider.",
+              "name": "--divider-width",
+              "default": "4px"
             },
             {
-              "description": "The height of the switch.",
-              "name": "--height"
+              "description": "The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging.",
+              "name": "--divider-hit-area",
+              "default": "12px"
             },
             {
-              "description": "The size of the thumb.",
-              "name": "--thumb-size"
+              "description": "The minimum allowed size of the primary panel.",
+              "name": "--min",
+              "default": "0"
+            },
+            {
+              "description": "The maximum allowed size of the primary panel.",
+              "name": "--max",
+              "default": "100%"
             }
           ],
           "cssParts": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The control that houses the switch's thumb.",
-              "name": "control"
+              "description": "The start panel.",
+              "name": "start"
             },
             {
-              "description": "The switch's thumb.",
-              "name": "thumb"
+              "description": "The end panel.",
+              "name": "end"
             },
             {
-              "description": "The switch's label.",
-              "name": "label"
+              "description": "Targets both the start and end panels.",
+              "name": "panel"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "description": "The divider that separates the start and end panels.",
+              "name": "divider"
             }
           ],
           "slots": [
             {
-              "description": "The switch's label.",
-              "name": ""
+              "description": "Content to place in the start panel.",
+              "name": "start"
             },
             {
-              "description": "Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
+              "description": "Content to place in the end panel.",
+              "name": "end"
+            },
+            {
+              "description": "The divider. Useful for slotting in a custom icon that renders as a handle.",
+              "name": "divider"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, { value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SlSwitch) => control.defaultChecked, setValue: (control: SlSwitch, checked: boolean) => (control.checked = checked) })"
+              "name": "cachedPositionInPixels",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "isCollapsed",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text')"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "positionBeforeCollapsing",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "resizeObserver",
               "type": {
-                "text": "string"
+                "text": "ResizeObserver"
               },
-              "default": "''",
-              "attribute": "title"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The name of the switch, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "divider",
               "type": {
-                "text": "string"
-              },
-              "description": "The current value of the switch, submitted as a name/value pair with form data.",
-              "attribute": "value"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "position",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "number"
               },
-              "default": "'medium'",
-              "description": "The switch's size.",
-              "attribute": "size",
+              "default": "50",
+              "description": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size.",
+              "attribute": "position",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "positionInPixels",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Disables the switch.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The current position of the divider from the primary panel's edge in pixels.",
+              "attribute": "position-in-pixels"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "vertical",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the switch in a checked state.",
-              "attribute": "checked",
+              "description": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
+              "attribute": "vertical",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "Disables resizing. Note that the position may still change as a result of resizing the host element.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "primary",
               "type": {
-                "text": "string"
+                "text": "'start' | 'end' | undefined"
               },
-              "default": "''",
-              "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.",
-              "attribute": "form",
-              "reflects": true
+              "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
+              "attribute": "primary"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "snapValue",
               "type": {
-                "text": "boolean"
+                "text": "string | SnapFunction"
               },
-              "default": "false",
-              "description": "Makes the switch a required field.",
-              "attribute": "required",
-              "reflects": true
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "snapFunction",
               "type": {
-                "text": "string"
+                "text": "SnapFunction"
               },
-              "default": "''",
-              "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "privacy": "private",
+              "default": "SNAP_NONE"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "kind": "method",
+              "name": "toSnapFunction",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "snap",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The snap string."
+                }
+              ],
+              "description": "Converts a string containing either a series of fixed/repeated snap points (e.g. \"repeat(20%)\", \"100px 200px 800px\", or \"10% 50% repeat(10px)\") into a SnapFunction. `SnapFunction`s take in a `SnapFunctionOpts` and return the position that the split panel should snap to."
             },
             {
               "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "name": "snap",
+              "description": "Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,\nor a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`.",
+              "type": {
+                "text": "string | SnapFunction"
+              },
+              "attribute": "snap",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
+              "kind": "field",
+              "name": "snapThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "12",
+              "description": "How close the divider must be to a snap point until snapping occurs.",
+              "attribute": "snap-threshold"
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "detectSize",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleInvalid",
+              "name": "percentageToPixels",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "value",
                   "type": {
-                    "text": "Event"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
+              "name": "pixelsToPercentage",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "value",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleCheckedChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the switch."
-            },
-            {
-              "kind": "method",
-              "name": "focus",
+              "name": "handleDrag",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "PointerEvent"
                   }
                 }
-              ],
-              "description": "Sets focus on the switch."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the switch."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              ]
             },
             {
               "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
                 }
-              },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              ]
             },
             {
               "kind": "method",
-              "name": "setCustomValidity",
+              "name": "handleResize",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "message",
+                  "name": "entries",
                   "type": {
-                    "text": "string"
+                    "text": "ResizeObserverEntry[]"
                   }
                 }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the control loses focus.",
-              "name": "sl-blur",
-              "reactName": "onSlBlur",
-              "eventName": "SlBlurEvent"
+              ]
             },
             {
-              "description": "Emitted when the control's checked state changes.",
-              "name": "sl-change",
-              "reactName": "onSlChange",
-              "eventName": "SlChangeEvent"
+              "kind": "method",
+              "name": "handlePositionChange"
             },
             {
-              "description": "Emitted when the control receives input.",
-              "name": "sl-input",
-              "reactName": "onSlInput",
-              "eventName": "SlInputEvent"
+              "kind": "method",
+              "name": "handlePositionInPixelsChange"
             },
             {
-              "description": "Emitted when the control gains focus.",
-              "name": "sl-focus",
-              "reactName": "onSlFocus",
-              "eventName": "SlFocusEvent"
-            },
+              "kind": "method",
+              "name": "handleVerticalChange"
+            }
+          ],
+          "events": [
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "sl-invalid",
-              "reactName": "onSlInvalid",
-              "eventName": "SlInvalidEvent"
+              "description": "Emitted when the divider's position changes.",
+              "name": "sl-reposition",
+              "reactName": "onSlReposition",
+              "eventName": "SlRepositionEvent"
             }
           ],
           "attributes": [
             {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the switch, submitted as a name/value pair with form data.",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
+              "name": "position",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The current value of the switch, submitted as a name/value pair with form data.",
-              "fieldName": "value"
+              "default": "50",
+              "description": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size.",
+              "fieldName": "position"
             },
             {
-              "name": "size",
+              "name": "position-in-pixels",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "number"
               },
-              "default": "'medium'",
-              "description": "The switch's size.",
-              "fieldName": "size"
+              "description": "The current position of the divider from the primary panel's edge in pixels.",
+              "fieldName": "positionInPixels"
             },
             {
-              "name": "disabled",
+              "name": "vertical",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the switch.",
-              "fieldName": "disabled"
+              "description": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
+              "fieldName": "vertical"
             },
             {
-              "name": "checked",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the switch in a checked state.",
-              "fieldName": "checked"
+              "description": "Disables resizing. Note that the position may still change as a result of resizing the host element.",
+              "fieldName": "disabled"
             },
             {
-              "name": "form",
+              "name": "primary",
               "type": {
-                "text": "string"
+                "text": "'start' | 'end' | undefined"
               },
-              "default": "''",
-              "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.",
-              "fieldName": "form"
+              "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
+              "fieldName": "primary"
             },
             {
-              "name": "required",
+              "name": "snap",
+              "description": "Either one or more space-separated values at which the divider should snap, in pixels, percentages, or repeat expressions e.g. `'100px 50% 500px' or `repeat(50%) 10px`,\nor a function which takes in a `SnapFunctionParams`, and returns a position to snap to, e.g. `({ pos }) => Math.round(pos / 8) * 8`.",
               "type": {
-                "text": "boolean"
+                "text": "string | SnapFunction"
               },
-              "default": "false",
-              "description": "Makes the switch a required field.",
-              "fieldName": "required"
+              "fieldName": "snap"
             },
             {
-              "name": "help-text",
+              "name": "snap-threshold",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The switch's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
+              "default": "12",
+              "description": "How close the divider must be to a snap point until snapping occurs.",
+              "fieldName": "snapThreshold"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Switches allow the user to toggle an option on or off.",
-          "tagNameWithoutPrefix": "switch",
-          "tagName": "sl-switch",
+          "summary": "Split panels display two adjacent panels, allowing the user to reposition them.",
+          "tagNameWithoutPrefix": "split-panel",
+          "tagName": "sl-split-panel",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Switches allow the user to toggle an option on or off.\n * @documentation https://shoelace.style/components/switch\n * @status stable\n * @since 2.0\n *\n * @slot - The switch's label.\n * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-change - Emitted when the control's checked state changes.\n * @event sl-input - Emitted when the control receives input.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The control that houses the switch's thumb.\n * @csspart thumb - The switch's thumb.\n * @csspart label - The switch's label.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --width - The width of the switch.\n * @cssproperty --height - The height of the switch.\n * @cssproperty --thumb-size - The size of the thumb.\n */",
-          "documentation": "https://shoelace.style/components/switch",
+          "jsDoc": "/**\n * @summary Split panels display two adjacent panels, allowing the user to reposition them.\n * @documentation https://shoelace.style/components/split-panel\n * @status stable\n * @since 2.0\n *\n * @event sl-reposition - Emitted when the divider's position changes.\n *\n * @slot start - Content to place in the start panel.\n * @slot end - Content to place in the end panel.\n * @slot divider - The divider. Useful for slotting in a custom icon that renders as a handle.\n *\n * @csspart start - The start panel.\n * @csspart end - The end panel.\n * @csspart panel - Targets both the start and end panels.\n * @csspart divider - The divider that separates the start and end panels.\n *\n * @cssproperty [--divider-width=4px] - The width of the visible divider.\n * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is\n *  usually wider than the divider to facilitate easier dragging.\n * @cssproperty [--min=0] - The minimum allowed size of the primary panel.\n * @cssproperty [--max=100%] - The maximum allowed size of the primary panel.\n */",
+          "documentation": "https://shoelace.style/components/split-panel",
           "status": "stable",
           "since": "2.0"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "SNAP_NONE",
+          "declaration": {
+            "name": "SNAP_NONE",
+            "module": "components/split-panel/split-panel.js"
+          }
+        },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlSwitch",
-            "module": "components/switch/switch.js"
+            "name": "SlSplitPanel",
+            "module": "components/split-panel/split-panel.js"
           }
         }
       ]
@@ -17619,63 +17619,235 @@
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "fieldName": "name"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "fieldName": "active"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
+          "tagNameWithoutPrefix": "tab-panel",
+          "tagName": "sl-tab-panel",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://shoelace.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
+          "documentation": "https://shoelace.style/components/tab-panel",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlTabPanel",
+            "module": "components/tab-panel/tab-panel.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/tag/tag.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlTag",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The tag's content.",
+              "name": "content"
+            },
+            {
+              "description": "The tag's remove button, an `<sl-icon-button>`.",
+              "name": "remove-button"
+            },
+            {
+              "description": "The remove button's exported `base` part.",
+              "name": "remove-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon-button': SlIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              "default": "'neutral'",
+              "description": "The tag's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "attribute": "name",
+              "default": "false",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "attribute": "pill",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "removable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "attribute": "active",
-              "reflects": true
+              "description": "Makes the tag removable and shows a remove button.",
+              "attribute": "removable"
             },
             {
               "kind": "method",
-              "name": "handleActiveChange"
+              "name": "handleRemoveClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the remove button is activated.",
+              "name": "sl-remove",
+              "reactName": "onSlRemove",
+              "eventName": "SlRemoveEvent"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
               },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "fieldName": "name"
+              "default": "'neutral'",
+              "description": "The tag's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "name": "active",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "fieldName": "active"
+              "description": "Draws a pill-style tag with rounded edges.",
+              "fieldName": "pill"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "fieldName": "removable"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
-          "tagNameWithoutPrefix": "tab-panel",
-          "tagName": "sl-tab-panel",
+          "summary": "Tags are used as labels to organize things or to indicate a selection.",
+          "tagNameWithoutPrefix": "tag",
+          "tagName": "sl-tag",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://shoelace.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
-          "documentation": "https://shoelace.style/components/tab-panel",
+          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://shoelace.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The tag's content.\n *\n * @event sl-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<sl-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */",
+          "documentation": "https://shoelace.style/components/tag",
           "status": "stable",
-          "since": "2.0"
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon-button"
+          ]
         }
       ],
       "exports": [
@@ -17683,8 +17855,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlTabPanel",
-            "module": "components/tab-panel/tab-panel.js"
+            "name": "SlTag",
+            "module": "components/tag/tag.js"
           }
         }
       ]
@@ -17705,7 +17877,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'sl-checkbox': SlCheckBox, 'sl-radio': SlRadio, 'sl-pagination': SlPagination }"
+              "default": "{ 'sl-icon': SlIcon, 'sl-checkbox': SlCheckBox, 'sl-radio': SlRadio, 'sl-pagination': SlPagination }"
             },
             {
               "kind": "field",
@@ -18334,178 +18506,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tag/tag.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlTag",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The tag's content.",
-              "name": "content"
-            },
-            {
-              "description": "The tag's remove button, an `<sl-icon-button>`.",
-              "name": "remove-button"
-            },
-            {
-              "description": "The remove button's exported `base` part.",
-              "name": "remove-button__base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tag's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon-button': SlIconButton }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
-              },
-              "default": "'neutral'",
-              "description": "The tag's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The tag's size.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "removable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the tag removable and shows a remove button.",
-              "attribute": "removable"
-            },
-            {
-              "kind": "method",
-              "name": "handleRemoveClick",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the remove button is activated.",
-              "name": "sl-remove",
-              "reactName": "onSlRemove",
-              "eventName": "SlRemoveEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
-              },
-              "default": "'neutral'",
-              "description": "The tag's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The tag's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "fieldName": "pill"
-            },
-            {
-              "name": "removable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the tag removable and shows a remove button.",
-              "fieldName": "removable"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Tags are used as labels to organize things or to indicate a selection.",
-          "tagNameWithoutPrefix": "tag",
-          "tagName": "sl-tag",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://shoelace.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The tag's content.\n *\n * @event sl-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<sl-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */",
-          "documentation": "https://shoelace.style/components/tag",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon-button"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlTag",
-            "module": "components/tag/tag.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.js",
@@ -20725,7 +20725,7 @@
   "package": {
     "name": "@kdcloudjs/shoelace",
     "description": "A forward-thinking library of web components.",
-    "version": "1.0.14",
+    "version": "1.0.15",
     "license": "MIT"
   }
 }