@kdcloudjs/shoelace 1.0.27 → 1.0.29

package/cdn/custom-elements.json

@@ -2,6 +2,192 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "components/animated-image/animated-image.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlAnimatedImage",
+          "cssProperties": [
+            {
+              "description": "The size of the icon box.",
+              "name": "--control-box-size"
+            },
+            {
+              "description": "The size of the play/pause icons.",
+              "name": "--icon-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container that surrounds the pause/play icons and provides their background.",
+              "name": "control-box"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Optional play icon to use instead of the default. Works best with `<sl-icon>`.",
+              "name": "play-icon"
+            },
+            {
+              "description": "Optional pause icon to use instead of the default. Works best with `<sl-icon>`.",
+              "name": "pause-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "animatedImage",
+              "type": {
+                "text": "HTMLImageElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "frozenFrame",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isLoaded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "The path to the image to load.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "description": "A description of the image used by assistive devices.",
+              "attribute": "alt"
+            },
+            {
+              "kind": "field",
+              "name": "play",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+              "attribute": "play",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleLoad",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleError",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handlePlayChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSrcChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the image loads successfully.",
+              "name": "sl-load",
+              "reactName": "onSlLoad",
+              "eventName": "SlLoadEvent"
+            },
+            {
+              "description": "Emitted when the image fails to load.",
+              "name": "sl-error",
+              "reactName": "onSlError",
+              "eventName": "SlErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "The path to the image to load.",
+              "fieldName": "src"
+            },
+            {
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "description": "A description of the image used by assistive devices.",
+              "fieldName": "alt"
+            },
+            {
+              "name": "play",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+              "fieldName": "play"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.",
+          "tagNameWithoutPrefix": "animated-image",
+          "tagName": "sl-animated-image",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n * @documentation https://shoelace.style/components/animated-image\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-load - Emitted when the image loads successfully.\n * @event sl-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n *\n * @part control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n */",
+          "documentation": "https://shoelace.style/components/animated-image",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlAnimatedImage",
+            "module": "components/animated-image/animated-image.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -333,87 +519,52 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/animated-image/animated-image.js",
+      "path": "components/animation/animation.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlAnimatedImage",
-          "cssProperties": [
-            {
-              "description": "The size of the icon box.",
-              "name": "--control-box-size"
-            },
-            {
-              "description": "The size of the play/pause icons.",
-              "name": "--icon-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container that surrounds the pause/play icons and provides their background.",
-              "name": "control-box"
-            }
-          ],
+          "name": "SlAnimation",
           "slots": [
             {
-              "description": "Optional play icon to use instead of the default. Works best with `<sl-icon>`.",
-              "name": "play-icon"
-            },
-            {
-              "description": "Optional pause icon to use instead of the default. Works best with `<sl-icon>`.",
-              "name": "pause-icon"
+              "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "animation",
               "type": {
-                "text": "object"
+                "text": "Animation | undefined"
               },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "animatedImage",
-              "type": {
-                "text": "HTMLImageElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "frozenFrame",
-              "type": {
-                "text": "string"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "isLoaded",
+              "name": "hasStarted",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false"
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "defaultSlot",
               "type": {
-                "text": "string"
-              },
-              "description": "The path to the image to load.",
-              "attribute": "src"
+                "text": "Promise<HTMLSlotElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "alt",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "description": "A description of the image used by assistive devices.",
-              "attribute": "alt"
+              "default": "'none'",
+              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -421,159 +572,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "attribute": "play",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleLoad",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleError",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handlePlayChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleSrcChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the image loads successfully.",
-              "name": "sl-load",
-              "reactName": "onSlLoad",
-              "eventName": "SlLoadEvent"
-            },
-            {
-              "description": "Emitted when the image fails to load.",
-              "name": "sl-error",
-              "reactName": "onSlError",
-              "eventName": "SlErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "description": "The path to the image to load.",
-              "fieldName": "src"
-            },
-            {
-              "name": "alt",
-              "type": {
-                "text": "string"
-              },
-              "description": "A description of the image used by assistive devices.",
-              "fieldName": "alt"
-            },
-            {
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "fieldName": "play"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.",
-          "tagNameWithoutPrefix": "animated-image",
-          "tagName": "sl-animated-image",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n * @documentation https://shoelace.style/components/animated-image\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-load - Emitted when the image loads successfully.\n * @event sl-error - Emitted when the image fails to load.\n *\n * @slot play-icon - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n * @slot pause-icon - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n *\n * @part control-box - The container that surrounds the pause/play icons and provides their background.\n *\n * @cssproperty --control-box-size - The size of the icon box.\n * @cssproperty --icon-size - The size of the play/pause icons.\n */",
-          "documentation": "https://shoelace.style/components/animated-image",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlAnimatedImage",
-            "module": "components/animated-image/animated-image.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlAnimation",
-          "slots": [
-            {
-              "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "animation",
-              "type": {
-                "text": "Animation | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "hasStarted",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "Promise<HTMLSlotElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "'none'",
-              "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "play",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
+              "default": "false",
+              "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.",
               "attribute": "play",
               "reflects": true
             },
@@ -873,205 +873,96 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.js",
+      "path": "components/avatar/avatar.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlBadge",
+          "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 badge's content.",
-              "name": ""
+              "description": "The default icon to use when no image or initials are present. Works best with `<sl-icon>`.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "dependencies",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "object"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
             },
             {
               "kind": "field",
-              "name": "pill",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "pulse",
+              "name": "image",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "attribute": "image"
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "string"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "attribute": "label"
             },
             {
-              "name": "pill",
+              "kind": "field",
+              "name": "initials",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "attribute": "initials"
             },
             {
-              "name": "pulse",
+              "kind": "field",
+              "name": "loading",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "sl-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://shoelace.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://shoelace.style/components/badge",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
-    {
-      "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'"
+                "text": "'eager' | 'lazy'"
               },
               "default": "'eager'",
               "description": "Indicates how the browser should load the image.",
@@ -1181,6 +1072,115 @@
         }
       ]
     },
+    {
+      "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"
+              },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
+            },
+            {
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "sl-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://shoelace.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://shoelace.style/components/badge",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlBadge",
+            "module": "components/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb/breadcrumb.js",
@@ -1303,66 +1303,232 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button/button.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlButton",
+          "name": "SlBreadcrumbItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
+              "description": "The breadcrumb item's label.",
+              "name": "label"
             },
             {
-              "description": "The button's label.",
-              "name": "label"
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
             },
             {
               "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"
+              "description": "The container that wraps the separator.",
+              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "The button's label.",
+              "description": "The breadcrumb item's label.",
               "name": ""
             },
             {
-              "description": "A presentational prefix icon or similar element.",
+              "description": "An optional prefix, usually an icon or icon button.",
               "name": "prefix"
             },
             {
-              "description": "A presentational suffix icon or similar element.",
+              "description": "An optional suffix, usually an icon or icon button.",
               "name": "suffix"
+            },
+            {
+              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.",
+              "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'prefix', 'suffix')"
             },
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "renderType",
+              "type": {
+                "text": "'button' | 'link' | 'dropdown'"
+              },
+              "privacy": "private",
+              "default": "'button'"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "attribute": "rel"
+            },
+            {
+              "kind": "method",
+              "name": "setRenderType",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hrefChanged"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+              "fieldName": "rel"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
+          "tagNameWithoutPrefix": "breadcrumb-item",
+          "tagName": "sl-breadcrumb-item",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://shoelace.style/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
+          "documentation": "https://shoelace.style/components/breadcrumb-item",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlBreadcrumbItem",
+            "module": "components/breadcrumb-item/breadcrumb-item.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'] })"
             },
@@ -1977,60 +2143,25 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "path": "components/button-group/button-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlBreadcrumbItem",
+          "name": "SlButtonGroup",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The breadcrumb item's label.",
-              "name": "label"
-            },
-            {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
-            },
-            {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
             }
           ],
           "slots": [
             {
-              "description": "The breadcrumb item's label.",
+              "description": "One or more `<sl-button>` elements to display in the button group.",
               "name": ""
-            },
-            {
-              "description": "An optional prefix, usually an icon or icon button.",
-              "name": "prefix"
-            },
-            {
-              "description": "An optional suffix, usually an icon or icon button.",
-              "name": "suffix"
-            },
-            {
-              "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.",
-              "name": "separator"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix')"
-            },
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -2040,165 +2171,34 @@
             },
             {
               "kind": "field",
-              "name": "renderType",
-              "type": {
-                "text": "'button' | 'link' | 'dropdown'"
-              },
-              "privacy": "private",
-              "default": "'button'"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "target",
+              "name": "disableRole",
               "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                "text": "boolean"
               },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "attribute": "target"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "attribute": "rel"
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
             },
             {
               "kind": "method",
-              "name": "setRenderType",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hrefChanged"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'noreferrer noopener'",
-              "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
-              "fieldName": "rel"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.",
-          "tagNameWithoutPrefix": "breadcrumb-item",
-          "tagName": "sl-breadcrumb-item",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://shoelace.style/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */",
-          "documentation": "https://shoelace.style/components/breadcrumb-item",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlBreadcrumbItem",
-            "module": "components/breadcrumb-item/breadcrumb-item.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlButtonGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `<sl-button>` elements to display in the button group.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disableRole",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2281,6 +2281,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/calendar/calendar.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "components/card/card.js",
@@ -2381,12 +2387,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/calendar/calendar.js",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "components/carousel/carousel.js",
@@ -5844,6 +5844,44 @@
               "privacy": "private"
             }
           ],
+          "events": [
+            {
+              "description": "Emitted when the control loses focus.",
+              "name": "sl-blur",
+              "reactName": "onSlBlur",
+              "eventName": "SlBlurEvent"
+            },
+            {
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "sl-change",
+              "reactName": "onSlChange",
+              "eventName": "SlChangeEvent"
+            },
+            {
+              "description": "Emitted when the control gains focus.",
+              "name": "sl-focus",
+              "reactName": "onSlFocus",
+              "eventName": "SlFocusEvent"
+            },
+            {
+              "description": "Emitted when the control receives input.",
+              "name": "sl-input",
+              "reactName": "onSlInput",
+              "eventName": "SlInputEvent"
+            },
+            {
+              "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 clear button is activated.",
+              "name": "sl-clear",
+              "reactName": "onSlClear",
+              "eventName": "SlClearEvent"
+            }
+          ],
           "attributes": [
             {
               "name": "type",
@@ -5881,9 +5919,22 @@
             "name": "PickerBase",
             "module": "/src/internal/picker.js"
           },
+          "summary": "Datepickers allow users to select a date using a calendar interface.",
           "tagNameWithoutPrefix": "datepicker",
           "tagName": "sl-datepicker",
-          "customElement": true
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Datepickers allow users to select a date using a calendar interface.\n * @documentation https://shoelace.style/components/datepicker\n * @status experimental\n * @since 2.0\n *\n * @dependency sl-button\n * @dependency sl-calendar\n * @dependency sl-date-panel\n * @dependency sl-drawer\n * @dependency sl-popup\n * @dependency sl-input\n *\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-input - Emitted when the control receives input.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @event sl-clear - Emitted when the clear button is activated.\n */",
+          "documentation": "https://shoelace.style/components/datepicker",
+          "status": "experimental",
+          "since": "2.0",
+          "dependencies": [
+            "sl-button",
+            "sl-calendar",
+            "sl-date-panel",
+            "sl-drawer",
+            "sl-popup",
+            "sl-input"
+          ]
         }
       ],
       "exports": [
@@ -6389,6 +6440,25 @@
               ],
               "description": "设置自定义有效性消息"
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "聚焦到开始日期输入框并打开面板"
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "移除焦点并关闭面板"
+            },
             {
               "kind": "method",
               "name": "updateValueTuple",
@@ -9312,62 +9382,22 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/image-comparer/image-comparer.js",
+      "path": "components/icon-button/icon-button.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"
-            }
-          ],
+          "name": "SlIconButton",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The container that wraps the before image.",
-              "name": "before"
-            },
-            {
-              "description": "The container that wraps the after image.",
-              "name": "after"
-            },
-            {
-              "description": "The divider that separates the images.",
-              "name": "divider"
-            },
-            {
-              "description": "The handle that the user drags to expose the after image.",
-              "name": "handle"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The before image, an `<img>` or `<svg>` element.",
-              "name": "before"
-            },
-            {
-              "description": "The after image, an `<img>` or `<svg>` element.",
-              "name": "after"
-            },
-            {
-              "description": "The icon used inside the handle.",
-              "name": "handle"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "scopedElement",
+              "name": "dependencies",
               "type": {
                 "text": "object"
               },
@@ -9376,274 +9406,14 @@
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "base",
+              "name": "button",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLButtonElement | HTMLLinkElement"
               }
             },
             {
               "kind": "field",
-              "name": "handle",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "position",
-              "type": {
-                "text": "number"
-              },
-              "default": "50",
-              "description": "The position of the divider as a percentage.",
-              "attribute": "position",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handlePositionChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the position changes.",
-              "name": "sl-change",
-              "reactName": "onSlChange",
-              "eventName": "SlChangeEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "position",
-              "type": {
-                "text": "number"
-              },
-              "default": "50",
-              "description": "The position of the divider as a percentage.",
-              "fieldName": "position"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Compare visual differences between similar photos with a sliding panel.",
-          "tagNameWithoutPrefix": "image-comparer",
-          "tagName": "sl-image-comparer",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Compare visual differences between similar photos with a sliding panel.\n * @documentation https://shoelace.style/components/image-comparer\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @slot before - The before image, an `<img>` or `<svg>` element.\n * @slot after - The after image, an `<img>` or `<svg>` element.\n * @slot handle - The icon used inside the handle.\n *\n * @event sl-change - Emitted when the position changes.\n *\n * @csspart base - The component's base wrapper.\n * @csspart before - The container that wraps the before image.\n * @csspart after - The container that wraps the after image.\n * @csspart divider - The divider that separates the images.\n * @csspart handle - The handle that the user drags to expose the after image.\n *\n * @cssproperty --divider-width - The width of the dividing line.\n * @cssproperty --handle-size - The size of the compare handle.\n */",
-          "documentation": "https://shoelace.style/components/image-comparer",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlImageComparer",
-            "module": "components/image-comparer/image-comparer.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/include/include.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlInclude",
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "'cors' | 'no-cors' | 'same-origin'"
-              },
-              "default": "'cors'",
-              "description": "The fetch mode to use.",
-              "attribute": "mode"
-            },
-            {
-              "kind": "field",
-              "name": "allowScripts",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "attribute": "allow-scripts"
-            },
-            {
-              "kind": "method",
-              "name": "executeScript",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "script",
-                  "type": {
-                    "text": "HTMLScriptElement"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleSrcChange"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the included file is loaded.",
-              "name": "sl-load",
-              "reactName": "onSlLoad",
-              "eventName": "SlLoadEvent"
-            },
-            {
-              "type": {
-                "text": "{ status: number }"
-              },
-              "description": "Emitted when the included file fails to load due to an error.",
-              "name": "sl-error",
-              "reactName": "onSlError",
-              "eventName": "SlErrorEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "fieldName": "src"
-            },
-            {
-              "name": "mode",
-              "type": {
-                "text": "'cors' | 'no-cors' | 'same-origin'"
-              },
-              "default": "'cors'",
-              "description": "The fetch mode to use.",
-              "fieldName": "mode"
-            },
-            {
-              "name": "allow-scripts",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "fieldName": "allowScripts"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Includes give you the power to embed external HTML files into the page.",
-          "tagNameWithoutPrefix": "include",
-          "tagName": "sl-include",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Includes give you the power to embed external HTML files into the page.\n * @documentation https://shoelace.style/components/include\n * @status stable\n * @since 2.0\n *\n * @event sl-load - Emitted when the included file is loaded.\n * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error.\n */",
-          "documentation": "https://shoelace.style/components/include",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlInclude",
-            "module": "components/include/include.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon-button/icon-button.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlIconButton",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "button",
-              "type": {
-                "text": "HTMLButtonElement | HTMLLinkElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasFocus",
+              "name": "hasFocus",
               "type": {
                 "text": "boolean"
               },
@@ -9885,13 +9655,313 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/input/input.js",
+      "path": "components/image-comparer/image-comparer.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlInput",
-          "cssParts": [
+          "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 container that wraps the before image.",
+              "name": "before"
+            },
+            {
+              "description": "The container that wraps the after image.",
+              "name": "after"
+            },
+            {
+              "description": "The divider that separates the images.",
+              "name": "divider"
+            },
+            {
+              "description": "The handle that the user drags to expose the after image.",
+              "name": "handle"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The before image, an `<img>` or `<svg>` element.",
+              "name": "before"
+            },
+            {
+              "description": "The after image, an `<img>` or `<svg>` element.",
+              "name": "after"
+            },
+            {
+              "description": "The icon used inside the handle.",
+              "name": "handle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "scopedElement",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "base",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handle",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "The position of the divider as a percentage.",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handlePositionChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the position changes.",
+              "name": "sl-change",
+              "reactName": "onSlChange",
+              "eventName": "SlChangeEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "position",
+              "type": {
+                "text": "number"
+              },
+              "default": "50",
+              "description": "The position of the divider as a percentage.",
+              "fieldName": "position"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Compare visual differences between similar photos with a sliding panel.",
+          "tagNameWithoutPrefix": "image-comparer",
+          "tagName": "sl-image-comparer",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Compare visual differences between similar photos with a sliding panel.\n * @documentation https://shoelace.style/components/image-comparer\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @slot before - The before image, an `<img>` or `<svg>` element.\n * @slot after - The after image, an `<img>` or `<svg>` element.\n * @slot handle - The icon used inside the handle.\n *\n * @event sl-change - Emitted when the position changes.\n *\n * @csspart base - The component's base wrapper.\n * @csspart before - The container that wraps the before image.\n * @csspart after - The container that wraps the after image.\n * @csspart divider - The divider that separates the images.\n * @csspart handle - The handle that the user drags to expose the after image.\n *\n * @cssproperty --divider-width - The width of the dividing line.\n * @cssproperty --handle-size - The size of the compare handle.\n */",
+          "documentation": "https://shoelace.style/components/image-comparer",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlImageComparer",
+            "module": "components/image-comparer/image-comparer.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/include/include.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlInclude",
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "'cors' | 'no-cors' | 'same-origin'"
+              },
+              "default": "'cors'",
+              "description": "The fetch mode to use.",
+              "attribute": "mode"
+            },
+            {
+              "kind": "field",
+              "name": "allowScripts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "attribute": "allow-scripts"
+            },
+            {
+              "kind": "method",
+              "name": "executeScript",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "script",
+                  "type": {
+                    "text": "HTMLScriptElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSrcChange"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the included file is loaded.",
+              "name": "sl-load",
+              "reactName": "onSlLoad",
+              "eventName": "SlLoadEvent"
+            },
+            {
+              "type": {
+                "text": "{ status: number }"
+              },
+              "description": "Emitted when the included file fails to load due to an error.",
+              "name": "sl-error",
+              "reactName": "onSlError",
+              "eventName": "SlErrorEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "fieldName": "src"
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "'cors' | 'no-cors' | 'same-origin'"
+              },
+              "default": "'cors'",
+              "description": "The fetch mode to use.",
+              "fieldName": "mode"
+            },
+            {
+              "name": "allow-scripts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "fieldName": "allowScripts"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Includes give you the power to embed external HTML files into the page.",
+          "tagNameWithoutPrefix": "include",
+          "tagName": "sl-include",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Includes give you the power to embed external HTML files into the page.\n * @documentation https://shoelace.style/components/include\n * @status stable\n * @since 2.0\n *\n * @event sl-load - Emitted when the included file is loaded.\n * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error.\n */",
+          "documentation": "https://shoelace.style/components/include",
+          "status": "stable",
+          "since": "2.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlInclude",
+            "module": "components/include/include.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/input/input.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlInput",
+          "cssParts": [
             {
               "description": "The form control that wraps the label, input, and help text.",
               "name": "form-control"
@@ -11568,141 +11638,25 @@
             {
               "name": "disabled",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the observer.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).",
-          "tagNameWithoutPrefix": "mutation-observer",
-          "tagName": "sl-mutation-observer",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n * @documentation https://shoelace.style/components/mutation-observer\n * @status stable\n * @since 2.0\n *\n * @event {{ mutationList: MutationRecord[] }} sl-mutation - Emitted when a mutation occurs.\n *\n * @slot - The content to watch for mutations.\n */",
-          "documentation": "https://shoelace.style/components/mutation-observer",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlMutationObserver",
-            "module": "components/mutation-observer/mutation-observer.js"
-          }
-        }
-      ]
-    },
-    {
-      "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": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'title')"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "unknown | undefined"
-              },
-              "description": "Matches Antd's item group label."
-            },
-            {
-              "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' | 'inline' | 'vertical'"
-              },
-              "default": "'inline'",
-              "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' | 'inline' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'inline'",
-              "description": "The mode of navigation.",
-              "fieldName": "mode"
+              "default": "false",
+              "description": "Disables the observer.",
+              "fieldName": "disabled"
             }
           ],
           "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",
+          "summary": "The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).",
+          "tagNameWithoutPrefix": "mutation-observer",
+          "tagName": "sl-mutation-observer",
           "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"
+          "jsDoc": "/**\n * @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).\n * @documentation https://shoelace.style/components/mutation-observer\n * @status stable\n * @since 2.0\n *\n * @event {{ mutationList: MutationRecord[] }} sl-mutation - Emitted when a mutation occurs.\n *\n * @slot - The content to watch for mutations.\n */",
+          "documentation": "https://shoelace.style/components/mutation-observer",
+          "status": "stable",
+          "since": "2.0"
         }
       ],
       "exports": [
@@ -11710,8 +11664,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlNavGroup",
-            "module": "components/nav-group/nav-group.js"
+            "name": "SlMutationObserver",
+            "module": "components/mutation-observer/mutation-observer.js"
           }
         }
       ]
@@ -12537,45 +12491,198 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/nav-item/nav-item.js",
+      "path": "components/nav-group/nav-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlNavItem",
+          "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": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'title')"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "unknown | undefined"
+              },
+              "description": "Matches Antd's item group label."
+            },
+            {
+              "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' | 'inline' | 'vertical'"
+              },
+              "default": "'inline'",
+              "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' | 'inline' | 'vertical'"
+              },
+              "default": "'inline'",
+              "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-submenu/nav-submenu.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlNavSubmenu",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
+            {
+              "description": "The header that wraps the title, prefix, suffix and expand/collapse icon.",
+              "name": "header"
+            },
             {
               "description": "The prefix container.",
               "name": "prefix"
             },
             {
-              "description": "The nav item label.",
+              "description": "The nav submenu label.",
               "name": "label"
             },
             {
               "description": "The suffix container.",
               "name": "suffix"
+            },
+            {
+              "description": "The container that wraps the expand/collapse icons.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "The nav submenu content.",
+              "name": "content"
+            },
+            {
+              "description": "The popup that wraps the content in horizontal mode.",
+              "name": "popup"
             }
           ],
           "slots": [
             {
-              "description": "The nav item's label.",
+              "description": "The nav items within the submenu.",
               "name": ""
             },
             {
-              "description": "Used to prepend an icon or similar element to the nav item.",
+              "description": "The nav submenu's title.",
+              "name": "title"
+            },
+            {
+              "description": "Used to prepend an icon or similar element to the nav submenu.",
               "name": "prefix"
             },
             {
-              "description": "Used to append an icon or similar element to the nav item.",
+              "description": "Used to append an icon or similar element to the nav submenu.",
               "name": "suffix"
+            },
+            {
+              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
+              "name": "expand-icon"
+            },
+            {
+              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
+              "name": "collapse-icon"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon, 'sl-popup': SlPopup }"
+            },
             {
               "kind": "field",
               "name": "hasSlotController",
@@ -12585,57 +12692,97 @@
             },
             {
               "kind": "field",
-              "name": "key",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "hideTimeout",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "A stable key used by `sl-nav` to track selection.",
-              "attribute": "key"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "itemKey",
+              "name": "openChangeSource",
               "type": {
-                "text": "string"
+                "text": "'api' | 'nav' | 'user'"
               },
-              "default": "''",
-              "description": "React-safe alias for `key`.\n\nReact reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead.",
-              "attribute": "item-key"
+              "privacy": "private",
+              "default": "'api'"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "showTimeout",
               "type": {
-                "text": "unknown | undefined"
+                "text": "number"
               },
-              "description": "Alternate label content when using Antd-style `items` configuration."
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "header",
               "type": {
-                "text": "unknown | undefined"
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "body",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "SlPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "key",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A stable key used by `sl-nav` to track open state.",
+              "attribute": "key"
+            },
+            {
+              "kind": "field",
+              "name": "itemKey",
+              "type": {
+                "text": "string"
               },
-              "description": "Alternate icon content when using Antd-style `items` configuration."
+              "default": "''",
+              "description": "React-safe alias for `key`.\n\nReact reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead.",
+              "attribute": "item-key"
             },
             {
               "kind": "field",
-              "name": "extra",
+              "name": "open",
               "type": {
-                "text": "unknown | undefined"
+                "text": "boolean"
               },
-              "description": "Extra content shown at the end of the item."
+              "default": "false",
+              "description": "Indicates whether or not the submenu is open.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "danger",
+              "name": "nested",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Matches Antd's `danger` item flag.",
-              "attribute": "danger",
+              "description": "Indicates if this submenu is nested within another submenu.",
+              "attribute": "nested",
               "reflects": true
             },
             {
@@ -12645,68 +12792,83 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Tooltip text, primarily used when the menu is collapsed.",
+              "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
               "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "unknown | undefined"
               },
-              "default": "false",
-              "description": "Draws the nav item in a disabled state.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Matches Antd's `label` field."
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "icon",
               "type": {
-                "text": "boolean"
+                "text": "unknown | undefined"
               },
-              "default": "false",
-              "description": "Draws the nav item in an active (selected) state.",
-              "attribute": "active",
+              "description": "Matches Antd's `icon` field."
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark'"
+              },
+              "default": "'light'",
+              "description": "Matches Antd's `theme` field.",
+              "attribute": "theme",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "popupClassName",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
-              "attribute": "href"
+              "description": "Matches Antd's `popupClassName` field.",
+              "attribute": "popup-class-name"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "popupOffset",
               "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top'"
+                "text": "[number, number] | undefined"
               },
-              "description": "The target attribute for the anchor tag.",
-              "attribute": "target"
+              "description": "Matches Antd's `popupOffset` field."
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "onTitleClick",
               "type": {
-                "text": "string | undefined"
+                "text": "(info: { key: string; domEvent: MouseEvent | KeyboardEvent }) => void | undefined"
               },
-              "description": "The download attribute for the anchor tag.",
-              "attribute": "download"
+              "description": "Matches Antd's `onTitleClick` callback."
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'noreferrer noopener'",
-              "description": "The rel attribute for the anchor tag.",
-              "attribute": "rel"
+              "default": "false",
+              "description": "Draws the submenu in a disabled state.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the submenu in an active (selected) state.",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -12732,7 +12894,52 @@
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "getRootNav",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "| (HTMLElement & {\n        triggerSubMenuAction?: 'hover' | 'click';\n        subMenuOpenDelay?: number;\n        subMenuCloseDelay?: number;\n        expandIcon?: unknown;\n      })\n    | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getSubmenuKey",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getTriggerAction",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getOpenDelay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getCloseDelay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isPopupMode",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hasCustomPopupContent",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "syncNestedState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleHeaderClick",
               "privacy": "private",
               "parameters": [
                 {
@@ -12745,7 +12952,7 @@
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "handleHeaderKeyDown",
               "privacy": "private",
               "parameters": [
                 {
@@ -12755,17 +12962,100 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOut",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "parameters": [
+                {
+                  "name": "source",
+                  "default": "'api'",
+                  "type": {
+                    "text": "'api' | 'nav' | 'user'"
+                  }
+                }
+              ],
+              "description": "Shows the submenu."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "parameters": [
+                {
+                  "name": "source",
+                  "default": "'api'",
+                  "type": {
+                    "text": "'api' | 'nav' | 'user'"
+                  }
+                }
+              ],
+              "description": "Hides the submenu."
             }
           ],
           "events": [
             {
-              "type": {
-                "text": "{ item: SlNavItem }"
-              },
-              "description": "Emitted when a nav item is selected.",
-              "name": "sl-nav-select",
-              "reactName": "onSlNavSelect",
-              "eventName": "SlNavSelectEvent"
+              "description": "Emitted when the submenu opens.",
+              "name": "sl-show",
+              "reactName": "onSlShow",
+              "eventName": "SlShowEvent"
+            },
+            {
+              "description": "Emitted after the submenu opens and all animations are complete.",
+              "name": "sl-after-show",
+              "reactName": "onSlAfterShow",
+              "eventName": "SlAfterShowEvent"
+            },
+            {
+              "description": "Emitted when the submenu closes.",
+              "name": "sl-hide",
+              "reactName": "onSlHide",
+              "eventName": "SlHideEvent"
+            },
+            {
+              "description": "Emitted after the submenu closes and all animations are complete.",
+              "name": "sl-after-hide",
+              "reactName": "onSlAfterHide",
+              "eventName": "SlAfterHideEvent"
             }
           ],
           "attributes": [
@@ -12775,7 +13065,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A stable key used by `sl-nav` to track selection.",
+              "description": "A stable key used by `sl-nav` to track open state.",
               "fieldName": "key"
             },
             {
@@ -12788,74 +13078,67 @@
               "fieldName": "itemKey"
             },
             {
-              "name": "danger",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Matches Antd's `danger` item flag.",
-              "fieldName": "danger"
-            },
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Tooltip text, primarily used when the menu is collapsed.",
-              "fieldName": "title"
-            },
-            {
-              "name": "disabled",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the nav item in a disabled state.",
-              "fieldName": "disabled"
+              "description": "Indicates whether or not the submenu is open.",
+              "fieldName": "open"
             },
             {
-              "name": "active",
+              "name": "nested",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the nav item in an active (selected) state.",
-              "fieldName": "active"
+              "description": "Indicates if this submenu is nested within another submenu.",
+              "fieldName": "nested"
             },
             {
-              "name": "href",
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
-              "fieldName": "href"
+              "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
+              "fieldName": "title"
             },
             {
-              "name": "target",
+              "name": "theme",
               "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top'"
+                "text": "'light' | 'dark'"
               },
-              "description": "The target attribute for the anchor tag.",
-              "fieldName": "target"
+              "default": "'light'",
+              "description": "Matches Antd's `theme` field.",
+              "fieldName": "theme"
             },
             {
-              "name": "download",
+              "name": "popup-class-name",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The download attribute for the anchor tag.",
-              "fieldName": "download"
+              "default": "''",
+              "description": "Matches Antd's `popupClassName` field.",
+              "fieldName": "popupClassName"
             },
             {
-              "name": "rel",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'noreferrer noopener'",
-              "description": "The rel attribute for the anchor tag.",
-              "fieldName": "rel"
+              "default": "false",
+              "description": "Draws the submenu in a disabled state.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the submenu in an active (selected) state.",
+              "fieldName": "active"
             },
             {
               "name": "mode",
@@ -12880,14 +13163,28 @@
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Nav items are the individual links or buttons within a navigation menu.",
-          "tagNameWithoutPrefix": "nav-item",
-          "tagName": "sl-nav-item",
+          "summary": "Nav submenus are used to group related nav items in a hierarchical structure.",
+          "tagNameWithoutPrefix": "nav-submenu",
+          "tagName": "sl-nav-submenu",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Nav items are the individual links or buttons within a navigation menu.\n * @documentation https://shoelace.style/components/nav-item\n * @status experimental\n * @since 2.16\n *\n * @slot - The nav item's label.\n * @slot prefix - Used to prepend an icon or similar element to the nav item.\n * @slot suffix - Used to append an icon or similar element to the nav item.\n *\n * @event {{ item: SlNavItem }} sl-nav-select - Emitted when a nav item is selected.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The prefix container.\n * @csspart label - The nav item label.\n * @csspart suffix - The suffix container.\n */",
-          "documentation": "https://shoelace.style/components/nav-item",
+          "jsDoc": "/**\n * @summary Nav submenus are used to group related nav items in a hierarchical structure.\n * @documentation https://shoelace.style/components/nav-submenu\n * @status experimental\n * @since 2.16\n *\n * @dependency sl-icon\n * @dependency sl-popup\n *\n * @slot - The nav items within the submenu.\n * @slot title - The nav submenu's title.\n * @slot prefix - Used to prepend an icon or similar element to the nav submenu.\n * @slot suffix - Used to append an icon or similar element to the nav submenu.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.\n *\n * @event sl-show - Emitted when the submenu opens.\n * @event sl-after-show - Emitted after the submenu opens and all animations are complete.\n * @event sl-hide - Emitted when the submenu closes.\n * @event sl-after-hide - Emitted after the submenu closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps the title, prefix, suffix and expand/collapse icon.\n * @csspart prefix - The prefix container.\n * @csspart label - The nav submenu label.\n * @csspart suffix - The suffix container.\n * @csspart expand-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The nav submenu content.\n * @csspart popup - The popup that wraps the content in horizontal mode.\n *\n * @animation nav-submenu.show - The animation to use when showing the submenu.\n * @animation nav-submenu.hide - The animation to use when hiding the submenu.\n */",
+          "documentation": "https://shoelace.style/components/nav-submenu",
           "status": "experimental",
-          "since": "2.16"
+          "since": "2.16",
+          "dependencies": [
+            "sl-icon",
+            "sl-popup"
+          ],
+          "animations": [
+            {
+              "name": "nav-submenu.show",
+              "description": "The animation to use when showing the submenu."
+            },
+            {
+              "name": "nav-submenu.hide",
+              "description": "The animation to use when hiding the submenu."
+            }
+          ]
         }
       ],
       "exports": [
@@ -12895,90 +13192,53 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlNavItem",
-            "module": "components/nav-item/nav-item.js"
+            "name": "SlNavSubmenu",
+            "module": "components/nav-submenu/nav-submenu.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/nav-submenu/nav-submenu.js",
+      "path": "components/nav-item/nav-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlNavSubmenu",
+          "name": "SlNavItem",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
-            {
-              "description": "The header that wraps the title, prefix, suffix and expand/collapse icon.",
-              "name": "header"
-            },
             {
               "description": "The prefix container.",
               "name": "prefix"
             },
             {
-              "description": "The nav submenu label.",
+              "description": "The nav item label.",
               "name": "label"
             },
             {
               "description": "The suffix container.",
               "name": "suffix"
-            },
-            {
-              "description": "The container that wraps the expand/collapse icons.",
-              "name": "expand-icon"
-            },
-            {
-              "description": "The nav submenu content.",
-              "name": "content"
-            },
-            {
-              "description": "The popup that wraps the content in horizontal mode.",
-              "name": "popup"
             }
           ],
           "slots": [
             {
-              "description": "The nav items within the submenu.",
+              "description": "The nav item's label.",
               "name": ""
             },
             {
-              "description": "The nav submenu's title.",
-              "name": "title"
-            },
-            {
-              "description": "Used to prepend an icon or similar element to the nav submenu.",
+              "description": "Used to prepend an icon or similar element to the nav item.",
               "name": "prefix"
             },
             {
-              "description": "Used to append an icon or similar element to the nav submenu.",
+              "description": "Used to append an icon or similar element to the nav item.",
               "name": "suffix"
-            },
-            {
-              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`.",
-              "name": "expand-icon"
-            },
-            {
-              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.",
-              "name": "collapse-icon"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon, 'sl-popup': SlPopup }"
-            },
             {
               "kind": "field",
               "name": "hasSlotController",
@@ -12986,59 +13246,6 @@
               "readonly": true,
               "default": "new HasSlotController(this, 'prefix', 'suffix')"
             },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "hideTimeout",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "openChangeSource",
-              "type": {
-                "text": "'api' | 'nav' | 'user'"
-              },
-              "privacy": "private",
-              "default": "'api'"
-            },
-            {
-              "kind": "field",
-              "name": "showTimeout",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "header",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "body",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SlPopup"
-              }
-            },
             {
               "kind": "field",
               "name": "key",
@@ -13046,7 +13253,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A stable key used by `sl-nav` to track open state.",
+              "description": "A stable key used by `sl-nav` to track selection.",
               "attribute": "key"
             },
             {
@@ -13061,110 +13268,108 @@
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "unknown | undefined"
               },
-              "default": "false",
-              "description": "Indicates whether or not the submenu is open.",
-              "attribute": "open",
-              "reflects": true
+              "description": "Alternate label content when using Antd-style `items` configuration."
             },
             {
               "kind": "field",
-              "name": "nested",
+              "name": "icon",
               "type": {
-                "text": "boolean"
+                "text": "unknown | undefined"
               },
-              "default": "false",
-              "description": "Indicates if this submenu is nested within another submenu.",
-              "attribute": "nested",
-              "reflects": true
+              "description": "Alternate icon content when using Antd-style `items` configuration."
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "extra",
               "type": {
-                "text": "string"
+                "text": "unknown | undefined"
               },
-              "default": "''",
-              "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
-              "attribute": "title"
+              "description": "Extra content shown at the end of the item."
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "danger",
               "type": {
-                "text": "unknown | undefined"
+                "text": "boolean"
               },
-              "description": "Matches Antd's `label` field."
+              "default": "false",
+              "description": "Matches Antd's `danger` item flag.",
+              "attribute": "danger",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "title",
               "type": {
-                "text": "unknown | undefined"
+                "text": "string"
               },
-              "description": "Matches Antd's `icon` field."
+              "default": "''",
+              "description": "Tooltip text, primarily used when the menu is collapsed.",
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "theme",
+              "name": "disabled",
               "type": {
-                "text": "'light' | 'dark'"
+                "text": "boolean"
               },
-              "default": "'light'",
-              "description": "Matches Antd's `theme` field.",
-              "attribute": "theme",
+              "default": "false",
+              "description": "Draws the nav item in a disabled state.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "popupClassName",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Matches Antd's `popupClassName` field.",
-              "attribute": "popup-class-name"
+              "default": "false",
+              "description": "Draws the nav item in an active (selected) state.",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "popupOffset",
+              "name": "href",
               "type": {
-                "text": "[number, number] | undefined"
+                "text": "string"
               },
-              "description": "Matches Antd's `popupOffset` field."
+              "default": "''",
+              "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "onTitleClick",
+              "name": "target",
               "type": {
-                "text": "(info: { key: string; domEvent: MouseEvent | KeyboardEvent }) => void | undefined"
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
               },
-              "description": "Matches Antd's `onTitleClick` callback."
+              "description": "The target attribute for the anchor tag.",
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "download",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Draws the submenu in a disabled state.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The download attribute for the anchor tag.",
+              "attribute": "download"
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "rel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws the submenu in an active (selected) state.",
-              "attribute": "active",
-              "reflects": true
+              "default": "'noreferrer noopener'",
+              "description": "The rel attribute for the anchor tag.",
+              "attribute": "rel"
             },
             {
               "kind": "field",
@@ -13190,52 +13395,7 @@
             },
             {
               "kind": "method",
-              "name": "getRootNav",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "| (HTMLElement & {\n        triggerSubMenuAction?: 'hover' | 'click';\n        subMenuOpenDelay?: number;\n        subMenuCloseDelay?: number;\n        expandIcon?: unknown;\n      })\n    | undefined"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getSubmenuKey",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getTriggerAction",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getOpenDelay",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getCloseDelay",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "isPopupMode",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hasCustomPopupContent",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "syncNestedState",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleHeaderClick",
+              "name": "handleClick",
               "privacy": "private",
               "parameters": [
                 {
@@ -13248,7 +13408,7 @@
             },
             {
               "kind": "method",
-              "name": "handleHeaderKeyDown",
+              "name": "handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
@@ -13258,100 +13418,17 @@
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOver",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseOut",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "FocusEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleOpenChange"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "parameters": [
-                {
-                  "name": "source",
-                  "default": "'api'",
-                  "type": {
-                    "text": "'api' | 'nav' | 'user'"
-                  }
-                }
-              ],
-              "description": "Shows the submenu."
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "parameters": [
-                {
-                  "name": "source",
-                  "default": "'api'",
-                  "type": {
-                    "text": "'api' | 'nav' | 'user'"
-                  }
-                }
-              ],
-              "description": "Hides the submenu."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the submenu opens.",
-              "name": "sl-show",
-              "reactName": "onSlShow",
-              "eventName": "SlShowEvent"
-            },
-            {
-              "description": "Emitted after the submenu opens and all animations are complete.",
-              "name": "sl-after-show",
-              "reactName": "onSlAfterShow",
-              "eventName": "SlAfterShowEvent"
-            },
-            {
-              "description": "Emitted when the submenu closes.",
-              "name": "sl-hide",
-              "reactName": "onSlHide",
-              "eventName": "SlHideEvent"
-            },
-            {
-              "description": "Emitted after the submenu closes and all animations are complete.",
-              "name": "sl-after-hide",
-              "reactName": "onSlAfterHide",
-              "eventName": "SlAfterHideEvent"
+              "type": {
+                "text": "{ item: SlNavItem }"
+              },
+              "description": "Emitted when a nav item is selected.",
+              "name": "sl-nav-select",
+              "reactName": "onSlNavSelect",
+              "eventName": "SlNavSelectEvent"
             }
           ],
           "attributes": [
@@ -13361,7 +13438,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "A stable key used by `sl-nav` to track open state.",
+              "description": "A stable key used by `sl-nav` to track selection.",
               "fieldName": "key"
             },
             {
@@ -13374,22 +13451,13 @@
               "fieldName": "itemKey"
             },
             {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the submenu is open.",
-              "fieldName": "open"
-            },
-            {
-              "name": "nested",
+              "name": "danger",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates if this submenu is nested within another submenu.",
-              "fieldName": "nested"
+              "description": "Matches Antd's `danger` item flag.",
+              "fieldName": "danger"
             },
             {
               "name": "title",
@@ -13397,44 +13465,60 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The summary to show in the header. If you need to display HTML, use the `title` slot instead.",
+              "description": "Tooltip text, primarily used when the menu is collapsed.",
               "fieldName": "title"
             },
             {
-              "name": "theme",
+              "name": "disabled",
               "type": {
-                "text": "'light' | 'dark'"
+                "text": "boolean"
               },
-              "default": "'light'",
-              "description": "Matches Antd's `theme` field.",
-              "fieldName": "theme"
+              "default": "false",
+              "description": "Draws the nav item in a disabled state.",
+              "fieldName": "disabled"
             },
             {
-              "name": "popup-class-name",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws the nav item in an active (selected) state.",
+              "fieldName": "active"
+            },
+            {
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Matches Antd's `popupClassName` field.",
-              "fieldName": "popupClassName"
+              "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
+              "fieldName": "href"
             },
             {
-              "name": "disabled",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
               },
-              "default": "false",
-              "description": "Draws the submenu in a disabled state.",
-              "fieldName": "disabled"
+              "description": "The target attribute for the anchor tag.",
+              "fieldName": "target"
             },
             {
-              "name": "active",
+              "name": "download",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Draws the submenu in an active (selected) state.",
-              "fieldName": "active"
+              "description": "The download attribute for the anchor tag.",
+              "fieldName": "download"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The rel attribute for the anchor tag.",
+              "fieldName": "rel"
             },
             {
               "name": "mode",
@@ -13459,28 +13543,14 @@
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Nav submenus are used to group related nav items in a hierarchical structure.",
-          "tagNameWithoutPrefix": "nav-submenu",
-          "tagName": "sl-nav-submenu",
+          "summary": "Nav items are the individual links or buttons within a navigation menu.",
+          "tagNameWithoutPrefix": "nav-item",
+          "tagName": "sl-nav-item",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Nav submenus are used to group related nav items in a hierarchical structure.\n * @documentation https://shoelace.style/components/nav-submenu\n * @status experimental\n * @since 2.16\n *\n * @dependency sl-icon\n * @dependency sl-popup\n *\n * @slot - The nav items within the submenu.\n * @slot title - The nav submenu's title.\n * @slot prefix - Used to prepend an icon or similar element to the nav submenu.\n * @slot suffix - Used to append an icon or similar element to the nav submenu.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.\n *\n * @event sl-show - Emitted when the submenu opens.\n * @event sl-after-show - Emitted after the submenu opens and all animations are complete.\n * @event sl-hide - Emitted when the submenu closes.\n * @event sl-after-hide - Emitted after the submenu closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps the title, prefix, suffix and expand/collapse icon.\n * @csspart prefix - The prefix container.\n * @csspart label - The nav submenu label.\n * @csspart suffix - The suffix container.\n * @csspart expand-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The nav submenu content.\n * @csspart popup - The popup that wraps the content in horizontal mode.\n *\n * @animation nav-submenu.show - The animation to use when showing the submenu.\n * @animation nav-submenu.hide - The animation to use when hiding the submenu.\n */",
-          "documentation": "https://shoelace.style/components/nav-submenu",
+          "jsDoc": "/**\n * @summary Nav items are the individual links or buttons within a navigation menu.\n * @documentation https://shoelace.style/components/nav-item\n * @status experimental\n * @since 2.16\n *\n * @slot - The nav item's label.\n * @slot prefix - Used to prepend an icon or similar element to the nav item.\n * @slot suffix - Used to append an icon or similar element to the nav item.\n *\n * @event {{ item: SlNavItem }} sl-nav-select - Emitted when a nav item is selected.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The prefix container.\n * @csspart label - The nav item label.\n * @csspart suffix - The suffix container.\n */",
+          "documentation": "https://shoelace.style/components/nav-item",
           "status": "experimental",
-          "since": "2.16",
-          "dependencies": [
-            "sl-icon",
-            "sl-popup"
-          ],
-          "animations": [
-            {
-              "name": "nav-submenu.show",
-              "description": "The animation to use when showing the submenu."
-            },
-            {
-              "name": "nav-submenu.hide",
-              "description": "The animation to use when hiding the submenu."
-            }
-          ]
+          "since": "2.16"
         }
       ],
       "exports": [
@@ -13488,8 +13558,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlNavSubmenu",
-            "module": "components/nav-submenu/nav-submenu.js"
+            "name": "SlNavItem",
+            "module": "components/nav-item/nav-item.js"
           }
         }
       ]
@@ -20556,7 +20626,7 @@
               "kind": "field",
               "name": "expandedMap",
               "type": {
-                "text": "Record<string, boolean>"
+                "text": "ExpandedState"
               },
               "default": "{}"
             },
@@ -23401,6 +23471,12 @@
               "name": "sl-clear",
               "reactName": "onSlClear",
               "eventName": "SlClearEvent"
+            },
+            {
+              "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": [
@@ -23428,7 +23504,7 @@
           "customElement": true,
           "summary": "A time picker component that provides a time selection interface.",
           "tagNameWithoutPrefix": "timepicker",
-          "jsDoc": "/**\n * @summary A time picker component that provides a time selection interface.\n * @documentation https://shoelace.style/components/timepicker\n * @tag sl-timepicker\n * @since 2.0\n *\n * @dependency sl-input\n * @dependency sl-popup\n * @dependency sl-time-panel\n * @dependency sl-date-panel\n * @dependency sl-drawer\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - The input's prefix, to prepend to the input.\n * @slot suffix - The input's suffix, to append to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot help-text - Help text that describes the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-change - Emitted when the control's value changes.\n * @event sl-input - Emitted when the control's value changes.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-clear - Emitted when the clear button is activated.\n */",
+          "jsDoc": "/**\n * @summary A time picker component that provides a time selection interface.\n * @documentation https://shoelace.style/components/timepicker\n * @tag sl-timepicker\n * @since 2.0\n *\n * @dependency sl-input\n * @dependency sl-popup\n * @dependency sl-time-panel\n * @dependency sl-date-panel\n * @dependency sl-drawer\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - The input's prefix, to prepend to the input.\n * @slot suffix - The input's suffix, to append to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot help-text - Help text that describes the input. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-change - Emitted when the control's value changes.\n * @event sl-input - Emitted when the control's value changes.\n * @event sl-focus - Emitted when the control gains focus.\n * @event sl-blur - Emitted when the control loses focus.\n * @event sl-clear - Emitted when the clear button is activated.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n */",
           "documentation": "https://shoelace.style/components/timepicker",
           "since": "2.0",
           "dependencies": [
@@ -24579,12 +24655,335 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/x-markdown/x-markdown.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlXMarkdown",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The markdown body container.",
+              "name": "body"
+            },
+            {
+              "description": "Paragraph content.",
+              "name": "paragraph"
+            },
+            {
+              "description": "Heading elements.",
+              "name": "heading"
+            },
+            {
+              "description": "Link elements.",
+              "name": "link"
+            },
+            {
+              "description": "Blockquotes and chat enhanced containers.",
+              "name": "blockquote"
+            },
+            {
+              "description": "List containers.",
+              "name": "list"
+            },
+            {
+              "description": "List items.",
+              "name": "list-item"
+            },
+            {
+              "description": "Table elements.",
+              "name": "table"
+            },
+            {
+              "description": "Table header section.",
+              "name": "table-head"
+            },
+            {
+              "description": "Table body section.",
+              "name": "table-body"
+            },
+            {
+              "description": "Table rows.",
+              "name": "table-row"
+            },
+            {
+              "description": "Table header/data cells.",
+              "name": "table-cell"
+            },
+            {
+              "description": "Inline code nodes.",
+              "name": "code-inline"
+            },
+            {
+              "description": "Code block wrapper.",
+              "name": "code-block"
+            },
+            {
+              "description": "Code block language header.",
+              "name": "code-block-header"
+            },
+            {
+              "description": "Code block body.",
+              "name": "code-block-body"
+            },
+            {
+              "description": "Streaming tail indicator.",
+              "name": "tail"
+            },
+            {
+              "description": "Incomplete markdown placeholder nodes.",
+              "name": "incomplete"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Not used. Content is rendered from the `content` property only.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "parsedTokens",
+              "type": {
+                "text": "Tokens.Generic[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "processedContent",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "streamingState",
+              "type": {
+                "text": "SlXMarkdownStreamingState"
+              },
+              "privacy": "private",
+              "default": "{ streamStatus: 'done', incompleteKinds: [] }"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Markdown content to render.",
+              "attribute": "content"
+            },
+            {
+              "kind": "field",
+              "name": "components",
+              "type": {
+                "text": "Record<string, string>"
+              },
+              "default": "{}",
+              "description": "Map markdown node types to custom element tag names."
+            },
+            {
+              "kind": "field",
+              "name": "plugins",
+              "type": {
+                "text": "SlXMarkdownPlugin[]"
+              },
+              "default": "[]",
+              "description": "Markdown pipeline plugins."
+            },
+            {
+              "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | string"
+              },
+              "default": "'light'",
+              "description": "Theme name for styling (`light`, `dark`, or custom class name).",
+              "attribute": "theme"
+            },
+            {
+              "kind": "field",
+              "name": "openLinksInNewTab",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Open links with `target=\\\"_blank\\\"` and `rel=\\\"noopener noreferrer\\\"`.",
+              "attribute": "open-links-in-new-tab"
+            },
+            {
+              "kind": "field",
+              "name": "escapeRawHtml",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Escapes raw HTML tokens when enabled.",
+              "attribute": "escape-raw-html"
+            },
+            {
+              "kind": "field",
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables debug output in development environments.",
+              "attribute": "debug"
+            },
+            {
+              "kind": "field",
+              "name": "streaming",
+              "type": {
+                "text": "SlXMarkdownStreamingConfig | false | undefined"
+              },
+              "default": "false",
+              "description": "Streaming configuration. Set `false` to disable streaming mode."
+            },
+            {
+              "kind": "method",
+              "name": "getPluginContext",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "SlXMarkdownPluginContext"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "computeRenderState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getThemeClassName",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isDevEnvironment",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderIncompleteNode",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "kind",
+                  "type": {
+                    "text": "SlXMarkdownIncompleteKind"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderTail",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDebug",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getStreamingStyle",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Markdown content to render.",
+              "fieldName": "content"
+            },
+            {
+              "name": "theme",
+              "type": {
+                "text": "'light' | 'dark' | string"
+              },
+              "default": "'light'",
+              "description": "Theme name for styling (`light`, `dark`, or custom class name).",
+              "fieldName": "theme"
+            },
+            {
+              "name": "open-links-in-new-tab",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Open links with `target=\\\"_blank\\\"` and `rel=\\\"noopener noreferrer\\\"`.",
+              "fieldName": "openLinksInNewTab"
+            },
+            {
+              "name": "escape-raw-html",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Escapes raw HTML tokens when enabled.",
+              "fieldName": "escapeRawHtml"
+            },
+            {
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables debug output in development environments.",
+              "fieldName": "debug"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Render markdown content with streaming support and custom node mapping.",
+          "tagNameWithoutPrefix": "x-markdown",
+          "tagName": "sl-x-markdown",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Render markdown content with streaming support and custom node mapping.\n * @documentation https://shoelace.style/components/x-markdown\n * @status experimental\n * @since 0.0\n *\n * @slot - Not used. Content is rendered from the `content` property only.\n *\n * @csspart base - The component's base wrapper.\n * @csspart body - The markdown body container.\n * @csspart paragraph - Paragraph content.\n * @csspart heading - Heading elements.\n * @csspart link - Link elements.\n * @csspart blockquote - Blockquotes and chat enhanced containers.\n * @csspart list - List containers.\n * @csspart list-item - List items.\n * @csspart table - Table elements.\n * @csspart table-head - Table header section.\n * @csspart table-body - Table body section.\n * @csspart table-row - Table rows.\n * @csspart table-cell - Table header/data cells.\n * @csspart code-inline - Inline code nodes.\n * @csspart code-block - Code block wrapper.\n * @csspart code-block-header - Code block language header.\n * @csspart code-block-body - Code block body.\n * @csspart tail - Streaming tail indicator.\n * @csspart incomplete - Incomplete markdown placeholder nodes.\n */",
+          "documentation": "https://shoelace.style/components/x-markdown",
+          "status": "experimental",
+          "since": "0.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlXMarkdown",
+            "module": "components/x-markdown/x-markdown.js"
+          }
+        }
+      ]
     }
   ],
   "package": {
     "name": "@kdcloudjs/shoelace",
     "description": "A forward-thinking library of web components.",
-    "version": "1.0.27",
+    "version": "0.0.1",
     "license": "MIT"
   }
 }