@kdcloudjs/shoelace 1.0.26 → 1.0.27

package/dist/custom-elements.json

@@ -331,6 +331,192 @@
         }
       ]
     },
+    {
+      "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/animation/animation.js",
@@ -687,177 +873,100 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/animated-image/animated-image.js",
+      "path": "components/badge/badge.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"
-            }
-          ],
+          "name": "SlBadge",
           "cssParts": [
             {
-              "description": "The container that surrounds the pause/play icons and provides their background.",
-              "name": "control-box"
+              "description": "The component's base wrapper.",
+              "name": "base"
             }
           ],
           "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 badge's content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dependencies",
+              "name": "variant",
               "type": {
-                "text": "object"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "static": true,
-              "default": "{ 'sl-icon': SlIcon }"
-            },
-            {
-              "kind": "field",
-              "name": "animatedImage",
-              "type": {
-                "text": "HTMLImageElement"
-              }
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "frozenFrame",
+              "name": "pill",
               "type": {
-                "text": "string"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isLoaded",
+              "name": "pulse",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
-            },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "src",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "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"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "play",
+              "name": "pill",
               "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"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "name": "play",
+              "name": "pulse",
               "type": {
                 "text": "boolean"
               },
-              "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-              "fieldName": "play"
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
             }
           ],
           "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",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "sl-badge",
           "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",
+          "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",
-          "dependencies": [
-            "sl-icon"
-          ]
+          "since": "2.0"
         }
       ],
       "exports": [
@@ -865,8 +974,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlAnimatedImage",
-            "module": "components/animated-image/animated-image.js"
+            "name": "SlBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
@@ -1072,115 +1181,6 @@
         }
       ]
     },
-    {
-      "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,234 +1303,68 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb-item/breadcrumb-item.js",
+      "path": "components/button/button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlBreadcrumbItem",
+          "name": "SlButton",
           "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 button's label.",
+              "name": "label"
+            },
             {
               "description": "The container that wraps the suffix.",
               "name": "suffix"
             },
             {
-              "description": "The container that wraps the separator.",
-              "name": "separator"
+              "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 breadcrumb item's label.",
+              "description": "The button's label.",
               "name": ""
             },
             {
-              "description": "An optional prefix, usually an icon or icon button.",
+              "description": "A presentational prefix icon or similar element.",
               "name": "prefix"
             },
             {
-              "description": "An optional suffix, usually an icon or icon button.",
+              "description": "A presentational suffix icon or similar element.",
               "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",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "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'] })"
+              "default": "new FormControlController(this, { assumeInteractionOn: ['click'] })"
             },
             {
               "kind": "field",
@@ -2143,25 +1977,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/breadcrumb-item/breadcrumb-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlButtonGroup",
+          "name": "SlBreadcrumbItem",
           "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": "One or more `<sl-button>` elements to display in the button group.",
+              "description": "The breadcrumb item's label.",
               "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",
@@ -2171,43 +2040,174 @@
             },
             {
               "kind": "field",
-              "name": "disableRole",
+              "name": "renderType",
               "type": {
-                "text": "boolean"
+                "text": "'button' | 'link' | 'dropdown'"
               },
-              "default": "false"
+              "privacy": "private",
+              "default": "'button'"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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"
+              "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": "method",
-              "name": "handleFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "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": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
+              "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-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"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
                     "text": "Event"
                   }
                 }
@@ -9312,22 +9312,62 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/icon-button/icon-button.js",
+      "path": "components/image-comparer/image-comparer.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlIconButton",
+          "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": "dependencies",
+              "name": "scopedElement",
               "type": {
                 "text": "object"
               },
@@ -9336,235 +9376,96 @@
             },
             {
               "kind": "field",
-              "name": "button",
-              "type": {
-                "text": "HTMLButtonElement | HTMLLinkElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
+              "name": "localize",
               "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "attribute": "name"
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "library",
+              "name": "base",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of a registered custom icon library.",
-              "attribute": "library"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "handle",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "attribute": "src"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "position",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "attribute": "href"
+              "default": "50",
+              "description": "The position of the divider as a percentage.",
+              "attribute": "position",
+              "reflects": true
             },
             {
-              "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": "download",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "attribute": "download"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the button.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the icon button."
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the icon button."
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the icon button."
+              "name": "handlePositionChange"
             }
           ],
           "events": [
             {
-              "description": "Emitted when the icon button loses focus.",
-              "name": "sl-blur",
-              "reactName": "onSlBlur",
-              "eventName": "SlBlurEvent"
-            },
-            {
-              "description": "Emitted when the icon button gains focus.",
-              "name": "sl-focus",
-              "reactName": "onSlFocus",
-              "eventName": "SlFocusEvent"
+              "description": "Emitted when the position changes.",
+              "name": "sl-change",
+              "reactName": "onSlChange",
+              "eventName": "SlChangeEvent"
             }
           ],
           "attributes": [
             {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "fieldName": "name"
-            },
-            {
-              "name": "library",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of a registered custom icon library.",
-              "fieldName": "library"
-            },
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "fieldName": "src"
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "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": "download",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "fieldName": "download"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
-              "fieldName": "label"
-            },
-            {
-              "name": "disabled",
+              "name": "position",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Disables the button.",
-              "fieldName": "disabled"
+              "default": "50",
+              "description": "The position of the divider as a percentage.",
+              "fieldName": "position"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
-          "tagNameWithoutPrefix": "icon-button",
-          "tagName": "sl-icon-button",
+          "summary": "Compare visual differences between similar photos with a sliding panel.",
+          "tagNameWithoutPrefix": "image-comparer",
+          "tagName": "sl-image-comparer",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://shoelace.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-blur - Emitted when the icon button loses focus.\n * @event sl-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://shoelace.style/components/icon-button",
+          "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": [
@@ -9577,173 +9478,125 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlIconButton",
-            "module": "components/icon-button/icon-button.js"
+            "name": "SlImageComparer",
+            "module": "components/image-comparer/image-comparer.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/image-comparer/image-comparer.js",
+      "path": "components/include/include.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlImageComparer",
-          "cssProperties": [
-            {
-              "description": "The width of the dividing line.",
-              "name": "--divider-width"
-            },
-            {
-              "description": "The size of the compare handle.",
-              "name": "--handle-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The 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"
-            }
-          ],
+          "name": "SlInclude",
           "members": [
             {
               "kind": "field",
-              "name": "scopedElement",
+              "name": "src",
               "type": {
-                "text": "object"
+                "text": "string"
               },
-              "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"
-              }
+              "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": "handle",
+              "name": "mode",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "'cors' | 'no-cors' | 'same-origin'"
+              },
+              "default": "'cors'",
+              "description": "The fetch mode to use.",
+              "attribute": "mode"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "allowScripts",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "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"
-                  }
-                }
-              ]
+              "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": "handleKeyDown",
+              "name": "executeScript",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "script",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLScriptElement"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handlePositionChange"
+              "name": "handleSrcChange"
             }
           ],
           "events": [
             {
-              "description": "Emitted when the position changes.",
-              "name": "sl-change",
-              "reactName": "onSlChange",
-              "eventName": "SlChangeEvent"
+              "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": "position",
+              "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": "number"
+                "text": "boolean"
               },
-              "default": "50",
-              "description": "The position of the divider as a percentage.",
-              "fieldName": "position"
+              "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": "Compare visual differences between similar photos with a sliding panel.",
-          "tagNameWithoutPrefix": "image-comparer",
-          "tagName": "sl-image-comparer",
+          "summary": "Includes give you the power to embed external HTML files into the page.",
+          "tagNameWithoutPrefix": "include",
+          "tagName": "sl-include",
           "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",
+          "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",
-          "dependencies": [
-            "sl-icon"
-          ]
+          "since": "2.0"
         }
       ],
       "exports": [
@@ -9751,125 +9604,272 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlImageComparer",
-            "module": "components/image-comparer/image-comparer.js"
+            "name": "SlInclude",
+            "module": "components/include/include.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/include/include.js",
+      "path": "components/icon-button/icon-button.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlInclude",
+          "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",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "library",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of a registered custom icon library.",
+              "attribute": "library"
+            },
             {
               "kind": "field",
               "name": "src",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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.",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
               "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "href",
               "type": {
-                "text": "'cors' | 'no-cors' | 'same-origin'"
+                "text": "string | undefined"
               },
-              "default": "'cors'",
-              "description": "The fetch mode to use.",
-              "attribute": "mode"
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "allowScripts",
+              "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": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "attribute": "download"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "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"
+              "description": "Disables the button.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "executeScript",
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "script",
+                  "name": "event",
                   "type": {
-                    "text": "HTMLScriptElement"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleSrcChange"
+              "name": "click",
+              "description": "Simulates a click on the icon button."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the icon button."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the icon button."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the included file is loaded.",
-              "name": "sl-load",
-              "reactName": "onSlLoad",
-              "eventName": "SlLoadEvent"
+              "description": "Emitted when the icon button loses focus.",
+              "name": "sl-blur",
+              "reactName": "onSlBlur",
+              "eventName": "SlBlurEvent"
             },
             {
-              "type": {
-                "text": "{ status: number }"
-              },
-              "description": "Emitted when the included file fails to load due to an error.",
-              "name": "sl-error",
-              "reactName": "onSlError",
-              "eventName": "SlErrorEvent"
+              "description": "Emitted when the icon button gains focus.",
+              "name": "sl-focus",
+              "reactName": "onSlFocus",
+              "eventName": "SlFocusEvent"
             }
           ],
           "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "fieldName": "name"
+            },
+            {
+              "name": "library",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of a registered custom icon library.",
+              "fieldName": "library"
+            },
             {
               "name": "src",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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.",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
               "fieldName": "src"
             },
             {
-              "name": "mode",
+              "name": "href",
               "type": {
-                "text": "'cors' | 'no-cors' | 'same-origin'"
+                "text": "string | undefined"
               },
-              "default": "'cors'",
-              "description": "The fetch mode to use.",
-              "fieldName": "mode"
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "fieldName": "href"
             },
             {
-              "name": "allow-scripts",
+              "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": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "fieldName": "download"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
               "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"
+              "description": "Disables the button.",
+              "fieldName": "disabled"
             }
           ],
           "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",
+          "summary": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
+          "tagNameWithoutPrefix": "icon-button",
+          "tagName": "sl-icon-button",
           "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",
+          "jsDoc": "/**\n * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n * @documentation https://shoelace.style/components/icon-button\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-blur - Emitted when the icon button loses focus.\n * @event sl-focus - Emitted when the icon button gains focus.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://shoelace.style/components/icon-button",
           "status": "stable",
-          "since": "2.0"
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon"
+          ]
         }
       ],
       "exports": [
@@ -9877,8 +9877,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlInclude",
-            "module": "components/include/include.js"
+            "name": "SlIconButton",
+            "module": "components/icon-button/icon-button.js"
           }
         }
       ]
@@ -11600,6 +11600,122 @@
         }
       ]
     },
+    {
+      "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'"
+              },
+              "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/nav.js",
@@ -12316,210 +12432,94 @@
               "name": "selectable",
               "type": {
                 "text": "boolean"
-              },
-              "default": "true",
-              "description": "Matches Antd's `selectable` API.",
-              "fieldName": "selectable"
-            },
-            {
-              "name": "inline-collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Matches Antd's `inlineCollapsed` API.",
-              "fieldName": "inlineCollapsed"
-            },
-            {
-              "name": "inline-indent",
-              "type": {
-                "text": "number"
-              },
-              "default": "16",
-              "description": "Matches Antd's `inlineIndent` API.",
-              "fieldName": "inlineIndent"
-            },
-            {
-              "name": "sub-menu-open-delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Matches Antd's `subMenuOpenDelay` API, in seconds.",
-              "fieldName": "subMenuOpenDelay"
-            },
-            {
-              "name": "sub-menu-close-delay",
-              "type": {
-                "text": "number"
-              },
-              "default": "0.1",
-              "description": "Matches Antd's `subMenuCloseDelay` API, in seconds.",
-              "fieldName": "subMenuCloseDelay"
-            },
-            {
-              "name": "trigger-sub-menu-action",
-              "type": {
-                "text": "SlNavTriggerSubMenuAction"
-              },
-              "default": "'hover'",
-              "description": "Matches Antd's `triggerSubMenuAction` API.",
-              "fieldName": "triggerSubMenuAction"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "SlNavTheme"
-              },
-              "default": "'light'",
-              "description": "Matches Antd's `theme` API. Present for compatibility and future styling.",
-              "fieldName": "theme"
-            },
-            {
-              "name": "force-sub-menu-render",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Matches Antd's `forceSubMenuRender` API.",
-              "fieldName": "forceSubMenuRender"
-            },
-            {
-              "name": "disabled-overflow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Matches Antd's `disabledOverflow` API. Present for compatibility.",
-              "fieldName": "disabledOverflow"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Navs are used to create navigation menus, including top bars and sidebars.",
-          "tagNameWithoutPrefix": "nav",
-          "tagName": "sl-nav",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Navs are used to create navigation menus, including top bars and sidebars.\n * @documentation https://shoelace.style/components/nav\n * @status experimental\n * @since 2.16\n *\n * @slot - The nav items.\n *\n * @event {{ item: SlNavItem | undefined, selectedKeys: string[] }} sl-change - Emitted when the selected nav item changes.\n * @event {{ openKeys: string[] }} sl-nav-open-change - Emitted when the open submenu keys change.\n * @event {{ item: SlNavItem, domEvent: MouseEvent | KeyboardEvent }} sl-nav-select - Emitted when a nav item is selected.\n *\n * @csspart base - The component's base wrapper.\n */",
-          "documentation": "https://shoelace.style/components/nav",
-          "status": "experimental",
-          "since": "2.16"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlNav",
-            "module": "components/nav/nav.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": [
+              },
+              "default": "true",
+              "description": "Matches Antd's `selectable` API.",
+              "fieldName": "selectable"
+            },
             {
-              "description": "The nav items within the group.",
-              "name": ""
+              "name": "inline-collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Matches Antd's `inlineCollapsed` API.",
+              "fieldName": "inlineCollapsed"
             },
             {
-              "description": "The nav group's title.",
-              "name": "title"
-            }
-          ],
-          "members": [
+              "name": "inline-indent",
+              "type": {
+                "text": "number"
+              },
+              "default": "16",
+              "description": "Matches Antd's `inlineIndent` API.",
+              "fieldName": "inlineIndent"
+            },
             {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'title')"
+              "name": "sub-menu-open-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Matches Antd's `subMenuOpenDelay` API, in seconds.",
+              "fieldName": "subMenuOpenDelay"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "sub-menu-close-delay",
               "type": {
-                "text": "unknown | undefined"
+                "text": "number"
               },
-              "description": "Matches Antd's item group label."
+              "default": "0.1",
+              "description": "Matches Antd's `subMenuCloseDelay` API, in seconds.",
+              "fieldName": "subMenuCloseDelay"
             },
             {
-              "kind": "field",
-              "name": "active",
+              "name": "trigger-sub-menu-action",
               "type": {
-                "text": "boolean"
+                "text": "SlNavTriggerSubMenuAction"
               },
-              "default": "false",
-              "description": "Draws the nav group in an active (selected) state.",
-              "attribute": "active",
-              "reflects": true
+              "default": "'hover'",
+              "description": "Matches Antd's `triggerSubMenuAction` API.",
+              "fieldName": "triggerSubMenuAction"
             },
             {
-              "kind": "field",
-              "name": "mode",
+              "name": "theme",
               "type": {
-                "text": "'horizontal' | 'inline' | 'vertical'"
+                "text": "SlNavTheme"
               },
-              "default": "'inline'",
-              "description": "The mode of navigation.",
-              "attribute": "mode",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "'light'",
+              "description": "Matches Antd's `theme` API. Present for compatibility and future styling.",
+              "fieldName": "theme"
+            },
             {
-              "name": "active",
+              "name": "force-sub-menu-render",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the nav group in an active (selected) state.",
-              "fieldName": "active"
+              "description": "Matches Antd's `forceSubMenuRender` API.",
+              "fieldName": "forceSubMenuRender"
             },
             {
-              "name": "mode",
+              "name": "disabled-overflow",
               "type": {
-                "text": "'horizontal' | 'inline' | 'vertical'"
+                "text": "boolean"
               },
-              "default": "'inline'",
-              "description": "The mode of navigation.",
-              "fieldName": "mode"
+              "default": "false",
+              "description": "Matches Antd's `disabledOverflow` API. Present for compatibility.",
+              "fieldName": "disabledOverflow"
             }
           ],
           "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": "Navs are used to create navigation menus, including top bars and sidebars.",
+          "tagNameWithoutPrefix": "nav",
+          "tagName": "sl-nav",
           "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",
+          "jsDoc": "/**\n * @summary Navs are used to create navigation menus, including top bars and sidebars.\n * @documentation https://shoelace.style/components/nav\n * @status experimental\n * @since 2.16\n *\n * @slot - The nav items.\n *\n * @event {{ item: SlNavItem | undefined, selectedKeys: string[] }} sl-change - Emitted when the selected nav item changes.\n * @event {{ openKeys: string[] }} sl-nav-open-change - Emitted when the open submenu keys change.\n * @event {{ item: SlNavItem, domEvent: MouseEvent | KeyboardEvent }} sl-nav-select - Emitted when a nav item is selected.\n *\n * @csspart base - The component's base wrapper.\n */",
+          "documentation": "https://shoelace.style/components/nav",
           "status": "experimental",
           "since": "2.16"
         }
@@ -12529,8 +12529,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlNavGroup",
-            "module": "components/nav-group/nav-group.js"
+            "name": "SlNav",
+            "module": "components/nav/nav.js"
           }
         }
       ]
@@ -13223,6 +13223,11 @@
               "name": "isPopupMode",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "hasCustomPopupContent",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "syncNestedState",
@@ -20267,241 +20272,69 @@
             {
               "kind": "field",
               "name": "componentId",
-              "privacy": "private",
-              "readonly": true,
-              "default": "`sl-tab-panel-${this.attrId}`"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "fieldName": "name"
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "fieldName": "active"
-            }
-          ],
-          "superclass": {
-            "name": "ShoelaceElement",
-            "module": "/src/internal/shoelace-element.js"
-          },
-          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
-          "tagNameWithoutPrefix": "tab-panel",
-          "tagName": "sl-tab-panel",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://shoelace.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
-          "documentation": "https://shoelace.style/components/tab-panel",
-          "status": "stable",
-          "since": "2.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SlTabPanel",
-            "module": "components/tab-panel/tab-panel.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/tag/tag.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SlTag",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The tag's content.",
-              "name": "content"
-            },
-            {
-              "description": "The tag's remove button, an `<sl-icon-button>`.",
-              "name": "remove-button"
-            },
-            {
-              "description": "The remove button's exported `base` part.",
-              "name": "remove-button__base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tag's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sl-icon-button': SlIconButton }"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
-              },
-              "default": "'neutral'",
-              "description": "The tag's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The tag's size.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "private",
+              "readonly": true,
+              "default": "`sl-tab-panel-${this.attrId}`"
             },
             {
               "kind": "field",
-              "name": "pill",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "attribute": "pill",
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "removable",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the tag removable and shows a remove button.",
-              "attribute": "removable"
+              "description": "When true, the tab panel will be shown.",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleRemoveClick",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the remove button is activated.",
-              "name": "sl-remove",
-              "reactName": "onSlRemove",
-              "eventName": "SlRemoveEvent"
+              "name": "handleActiveChange"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
-              },
-              "default": "'neutral'",
-              "description": "The tag's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The tag's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "pill",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "fieldName": "pill"
+              "default": "''",
+              "description": "The tab panel's name.",
+              "fieldName": "name"
             },
             {
-              "name": "removable",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the tag removable and shows a remove button.",
-              "fieldName": "removable"
+              "description": "When true, the tab panel will be shown.",
+              "fieldName": "active"
             }
           ],
           "superclass": {
             "name": "ShoelaceElement",
             "module": "/src/internal/shoelace-element.js"
           },
-          "summary": "Tags are used as labels to organize things or to indicate a selection.",
-          "tagNameWithoutPrefix": "tag",
-          "tagName": "sl-tag",
+          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
+          "tagNameWithoutPrefix": "tab-panel",
+          "tagName": "sl-tab-panel",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://shoelace.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The tag's content.\n *\n * @event sl-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<sl-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */",
-          "documentation": "https://shoelace.style/components/tag",
+          "jsDoc": "/**\n * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.\n * @documentation https://shoelace.style/components/tab-panel\n * @status stable\n * @since 2.0\n *\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --padding - The tab panel's padding.\n */",
+          "documentation": "https://shoelace.style/components/tab-panel",
           "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "sl-icon-button"
-          ]
+          "since": "2.0"
         }
       ],
       "exports": [
@@ -20509,8 +20342,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SlTag",
-            "module": "components/tag/tag.js"
+            "name": "SlTabPanel",
+            "module": "components/tab-panel/tab-panel.js"
           }
         }
       ]
@@ -21267,6 +21100,178 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tag/tag.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SlTag",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The tag's content.",
+              "name": "content"
+            },
+            {
+              "description": "The tag's remove button, an `<sl-icon-button>`.",
+              "name": "remove-button"
+            },
+            {
+              "description": "The remove button's exported `base` part.",
+              "name": "remove-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'sl-icon-button': SlIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              "default": "'neutral'",
+              "description": "The tag's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "attribute": "removable"
+            },
+            {
+              "kind": "method",
+              "name": "handleRemoveClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the remove button is activated.",
+              "name": "sl-remove",
+              "reactName": "onSlRemove",
+              "eventName": "SlRemoveEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              "default": "'neutral'",
+              "description": "The tag's theme variant.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The tag's size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "fieldName": "pill"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the tag removable and shows a remove button.",
+              "fieldName": "removable"
+            }
+          ],
+          "superclass": {
+            "name": "ShoelaceElement",
+            "module": "/src/internal/shoelace-element.js"
+          },
+          "summary": "Tags are used as labels to organize things or to indicate a selection.",
+          "tagNameWithoutPrefix": "tag",
+          "tagName": "sl-tag",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Tags are used as labels to organize things or to indicate a selection.\n * @documentation https://shoelace.style/components/tag\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The tag's content.\n *\n * @event sl-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The tag's content.\n * @csspart remove-button - The tag's remove button, an `<sl-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */",
+          "documentation": "https://shoelace.style/components/tag",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "sl-icon-button"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SlTag",
+            "module": "components/tag/tag.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.js",
@@ -24579,7 +24584,7 @@
   "package": {
     "name": "@kdcloudjs/shoelace",
     "description": "A forward-thinking library of web components.",
-    "version": "1.0.26",
+    "version": "1.0.27",
     "license": "MIT"
   }
 }